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