From 656c97bc03b29a3fa170c63ee7bceafb907f02f9 Mon Sep 17 00:00:00 2001
From: Meekdai <meekdai@163.com>
Date: Wed, 22 Nov 2023 09:15:12 +0800
Subject: [PATCH] Update tag.html

---
 templates/tag.html | 87 ++++++++++++++++++++++++++--------------------
 1 file changed, 50 insertions(+), 37 deletions(-)

diff --git a/templates/tag.html b/templates/tag.html
index f859062..c6269bb 100644
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -78,10 +78,11 @@ request.send();
 request.onload=function(){
     jsonData=JSON.parse(request.response);
     console.log(jsonData);
-    showList(window.location.hash.slice(1));
+    showList();
+    setClassDisplay(decodeURI(window.location.hash.slice(1)));
 }
 
-function showList(tag){
+function showList(){
     let SideNav=document.getElementsByClassName("SideNav")[0];
     let tagLable=document.getElementById("tagLable");
     for(i in jsonData["postListJson"]){
@@ -96,55 +97,67 @@ function showList(tag){
             tagLable.appendChild(showLabels);
         }
 
-        if(encodeURI(jsonData["postListJson"][i]['label'])==tag || tag==''){
-            let item=document.createElement("a");
-            item.setAttribute("class","SideNav-item d-flex flex-items-center flex-justify-between");
-            item.setAttribute("href",jsonData["postListJson"][i]['postUrl']);
+        // if(encodeURI(jsonData["postListJson"][i]['label'])==tag || tag==''){
+        let item=document.createElement("a");
+        item.setAttribute("class","SideNav-item d-flex flex-items-center flex-justify-between "+jsonData["postListJson"][i]['label']);
+        item.setAttribute("href",jsonData["postListJson"][i]['postUrl']);
 
-            let center=document.createElement("div");
-            center.setAttribute("class","d-flex flex-items-center");
+        let center=document.createElement("div");
+        center.setAttribute("class","d-flex flex-items-center");
 
-            svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
-            path=document.createElementNS("http://www.w3.org/2000/svg","path"); 
-            span=document.createElement("span");
-            svg.setAttributeNS(null,"class","SideNav-icon octicon");
-            svg.setAttributeNS(null,"style","witdh:16px;height:16px");
-            path.setAttributeNS(null, "d", IconList["post"]);
-            svg.appendChild(path);
+        svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
+        path=document.createElementNS("http://www.w3.org/2000/svg","path"); 
+        span=document.createElement("span");
+        svg.setAttributeNS(null,"class","SideNav-icon octicon");
+        svg.setAttributeNS(null,"style","witdh:16px;height:16px");
+        path.setAttributeNS(null, "d", IconList["post"]);
+        svg.appendChild(path);
 
-            let title=document.createElement("span");
-            title.setAttribute("class","listTitle");
-            title.innerHTML=jsonData["postListJson"][i]['postTitle'];
-            center.appendChild(svg);
-            center.appendChild(title);
+        let title=document.createElement("span");
+        title.setAttribute("class","listTitle");
+        title.innerHTML=jsonData["postListJson"][i]['postTitle'];
+        center.appendChild(svg);
+        center.appendChild(title);
 
-            let listLabels=document.createElement("div");
-            listLabels.setAttribute("class","listLabels");
-            let LabelName=document.createElement("span");
-            LabelName.setAttribute("class","Label");
-            LabelName.setAttribute("style","background-color:"+jsonData["postListJson"][i]['labelColor']);
-            LabelName.innerHTML=jsonData["postListJson"][i]['label'];
-            listLabels.appendChild(LabelName);
-            let LabelTime=document.createElement("span");
-            LabelTime.setAttribute("class","Label");
-            LabelTime.setAttribute("style","background-color:"+jsonData["postListJson"][i]['dateLabelColor']);
-            LabelTime.innerHTML=jsonData["postListJson"][i]['createdDate'];
-            listLabels.appendChild(LabelTime);
+        let listLabels=document.createElement("div");
+        listLabels.setAttribute("class","listLabels");
+        let LabelName=document.createElement("span");
+        LabelName.setAttribute("class","Label");
+        LabelName.setAttribute("style","background-color:"+jsonData["postListJson"][i]['labelColor']);
+        LabelName.innerHTML=jsonData["postListJson"][i]['label'];
+        listLabels.appendChild(LabelName);
+        let LabelTime=document.createElement("span");
+        LabelTime.setAttribute("class","Label");
+        LabelTime.setAttribute("style","background-color:"+jsonData["postListJson"][i]['dateLabelColor']);
+        LabelTime.innerHTML=jsonData["postListJson"][i]['createdDate'];
+        listLabels.appendChild(LabelTime);
 
-            item.appendChild(center);
-            item.appendChild(listLabels);
-            SideNav.appendChild(item);
-        }
+        item.appendChild(center);
+        item.appendChild(listLabels);
+        SideNav.appendChild(item);
+        // }
     }
 }
 
 function updateShowTag(label){
     if(window.location.hash.slice(1)!=encodeURI(label)){
         window.location.hash="#"+(label);
-        showList(label);
+        setClassDisplay(label);
         console.log("change to "+label);
     }
 }
 
+function setClassDisplay(lable) {
+    let SideNav = document.getElementsByClassName("SideNav-item");
+    for(let i = 0; i < SideNav.length; i++){
+        SideNav[i].style.display='none';
+    }
+
+    let lables = document.getElementsByClassName(lable);
+    for(let i = 0; i < lables.length; i++){
+        lables[i].style.display='block';
+    }
+}
+
 </script>
 {% endblock %}