Redoing the hide/show thingy for blocks purely through CSS.

Instance id's next time, Urs! ;-)

diff --git a/lib/container.js b/lib/container.js
index 436c1a387681bb81d1af52111c0e9244d53a7c37..f320ff8e8958e71925977dc4dea6efa276fd8aef 100644 (file)
--- a/lib/container.js
+++ b/lib/container.js
@@ -1,22 +1,69 @@
-function containerDisplaySwitching(id)
-{
-    var id_cont = id + "_cont";
-       var x = new getObj(id_cont);
-    var what = (x.style.display == 'inline' || x.style.display == '') ? 'none' : 'inline';
-    x.style.display = what;
-    new cookie(id, what, 356, '/').set();
+/*
+    findParentNode (start, elementName, elementClass, elementID)
+    
+    Travels up the DOM hierarchy to find a parent element with the
+    specified tag name, class, and id. All conditions must be met,
+    but any can be ommitted. Returns the BODY element if no match
+    found.
+*/
+function findParentNode(el, elName, elClass, elId) {
+    while(el.nodeName != 'BODY') {
+        if(
+            (!elName || el.nodeName == elName) &&
+            (!elClass || el.className.indexOf(elClass) != -1) &&
+            (!elId || el.id == elId))
+        {
+            break;
+        }
+        el = el.parentNode;
+    }
+    return el;
 }
 
-function containerDisplaySet(id)
-{
-    var id_cont = id + "_cont";
-       var x = new getObj(id_cont);
-    var what = new cookie(id).read();
-    if (what != null) {
-        x.style.display = what;
+/*
+    elementToggleHide (element, elementFinder)
+
+    If elementFinder is not provided, toggles the "hidden" class for the specified element.
+    If elementFinder is provided, then the "hidden" class will be toggled for the object
+    returned by the function call elementFinder(element).
+
+    If persistent == true, also sets a cookie for this.
+*/
+function elementToggleHide(el, persistent, elementFinder) {
+    if(!elementFinder) {
+        var obj = el;
+    }
+    else {
+        var obj = elementFinder(el);
+    }
+    if(obj.className.indexOf('hidden') == -1) {
+        obj.className += ' hidden';
+        var shown = 0;
+    }
+    else {
+        obj.className = obj.className.replace(new RegExp(' ?hidden'), '')
+        var shown = 1;
+    }
+
+    if(persistent == true) {
+        new cookie('hide:' + obj.id, 1, (shown ? -1 : 356), '/').set();
+    }
+}
+
+
+function elementCookieHide(id) {
+    var obj  = document.getElementById(id);
+    var cook = new cookie('hide:' + id).read();
+    if(cook != null) {
+        elementToggleHide(obj, false);
     }
 }
 
+/*
+
+Is there some specific reason for this function? I think pretty
+much every browser worth considering supports getElementById() [Jon]
+
 function getObj(id)
 {
   if (document.getElementById)
@@ -35,3 +82,4 @@ function getObj(id)
        this.style = document.layers[id];
   }
 }
+*/

diff --git a/lib/weblib.php b/lib/weblib.php
index 7014470c19e3e87c6fdeb6885cb5660e89e18bfa..b581d9befaf1b51aacb13deaaabfdd871c3836e0 100644 (file)
--- a/lib/weblib.php
+++ b/lib/weblib.php
@@ -3544,47 +3544,43 @@ function print_side_block_start($heading='', $attributes = array()) {
     else if(!strpos($attributes['class'], 'sideblock')) {
         $attributes['class'] .= ' sideblock';
     }
+
     // OK, the class is surely there and in addition to anything
     // else, it's tagged as a sideblock
 
+    /*
+    
+    // IE misery: if I do it this way, blocks which start hidden cannot be "unhidden"
+    
+    // If there is a cookie to hide this thing, start it hidden
+    if(!empty($attributes['id']) && isset($_COOKIE['hide:'.$attributes['id']])) {
+        $attributes['class'] = 'hidden '.$attributes['class'];
+    }
+    */
+
     $attrtext = '';
     foreach($attributes as $attr => $val) {
        $attrtext .= ' '.$attr.'="'.$val.'"';
     }
 
-    echo '<table class="sideblock" cellspacing="0" cellpadding="5"'.$attrtext.'>';
+    echo '<table'.$attrtext.'>';
     if ($heading) {
-        // orig echo '<thead><tr><td class="sideblockheading">'.$heading.'</td></tr></thead>';
         echo '<thead><tr><td class="sideblockheading">'.$heading;
-        if(isset($attributes['id'])) {
-            echo '<div class="hide-show">
-                <a href="javascript:containerDisplaySwitching('."'".$attributes['id']."'".');"\ >'."<img src=\"$CFG->pixpath/t/switch.gif\" alt=\"\" height=\"11\" width=\"11\" class=\"hide-show-image\" />".'</a>
-            </div>';
-        }
+        echo '<div class="hide-show"><a href="#" onclick="elementToggleHide(this, true, function(el) {return findParentNode(el, \'TABLE\', \'sideblock\'); } ); return false;"><img src="'.$CFG->pixpath.'/spacer.gif" alt="" height="11" width="11" class="hide-show-image" /></a></div>';
         echo '</td></tr></thead>';
     }
-    // orig echo '<tbody><tr><td class="sideblockmain">';
-    if(isset($attributes['id'])) {
-        echo '<tbody><tr><td class="sideblockmain"><div class="blockcontent" id="'.$attributes['id'].'_cont">';
-    }
-    else {
-        echo '<tbody><tr><td class="sideblockmain"><div class="blockcontent">';
-    }
+
+    echo '<tbody><tr><td class="sideblockmain">';
 }
 
 
 /**
  * Print table ending tags for a side block box.
  */
-function print_side_block_end($attributes = array()) {
-    echo '</div></td></tr></tbody></table>';
-    // js call to set block display state which is saved in cookie.
-    if(isset($attributes['id'])) {
-        echo "\n <script type='text/javascript'> <!-- //hide ";
-        echo "\n containerDisplaySet(\"".$attributes['id']."\");";
-        echo "\n // done hiding --> </script>";
-        echo "\n";
-    }
+function print_side_block_end($attributes) {
+    echo '</td></tr></tbody></table>';
+    // IE workaround: if I do it THIS way, it works! WTF?
+    echo '<script type="text/javascript"><!-- '."\n".'elementCookieHide("'.$attributes['id'].'"); '."\n".'--></script>';
 }
 
 

diff --git a/theme/standard/styles_layout.css b/theme/standard/styles_layout.css
index 5880aa4c5ba24be5fcea39601d4710cf0c147493..8985bd0569a02e410c1db50772c74e374aa73686 100644 (file)
--- a/theme/standard/styles_layout.css
+++ b/theme/standard/styles_layout.css
@@ -456,6 +456,17 @@ td.cal_event_description {
     border-top:1px solid;
 }
 
+.sideblock .sideblockheading .hide-show img {
+    background: url('../../pix/t/switch.gif') no-repeat bottom;
+}
+
+.sideblock.hidden .sideblockheading .hide-show img {
+    background: url('../../pix/t/down.gif') no-repeat bottom;
+}
+
+.sideblock.hidden .sideblockmain {
+    display: none;
+}
 
 /* sideblock weblib.php */
 #block_course_summary .sideblockmain {

diff --git a/theme/standard/styles_moz.css b/theme/standard/styles_moz.css
index 8dba94fe9e6950835c888b54f9f46ac08453ef70..e9d53f214600b148ba2a905d35850bfca7e72ae9 100644 (file)
--- a/theme/standard/styles_moz.css
+++ b/theme/standard/styles_moz.css
@@ -16,6 +16,10 @@
     -moz-border-radius-bottomright:20px;
 }
 
+#left-column .hidden, #right-column .hidden {
+    -moz-border-radius: 0px;
+}
+
 .generalbox {
     -moz-border-radius-topleft:3px;
     -moz-border-radius-topright:3px;