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;
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
M.block_course_overview_uwmoodle.TermSelector = function(Y) {
// Find the selector div in the document.
var selector = Y.one('#uwmm_terms');
// Find all the content nodes.
var contentnodes = Y.all('#uwmm_terms_content div.courselist');
var onClick = function(e) {
var content = Y.one('#'+e.currentTarget.get('id')+'_courses');
if (content) {
selector.all('.active').each(function(e) {e.removeClass('active');});
e.currentTarget.addClass('active'); // e.currentTarget === li
contentnodes.each(function(e) {e.addClass('hidden');});
content.removeClass('hidden');
// Stop the event's default behavior
e.preventDefault();
// Stop the event from bubbling up the DOM tree
e.stopPropagation();
}
};
selector.delegate('click', onClick, 'li');
};
M.block_course_overview_uwmoodle.termselector = function(Y) {
new M.block_course_overview_uwmoodle.TermSelector(Y);
};