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