MDL-39851 filepicker: Fix for toolbar display wrapping on small screens
[moodle.git] / lib / yui / build / moodle-core-notification-dialogue / moodle-core-notification-dialogue-debug.js
CommitLineData
78686995
AN
1YUI.add('moodle-core-notification-dialogue', function (Y, NAME) {
2
3var DIALOGUE_PREFIX,
4 BASE,
5 COUNT,
6 CONFIRMYES,
7 CONFIRMNO,
8 TITLE,
9 QUESTION,
10 CSS;
11
12DIALOGUE_PREFIX = 'moodle-dialogue',
13BASE = 'notificationBase',
14COUNT = 0,
15CONFIRMYES = 'yesLabel',
16CONFIRMNO = 'noLabel',
17TITLE = 'title',
18QUESTION = 'question',
19CSS = {
20 BASE : 'moodle-dialogue-base',
21 WRAP : 'moodle-dialogue-wrap',
22 HEADER : 'moodle-dialogue-hd',
23 BODY : 'moodle-dialogue-bd',
24 CONTENT : 'moodle-dialogue-content',
25 FOOTER : 'moodle-dialogue-ft',
26 HIDDEN : 'hidden',
27 LIGHTBOX : 'moodle-dialogue-lightbox'
28};
29
30// Set up the namespace once.
31M.core = M.core || {};
32/**
33 * The generic dialogue class for use in Moodle.
34 *
35 * @module moodle-core-notification
36 * @submodule moodle-core-notification-dialogue
37 */
38
39var DIALOGUE_NAME = 'Moodle dialogue',
40 DIALOGUE;
41
42/**
43 * A re-usable dialogue box with Moodle classes applied.
44 *
45 * @param {Object} config Object literal specifying the dialogue configuration properties.
46 * @constructor
47 * @class M.core.dialogue
48 * @extends Y.Panel
49 */
50DIALOGUE = function(config) {
51 COUNT++;
d61c96b6
DW
52 var id = 'moodle-dialogue-'+COUNT, inputSrcNode = false, contentNode;
53
54 if (config.srcNode) {
55 // We need to reparent this source node to the dialog.
56 inputSrcNode = config.srcNode;
57 }
78686995
AN
58 config.notificationBase =
59 Y.Node.create('<div class="'+CSS.BASE+'">')
60 .append(Y.Node.create('<div id="'+id+'" role="dialog" aria-labelledby="'+id+'-header-text" class="'+CSS.WRAP+'"></div>')
baffb422 61 .append(Y.Node.create('<div id="'+id+'-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
78686995
AN
62 .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
63 .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>')));
64 Y.one(document.body).append(config.notificationBase);
b59f2e3b
SH
65
66 if (config.additionalBaseClass) {
67 config.notificationBase.addClass(config.additionalBaseClass);
68 }
69
78686995
AN
70 config.srcNode = '#'+id;
71 config.width = config.width || '400px';
72 config.visible = config.visible || false;
73 config.center = config.centered || true;
74 config.centered = false;
75 config.COUNT = COUNT;
76
b59f2e3b
SH
77 if (config.width === 'auto') {
78 delete config.width;
79 }
80
78686995
AN
81 // lightbox param to keep the stable versions API.
82 if (config.lightbox !== false) {
83 config.modal = true;
84 }
85 delete config.lightbox;
86
87 // closeButton param to keep the stable versions API.
88 if (config.closeButton === false) {
89 config.buttons = null;
90 } else {
91 config.buttons = [
92 {
93 section: Y.WidgetStdMod.HEADER,
94 classNames: 'closebutton',
95 action: function () {
96 this.hide();
97 }
98 }
99 ];
100 }
d61c96b6
DW
101 if (inputSrcNode) {
102 contentNode = Y.one(inputSrcNode);
103 // Do we need to remove it?
104 contentNode.get('parentNode').removeChild(contentNode);
105 Y.one('#' + id + ' .' + CSS.BODY).append(contentNode);
106 }
78686995
AN
107 DIALOGUE.superclass.constructor.apply(this, [config]);
108
109 if (config.closeButton !== false) {
110 // The buttons constructor does not allow custom attributes
111 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
112 }
113};
114Y.extend(DIALOGUE, Y.Panel, {
d61c96b6
DW
115 // Window resize event listener.
116 _resizeevent : null,
117 // Orientation change event listener.
118 _orientationevent : null,
119
78686995 120 initializer : function() {
d61c96b6 121 var bb, classes, extraclass;
78686995
AN
122 this.after('visibleChange', this.visibilityChanged, this);
123 this.render();
124 this.show();
125 this.set('COUNT', COUNT);
126
127 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
128 // and allow setting of z-index in theme.
d61c96b6
DW
129 bb = this.get('boundingBox');
130 bb.setStyle('zIndex', null);
131
132 // Add the list of extra classes to the bounding box for this dialog (for styling).
133 classes = this.get('extraClasses').split(' ');
134 extraclass = classes.pop();
135 while (typeof extraclass !== "undefined") {
136 bb.addClass(extraclass);
137 extraclass = classes.shift();
138 }
78686995
AN
139 },
140 visibilityChanged : function(e) {
141 var titlebar;
142 if (e.attrName === 'visible') {
143 this.get('maskNode').addClass(CSS.LIGHTBOX);
d61c96b6
DW
144 if (e.prevVal && !e.newVal) {
145 if (this._resizeevent) {
146 this._resizeevent.detach();
147 this._resizeevent = null;
148 }
149 if (this._orientationevent) {
150 this._orientationevent.detach();
151 this._orientationevent = null;
152 }
153 }
78686995
AN
154 if (this.get('center') && !e.prevVal && e.newVal) {
155 this.centerDialogue();
156 }
157 if (this.get('draggable')) {
158 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
159 this.plug(Y.Plugin.Drag, {handles : [titlebar]});
160 Y.one(titlebar).setStyle('cursor', 'move');
161 }
162 }
163 },
164 centerDialogue : function() {
165 var bb = this.get('boundingBox'),
166 hidden = bb.hasClass(DIALOGUE_PREFIX+'-hidden'),
d61c96b6 167 content, x, y;
78686995
AN
168 if (hidden) {
169 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_PREFIX+'-hidden');
170 }
d61c96b6
DW
171 if (this.get('fullscreen')) {
172 // Make this dialogue fullscreen on a small screen.
173 // Disable the page scrollbars.
174 if (Y.UA.ie > 0) {
175 Y.one('html').setStyle('overflow', 'hidden');
176 } else {
177 Y.one('body').setStyle('overflow', 'hidden');
178 }
179 // Size and position the fullscreen dialog.
180
181 bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
182 bb.setStyle('left', '0px')
183 .setStyle('top', '0px')
184 .setStyle('width', '100%')
185 .setStyle('height', '100%')
186 .setStyle('overflow', 'auto');
187
188 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
189 content.setStyle('overflow', 'auto');
190 window.scrollTo(0, 0);
191 } else {
192 if (this.get('responsive')) {
193 // We must reset any of the fullscreen changes.
194 bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
195 .setStyle('overflow', 'inherit')
196 .setStyle('width', this.get('width'))
197 .setStyle('height', this.get('height'));
198 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
199 content.setStyle('overflow', 'inherit');
200
201 if (Y.UA.ie > 0) {
202 Y.one('html').setStyle('overflow', 'auto');
203 } else {
204 Y.one('body').setStyle('overflow', 'auto');
205 }
206 }
207 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
208 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
209 bb.setStyle('left', x).setStyle('top', y);
210 }
78686995
AN
211
212 if (hidden) {
213 bb.addClass(DIALOGUE_PREFIX+'-hidden');
214 }
d61c96b6
DW
215 },
216 hide : function() {
217 if (Y.UA.ie > 0) {
218 Y.one('html').setStyle('overflow', 'auto');
219 } else {
220 Y.one('body').setStyle('overflow', 'auto');
221 }
222 return this.set("visible", false);
78686995
AN
223 }
224}, {
225 NAME : DIALOGUE_NAME,
226 CSS_PREFIX : DIALOGUE_PREFIX,
227 ATTRS : {
228 notificationBase : {
229
230 },
231
232 /**
233 * Whether to display the dialogue modally and with a
234 * lightbox style.
235 *
236 * @attribute lightbox
237 * @type Boolean
238 * @default true
239 */
240 lightbox : {
241 validator : Y.Lang.isBoolean,
242 value : true
243 },
244
245 /**
246 * Whether to display a close button on the dialogue.
247 *
248 * Note, we do not recommend hiding the close button as this has
249 * potential accessibility concerns.
250 *
251 * @attribute closeButton
252 * @type Boolean
253 * @default true
254 */
255 closeButton : {
256 validator : Y.Lang.isBoolean,
257 value : true
258 },
259
260 /**
261 * The title for the close button if one is to be shown.
262 *
263 * @attribute closeButtonTitle
264 * @type String
265 * @default 'Close'
266 */
267 closeButtonTitle : {
268 validator : Y.Lang.isString,
269 value : 'Close'
270 },
271
272 /**
273 * Whether to display the dialogue centrally on the screen.
274 *
275 * @attribute center
276 * @type Boolean
277 * @default true
278 */
279 center : {
280 validator : Y.Lang.isBoolean,
281 value : true
282 },
283
284 /**
285 * Whether to make the dialogue movable around the page.
286 *
287 * @attribute draggable
288 * @type Boolean
289 * @default false
290 */
291 draggable : {
292 validator : Y.Lang.isBoolean,
293 value : false
294 },
295 COUNT: {
296 value: 0
d61c96b6
DW
297 },
298 responsive : {
299 validator : Y.Lang.isBoolean,
300 value : true
301 },
302 responsiveWidth : {
303 value : 768
304 },
305 extraClasses : {
306 validator : Y.Lang.isString,
307 value : ''
308 },
309 fullscreen : {
310 getter : function() {
311 return this.get('responsive') &&
312 Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
313 }
78686995
AN
314 }
315 }
316});
317
318M.core.dialogue = DIALOGUE;
319
320
321}, '@VERSION@', {"requires": ["base", "node", "panel", "event-key", "dd-plugin"]});