tag support 2/2: javascript handling

This commit is contained in:
mappu 2014-05-10 14:19:25 +12:00
parent d440ccc1b3
commit 1a0251071d
3 changed files with 61 additions and 0 deletions

View File

@ -260,6 +260,7 @@ function template($title, $content) {
<meta name="viewport" content="width=768px" >
<link type="text/css" rel="stylesheet" href="normalize.css">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="site.js"></script>
<title><?=hesc($title)?></title>
</head>
<body>

41
static/site.js Normal file
View File

@ -0,0 +1,41 @@
(function() {
"use strict";
var show_all = function() {
var tr = document.querySelectorAll(".projtable tr");
for (var i = 0, e = tr.length; i !== e; ++i) {
tr[i].style.display = "table-row";
}
document.querySelector(".tag-filter-warn").remove();
};
var show_tag = function(tag) {
var tr = document.querySelectorAll(".projtable tr");
for (var i = 0, e = tr.length; i !== e; ++i) {
tr[i].style.display = (tr[i].className.split(" ").indexOf("taggedWith-"+tag) === -1) ? "none" : "table-row";
}
var div = document.createElement("div");
div.className = "tag-filter-warn";
div.innerHTML = "Filtering by tag. <a>reset</a>";
document.body.appendChild(div);
document.querySelector(".tag-filter-warn a").addEventListener('click', function() {
show_all();
return false;
});
};
var get_show_tag = function(tag) {
return function() { show_tag(tag); return false; };
};
window.addEventListener('load', function() {
var taglinks = document.querySelectorAll(".tag-link");
for (var i = 0, e = taglinks.length; i !== e; ++i) {
var tag = taglinks[i].getAttribute("data-tag");
taglinks[i].addEventListener('click', get_show_tag(tag));
}
});
})();

View File

@ -8,9 +8,11 @@ img {
}
a {
color:black;
text-decoration:underline;
}
a:hover {
color:blue;
cursor:pointer;
}
h1 a {
text-decoration:none;
@ -74,6 +76,20 @@ html, body {
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAZUlEQVQI12P4//8/Awyrqqp6KSkp/QdhFRWV7cgS+kDBN0B8RVlZuRikACahB+T8ger6BMTXwJJAiTwg4xvMOCj+ART3ZwCa3YYm8QcopgsyEWasDVT3W5AVMHcgO6gViNORXQ8A84NToxbSsJcAAAAASUVORK5CYII=') no-repeat 0 0;
}
.tag-filter-warn {
position:fixed;
top:0;
right:0;
padding:4px;
background:lightyellow;
border-bottom: 1px solid #888;
border-left:1px solid #888;
}
/* */
.projtable {
border-collapse: collapse;
width:100%;
@ -91,6 +107,9 @@ html, body {
color:grey;
font-style:italic;
}
.projtable tr td:first-child {
width:95px;
}
.projinfo {
position:relative;