[dev-random] Added an awesome tag cloud with µTags

dev-random/static/css/main.css

@@ -190,7 +190,7 @@ table tr {
 }
 
 
-.page .foot p {
+.page-footer p {
     display: block;
     width: 60%;
 
@@ -210,6 +210,9 @@ table tr {
 /******************************************************************************/
 /*                                    Misc                                    */
 /******************************************************************************/
+
+// GitHub button
+
 @media screen and (min-width: 600px) {
     #github-link {
         display: block;
@@ -227,3 +230,35 @@ table tr {
         text-decoration: none;
     }
 }
+
+
+// Tag list
+
+ul#tagslist {
+    display: block;
+    width: 75%;
+    margin: 1em auto;
+    list-style-type: none;
+}
+
+ul#tagslist li {
+    display: inline-block;
+    list-style-type: none;
+    margin: .5em .2em;
+    transition: transform 1s ease 0s;
+    -o-transition: -o-transform 1s ease 0s;
+    -ms-transition: -ms-transform 1s ease 0s;
+    -moz-transition: -moz-transform 1s ease 0s;
+    -webkit-transition: -webkit-transform 1s ease 0s;
+}
+
+
+
+ul#tagslist li:hover {
+    transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -o-transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -ms-transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -moz-transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -webkit-transform: rotate(0deg) scale(1.2, 1.2) !important;
+}
+

dev-random/static/js/microTags.js

@@ -0,0 +1,99 @@
+
+var µTags = function(element, options) {
+    this._el = element;
+    this._children = element.childNodes;
+
+    this._max_size = 3;
+    this._min_size = 0.7;
+    this._max_angle = 15;
+    this._min_angle = -15;
+
+    if (options != undefined)
+        this._set_options(options);
+
+    this._max_count = this._get_max_count();
+    this._set_sizes();
+    this._set_tilt();
+}
+
+µTags.prototype.version = "0.1a"
+
+µTags.prototype._set_options = function(options) {
+    var max_size  = options['max-size'],
+        min_size  = options['min-size'],
+        max_angle = options['max-angle'],
+        min_angle = options['min-angle'];
+
+    if ((max_size >= 1) && (max_size > min_size))
+        this._max_size = max_size;
+    else
+        console.error("µTags: option `max-size` must be >= 1 and > min-size");
+
+    if ((min_size > 0) && (min_size < max_size))
+        this._min_size = min_size;
+    else
+        console.error("µTags: option `min-size` must be > 0 and < max-size");
+
+    if (max_angle > min_angle) {
+        this._max_angle = max_angle;
+        this._min_angle = min_angle;
+    }
+    else
+        console.error("µTags: option `max-angle` must be > `min-angle`");
+        
+}
+
+µTags.prototype.eachTag = function(callback) { 
+    var i, child, tag, count;
+    for (i=0; i < this._children.length; i++) {
+        child = this._children[i];
+        if (child.attributes != undefined) {
+            window._c = child;
+            count = parseInt(child.attributes["data-count"].value || "1");
+            callback(child, count);
+        }
+    }
+}
+
+µTags.prototype._get_max_count = function() {
+    var max = 0;
+    this.eachTag(function(element, count) {
+        max = (max < count) ? count : max;
+    });
+    return max;
+}
+
+µTags.prototype._set_sizes = function() {
+    var size,
+        max = this._max_size,
+        min = this._min_size,
+        max_count = this._max_count;
+
+    this.eachTag(function(element, count) {
+        size = (count * max / max_count);
+        size = (size >= min) ? size : min;
+        console.debug(element+ ': ' + count + ': ' + size );
+        element.style['fontSize'] = size + 'em';
+    });
+}
+
+µTags.prototype._set_tilt = function() {
+    var angle,
+        max = this._max_angle,
+        min = this._min_angle;
+    this.eachTag(function(element, count) {
+        angle = min + (Math.random() * (max - min));
+        element.style['transform']       = 'rotate(' + angle + 'deg)';
+        element.style['MozTransform']    = 'rotate(' + angle + 'deg)';
+        element.style['OTransform']      = 'rotate(' + angle + 'deg)';
+        element.style['WebkitTransform'] = 'rotate(' + angle + 'deg)';
+        element.style['msTransform']     = 'rotate(' + angle + 'deg)';
+    });
+
+}
+
+if (window != undefined) {
+    window.µTags = µTags;
+}
+
+

dev-random/templates/tags.html

@@ -1,13 +1,27 @@
 {% extends "base.html" %}
 
+{% block headers %}
+{{ super() }}
+    <script type="text/javascript" src="{{ SITEURL }}/theme/js/microTags.js"></script>
+    <script>
+      function tag_cloud_init() {
+        var el = document.getElementById("tagslist");
+        window._tagcloud = new µTags(el);
+      }
+      if (window.addEventListener) window.addEventListener("load", tag_cloud_init, false);
+      else if (window.attachEvent) window.attachEvent("onload", tag_cloud_init);
+      else window.onload = tag_cloud_init;
+    </script>
+{% endblock headers %}
+
 {% block title %}{{ super() }} — Mots-clés{% endblock title %}
 
 {%- block content %}
     <section class="content">
       <h1>Mots-clés</h1>
       <ul id="tagslist">
-      {% for tag in tag_cloud %}
+      {% for tag, articles in tags %}
-        <li class="tag-{{ tag.1 }}"><a href="{{ SITEURL }}/tag/{{ tag.0 }}.html">{{ tag.0 }}</a></li>
+      <li data-count="{{ articles|count }}"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
       {% endfor %}
       </ul>
     </section>