Commit | Line | Data |
---|---|---|
01e0e704 ARN |
1 | YUI.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 | ||
17 | setup_chooser_dialogue : function(bodycontent, headercontent, config) { | |
18 | // Set Default options | |
19 | var params = { | |
20 | bodyContent : bodycontent.get('innerHTML'), | |
21 | headerContent : headercontent.get('innerHTML'), | |
22 | visible : false, // Hide by default | |
23 | zindex : 100, // Display in front of other items | |
24 | lightbox : true, // This dialogue should be modal | |
25 | shim : true | |
26 | } | |
27 | ||
28 | // Override with additional options | |
29 | for (paramkey in config) { | |
30 | params[paramkey] = config[paramkey]; | |
31 | } | |
32 | ||
33 | // Create the overlay | |
34 | this.overlay = new M.core.dialogue(params); | |
35 | ||
36 | // Remove the template for the chooser | |
37 | bodycontent.remove(); | |
38 | headercontent.remove(); | |
39 | ||
40 | // Hide and then render the overlay | |
41 | this.overlay.hide(); | |
42 | this.overlay.render(); | |
43 | ||
44 | // Set useful links | |
45 | this.container = this.overlay.get('boundingBox').one('#choosercontainer'); | |
46 | this.options = this.container.all('.option input[type=radio]'); | |
47 | }, | |
48 | /** | |
49 | * Display the module chooser | |
50 | * | |
51 | * @param e Event Triggering Event | |
52 | * @return void | |
53 | */ | |
54 | display_chooser : function (e) { | |
55 | // Stop the default event actions before we proceed | |
56 | e.preventDefault(); | |
57 | ||
58 | var bb = this.overlay.get('boundingBox'); | |
59 | var dialogue = this.container.one('.alloptions'); | |
60 | ||
61 | // Set the dialogue height | |
62 | this.calculate_height(dialogue); | |
63 | ||
64 | // These will trigger a check_options call to display the correct help | |
65 | this.container.on('click', this.check_options, this); | |
66 | this.container.on('key_up', this.check_options, this); | |
67 | this.container.on('dblclick', function(e) { | |
68 | if (e.target.ancestor('div.option')) { | |
69 | this.check_options(); | |
70 | this.container.one('form').submit(); | |
71 | } | |
72 | }, this); | |
73 | ||
74 | // Hook onto the cancel button to hide the form | |
75 | this.container.one('#addcancel').on('click', this.cancel_popup, this); | |
76 | ||
77 | // Grab global keyup events and handle them | |
78 | Y.one('document').on('keyup', this.handle_key_press, this); | |
79 | ||
80 | // Add references to various elements we adjust | |
81 | this.jumplink = this.container.one('#jump'); | |
82 | this.submitbutton = this.container.one('#submitbutton'); | |
83 | ||
84 | // Disable the submit element until the user makes a selection | |
85 | this.submitbutton.set('disabled', 'true'); | |
86 | ||
87 | // Display the overlay | |
88 | this.overlay.show(); | |
89 | ||
90 | // Finally, focus the first radio element - this enables form selection via the keyboard | |
91 | this.container.one('.option input[type=radio]').focus(); | |
92 | ||
93 | // Trigger check_options to set the initial jumpurl | |
94 | this.check_options(); | |
95 | }, | |
96 | /** | |
97 | * Calculate the optimum height of the chooser dialogue | |
98 | * | |
99 | * This tries to set a sensible maximum and minimum to ensure that some options are always shown, and preferably | |
100 | * all, whilst fitting the box within the current viewport | |
101 | * | |
102 | * @param dialogue Y.Node The dialogue | |
103 | * @return void | |
104 | */ | |
105 | calculate_height : function(dialogue) { | |
106 | var winheight = this.overlay.get('boundingBox').get('winHeight'); | |
107 | ||
108 | // Try and set a sensible max-height -- this must be done before setting the top | |
109 | // Set a default height of 640px | |
110 | var newheight = this.get('maxheight'); | |
111 | if (winheight <= newheight) { | |
112 | // Deal with smaller window sizes | |
113 | if (winheight <= this.get('minheight')) { | |
114 | newheight = this.get('minheight'); | |
115 | } else { | |
116 | newheight = winheight; | |
117 | } | |
118 | } | |
119 | ||
120 | // Set a fixed position if the window is large enough | |
121 | if (newheight > this.get('minheight')) { | |
122 | this.overlay.get('boundingBox').setStyle('position', 'fixed'); | |
123 | } else { | |
124 | this.overlay.get('boundingBox').setStyle('position', 'absolute'); | |
125 | } | |
126 | ||
127 | // Take off 15px top and bottom for borders, plus 40px each for the title and button area before setting the | |
128 | // new max-height | |
129 | newheight = newheight - (15 + 15 + 40 + 40); | |
130 | dialogue.setStyle('max-height', newheight + 'px'); | |
131 | ||
132 | // Re-calculate the location now that we've changed the size | |
133 | this.overlay.centerDialogue(); | |
134 | }, | |
135 | handle_key_press : function(e) { | |
136 | if (e.keyCode == 27) { | |
137 | this.cancel_popup(e); | |
138 | } | |
139 | }, | |
140 | cancel_popup : function (e) { | |
141 | // Prevent normal form submission before hiding | |
142 | e.preventDefault(); | |
143 | this.hide(); | |
144 | }, | |
145 | hide : function() { | |
146 | // Detach the global keypress handler before hiding | |
147 | Y.one('document').detach('keyup', this.handle_key_press, this); | |
148 | this.container.detachAll(); | |
149 | this.overlay.hide(); | |
150 | }, | |
151 | check_options : function(e) { | |
152 | // Check which options are set, and change the parent class | |
153 | // to show/hide help as required | |
154 | this.options.each(function(thisoption) { | |
155 | var optiondiv = thisoption.get('parentNode').get('parentNode'); | |
156 | if (thisoption.get('checked')) { | |
157 | optiondiv.addClass('selected'); | |
158 | ||
159 | // Trigger any events for this option | |
160 | this.option_selected(thisoption); | |
161 | ||
162 | // Ensure that the form may be submitted | |
163 | this.submitbutton.removeAttribute('disabled'); | |
164 | ||
165 | // Ensure that the radio remains focus so that keyboard navigation is still possible | |
166 | thisoption.focus(); | |
167 | } else { | |
168 | optiondiv.removeClass('selected'); | |
169 | } | |
170 | }, this); | |
171 | }, | |
172 | option_selected : function(e) { | |
173 | } | |
174 | }, | |
175 | { | |
176 | NAME : 'moodle-core-chooserdialogue', | |
177 | ATTRS : { | |
178 | minheight : { | |
179 | value : 300 | |
180 | }, | |
181 | maxheight : { | |
182 | value : 660 | |
183 | } | |
184 | } | |
185 | }); | |
186 | M.core = M.core || {}; | |
187 | M.core.chooserdialogue = CHOOSERDIALOGUE; | |
188 | }, | |
189 | '@VERSION@', { | |
190 | requires:['base', 'overlay', 'moodle-enrol-notification'] | |
191 | } | |
192 | ); |