script/calendar.js: simplify & use CSS3 transition

content/static/script/calendar.js

@@ -1,87 +1,22 @@
-/**
- *
- * $Id$
- *
- * This script waits for the document to be loaded,
- * then seeks the right table cell for today's date
- * and changes it's background color.
- *
- * Fading is just an additional effect.
- *
- **/
+function hilight_today() {
+    var now = new Date();
+    var today_id = "calendar-" +
+        now.getFullYear() + "-" +
+        (now.getMonth() + 1) + "-" +
+        now.getDate();
 
-set_hilight_timer();
+    var today = document.getElementById(today_id);
 
-function set_hilight_timer()
-{
-    window.setTimeout(hilight_today, 50);
-}
-
-function hilight_today()
-{
     /* Has document fetching completed enough? */
-    if (document.getElementsByClassName("calendar"))
-    {
-        var now = new Date();
-        var today_id = "calendar-" +
-            now.getFullYear() + "-" +
-            (now.getMonth() + 1) + "-" +
-            now.getDate();
-
-        var today = document.getElementById(today_id);
-
+    if (today) {
         var td = today.parentNode;
-        if (td)
-        {
-            td.style.backgroundColor = "#ebc63c";
-            td.style.backgroundColor = "black";
-            fade_td(td, 0, 100);
-        }
-    }
-    else
-    {
-        /* No calendar, continue waiting */
-        window.setTimeout(hilight_today, 300);
-    }
-}
-
-function fade_td(td, step, interval)
-{
-    var colors = new Array(
-        "#edece5",
-        "#edece7",
-        "#edebe1",
-        "#ede9db",
-        "#ede8d5",
-        "#ede7cf",
-        "#ede5c9",
-        "#ede4c3",
-        "#ede2bc",
-        "#ede1b6",
-        "#ece0b0",
-        "#ecdeaa",
-        "#ecdda4",
-        "#ecdc9e",
-        "#ecda98",
-        "#ecd991",
-        "#ecd78b",
-        "#ecd685",
-        "#ecd57f",
-        "#ecd379",
-        "#ebd273",
-        "#ebd16d");
-
-    td.style.backgroundColor = colors[step];
-    var next_step = step + 1;
-    if (next_step < colors.length)
-    {
-        /* These three lines feature two techniques:
-         * * lambda
-         * * tail-recursive
-         */
-        window.setTimeout(function() {
-	    fade_td(td, next_step, interval);
-        },(next_step == 1) ? interval * 10 : interval); /* Delay the first step */
+        var klass = td.getAttribute('class');
+        klass = (klass || "") + " today";
+        td.setAttribute('class', klass);
+    } else {
+        /* No calendar, retry later: */
+        window.setTimeout(hilight_today, 100);
     }
 }
 
+window.setTimeout(hilight_today, 1);

content/static/style/default.css

@@ -515,6 +515,15 @@ table.calendar tr td:hover ul li {
   overflow: visible;
 }
 
+.calendar .today {
+  background-color: #ebd16d;
+  -webkit-transition: background-color 2s linear;
+  -moz-transition: background-color 2s linear;
+  -o-transition: background-color 2s linear;
+  -ms-transition: background-color 2s linear;	
+  transition: background-color 2s linear;
+}
+
 /* -- MIME Icons -- */
 /* Icons from the Tango Project, http://art.gnome.org/themes/icon/1150 */
 /* CSS Idea by Tigion, http://blog.tigion.de/2007/06/28/link-indication-der-kompromiss-des-linkbildes/ */