From cabo@tzi.org: Added javascript functionality to make the UTC agenda convert it's UTC times to Browser local time.

 - Legacy-Id: 5544

Author: levkowetz

ietf/templates/meeting/agenda_utc.html

@@ -76,212 +76,9 @@
 
 {% block pagehead %}
 <script type="text/javascript" src='/js/agenda2.js'></script>
-<script type="text/javascript">
-
-  var lastfrag;
-
-  function setGroupState()
-  {
-    var frag = window.location.hash.replace("#",'');
-    window.setTimeout("setGroupState()",1000);
-    if (frag == lastfrag) { return; }
-
-    var weekview = document.getElementById('weekview');
-    var ical_link = document.getElementById('ical-link');
-    var ical_href = document.getElementById('ical-href');
-
-
-    lastfrag = frag;
-
-    var fragment = frag.split(',');
-
-    if (frag.length)
-    {
-      weekview.setAttribute("src","week-view.html#"+frag);
-      weekview.className = '';
-      ical_url = ical_href.getAttribute("href").split("?")[0];
-      ical_href.setAttribute("href",ical_url+"?"+frag);
-      ical_link.className = '';
-    }
-    else
-    {
-      weekview.className = 'hidden';
-      ical_link.className = 'hidden';
-    }
-
-    var selectors = document.getElementsByTagName('div');
-    var re = RegExp("^selector-");
-    var re2 = RegExp("^selector-(" + fragment.join('|') + ")$");
-
-    for (var i=0 ; i<selectors.length; i++)
-    {
-      if (re.test(selectors[i].id))
-      {
-        var wg = selectors[i].textContent?selectors[i].textContent:selectors[i].text;
-        var area_groups = document.getElementById(wg + "-groups");
-        if (re2.test(selectors[i].id))
-        {
-          selectors[i].className="selected";
-          if (area_groups)
-          {
-            area_groups.className = 'inactive';
-          }
-        }
-        else
-        {
-          selectors[i].className="unselected";
-          if (area_groups)
-          {
-            area_groups.className = '';
-          }
-        }
-      }
-    }
-    var rows = document.getElementsByTagName('tr');
-    var hidenone = false;
-    if (frag.length == 0) { hidenone=true; }
-
-    var re = RegExp("-(" + fragment.join('|') + ")($|-)");
-
-    for (var i = 0; i < rows.length; i++)
-    {
-      if (rows[i].className == 'groupagenda' || rows[i].className == 'grouprow')
-      {
-        if (re.test(rows[i].id) || (hidenone && rows[i].className == 'grouprow'))
-        {
-          rows[i].style.display="table-row";
-          if (rows[i].className == 'groupagenda')
-          {
-            var iframe = rows[i].firstElementChild.nextElementSibling.firstElementChild;
-            if (iframe.getAttribute("xsrc") != iframe.getAttribute("src"))
-            {
-              iframe.setAttribute("src",iframe.getAttribute("xsrc"));
-            }
-          }
-        }
-        else
-        {
-          rows[i].style.display="none";
-        }
-      }
-    }
-
-    // Handle special cases (checkboxes)
-    var special = ['edu','ietf','tools','iesg','iab'];
-    var re3 = RegExp("^(" + fragment.join('|') + ")$");
-    for (i in special)
-    {
-      var include = document.getElementById("include-"+special[i]);
-      include.checked = ! re3.test("\-"+special[i]);
-    }
-  }
-
-  /* Resizes an IFRAME to fit its contents. */
-  function r(iframe)
-  {
-    try
-    {
-      iframe.height = 1;
-      iframe.style.border = "solid";
-      iframe.style.borderWidth = "1px";
-      iframe.style.margin = "0";
-      iframe.style.padding = "10px";
-      iframe.style.overflow = "auto";
-      docHeight = iframe.contentWindow.document.body.scrollHeight;
-      iframe.height = docHeight;
-    }
-    catch (e) { return; }
-
-    /* The following code works really well UNLESS some crazy chair
-       decides to submit a text agenda that is, say, 500 columns wide.
-       But this tends to happen. So, until I find a way to stop
-       that brand of crazy from breaking the world, I'm disabling
-       this code. Too bad, really -- it made the page much nicer to
-       use. */
-    return;
-
-    if (iframe.contentWindow.document.body.innerHTML)
-    {
-      var div = document.createElement("div");
-      div.style.border = "solid";
-      div.style.borderWidth = "1px";
-      div.style.margin = "0";
-      div.style.padding = "10px";
-      div.style.overflow = "auto";
-      div.innerHTML=iframe.contentWindow.document.body.innerHTML;
-      iframe.parentNode.replaceChild(div,iframe);
-    }
-  }
-
-  function add_hash_item(item)
-  {
-    if (window.location.hash.replace("#","").length == 0)
-    {
-      window.location.hash = item;
-    }
-    else
-    {
-      window.location.hash += "," + item;
-    }
-    window.location.hash = window.location.hash.replace(/^#?,/,'');
-  }
-
-  function remove_hash_item(item)
-  {
-    var re = new RegExp('(^|#|,)' + item + "(,|$)");
-    window.location.hash = window.location.hash.replace(re,"$2")
-    window.location.hash = window.location.hash.replace(/^#?,/,'');
-  }
-
-  function toggle(selection)
-  {
-    var active = selection.className;
-    var wg = selection.textContent?selection.textContent:selection.text;
-
-    if (active == "selected")
-    {
-      remove_hash_item(wg);
-    }
-    else
-    {
-      add_hash_item(wg);
-    }
-    setGroupState();
-  }
-
-  function toggle_special(checkbox)
-  {
-    var special = checkbox.id.replace('include-','');
-    if (checkbox.checked)
-    {
-      remove_hash_item("-"+special);
-    }
-    else
-    {
-      add_hash_item("-"+special);
-    }
-  }
-
-  function toggle_wg_selector ()
-  {
-    var wg_selector = document.getElementById('wg-selector');
-    var triangle_right = document.getElementById('wg-selector-triangle-right');
-    var triangle_down = document.getElementById('wg-selector-triangle-down');
-    if (wg_selector.className == 'hidden')
-    {
-      wg_selector.className = '';
-      triangle_right.className = 'hidden';
-      triangle_down.className = '';
-    }
-    else
-    {
-      wg_selector.className = 'hidden';
-      triangle_right.className = '';
-      triangle_down.className = 'hidden';
-    }
-    setGroupState();
-  }
-</script>
+<script type="text/javascript" src='/js/jquery-1.5.1.min.js'></script>
+<script type="text/javascript" src='/js/browsertime.js'></script>
+<script type="text/javascript" src='/js/weekview.js'></script>
 
 {% endblock pagehead %}
 {% block bodyAttrs %}onload='setGroupState();updateAgendaColors()'{% endblock %}
@@ -290,6 +87,17 @@ <h1>IETF {{ meeting.number }} Meeting Agenda</h1>
 
 <p>{{ meeting.city }}, {{ meeting.date|date:"F j" }} &#8211; {% ifnotequal meeting.date.month meeting.end_date.month %}{{ meeting.end_date|date:"F " }}{% endifnotequal %}{{ meeting.end_date|date:"j, Y" }}<br />
 Updated {{ modified|date:"Y-m-d H:i:s T" }}</p>
+
+<blockquote style="background-color: #ffc; text-align: center;"><h3>Time zone information:</h3>
+   The agenda times in this version of the agenda
+   are by default in UTC, but there's a handy conversion function which
+   you can use to make the page show times in your Browser's time.
+</blockquote>
+<div style="text-align: center; margin-bottom: 1em;">
+   <input type="button" name="displayinbrowsertime" id="displayinbrowsertime" value="Display in browser time"/>
+   
+</div>
+
 <div class="noprint">
 (There's also a <a href="/meeting/agenda">agenda with local times</a>, a <a href="/meeting/{{meeting.number}}/agenda.txt">plaintext agenda</a> and a <a href="http://tools.ietf.org/agenda/{{meeting.number}}/">tools-style agenda</a> available)</div>
 

static/js/browsertime.js

@@ -0,0 +1,66 @@
+jQuery(function($) {
+    $(document).ready(
+        function() {
+	    $("#displayinbrowsertime")
+		 .removeAttr("disabled")
+		 .val("Display in Browser time");
+	 
+	 });
+    $("#displayinbrowsertime").click(
+	function() {
+	    var datere = new RegExp("^\\s*(\\w\\w\\w) (\\d\\d)");
+	    var timere = new RegExp("(\\d\\d)(\\d\\d)-(\\d\\d)(\\d\\d)");
+	    var months = { "Jan": 0, "Feb": 1, "Mar": 2, "Apr": 3, "May": 4, "Jun": 5, "Jul": 6, "Aug": 7, "Sep": 8, "Oct": 9, "Nov": 10, "Dec": 11 };
+
+	    var twod = function(n) {
+		return (n < 10 ? "0" : "") + n;
+	    };
+
+	    var timehhmm = function(d) {
+		return twod(d.getHours()) + twod(d.getMinutes());
+	    };
+
+	    var tzshhmm = function(d) {
+		var tzo = -d.getTimezoneOffset();
+		var s = "+";
+		if (tzo < 0) {
+		    s = "\u2013"; // en dash
+		    tzo = - tzo;
+		}
+		return s + twod(~~(tzo / 60)) + twod(tzo % 60);
+	    };
+
+	    // to fill in the blank left from the text (will be wrong a year after the event):
+	    var thisyear = (new Date).getFullYear();
+	    $(".timecolumn").each (
+		function() {
+		    var deco = $(this).find(".ietf-tiny"); // brittle...
+		    if (deco[1].innerHTML == "UTC") {      // i.e., we haven't done this already
+			var mdday = datere.exec(deco.html());
+			var mdfine = timere.exec($(this).html());
+			if (mdday && mdfine) {
+			    var month = mdday[1];
+			    var daystr = mdday[2]
+			    var date1 = new Date(Date.UTC(thisyear, months[month], +daystr,
+							  +mdfine[1], +mdfine[2], 0, 0));
+			    var time1 = timehhmm(date1);
+			    var date2 = new Date(Date.UTC(thisyear, months[month], +daystr,
+							  +mdfine[3], +mdfine[4], 0, 0));
+			    var time2 = timehhmm(date2);
+
+			    deco[0].innerHTML = date1.toString().slice(4,11) + "&nbsp"; // month, day
+			    deco[1].innerHTML = tzshhmm(date1);
+			    // outerHTML replacement that is portable back to Firefox < 11
+			    var d0 = $(deco[0]).clone().wrap('<div>').parent().html();
+			    var d1 = $(deco[1]).clone().wrap('<div>').parent().html();
+			    $(this).html(d0 + time1 + "\u2013" + time2 + " " + d1);
+			};
+		    };
+
+		});
+	    $("#displayinbrowsertime")
+		.attr("disabled", "disabled") // FIX THIS to true for jQuery 1.6+
+		.val("Shown in Browser time");
+	}
+    );
+});