Gmeek/templates/tag.html

{% extends 'base.html' %}
{% block head %}
<title>{{ blogBase['title'] }}</title>
{% endblock %}

{% block style %}
<style>
h1 a:not([href]){color:inherit;text-decoration:none;vertical-align: bottom;font-size:40px;font-family:Monaco;}
.title-right{display:flex;margin:auto 0 0 auto;}
.title-right .circle{padding: 14px 16px;margin-right:8px;}

.subnav-search{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}
.SideNav-item .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: 767px) {
    body { padding: 8px;}
    h1 a{font-size:24px;}
    .SideNav-item .listLabels{display:none;}
    .subTitle{display:none;}
    .genTime{float: none;}
}
</style>
{% endblock %}

{% block header %}
<h1><a>Tag</a></h1>
<div class="title-right">
    <div class="subnav-search">
        <form action="https://www.google.com/search" method="get" target="_blank">
            <input type="hidden" name="q" value="site:{{ blogBase['homeUrl'] }}">
            <input type="search" name="q" class="form-control subnav-search-input float-left" aria-label="Search site" value="">
            <button class="btn float-left" type="submit">{{ i18n['Search'] }}</button>
        </form>
        <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" d=""></path>
        </svg>
    </div>
    {% for num in blogBase['singeListJson'] -%}
    <a href="/{{ blogBase['singeListJson'][num]['label'] }}.html"><button class="btn btn-invisible circle" title="{{ blogBase['singeListJson'][num]['postTitle'] }}">
        <svg class="octicon" width="16" height="16" >
            <path id="{{ blogBase['singeListJson'][num]['postTitle'] }}" fill-rule="evenodd"></path>
        </svg>
    </button></a>
    {%- endfor %}
    <a href="/rss.xml" target="_blank"><button id="buttonRSS" class="btn btn-invisible circle" title="RSS">
        <svg class="octicon" width="16" height="16" >
            <path id="pathRSS" 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 style="margin-bottom: 16px;">{{ blogBase['subTitle'] }}</div>
<nav class="SideNav border">

{% for num in postListJson -%}
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="{{ postListJson[num]['postUrl']|e }}">
    <div class="d-flex flex-items-center">
        <svg class="SideNav-icon octicon" style="witdh:16px;height:16px"><path class="svgTop{{ postListJson[num]['top'] }}" d=""></path>
        </svg>
        <span>{{ postListJson[num]['postTitle']|e }}</span>
    </div>
    <div class="listLabels">
        {% if postListJson[num]['commentNum']>0 %}<span class="Label" style="background-color:{{ blogBase['commentLabelColor'] }}">{{ postListJson[num]['commentNum'] }}</span>{% endif %}
        <span class="Label" style="background-color:{{ postListJson[num]['labelColor'] }}">{{ postListJson[num]['label'] }}</span>
        <span class="Label" style="background-color:{{ postListJson[num]['dateLabelColor'] }}">{{ postListJson[num]['createdDate'] }}</span>
    </div>
</a>
{%- endfor %}

</nav>
{% endblock %}

{% block script %}
<script>
document.getElementById("searchSVG").setAttribute("d",IconList["search"]);
document.getElementById("pathRSS").setAttribute("d",IconList["rss"]);

{% for num in blogBase['singeListJson'] -%}
document.getElementById("{{ blogBase['singeListJson'][num]['postTitle'] }}").setAttribute("d",value=IconList["{{ blogBase['singeListJson'][num]['label'] }}"]);
{%- endfor %}

let requestJson="blogBase.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(jsonData);
}

tag=window.location.hash.slice(1)

function showList(jsonData){
    let SideNav=document.getElementsByClassName("SideNav")[0];
    for(let i=1;i<jsonData.length;i++){
        
        if(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']);
            item.setAttribute("target","_blank");

            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["postListJson"][i]['title'];
            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);

            item.appendChild(center);
            item.appendChild(listLabels);
            SideNav.appendChild(item);
        }
    }
}
</script>
{% endblock %}