MDL-30899 modchooser Changing from overlay to panel references
[moodle.git] / lib / yui / chooserdialogue / chooserdialogue.js
1 YUI.add('moodle-core-chooserdialogue', function(Y) {
3     var CHOOSERDIALOGUE = function() {
4         CHOOSERDIALOGUE.superclass.constructor.apply(this, arguments);
5     }
7     Y.extend(CHOOSERDIALOGUE, Y.Base, {
8         // The panel widget
9         panel: null,
11         // The submit button - we disable this until an element is set
12         submitbutton : null,
14         // The chooserdialogue container
15         container : null,
17         // Any event listeners we may need to cancel later
18         listenevents : [],
20         // The initial overflow setting
21         initialoverflow : '',
23         bodycontent : null,
24         headercontent : null,
25         instanceconfig : null,
27         setup_chooser_dialogue : function(bodycontent, headercontent, config) {
28             this.bodycontent = bodycontent;
29             this.headercontent = headercontent;
30             this.instanceconfig = config;
31         },
33         prepare_chooser : function () {
34             if (this.overlay) {
35                 return;
36             }
38             // Set Default options
39             var params = {
40                 bodyContent : this.bodycontent.get('innerHTML'),
41                 headerContent : this.headercontent.get('innerHTML'),
42                 width : '540px',
43                 draggable : true,
44                 visible : false, // Hide by default
45                 zindex : 100, // Display in front of other items
46                 lightbox : true // This dialogue should be modal
47             };
49             // Override with additional options
50             for (paramkey in this.instanceconfig) {
51               params[paramkey] = this.instanceconfig[paramkey];
52             }
54             // Create the panel
55             this.panel = new M.core.dialogue(params);
57             // Remove the template for the chooser
58             this.bodycontent.remove();
59             this.headercontent.remove();
61             // Hide and then render the panel
62             this.panel.hide();
63             this.panel.render();
65             // Set useful links
66             this.container = this.panel.get('boundingBox').one('.choosercontainer');
67             this.options = this.container.all('.option input[type=radio]');
69             // Add the chooserdialogue class to the container for styling
70             this.panel.get('boundingBox').addClass('chooserdialogue');
71         },
73         /**
74          * Display the module chooser
75          *
76          * @param e Event Triggering Event
77          * @return void
78          */
79         display_chooser : function (e) {
80             this.prepare_chooser();
82             // Stop the default event actions before we proceed
83             e.preventDefault();
85             var bb = this.panel.get('boundingBox');
86             var dialogue = this.container.one('.alloptions');
88             // Get the overflow setting when the chooser was opened - we
89             // may need this later
90             if (Y.UA.ie > 0) {
91                 this.initialoverflow = Y.one('html').getStyle('overflow');
92             } else {
93                 this.initialoverflow = Y.one('body').getStyle('overflow');
94             }
96             var thisevent;
98             // This will detect a change in orientation and retrigger centering
99             thisevent = Y.one('document').on('orientationchange', function(e) {
100                 this.center_dialogue(dialogue);
101             }, this);
102             this.listenevents.push(thisevent);
104             // Detect window resizes (most browsers)
105             thisevent = Y.one('window').on('resize', function(e) {
106                 this.center_dialogue(dialogue);
107             }, this);
108             this.listenevents.push(thisevent);
110             // These will trigger a check_options call to display the correct help
111             thisevent = this.container.on('click', this.check_options, this);
112             this.listenevents.push(thisevent);
113             thisevent = this.container.on('key_up', this.check_options, this);
114             this.listenevents.push(thisevent);
115             thisevent = this.container.on('dblclick', function(e) {
116                 if (e.target.ancestor('div.option')) {
117                     this.check_options();
119                     // Prevent duplicate submissions
120                     this.submitbutton.setAttribute('disabled', 'disabled');
121                     this.options.setAttribute('disabled', 'disabled');
122                     this.cancel_listenevents();
124                     this.container.one('form').submit();
125                 }
126             }, this);
127             this.listenevents.push(thisevent);
129             this.container.one('form').on('submit', function(e) {
130                 // Prevent duplicate submissions on submit
131                 this.submitbutton.setAttribute('disabled', 'disabled');
132                 this.options.setAttribute('disabled', 'disabled');
133                 this.cancel_listenevents();
134             }, this);
136             // Hook onto the cancel button to hide the form
137             thisevent = this.container.one('.addcancel').on('click', this.cancel_popup, this);
138             this.listenevents.push(thisevent);
140             // Hide will be managed by cancel_popup after restoring the body overflow
141             thisevent = bb.one('button.closebutton').on('click', this.cancel_popup, this);
142             this.listenevents.push(thisevent);
144             // Grab global keyup events and handle them
145             thisevent = Y.one('document').on('keyup', this.handle_key_press, this);
146             this.listenevents.push(thisevent);
148             // Add references to various elements we adjust
149             this.jumplink     = this.container.one('.jump');
150             this.submitbutton = this.container.one('.submitbutton');
152             // Disable the submit element until the user makes a selection
153             this.submitbutton.set('disabled', 'true');
155             // Ensure that the options are shown
156             this.options.removeAttribute('disabled');
158             // Display the panel
159             this.panel.show();
161             // Re-centre the dialogue after we've shown it.
162             this.center_dialogue(dialogue);
164             // Finally, focus the first radio element - this enables form selection via the keyboard
165             this.container.one('.option input[type=radio]').focus();
167             // Trigger check_options to set the initial jumpurl
168             this.check_options();
169         },
171         /**
172          * Cancel any listen events in the listenevents queue
173          *
174          * Several locations add event handlers which should only be called before the form is submitted. This provides
175          * a way of cancelling those events.
176          *
177          * @return void
178          */
179         cancel_listenevents : function () {
180             // Detach all listen events to prevent duplicate triggers
181             var thisevent;
182             while (thisevent = this.listenevents.shift()) {
183                 thisevent.detach();
184             }
185         },
187         /**
188          * Calculate the optimum height of the chooser dialogue
189          *
190          * This tries to set a sensible maximum and minimum to ensure that some options are always shown, and preferably
191          * all, whilst fitting the box within the current viewport.
192          *
193          * @param dialogue Y.Node The dialogue
194          * @return void
195          */
196         center_dialogue : function(dialogue) {
197             var bb = this.panel.get('boundingBox');
199             var winheight = bb.get('winHeight');
200             var winwidth = bb.get('winWidth');
201             var offsettop = 0;
203             // Try and set a sensible max-height -- this must be done before setting the top
204             // Set a default height of 640px
205             var newheight = this.get('maxheight');
206             if (winheight <= newheight) {
207                 // Deal with smaller window sizes
208                 if (winheight <= this.get('minheight')) {
209                     newheight = this.get('minheight');
210                 } else {
211                     newheight = winheight;
212                 }
213             }
215             // Set a fixed position if the window is large enough
216             if (newheight > this.get('minheight')) {
217                 bb.setStyle('position', 'fixed');
218                 // Disable the page scrollbars
219                 if (Y.UA.ie > 0) {
220                     Y.one('html').setStyle('overflow', 'hidden');
221                 } else {
222                     Y.one('body').setStyle('overflow', 'hidden');
223                 }
224             } else {
225                 bb.setStyle('position', 'absolute');
226                 offsettop = Y.one('window').get('scrollTop');
227                 // Ensure that the page scrollbars are enabled
228                 if (Y.UA.ie > 0) {
229                     Y.one('html').setStyle('overflow', this.initialoverflow);
230                 } else {
231                     Y.one('body').setStyle('overflow', this.initialoverflow);
232                 }
233             }
235             // Take off 15px top and bottom for borders, plus 40px each for the title and button area before setting the
236             // new max-height
237             var totalheight = newheight;
238             newheight = newheight - (15 + 15 + 40 + 40);
239             dialogue.setStyle('max-height', newheight + 'px');
240             dialogue.setStyle('height', newheight + 'px');
242             // Re-calculate the location now that we've changed the size
243             var dialoguetop = Math.max(12, ((winheight - totalheight) / 2)) + offsettop;
245             // We need to set the height for the yui3-widget - can't work
246             // out what we're setting at present -- shoud be the boudingBox
247             bb.setStyle('top', dialoguetop + 'px');
249             // Calculate the left location of the chooser
250             // We don't set a minimum width in the same way as we do height as the width would be far lower than the
251             // optimal width for moodle anyway.
252             var dialoguewidth = bb.get('offsetWidth');
253             var dialogueleft = (winwidth - dialoguewidth) / 2;
254             bb.setStyle('left', dialogueleft + 'px');
255         },
257         handle_key_press : function(e) {
258             if (e.keyCode == 27) {
259                 this.cancel_popup(e);
260             }
261         },
263         cancel_popup : function (e) {
264             // Prevent normal form submission before hiding
265             e.preventDefault();
266             this.hide();
267         },
269         hide : function() {
270             // Cancel all listen events
271             this.cancel_listenevents();
273             // Re-enable the page scrollbars
274             if (Y.UA.ie > 0) {
275                 Y.one('html').setStyle('overflow', this.initialoverflow);
276             } else {
277                 Y.one('body').setStyle('overflow', this.initialoverflow);
278             }
280             this.container.detachAll();
281             this.panel.hide();
282         },
284         check_options : function(e) {
285             // Check which options are set, and change the parent class
286             // to show/hide help as required
287             this.options.each(function(thisoption) {
288                 var optiondiv = thisoption.get('parentNode').get('parentNode');
289                 if (thisoption.get('checked')) {
290                     optiondiv.addClass('selected');
292                     // Trigger any events for this option
293                     this.option_selected(thisoption);
295                     // Ensure that the form may be submitted
296                     this.submitbutton.removeAttribute('disabled');
298                     // Ensure that the radio remains focus so that keyboard navigation is still possible
299                     thisoption.focus();
300                 } else {
301                     optiondiv.removeClass('selected');
302                 }
303             }, this);
304         },
306         option_selected : function(e) {
307         }
308     },
309     {
310         NAME : 'moodle-core-chooserdialogue',
311         ATTRS : {
312             minheight : {
313                 value : 300
314             },
315             maxheight : {
316                 value : 660
317             }
318         }
319     });
320     M.core = M.core || {};
321     M.core.chooserdialogue = CHOOSERDIALOGUE;
322 },
323 '@VERSION@', {
324     requires:['base', 'panel', 'moodle-core-notification']
326 );