Merge branch 'wip-mdl-39955' of git://github.com/rajeshtaneja/moodle
[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++;
52 var id = 'moodle-dialogue-'+COUNT;
53 config.notificationBase =
54 Y.Node.create('<div class="'+CSS.BASE+'">')
55 .append(Y.Node.create('<div id="'+id+'" role="dialog" aria-labelledby="'+id+'-header-text" class="'+CSS.WRAP+'"></div>')
baffb422 56 .append(Y.Node.create('<div id="'+id+'-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
78686995
AN
57 .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
58 .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>')));
59 Y.one(document.body).append(config.notificationBase);
b59f2e3b
SH
60
61 if (config.additionalBaseClass) {
62 config.notificationBase.addClass(config.additionalBaseClass);
63 }
64
78686995
AN
65 config.srcNode = '#'+id;
66 config.width = config.width || '400px';
67 config.visible = config.visible || false;
68 config.center = config.centered || true;
69 config.centered = false;
70 config.COUNT = COUNT;
71
b59f2e3b
SH
72 if (config.width === 'auto') {
73 delete config.width;
74 }
75
78686995
AN
76 // lightbox param to keep the stable versions API.
77 if (config.lightbox !== false) {
78 config.modal = true;
79 }
80 delete config.lightbox;
81
82 // closeButton param to keep the stable versions API.
83 if (config.closeButton === false) {
84 config.buttons = null;
85 } else {
86 config.buttons = [
87 {
88 section: Y.WidgetStdMod.HEADER,
89 classNames: 'closebutton',
90 action: function () {
91 this.hide();
92 }
93 }
94 ];
95 }
96 DIALOGUE.superclass.constructor.apply(this, [config]);
97
98 if (config.closeButton !== false) {
99 // The buttons constructor does not allow custom attributes
100 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
101 }
102};
103Y.extend(DIALOGUE, Y.Panel, {
104 initializer : function() {
105 this.after('visibleChange', this.visibilityChanged, this);
106 this.render();
107 this.show();
108 this.set('COUNT', COUNT);
109
110 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
111 // and allow setting of z-index in theme.
112 this.get('boundingBox').setStyle('zIndex', null);
113 },
114 visibilityChanged : function(e) {
115 var titlebar;
116 if (e.attrName === 'visible') {
117 this.get('maskNode').addClass(CSS.LIGHTBOX);
118 if (this.get('center') && !e.prevVal && e.newVal) {
119 this.centerDialogue();
120 }
121 if (this.get('draggable')) {
122 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
123 this.plug(Y.Plugin.Drag, {handles : [titlebar]});
124 Y.one(titlebar).setStyle('cursor', 'move');
125 }
126 }
127 },
128 centerDialogue : function() {
129 var bb = this.get('boundingBox'),
130 hidden = bb.hasClass(DIALOGUE_PREFIX+'-hidden'),
131 x, y;
132 if (hidden) {
133 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_PREFIX+'-hidden');
134 }
135 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
136 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
137
138 if (hidden) {
139 bb.addClass(DIALOGUE_PREFIX+'-hidden');
140 }
141 bb.setStyle('left', x).setStyle('top', y);
142 }
143}, {
144 NAME : DIALOGUE_NAME,
145 CSS_PREFIX : DIALOGUE_PREFIX,
146 ATTRS : {
147 notificationBase : {
148
149 },
150
151 /**
152 * Whether to display the dialogue modally and with a
153 * lightbox style.
154 *
155 * @attribute lightbox
156 * @type Boolean
157 * @default true
158 */
159 lightbox : {
160 validator : Y.Lang.isBoolean,
161 value : true
162 },
163
164 /**
165 * Whether to display a close button on the dialogue.
166 *
167 * Note, we do not recommend hiding the close button as this has
168 * potential accessibility concerns.
169 *
170 * @attribute closeButton
171 * @type Boolean
172 * @default true
173 */
174 closeButton : {
175 validator : Y.Lang.isBoolean,
176 value : true
177 },
178
179 /**
180 * The title for the close button if one is to be shown.
181 *
182 * @attribute closeButtonTitle
183 * @type String
184 * @default 'Close'
185 */
186 closeButtonTitle : {
187 validator : Y.Lang.isString,
188 value : 'Close'
189 },
190
191 /**
192 * Whether to display the dialogue centrally on the screen.
193 *
194 * @attribute center
195 * @type Boolean
196 * @default true
197 */
198 center : {
199 validator : Y.Lang.isBoolean,
200 value : true
201 },
202
203 /**
204 * Whether to make the dialogue movable around the page.
205 *
206 * @attribute draggable
207 * @type Boolean
208 * @default false
209 */
210 draggable : {
211 validator : Y.Lang.isBoolean,
212 value : false
213 },
214 COUNT: {
215 value: 0
216 }
217 }
218});
219
220M.core.dialogue = DIALOGUE;
221
222
223}, '@VERSION@', {"requires": ["base", "node", "panel", "event-key", "dd-plugin"]});