mirror of
https://github.com/moodle/moodle.git
synced 2025-08-04 16:36:37 +02:00
MDL-21400 collapsible_region moved to M, using CamelCase for JS classes because it is otehrwise extremely hard to actually know what is instance and what is class + switched to js_init_call()
This commit is contained in:
Petr Skoda
parent
0503954afd
commit
38224dcb60
2 changed files with 173 additions and 173 deletions
|
|
@ -1,10 +1,6 @@
|
|||
// Miscellaneous core Javascript functions for Moodle
|
||||
// Global M object is initilised in inline javascript
|
||||
|
||||
// Global Y instance, inilialised much later in page footer,
|
||||
// it is usually better to initialise own Y by: "YUI(M.yui.loader).use('......', function(Y) { .... });
|
||||
var Y = null;
|
||||
|
||||
/**
|
||||
* Add module to list of available modules that can be laoded from YUI.
|
||||
*/
|
||||
|
|
@ -14,28 +10,182 @@ M.yui.add_module = function(modules) {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
M.util = {};
|
||||
|
||||
/**
|
||||
* Returns url for images.
|
||||
*/
|
||||
M.util.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;
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
|
||||
Y.use('anim', function(Y) {
|
||||
new M.util.CollapsibleRegion(Y, id, userpref, strtooltip);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Oject to handle a collapsible region
|
||||
* @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
|
||||
*/
|
||||
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;
|
||||
|
||||
// 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 this.Y.Anim({
|
||||
node: this.div,
|
||||
duration: 0.3,
|
||||
easing: Y.Easing.easeBoth
|
||||
});
|
||||
|
||||
// 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';
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
/**
|
||||
* The user preference that stores the state of this box.
|
||||
* @property userpref
|
||||
* @type String
|
||||
*/
|
||||
M.util.CollapsibleRegion.prototype.userpref = null;
|
||||
|
||||
/**
|
||||
* The key divs that make up this
|
||||
* @property div, innerdiv, captiondiv
|
||||
* @type HTMLDivElement
|
||||
*/
|
||||
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
|
||||
*/
|
||||
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() {
|
||||
|
|
@ -47,8 +197,6 @@ function launch_filemanager(options) {
|
|||
});
|
||||
}
|
||||
|
||||
// === old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code ===
|
||||
|
||||
function popupchecker(msg) {
|
||||
var testwindow = window.open('', '', 'width=1,height=1,left=0,top=0,scrollbars=no');
|
||||
if (!testwindow) {
|
||||
|
|
@ -953,152 +1101,6 @@ 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, collapsedicon, 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);
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The user preference that stores the state of this box.
|
||||
* @property userpref
|
||||
* @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 Y.Anim
|
||||
*/
|
||||
collapsible_region.prototype.animation = null;
|
||||
|
||||
/** When clicked, toggle the collapsed state, and trigger the animation. */
|
||||
collapsible_region.prototype.handle_click = function(e) {
|
||||
var context = this;
|
||||
|
||||
YUI(M.yui.loader).use('anim', function(Y) {
|
||||
// Toggle the state.
|
||||
context.collapsed = !context.collapsed;
|
||||
|
||||
// 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();
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Oject to handle expanding and collapsing blocks when an icon is clicked on.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue