mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-07-24 07:41:40 +02:00
Code Issues Projects Releases Wiki Activity

javascript MDL-21400 Revised CollapsibleRegion code

Browse Source
This commit is contained in:
Sam Hemelryk
2010-01-29 08:30:13 +00:00
parent 4b4b53a74e
commit 126590b781
1 changed files with 77 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
lib/javascript-static.js
View File

@@ -3,9 +3,10 @@
/**
* Add module to list of available modules that can be laoded from YUI.
* @param {Array} modules
*/
M.yui.add_module = function(modules) {
for (modname in modules) {
for (var modname in modules) {
M.yui.loader.modules[modname] = modules[modname];
}
};
@@ -18,6 +19,9 @@ M.util = {};
/**
* Returns url for images.
* @param {String} imagename
* @param {String} component
* @return {String}
*/
M.util.image_url = function(imagename, component) {
var url = M.cfg.wwwroot + '/theme/image.php?theme=' + M.cfg.theme + '&image=' + imagename;
@@ -39,10 +43,10 @@ M.util.create_UFO_object = function (eid, FO) {
/**
* Init a collapsible region, see print_collapsible_region in weblib.php
* @param Object YUI3 instance with all libraries loaded
* @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 String tooltip
* @param {YUI} Y YUI3 instance with all libraries loaded
* @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 {String} strtooltip
*/
M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
Y.use('anim', function(Y) {
@@ -51,69 +55,83 @@ M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
};
/**
* Oject to handle a collapsible region
* Object to handle a collapsible region : instantiate and forget styled object
*
* @class
* @constructor
* @param Object YUI3 instance with all libraries loaded
* @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 String tooltip
* @param {YUI} Y YUI3 instance with all libraries loaded
* @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 {String} strtooltip
*/
M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
this.Y = Y;
// Record the pref name
this.userpref = userpref;
this.collapsedicon = M.util.image_url('t/collapsed', 'moodle');
this.expandedicon = M.util.image_url('t/expanded', 'moodle');
// Find the divs in the document.
this.div = document.getElementById(id);
this.innerdiv = document.getElementById(id + '_sizer');
this.caption = document.getElementById(id + '_caption');
this.caption.title = strtooltip;
this.div = Y.one('#'+id);
// 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);
// Get the caption for the collapsible region
var caption = this.div.one('#'+id + '_caption');
caption.setAttribute('title', strtooltip);
// Create a link
var a = Y.Node.create('<a href="#"></a>');
// Create a local scoped lamba function to move nodes to a new link
var movenode = function(node){
node.remove();
a.append(node);
};
// Apply the lamba function on each of the captions child nodes
caption.get('children').each(movenode, this);
caption.append(a);
// Get the height of the div at this point before we shrink it if required
var height = this.div.get('offsetHeight');
if (this.div.hasClass('collapsed')) {
// Add the correct image and record the YUI node created in the process
this.icon = Y.Node.create('<img src="'+M.util.image_url('t/collapsed', 'moodle')+'" alt="" />');
// Shrink the div as it is collapsed by default
this.div.setStyle('height', caption.get('offsetHeight')+'px');
} else {
// Add the correct image and record the YUI node created in the process
this.icon = Y.Node.create('<img src="'+M.util.image_url('t/expanded', 'moodle')+'" alt="" />');
}
a.href = '#';
this.caption.appendChild(a);
a.append(this.icon);
// Create the animation.
this.animation = new this.Y.Anim({
var animation = new Y.Anim({
node: this.div,
duration: 0.3,
easing: Y.Easing.easeBoth
easing: Y.Easing.easeBoth,
to: {height:caption.get('offsetHeight')},
from: {height:height}
});
// Get to the right initial state.
if (this.div.className.match(/\bcollapsed\b/)) {
this.collapsed = true;
var region = this.Y.one(this.caption).get('region');
this.div.style.height = (region.bottom - region.top + 3) + 'px';
}
// Add the appropriate image.
this.icon = document.createElement('img');
this.icon.id = id + '_icon';
this.icon.alt = '';
if (this.collapsed) {
this.icon.src = this.collapsedicon;
} else {
this.icon.src = this.expandedicon;
}
a.appendChild(this.icon);
// Hook up the event handler.
this.Y.on('click', this.handle_click, a, this);
// Handler for the animation finishing.
this.animation.on('end', function() {
if (this.collapsed) {
this.div.className += ' collapsed';
animation.on('end', function() {
this.div.toggleClass('collapsed');
if (this.div.hasClass('collapsed')) {
this.icon.set('src', M.util.image_url('t/collapsed', 'moodle'));
} else {
this.icon.set('src', M.util.image_url('t/expanded', 'moodle'));
}
}, this);
// Hook up the event handler.
a.on('click', function(e, animation) {
e.preventDefault();
// Animate to the appropriate size.
if (animation.get('running')) {
animation.stop();
}
animation.set('reverse', this.div.hasClass('collapsed'));
// Update the user preference.
if (this.userpref) {
set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
}
animation.run();
}, this, animation);
};
/**
@@ -125,79 +143,27 @@ M.util.CollapsibleRegion.prototype.userpref = null;
/**
* The key divs that make up this
* @property div, innerdiv, captiondiv
* @type HTMLDivElement
* @property div
* @type Y.Node
*/
M.util.CollapsibleRegion.prototype.div = null;
M.util.CollapsibleRegion.prototype.innerdiv = null;
M.util.CollapsibleRegion.prototype.captiondiv = null;
/**
* The key divs that make up this
* @property icon
* @type HTMLImageElement
* @type Y.Node
*/
M.util.CollapsibleRegion.prototype.icon = null;
/**
* Whether the region is currently collapsed.
* @property collapsed
* @type Boolean
*/
M.util.CollapsibleRegion.prototype.collapsed = false;
/**
* @property animation
* @type Y.Anim
*/
M.util.CollapsibleRegion.prototype.animation = null;
/** When clicked, toggle the collapsed state, and trigger the animation. */
M.util.CollapsibleRegion.prototype.handle_click = function(e) {
// Toggle the state.
this.collapsed = !this.collapsed;
// Stop the click following the link.
e.preventDefault();
// Animate to the appropriate size.
if (this.animation.get('running')) {
this.animation.stop();
}
if (this.collapsed) {
var region = this.Y.one(this.caption).get('region');
var targetheight = region.bottom - region.top + 3;
} else {
var region = this.Y.one(this.innerdiv).get('region');
var targetheight = region.bottom - region.top + 2;
this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
}
this.animation.set('to', { height: targetheight });
this.animation.run();
// Set the appropriate icon.
if (this.collapsed) {
this.icon.src =this.collapsedicon;
} else {
this.icon.src = this.expandedicon;
}
// Update the user preference.
if (this.userpref) {
set_user_preference(this.userpref, this.collapsed);
}
};
//=== old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code ===
function launch_filemanager(options) {
Y.use('core_filemanager', function() {
var client_id = options.client_id;
// filemangers defined in lib/form/filemanager.js
if (!filemanagers[client_id]) {
filemanagers[client_id] = new M.core_filemanager(options);
}
var client_id = options.client_id;
// filemangers defined in lib/form/filemanager.js
if (!filemanagers[client_id]) {
filemanagers[client_id] = new M.core_filemanager(options);
}
});
}