main page filter(2/2)

diff --git a/nhentai/viewer/main.css b/nhentai/viewer/main.css
index 2519d81ca6101046f99e0d1e3a7ef38878e805e2..5e2ca2a78f68e2b4f33ae22f9b0f43ff14a96132 100644 (file)
--- a/nhentai/viewer/main.css
+++ b/nhentai/viewer/main.css
@@ -294,7 +294,7 @@ blockquote {
   font-size: 15px;
 }
 
-.nav-btn.hidden {
+.hidden {
   display:none;
 }
 
@@ -392,23 +392,23 @@ blockquote {
   transition: all 1s linear;
 }
 
-.btn-2.parody{
+.btn-2#parody{
   background-color: red;
 }
 
-.btn-2.character{
+.btn-2#character{
   background-color: blue;
 }
 
-.btn-2.tag{
+.btn-2#tag{
   background-color: green;
 }
 
-.btn-2.artist{
+.btn-2#artist{
   background-color: fuchsia;
 }
 
-.btn-2.group{
+.btn-2#group{
   background-color: teal;
 }
 
@@ -420,10 +420,6 @@ blockquote {
   display: none;
 }
 
-.btn-2.vhidden {
-  opacity: 0;
-}
-
 input,input:focus{
   border:none;
   outline:0;
@@ -459,14 +455,4 @@ html.theme-black code {
     color: #ed2553;
     border: none;
     background-color: #292929
-}
-.btn span.icon {
-    background: url(imgs/icon.png) no-repeat;
-    float: right;
-    width: 10px;
-    height: 40px;
-}
-.cross{
-       float:left
-       height: 5px;
 }
\ No newline at end of file

diff --git a/nhentai/viewer/main.html b/nhentai/viewer/main.html
index 73437a54299b64efb03c131cb08d28a5a7c90e62..c99c696ed85d81be24d71b2f5b82eda73ebc0ee9 100644 (file)
--- a/nhentai/viewer/main.html
+++ b/nhentai/viewer/main.html
@@ -18,7 +18,7 @@
         <nav class="sidenav">
                        <img src="logo.png">
                        <h1>nHentai Viewer</h1>
-            <button class="accordion">Language</button>
+                        <button class="accordion">Language</button>
             <div class="options" id="language">
                     <a>English</a>
                     <a>Japanese</a>
@@ -26,12 +26,12 @@
             </div>
                        <button class="accordion">Category</button>
             <div class="options" id ="category">
-                    <a>Doujinshi       </a>
+                    <a>Doujinshi</a>
                     <a>Manga</a>
             </div>
-                       <button id="nav-btn" class="hidden">Filters</button>
+                       <button class="nav-btn hidden">Filters</button>
                        <div class="search">
-                               <input type="search" name="q" value="" autocapitalize="none" required="">
+                               <input autocomplete="off" type="search" id="tagfilter" name="q" value="" autocapitalize="none" required="">
                                <button type="submit" class="btn btn-primary btn-square">
                                <i class="fa fa-search"></i></button>
                        </div>

diff --git a/nhentai/viewer/main.js b/nhentai/viewer/main.js
index 0e1ead3fa5293880b1da9fce67ba4a480df1931e..f2db9e080bcafe61cb9c0a10976419701a4cd05f 100644 (file)
--- a/nhentai/viewer/main.js
+++ b/nhentai/viewer/main.js
@@ -18,14 +18,7 @@ for (var i = 0; i < language.length; i++){
                toggler = document.getElementById("language")
                toggler.style.maxHeight = null;
                document.getElementsByClassName("accordion")[0].classList.toggle("active");
-               var nav_btn = document.getElementsByClassName("nav-btn")[0];
-               if (nav_btn.classList.contains("hidden")){
-                 nav_btn.classList.toggle("hidden");
-               }
-               var node = filter_maker(this.innerText, "language");
-               var check = filter_checker(this.innerText)
-               if (check == true){
-                       nav_btn.appendChild(node);}
+               filter_maker(this.innerText, "language");
 });
 }
 var category = document.getElementById("category").children;
@@ -33,55 +26,21 @@ for (var i = 0; i < category.length; i++){
        category[i].addEventListener("click", function() {
                document.getElementById("category").style.maxHeight = null;
                document.getElementsByClassName("accordion")[1].classList.toggle("active");
-
-               var nav_btn = document.getElementsByClassName("nav-btn")[0];
-               if (nav_btn.classList.contains("hidden")){
-                 nav_btn.classList.toggle("hidden");
-               }
-
-               var node = filter_maker(this.innerText, "category");
-               var check = filter_checker(this.innerText)
-               if (check == true){
-                       nav_btn.appendChild(node);}
+               filter_maker(this.innerText, "category");
 });
 }
