Newer
Older
Matt Petro
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
M.block_course_overview_uwmoodle = {}
/**
* Init a collapsible region, see print_collapsible_region in weblib.php
* @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.block_course_overview_uwmoodle.collapsible = function(Y, id, userpref, strtooltip) {
if (userpref) {
M.block_course_overview_uwmoodle.userpref = true;
}
Y.use('anim', function(Y) {
new M.block_course_overview_uwmoodle.CollapsibleRegion(Y, id, userpref, strtooltip);
});
};
/**
* Object to handle a collapsible region : instantiate and forget styled object
*
* @class
* @constructor
* @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.block_course_overview_uwmoodle.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
// Record the pref name
this.userpref = userpref;
// Find the divs in the document.
this.div = Y.one('#'+id);
// 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.prepend(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')) {
// Shrink the div as it is collapsed by default
this.div.setStyle('height', caption.get('offsetHeight')+'px');
}
// Create the animation.
var animation = new Y.Anim({
node: this.div,
duration: 0.3,
easing: Y.Easing.easeBoth,
to: {height:caption.get('offsetHeight')},
from: {height:height}
});
// Handler for the animation finishing.
animation.on('end', function() {
this.div.toggleClass('collapsed');
}, this);
// Hook up the event handler.
caption.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) {
M.util.set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
}
animation.run();
}, this, animation);
};
M.block_course_overview_uwmoodle.userpref = false;
/**
* The user preference that stores the state of this box.
* @property userpref
* @type String
*/
M.block_course_overview_uwmoodle.CollapsibleRegion.prototype.userpref = null;
/**
* The key divs that make up this
* @property div
* @type Y.Node
*/
M.block_course_overview_uwmoodle.CollapsibleRegion.prototype.div = null;
/**
* The key divs that make up this
* @property icon
* @type Y.Node
*/
M.block_course_overview_uwmoodle.CollapsibleRegion.prototype.icon = null;