Tag selection with JavaScript.

Author: loicfrering

_includes/tags.html

@@ -2,7 +2,7 @@
 <ul>
   {% for tag in post.tags %}
     <li>
-        <a href="tags.html#{{ tag }}" title="Voir les posts ayant le tag {{ tag }} ">{{ tag }}</a>
+        <a href="tags.html#{{ tag }}" title="Voir les posts ayant le tag {{ tag }}">{{ tag }}</a>
     </li>
   {% endfor %}
 </ul>

public/css/style.css

@@ -382,12 +382,11 @@ article > footer {
 }
 
 .tags li {
-  font-weight: bold;
   display: inline-block;
   background-color: #6db900;
   border-radius: 4px;
   padding: 0 0.6em;
-  margin: 0 0.2em;
+  margin: 0.1em 0.2em;
 }
 
 .tags li a, .tags li a:hover, .tags li a:visited {
@@ -472,6 +471,21 @@ article > footer {
   border-radius: 4px;
 }
 
+/* ---- Tags ---- */
+
+#tags header {
+  font-size: 80%;
+  margin-bottom: 1em;
+}
+
+#tags header ul {
+  margin: 0;
+}
+
+#tags header li.selected {
+  background-color: #5cb0cc;
+}
+
 /* ---- Site footer ---- */
 
 #container > footer {

public/js/tags.js

@@ -1,9 +1,24 @@
+function selectTag(tag) {
+    window.location.hash = '#!' + tag.html();
+    $('#tags header li').removeClass('selected');
+    tag.parent().addClass('selected');
+    $('#tag-list > li').hide().filter('#' + tag.html()).slideDown();
+}
+
 $(function() {
-    if ($('#tag-list').length) {
+    if ($('#tags').length) {
         var hash = window.location.hash.substr(1);
+        hash = hash.indexOf('!') == 0 ? hash.substr(1) : hash;
         if (hash != '') {
-            $('#tag-list > li[id!=' + hash + ']').remove();
-            $(window).scrollTop(0);
+            if ($('#tag-' + hash).length) {
+                $(window).scrollTop(0);
+                selectTag($('#tag-' + hash + ' a'));
+            }
         }
+
+        $('#tags header a').click(function() {
+            selectTag($(this));
+            return false;
+        });
     }
 });

tags.html

@@ -4,6 +4,15 @@
 ---
 <section id="tags">
   <h1>Tags</h1>
+  <header>
+    <ul class="tags">
+      {% for tag in site.tags %}
+        <li id="tag-{{ tag[0] }}">
+          <a href="tags.html#{{ tag[0] }}" title="Voir les posts ayant le tag {{ tag[0] }}">{{ tag[0] }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </header>
   <ul id="tag-list">
     {% for tag in site.tags %}
       <li id="{{ tag[0] }}">{{ tag[0] }}: