added zoom in index.html and some increments in main.html

This commit is contained in:
Alocks 2019-12-07 14:36:19 -03:00
parent 75b00fc523
commit 6156cf5914
4 changed files with 32 additions and 12 deletions

View File

@ -32,7 +32,7 @@
<button class="nav-btn hidden">Filters</button> <button class="nav-btn hidden">Filters</button>
<div class="search"> <div class="search">
<input autocomplete="off" type="search" id="tagfilter" name="q" value="" autocapitalize="none" required=""> <input autocomplete="off" type="search" id="tagfilter" name="q" value="" autocapitalize="none" required="">
<svg class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg> <svg class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
<div id="tags"> <div id="tags">
</div> </div>
</nav> </nav>

View File

@ -1,4 +1,4 @@
//------------------------------------navbar script------------------------------------ //------------------------------------navbar script------------------------------------
var menu = document.getElementsByClassName("accordion"); var menu = document.getElementsByClassName("accordion");
for (var i = 0; i < menu.length; i++) { for (var i = 0; i < menu.length; i++) {
menu[i].addEventListener("click", function() { menu[i].addEventListener("click", function() {
@ -62,8 +62,29 @@ input.addEventListener("input", function() {
} }
} }
}); });
input.addEventListener('keypress', function (e) {
enter_search(e, this.value);
});
//----------------------------------------------------------------------------------- //-----------------------------------------------------------------------------------
//------------------------------------Functions-------------------------------------- //------------------------------------Functions--------------------------------------
function enter_search(e, input){
var count = 0;
var key = e.which || e.keyCode;
if (key === 13 && input.length > 0) {
var all_tags = document.getElementById("tags").children;
for(i = 0; i < all_tags.length; i++){
if (!all_tags[i].classList.contains("hidden")){
count++;
var tag_name = all_tags[i].innerText;
var tag_id = all_tags[i].id;
if (count>1){break}
}
}
if (count == 1){
filter_maker(tag_name, tag_id);
}
}
}
function filter_maker(text, class_value){ function filter_maker(text, class_value){
var check = filter_checker(text); var check = filter_checker(text);
var nav_btn = document.getElementsByClassName("nav-btn")[0]; var nav_btn = document.getElementsByClassName("nav-btn")[0];
@ -74,7 +95,7 @@ function filter_maker(text, class_value){
var node = document.createElement("a"); var node = document.createElement("a");
var textnode = document.createTextNode(text); var textnode = document.createTextNode(text);
node.appendChild(textnode); node.appendChild(textnode);
node.classList.add(class_value); node.classList.add(class_value);
nav_btn.appendChild(node); nav_btn.appendChild(node);
filter_searcher(); filter_searcher();
} }
@ -130,8 +151,6 @@ function filter_searcher(){
gallery[i].classList.add("hidden"); gallery[i].classList.add("hidden");
} }
} }
console.log(doujinshi_id)
} }
function filter_checker(text){ function filter_checker(text){

View File

@ -47,6 +47,9 @@ document.onkeypress = event => {
switch (event.key.toLowerCase()) { switch (event.key.toLowerCase()) {
// Previous Image // Previous Image
case 'w': case 'w':
document.getElementById("dest").style.height = "200%";
document.getElementById("list").style.height = "200%";
break;
case 'a': case 'a':
changePage(currentPage - 1); changePage(currentPage - 1);
break; break;
@ -57,6 +60,9 @@ document.onkeypress = event => {
// Next Image // Next Image
case ' ': case ' ':
case 's': case 's':
document.getElementById("dest").style.height = "100%";
document.getElementById("list").style.height = "100%";
break;
case 'd': case 'd':
changePage(currentPage + 1); changePage(currentPage + 1);
break; break;
@ -68,14 +74,8 @@ document.onkeydown = event =>{
case 37: //left case 37: //left
changePage(currentPage - 1); changePage(currentPage - 1);
break; break;
case 38: //up
changePage(currentPage - 1);
break;
case 39: //right case 39: //right
changePage(currentPage + 1); changePage(currentPage + 1);
break; break;
case 40: //down
changePage(currentPage + 1);
break;
} }
}; };

View File

@ -38,7 +38,7 @@ html, body {
#image-container { #image-container {
flex: auto; flex: auto;
height: 100vh; height: 100vh;
background: #222; background: #000;
color: #fff; color: #fff;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -48,6 +48,7 @@ html, body {
} }
#image-container #dest { #image-container #dest {
background: #000;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-size: contain; background-size: contain;