main page filter(2/2)

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;
 }

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>

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];
+		filter_maker(this.innerText, "language");
-		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);}
 });
 }
 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");
-
+		filter_maker(this.innerText, "category");
-		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);}
 });
 }
-tag_maker(tags)
 //-----------------------------------------------------------------------------------
-//------------------------------------Functions--------------------------------------
+//----------------------------------Tags Script--------------------------------------
+tag_maker(tags);
 
-function filter_maker(text, class_value){
+var tag = document.getElementsByClassName("btn-2");
-    var node = document.createElement("a");
+for (var i = 0; i < tag.length; i++){
-    var textnode = document.createTextNode(text);
+	tag[i].addEventListener("click", function() {
-    node.appendChild(textnode);
+	filter_maker(this.innerText, this.id);
-    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 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');
         }
     }
-});
+});
+//-----------------------------------------------------------------------------------
+//------------------------------------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);
+		}
+	}
+}