e940a34d36
"iconList":{"circle":"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z","dash":"M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z"},
204 lines
8.0 KiB
HTML
204 lines
8.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% block head %}
|
|
<meta name="description" content="{{ blogBase['title'] }} search page">
|
|
<title>{{ blogBase['title'] }} - Tag</title>
|
|
{% endblock %}
|
|
|
|
{% block style %}
|
|
<style>
|
|
.tagTitle{margin:auto 0;font-size:40px;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
|
.title-right{display:flex;margin:auto 0 0 auto;}
|
|
.title-right .circle{padding: 14px 16px;margin-right:8px;}
|
|
|
|
.subnav-search{width:222px;margin-top:8px;margin-right:8px;}
|
|
.subnav-search-input{width:160px;border-top-right-radius:0px;border-bottom-right-radius:0px;}
|
|
.subnav-search button{padding:5px 8px;border-top-left-radius:0px;border-bottom-left-radius:0px;}
|
|
|
|
.SideNav-icon{margin-right: 16px}
|
|
.Label{color: #fff;margin-left:8px;}
|
|
.genTime{float: right;}
|
|
.d-flex{min-width:0;}
|
|
.listTitle{overflow:hidden;white-space:nowrap;text-overflow: ellipsis;max-width: 100%;}
|
|
.listLabels{white-space:nowrap;}
|
|
|
|
@media (max-width: 600px) {
|
|
body { padding: 8px;}
|
|
.tagTitle{display:none;}
|
|
.LabelTime{display:none;}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block header %}
|
|
<span class="tagTitle"><span>Loading</span><span class="AnimatedEllipsis"></span></span>
|
|
<div class="title-right">
|
|
<div class="subnav-search">
|
|
<input type="search" class="form-control subnav-search-input float-left" aria-label="Search site" value="" style="height:32px;">
|
|
<button class="btn float-left" type="submit" onclick="javascript:searchShow()">{{ i18n['Search'] }}</button>
|
|
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
|
|
<path id="searchSVG" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
<a href="{{ blogBase['homeUrl'] }}"><button id="buttonHome" class="btn btn-invisible circle" title="{{ i18n['home'] }}">
|
|
<svg class="octicon" width="16" height="16">
|
|
<path id="pathHome" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</button></a>
|
|
<button class="btn btn-invisible circle" onclick="modeSwitch()" title="{{ i18n['switchTheme'] }}">
|
|
<svg class="octicon" width="16" height="16" >
|
|
<path id="themeSwitch" fill-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="tagLable" style="margin-bottom: 16px;"></div>
|
|
<nav class="SideNav"></nav>
|
|
<div class="notFind" style="display:none;font-size:24px;margin:8px;">Not Find</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script>
|
|
document.getElementById("pathHome").setAttribute("d",IconList["home"]);
|
|
document.getElementById("searchSVG").setAttribute("d",IconList["search"]);
|
|
|
|
tagList=[];
|
|
jsonData='';
|
|
let requestJson="postList.json"
|
|
let request=new XMLHttpRequest();
|
|
request.open("GET",requestJson);
|
|
request.responseType='text';
|
|
request.send();
|
|
request.onload=function(){
|
|
jsonData=JSON.parse(request.response);
|
|
console.log(jsonData);
|
|
showList();
|
|
setClassDisplay(decodeURI(window.location.hash.slice(1)));
|
|
}
|
|
|
|
function showList(){
|
|
let SideNav=document.getElementsByClassName("SideNav")[0];
|
|
SideNav.setAttribute("class","SideNav border");
|
|
let tagLable=document.getElementById("tagLable");
|
|
|
|
if(tagList.length==0){
|
|
let showLabels=document.createElement("button");
|
|
showLabels.setAttribute("class","Label");
|
|
showLabels.setAttribute("style","background-color:#000");
|
|
showLabels.innerHTML="All";
|
|
showLabels.setAttribute("onclick","javascript:updateShowTag('All');");
|
|
tagLable.appendChild(showLabels);
|
|
}
|
|
for(i in jsonData){
|
|
if(!(tagList.includes(jsonData[i]['label']))){
|
|
tagList.push(jsonData[i]['label']);
|
|
let showLabels=document.createElement("button");
|
|
showLabels.setAttribute("class","Label");
|
|
showLabels.setAttribute("style","background-color:"+jsonData[i]['labelColor']);
|
|
showLabels.innerHTML=jsonData[i]['label'];
|
|
showLabels.setAttribute("onclick","javascript:updateShowTag('"+jsonData[i]['label']+"');");
|
|
tagLable.appendChild(showLabels);
|
|
}
|
|
|
|
let div=document.createElement("div");
|
|
div.setAttribute("class","lists "+jsonData[i]['label']);
|
|
let item=document.createElement("a");
|
|
item.setAttribute("class","SideNav-item d-flex flex-items-center flex-justify-between");
|
|
item.setAttribute("href",jsonData[i]['postUrl']);
|
|
|
|
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);
|
|
|
|
let title=document.createElement("span");
|
|
title.setAttribute("class","listTitle");
|
|
title.innerHTML=jsonData[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");
|
|
LabelName.setAttribute("style","background-color:"+jsonData[i]['labelColor']);
|
|
LabelName.innerHTML=jsonData[i]['label'];
|
|
listLabels.appendChild(LabelName);
|
|
let LabelTime=document.createElement("span");
|
|
LabelTime.setAttribute("class","Label LabelTime");
|
|
LabelTime.setAttribute("style","background-color:"+jsonData[i]['dateLabelColor']);
|
|
LabelTime.innerHTML=jsonData[i]['createdDate'];
|
|
listLabels.appendChild(LabelTime);
|
|
|
|
item.appendChild(center);
|
|
item.appendChild(listLabels);
|
|
div.appendChild(item);
|
|
SideNav.appendChild(div);
|
|
}
|
|
}
|
|
|
|
function updateShowTag(label){
|
|
if(window.location.hash.slice(1)!=encodeURI(label)){
|
|
window.location.hash="#"+(label);
|
|
setClassDisplay(label);
|
|
}
|
|
}
|
|
|
|
function setClassDisplay(lable){
|
|
let lists = document.getElementsByClassName("lists");
|
|
let tagTitle = document.getElementsByClassName("tagTitle")[0];
|
|
tagTitle.innerHTML="Tag #"+lable;
|
|
document.title=lable+" - {{ blogBase['title'] }}";
|
|
document.getElementsByClassName("subnav-search-input")[0].value='';
|
|
if(lable=="All"){
|
|
for(let i = 0; i < lists.length; i++){lists[i].style.display='block';}
|
|
document.getElementsByClassName("notFind")[0].style.display='none';
|
|
}
|
|
else if(tagList.indexOf(lable)!=-1){
|
|
for(let i = 0; i < lists.length; i++){
|
|
lists[i].style.display='none';
|
|
}
|
|
|
|
let lables = document.getElementsByClassName(lable);
|
|
for(let i = 0; i < lables.length; i++){
|
|
lables[i].style.display='block';
|
|
}
|
|
document.getElementsByClassName("notFind")[0].style.display='none';
|
|
}
|
|
else{
|
|
document.getElementsByClassName("subnav-search-input")[0].value=lable;
|
|
searchShow();
|
|
}
|
|
}
|
|
|
|
function searchShow(){
|
|
let lists = document.getElementsByClassName("lists");
|
|
let tagTitle = document.getElementsByClassName("tagTitle")[0];
|
|
let searchInput = document.getElementsByClassName("subnav-search-input")[0].value;
|
|
tagTitle.innerHTML="Search #"+searchInput;
|
|
if(searchInput==''){document.title="Search - {{ blogBase['title'] }}";}
|
|
else{document.title=searchInput+" - {{ blogBase['title'] }}";}
|
|
let a=0;
|
|
window.location.hash="#"+(searchInput);
|
|
for(let i = 0; i < lists.length; i++){
|
|
if(lists[i].childNodes[0].childNodes[0].childNodes[1].innerHTML.toUpperCase().indexOf(searchInput.toUpperCase())==-1){lists[i].style.display='none';}
|
|
else{lists[i].style.display='block';a=a+1;}
|
|
}
|
|
if(a==0){
|
|
let notFind=document.getElementsByClassName("notFind")[0];
|
|
notFind.style.display='block';
|
|
notFind.innerHTML='Not Find "'+searchInput+'"';
|
|
}
|
|
else{document.getElementsByClassName("notFind")[0].style.display='none';}
|
|
}
|
|
|
|
</script>
|
|
{% endblock %}
|