Merge branch 'wip-MDL-33661-master' of https://github.com/barbararamiro/moodle
[moodle.git] / lib / yui / chooserdialogue / chooserdialogue.js
CommitLineData
01e0e704
ARN
1YUI.add('moodle-core-chooserdialogue', function(Y) {
2
3 var CHOOSERDIALOGUE = function() {
4 CHOOSERDIALOGUE.superclass.constructor.apply(this, arguments);
5 }
6
7 Y.extend(CHOOSERDIALOGUE, Y.Base, {
8 // The overlay widget
9 overlay: null,
10
11 // The submit button - we disable this until an element is set
12 submitbutton : null,
13
14 // The chooserdialogue container
15 container : null,
16
d9bd472b
ARN
17 // Any event listeners we may need to cancel later
18 listenevents : [],
19
01e0e704
ARN
20 setup_chooser_dialogue : function(bodycontent, headercontent, config) {
21 // Set Default options
22 var params = {
23 bodyContent : bodycontent.get('innerHTML'),
24 headerContent : headercontent.get('innerHTML'),
984ec46e 25 draggable : true,
01e0e704
ARN
26 visible : false, // Hide by default
27 zindex : 100, // Display in front of other items
28 lightbox : true, // This dialogue should be modal
29 shim : true
30 }
31
32 // Override with additional options
33 for (paramkey in config) {
34 params[paramkey] = config[paramkey];
35 }
36
37 // Create the overlay
38 this.overlay = new M.core.dialogue(params);
39
40 // Remove the template for the chooser
41 bodycontent.remove();
42 headercontent.remove();
43
44 // Hide and then render the overlay
45 this.overlay.hide();
46 this.overlay.render();
47
48 // Set useful links
255dd8d1 49 this.container = this.overlay.get('boundingBox').one('.choosercontainer');
01e0e704 50 this.options = this.container.all('.option input[type=radio]');
255dd8d1
ARN
51
52 // Add the chooserdialogue class to the container for styling
53 this.overlay.get('boundingBox').addClass('chooserdialogue');
01e0e704 54 },
d9bd472b 55
01e0e704
ARN
56 /**
57 * Display the module chooser
58 *
59 * @param e Event Triggering Event
60 * @return void
61 */
62 display_chooser : function (e) {
63 // Stop the default event actions before we proceed
64 e.preventDefault();
65
66 var bb = this.overlay.get('boundingBox');
67 var dialogue = this.container.one('.alloptions');
68
d9bd472b
ARN
69 var thisevent;
70
01e0e704 71 // These will trigger a check_options call to display the correct help
d9bd472b
ARN
72 thisevent = this.container.on('click', this.check_options, this);
73 this.listenevents.push(thisevent);
74 thisevent = this.container.on('key_up', this.check_options, this);
75 this.listenevents.push(thisevent);
76 thisevent = this.container.on('dblclick', function(e) {
01e0e704
ARN
77 if (e.target.ancestor('div.option')) {
78 this.check_options();
d9bd472b
ARN
79
80 // Prevent duplicate submissions
81 this.submitbutton.setAttribute('disabled', 'disabled');
82 this.options.setAttribute('disabled', 'disabled');
83 this.cancel_listenevents();
84
01e0e704
ARN
85 this.container.one('form').submit();
86 }
87 }, this);
d9bd472b
ARN
88 this.listenevents.push(thisevent);
89
90 this.container.one('form').on('submit', function(e) {
91 // Prevent duplicate submissions on submit
92 this.submitbutton.setAttribute('disabled', 'disabled');
93 this.options.setAttribute('disabled', 'disabled');
94 this.cancel_listenevents();
95 }, this);
01e0e704
ARN
96
97 // Hook onto the cancel button to hide the form
98 this.container.one('#addcancel').on('click', this.cancel_popup, this);
99
100 // Grab global keyup events and handle them
101 Y.one('document').on('keyup', this.handle_key_press, this);
102
103 // Add references to various elements we adjust
104 this.jumplink = this.container.one('#jump');
105 this.submitbutton = this.container.one('#submitbutton');
106
107 // Disable the submit element until the user makes a selection
108 this.submitbutton.set('disabled', 'true');
109
d9bd472b
ARN
110 // Ensure that the options are shown
111 this.options.removeAttribute('disabled');
112
01e0e704
ARN
113 // Display the overlay
114 this.overlay.show();
115
af75421c
ARN
116 // Re-centre the dialogue after we've shown it.
117 this.center_dialogue(dialogue);
118
01e0e704
ARN
119 // Finally, focus the first radio element - this enables form selection via the keyboard
120 this.container.one('.option input[type=radio]').focus();
121
122 // Trigger check_options to set the initial jumpurl
123 this.check_options();
124 },
d9bd472b
ARN
125
126 /**
127 * Cancel any listen events in the listenevents queue
128 *
129 * Several locations add event handlers which should only be called before the form is submitted. This provides
130 * a way of cancelling those events.
131 *
132 * @return void
133 */
134 cancel_listenevents : function () {
135 // Detach all listen events to prevent duplicate triggers
136 var thisevent;
137 while (thisevent = this.listenevents.shift()) {
138 thisevent.detach();
139 }
140 },
141
01e0e704
ARN
142 /**
143 * Calculate the optimum height of the chooser dialogue
144 *
145 * This tries to set a sensible maximum and minimum to ensure that some options are always shown, and preferably
d9bd472b 146 * all, whilst fitting the box within the current viewport.
01e0e704
ARN
147 *
148 * @param dialogue Y.Node The dialogue
149 * @return void
150 */
af75421c
ARN
151 center_dialogue : function(dialogue) {
152 var bb = this.overlay.get('boundingBox');
153
154 var winheight = bb.get('winHeight');
155 var offsettop = 0;
01e0e704
ARN
156
157 // Try and set a sensible max-height -- this must be done before setting the top
158 // Set a default height of 640px
159 var newheight = this.get('maxheight');
160 if (winheight <= newheight) {
161 // Deal with smaller window sizes
162 if (winheight <= this.get('minheight')) {
163 newheight = this.get('minheight');
164 } else {
165 newheight = winheight;
166 }
167 }
168
169 // Set a fixed position if the window is large enough
170 if (newheight > this.get('minheight')) {
af75421c 171 bb.setStyle('position', 'fixed');
01e0e704 172 } else {
af75421c
ARN
173 bb.setStyle('position', 'absolute');
174 offsettop = Y.one('window').get('scrollTop');
01e0e704
ARN
175 }
176
177 // Take off 15px top and bottom for borders, plus 40px each for the title and button area before setting the
178 // new max-height
af75421c 179 var totalheight = newheight;
01e0e704
ARN
180 newheight = newheight - (15 + 15 + 40 + 40);
181 dialogue.setStyle('max-height', newheight + 'px');
af75421c 182 dialogue.setStyle('height', newheight + 'px');
01e0e704
ARN
183
184 // Re-calculate the location now that we've changed the size
af75421c
ARN
185 var dialoguetop = Math.max(12, ((winheight - totalheight) / 2)) + offsettop;
186
187 // We need to set the height for the yui3-widget - can't work
188 // out what we're setting at present -- shoud be the boudingBox
189 bb.setStyle('top', dialoguetop + 'px');
01e0e704 190 },
d9bd472b 191
01e0e704
ARN
192 handle_key_press : function(e) {
193 if (e.keyCode == 27) {
194 this.cancel_popup(e);
195 }
196 },
d9bd472b 197
01e0e704
ARN
198 cancel_popup : function (e) {
199 // Prevent normal form submission before hiding
200 e.preventDefault();
201 this.hide();
202 },
d9bd472b 203
01e0e704
ARN
204 hide : function() {
205 // Detach the global keypress handler before hiding
206 Y.one('document').detach('keyup', this.handle_key_press, this);
207 this.container.detachAll();
208 this.overlay.hide();
209 },
d9bd472b 210
01e0e704
ARN
211 check_options : function(e) {
212 // Check which options are set, and change the parent class
213 // to show/hide help as required
214 this.options.each(function(thisoption) {
215 var optiondiv = thisoption.get('parentNode').get('parentNode');
216 if (thisoption.get('checked')) {
217 optiondiv.addClass('selected');
218
219 // Trigger any events for this option
220 this.option_selected(thisoption);
221
222 // Ensure that the form may be submitted
223 this.submitbutton.removeAttribute('disabled');
224
225 // Ensure that the radio remains focus so that keyboard navigation is still possible
226 thisoption.focus();
227 } else {
228 optiondiv.removeClass('selected');
229 }
230 }, this);
231 },
d9bd472b 232
01e0e704
ARN
233 option_selected : function(e) {
234 }
235 },
236 {
237 NAME : 'moodle-core-chooserdialogue',
238 ATTRS : {
239 minheight : {
240 value : 300
241 },
242 maxheight : {
243 value : 660
244 }
245 }
246 });
247 M.core = M.core || {};
248 M.core.chooserdialogue = CHOOSERDIALOGUE;
249},
250'@VERSION@', {
251 requires:['base', 'overlay', 'moodle-enrol-notification']
252}
253);