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

MDL-21400 collapsible region fixed and converted to YUI3

Browse Source
This commit is contained in:
Petr Skoda
2010-01-24 00:05:37 +00:00
parent dd3d051e44
commit fc367afb6c
2 changed files with 111 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
lib/javascript-static.js
View File

@@ -9,31 +9,31 @@ var Y = null;
* Add module to list of available modules that can be laoded from YUI.
*/
M.yui.add_module = function(modules) {
for (modname in modules) {
M.yui.loader.modules[modname] = modules[modname];
}
for (modname in modules) {
M.yui.loader.modules[modname] = modules[modname];
}
};
/**
* Various utility functions
*/
M.util = {
/**
* Returns url for images.
*/
image_url: function(imagename, component) {
var url = M.cfg.wwwroot + '/theme/image.php?theme=' + M.cfg.theme + '&image=' + imagename;
if (M.cfg.themerev > 0) {
url = url + '&rev=' + M.cfg.themerev;
}
if (component != '' && component != 'moodle' && component != 'core') {
url = url + '&component=' + component;
}
return url;
}
/**
* Returns url for images.
*/
image_url: function(imagename, component) {
var url = M.cfg.wwwroot + '/theme/image.php?theme=' + M.cfg.theme + '&image=' + imagename;
if (M.cfg.themerev > 0) {
url = url + '&rev=' + M.cfg.themerev;
}
if (component != '' && component != 'moodle' && component != 'core') {
url = url + '&component=' + component;
}
return url;
}
}
@@ -965,54 +965,63 @@ function moodle_initialise_body() {
* @param Boolean startcollapsed whether the box should start collapsed.
*/
function collapsible_region(id, userpref, strtooltip, collapsedicon, expandedicon) {
// Record the pref name
this.userpref = userpref;
this.collapsedicon = collapsedicon;
this.expandedicon = expandedicon;
var context = this;
YUI(M.yui.loader).use('anim', function(Y) {
// Record the pref name
context.userpref = userpref;
context.collapsedicon = collapsedicon;
context.expandedicon = expandedicon;
// Find the divs in the document.
context.div = document.getElementById(id);
context.innerdiv = document.getElementById(id + '_sizer');
context.caption = document.getElementById(id + '_caption');
context.caption.title = strtooltip;
// Put the contents of caption in an <a> to make it focussable.
var a = document.createElement('a');
while (e = context.caption.firstChild) {
a.appendChild(e);
}
a.href = '#';
context.caption.appendChild(a);
// Create the animation.
context.animation = new Y.Anim({
node: context.div,
duration: 0.3,
easing: Y.Easing.easeBoth
});
// Get to the right initial state.
if (context.div.className.match(/\bcollapsed\b/)) {
context.collapsed = true;
var region = Y.one(context.caption).get('region');
context.div.style.height = (region.bottom - region.top + 3) + 'px';
}
// Add the appropriate image.
context.icon = document.createElement('img');
context.icon.id = id + '_icon';
context.icon.alt = '';
if (context.collapsed) {
context.icon.src = context.collapsedicon;
} else {
context.icon.src = context.expandedicon;
}
a.appendChild(context.icon);
// 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;
// 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 self = this;
setTimeout(function() {
var region = YAHOO.util.Region.getRegion(self.caption);
self.div.style.height = (region.bottom - region.top + 3) + 'px';
}, 10);
}
// 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.
YAHOO.util.Event.addListener(a, 'click', this.handle_click, null, this);
// Handler for the animation finishing.
this.animation.onComplete.subscribe(function() {self.handle_animation_complete();});
// Hook up the event handler.
Y.on('click', context.handle_click, a, context);
// Handler for the animation finishing.
context.animation.on('end', function() {
if (this.collapsed) {
this.div.className += ' collapsed';
}
}, context);
});
}
/**
@@ -1047,51 +1056,48 @@ collapsible_region.prototype.collapsed = false;
/**
* @property animation
* @type YAHOO.util.Anim
* @type Y.Anim
*/
collapsible_region.prototype.animation = null;
/** When clicked, toggle the collapsed state, and trigger the animation. */
collapsible_region.prototype.handle_click = function(e) {
// Toggle the state.
this.collapsed = !this.collapsed;
var context = this;
YUI(M.yui.loader).use('anim', function(Y) {
// Toggle the state.
context.collapsed = !context.collapsed;
// Stop the click following the link.
YAHOO.util.Event.stopEvent(e);
// Stop the click following the link.
e.preventDefault();
// Animate to the appropriate size.
if (context.animation.get('running')) {
context.animation.stop();
}
if (context.collapsed) {
var region = Y.one(context.caption).get('region');
var targetheight = region.bottom - region.top + 3;
} else {
var region = Y.one(context.innerdiv).get('region');
var targetheight = region.bottom - region.top + 2;
context.div.className = context.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
}
context.animation.set('to', { height: targetheight });
context.animation.run();
// Animate to the appropriate size.
if (this.animation.isAnimated()) {
this.animation.stop();
}
if (this.collapsed) {
var region = YAHOO.util.Region.getRegion(this.caption);
var targetheight = region.bottom - region.top + 3;
} else {
var region = YAHOO.util.Region.getRegion(this.innerdiv);
var targetheight = region.bottom - region.top + 2;
this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
}
this.animation.attributes.height = { to: targetheight, unit: 'px' };
this.animation.animate();
// 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);
}
}
/** When when the animation is finished, add the collapsed class name in relevant. */
collapsible_region.prototype.handle_animation_complete = function() {
if (this.collapsed) {
this.div.className += ' collapsed';
}
// Set the appropriate icon.
if (context.collapsed) {
context.icon.src =context.collapsedicon;
} else {
context.icon.src = context.expandedicon;
}
// Update the user preference.
if (context.userpref) {
set_user_preference(context.userpref, context.collapsed);
}
});
}
/**
@@ -1273,7 +1279,7 @@ function init_help_icons() {
// remove all titles, they would obscure the YUI tooltip
for (var i = 0; i < iconspans.length; i++) {
iconspans[i].getElementsByTagName('a')[0].title = '';
iconspans[i].getElementsByTagName('a')[0].title = '';
}
tooltip.contextTriggerEvent.subscribe(