weblib: MDL-17085 a function to print a collapsible region of the UI, with the collapsed state stored in a user_perference.

2008-11-03 05:04:23 +00:00
parent 71ef682259
commit f2eb500238
9 changed files with 198 additions and 2 deletions
@@ -592,4 +592,127 @@ function set_user_preference(name, value) {

 function moodle_initialise_body() {
    document.body.className += ' jsenabled';
-}
+}
+
+/**
+ * Oject to handle a collapsible region, see print_collapsible_region in weblib.php
+ * @constructor
+ * @param String id the HTML id for the div.
+ * @param String userpref the user preference that records the state of this box. false if none.
+ * @param Boolean startcollapsed whether the box should start collapsed.
+ */
+function collapsible_region(id, userpref, strtooltip) {
+    // Record the pref name
+    this.userpref = userpref;
+
+    // Find the divs in the document.
+    this.div = document.getElementById(id);
+    this.innerdiv = document.getElementById(id + '_inner');
+    this.caption = document.getElementById(id + '_caption');
+    this.caption.title = strtooltip;
+
+    // Put the contents of caption in an <a> to make it focussable.
+    var a = document.createElement('a');
+    while (e = this.caption.firstChild) {
+        a.appendChild(e);
+    }
+    a.href = '#';
+    this.caption.appendChild(a);
+
+    // Create the animation.
+    this.animation = new YAHOO.util.Anim(this.div, {}, 0.3, YAHOO.util.Easing.easeBoth);
+
+    // Get to the right initial state.
+    if (this.div.className.match(/\bcollapsed\b/)) {
+        this.collapsed = true;
+        var region = YAHOO.util.Region.getRegion(this.caption);
+        this.div.style.height = (region.bottom - region.top) + 'px';
+    }
+
+    // Add the appropriate image.
+    this.icon = document.createElement('img');
+    this.icon.id = id + '_icon';
+    this.icon.alt = '';
+    if (this.collapsed) {
+        this.icon.src = moodle_cfg.pixpath + '/t/collapsed.png';
+    } else {
+        this.icon.src = moodle_cfg.pixpath + '/t/expanded.png';
+    }
+    this.caption.appendChild(this.icon);
+
+    // Hook up the event handler.
+    self = this;
+    YAHOO.util.Event.addListener(this.caption, 'click', function(e) {self.handle_click(e);});
+    YAHOO.util.Event.addListener(a, 'click', function(e) {self.handle_click(e);});
+}
+
+/**
+ * The user preference that stores the state of this box.
+ * @property userpref, innerdiv, captiondiv
+ * @type String
+ */
+collapsible_region.prototype.userpref = null;
+
+/**
+ * The key divs that make up this 
+ * @property div, innerdiv, captiondiv
+ * @type HTMLDivElement
+ */
+collapsible_region.prototype.div = null;
+collapsible_region.prototype.innerdiv = null;
+collapsible_region.prototype.captiondiv = null;
+
+/**
+ * The key divs that make up this 
+ * @property icon
+ * @type HTMLImageElement
+ */
+collapsible_region.prototype.icon = null;
+
+/**
+ * Whether the region is currently collapsed.
+ * @property collapsed
+ * @type Boolean
+ */
+collapsible_region.prototype.collapsed = false;
+
+/**
+ * @property animation
+ * @type YAHOO.util.Anim
+ */
+collapsible_region.prototype.animation = null;
+
+collapsible_region.prototype.handle_click = function(e) {
+    // Toggle the state.
+    this.collapsed = !this.collapsed;
+
+    // Stop the click following the link.
+    YAHOO.util.Event.stopEvent(e);
+
+    // Animate to the appropriate size.
+    if (this.animation.isAnimated()) {
+        this.animation.stop();
+    }
+    if (this.collapsed) {
+        var targetel = this.caption;
+        this.div.className += ' collapsed';
+    } else {
+        var targetel = this.innerdiv;
+        this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
+    }
+    var region = YAHOO.util.Region.getRegion(targetel);
+    this.animation.attributes.height = { to: region.bottom - region.top, unit: 'px' };
+    this.animation.animate();
+
+    // Set the appropriate icon.
+    if (this.collapsed) {
+        this.icon.src = moodle_cfg.pixpath + '/t/collapsed.png';
+    } else {
+        this.icon.src = moodle_cfg.pixpath + '/t/expanded.png';
+    }
+
+    // Update the user preference.
+    if (this.userpref) {
+        set_user_preference(this.userpref, this.collapsed);
+    }
+}