From 1a0251071d62de63f767293a0aeb0b08b8be715c Mon Sep 17 00:00:00 2001 From: mappu Date: Sat, 10 May 2014 14:19:25 +1200 Subject: [PATCH] tag support 2/2: javascript handling --- rebuild.php | 1 + static/site.js | 41 +++++++++++++++++++++++++++++++++++++++++ static/style.css | 19 +++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 static/site.js diff --git a/rebuild.php b/rebuild.php index 29e9ad6..009cfb1 100644 --- a/rebuild.php +++ b/rebuild.php @@ -260,6 +260,7 @@ function template($title, $content) { + <?=hesc($title)?> diff --git a/static/site.js b/static/site.js new file mode 100644 index 0000000..2b265d8 --- /dev/null +++ b/static/site.js @@ -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. reset"; + 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)); + } + }); +})(); \ No newline at end of file diff --git a/static/style.css b/static/style.css index ea44ad1..17bb5b8 100644 --- a/static/style.css +++ b/static/style.css @@ -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;