Hilight today in calendar with a smooth effect

git-svn-id: svn://svn.c3d2.de/c3d2-web/trunk@998 31f61c52-7bfb-0310-b897-fc00f8a278f0

content/static/script/calendar.js

@@ -0,0 +1,95 @@
+/**
+ *
+ * $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.
+ *
+ **/
+
+set_hilight_timer();
+
+function set_hilight_timer()
+{
+    window.setTimeout(hilight_today, 50);
+}
+
+function hilight_today()
+{
+    /* Has document fetching completed enough? */
+    if (document.getElementById("upcoming"))
+    {
+        var now = new Date();
+        var today_id = "calendar-" +
+            now.getFullYear() + "-" +
+            (now.getMonth() + 1) + "-" +
+            now.getDate();
+
+        var today = document.getElementById(today_id);
+
+        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, 100);
+    }
+}
+
+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",
+        "#ebcf66",
+        "#ebce60",
+        "#ebcc5a",
+        "#ebcb54",
+        "#ebca4e",
+        "#ebc848",
+        "#ebc742",
+        "#ebc63c");
+
+    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);
+        }, interval);
+    }
+}
+

xsl/calendar.xsl

@@ -77,7 +77,9 @@
         <xsl:with-param name="date" select="$date"/>
       </xsl:call-template>
     </xsl:variable>
-    <span class="day" title="{$ddate}">
+    <span class="day" title="{$ddate}"
+      id="calendar-{date:year($date)}-{date:month-in-year($date)}-{date:day-in-month($date)}"
+      >
       <xsl:value-of select="date:day-in-month($date)"/>
     </span>
 

xsl/header.xsl

@@ -36,6 +36,12 @@
   <meta name="DC.Title" content="c3d2: Chaos Computer Club Dresden" />
 
   <xsl:call-template name="links" />
+
+  <xsl:if test="/page/calendar-summary">
+    <script src="{$baseurl}script/calendar.js"
+            type="text/javascript">
+    </script>
+  </xsl:if>
   
   </xsl:template>