diff options
| -rw-r--r-- | dev-random/static/css/main.css | 37 | ||||
| -rw-r--r-- | dev-random/static/js/microTags.js | 99 | ||||
| -rw-r--r-- | dev-random/templates/tags.html | 18 |
3 files changed, 151 insertions, 3 deletions
diff --git a/dev-random/static/css/main.css b/dev-random/static/css/main.css index 2a18220..e9df3d2 100644 --- a/dev-random/static/css/main.css +++ b/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; +} + diff --git a/dev-random/static/js/microTags.js b/dev-random/static/js/microTags.js new file mode 100644 index 0000000..2f389b0 --- /dev/null +++ b/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; +} + + diff --git a/dev-random/templates/tags.html b/dev-random/templates/tags.html index b95d401..9373427 100644 --- a/dev-random/templates/tags.html +++ b/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 %} - <li class="tag-{{ tag.1 }}"><a href="{{ SITEURL }}/tag/{{ tag.0 }}.html">{{ tag.0 }}</a></li> + {% for tag, articles in tags %} + <li data-count="{{ articles|count }}"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li> {% endfor %} </ul> </section> |