-tag_maker(tags)
 //-----------------------------------------------------------------------------------
-//------------------------------------Functions--------------------------------------
+//----------------------------------Tags Script--------------------------------------
+tag_maker(tags);
 
-function filter_maker(text, class_value){
-    var node = document.createElement("a");
-    var textnode = document.createTextNode(text);
-    node.appendChild(textnode);
-    node.classList.add(class_value);
-    return node;
-}
-
-function filter_checker(text){
-    var filter_tags = document.getElementsByClassName("nav-btn")[0].children;
-       if (filter_tags == null){return true;}
-       for (i in filter_tags){
-               if (filter_tags[i].innerText == text){return false;}
-       }
-       return true;
-}
-
-function tag_maker(data){
-       for (i in data){
-               for (j in data[i]){
-                       var node = document.createElement("button");
-                       var textnode = document.createTextNode(data[i][j]);
-                       node.appendChild(textnode);
-                       node.classList.add("btn-2");
-                       node.classList.add(i);
-                       node.classList.add("hidden");
-                       document.getElementById("tags").appendChild(node);
-               }
-       }
+var tag = document.getElementsByClassName("btn-2");
+for (var i = 0; i < tag.length; i++){
+       tag[i].addEventListener("click", function() {
+       filter_maker(this.innerText, this.id);
+});
 }
 
 var input = document.getElementById("tagfilter");
-
 input.addEventListener("input", function() {
        var tags = document.querySelectorAll(".btn-2");
        if (this.value.length > 0) {
@@ -102,4 +61,98 @@ input.addEventListener("input", function() {
                                tag.classList.add('hidden');
         }
     }
-});
\ No newline at end of file
+});
+//-----------------------------------------------------------------------------------
+//------------------------------------Functions--------------------------------------
+function filter_maker(text, class_value){
+    var check = filter_checker(text);
+       var nav_btn = document.getElementsByClassName("nav-btn")[0];
+       if (nav_btn.classList.contains("hidden")){
+         nav_btn.classList.toggle("hidden");
+       }
+       if (check == true){
+               var node = document.createElement("a");
+               var textnode = document.createTextNode(text);
+               node.appendChild(textnode);
+               node.classList.add(class_value);        
+               nav_btn.appendChild(node);
+               filter_searcher();
+       }
+}
+
+function filter_searcher(){
+       var verifier = null;
+       var tags_filter = [];
+       var doujinshi_id = [];
+       var filter_tag = document.getElementsByClassName("nav-btn")[0].children;
+       filter_tag[filter_tag.length-1].addEventListener("click", function() {
+               this.remove();
+               try{
+                       filter_searcher();
+               }
+               catch{
+                       var gallery = document.getElementsByClassName("gallery");
+                       for (var i = 0; i < gallery.length; i++){
+                               gallery[i].classList.remove("hidden");
+                       }
+               }
+       });
+       for (var i=0; i < filter_tag.length; i++){
+               var fclass = filter_tag[i].className;
+               var fname = filter_tag[i].innerText.toLowerCase();
+               tags_filter.push([fclass, fname])
+       }
+       for (var i=0; i < data.length; i++){
+               for (var j=0; j < tags_filter.length; j++){
+                       try{
+                               if(data[i][tags_filter[j][0]].includes(tags_filter[j][1])){
+                                       verifier = true;
+                               }
+                               else{
+                                       verifier = false;
+                                       break
+                               }
+                       }
+                       catch{
+                               verifier = false;
+                                       break
+                       }
+               }
+               if (verifier){doujinshi_id.push(data[i].Folder);}
+       }
+       var gallery = document.getElementsByClassName("gallery");
+       for (var i = 0; i < gallery.length; i++){
+               gtext = gallery[i].children[0].children[1].innerText;
+               if(doujinshi_id.includes(gtext)){
+                       gallery[i].classList.remove("hidden");
+               }
+               else{
+               gallery[i].classList.add("hidden");
+               }
+       }
+
+       console.log(doujinshi_id)
+}
+
+function filter_checker(text){
+    var filter_tags = document.getElementsByClassName("nav-btn")[0].children;
+       if (filter_tags == null){return true;}
+       for (var i=0; i < filter_tags.length; i++){
+               if (filter_tags[i].innerText == text){return false;}
+       }
+       return true;
+}
+
+function tag_maker(data){
+       for (i in data){
+               for (j in data[i]){
+                       var node = document.createElement("button");
+                       var textnode = document.createTextNode(data[i][j]);
+                       node.appendChild(textnode);
+                       node.classList.add("btn-2");
+                       node.setAttribute('id', i);
+                       node.classList.add("hidden");
+                       document.getElementById("tags").appendChild(node);
+               }
+       }
+}
\ No newline at end of file