Commit | Line | Data |
---|---|---|
78686995 AN |
1 | YUI.add('moodle-core-notification-dialogue', function (Y, NAME) { |
2 | ||
3 | var DIALOGUE_PREFIX, | |
4 | BASE, | |
5 | COUNT, | |
6 | CONFIRMYES, | |
7 | CONFIRMNO, | |
8 | TITLE, | |
9 | QUESTION, | |
10 | CSS; | |
11 | ||
12 | DIALOGUE_PREFIX = 'moodle-dialogue', | |
13 | BASE = 'notificationBase', | |
14 | COUNT = 0, | |
15 | CONFIRMYES = 'yesLabel', | |
16 | CONFIRMNO = 'noLabel', | |
17 | TITLE = 'title', | |
18 | QUESTION = 'question', | |
19 | CSS = { | |
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. | |
31 | M.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 | ||
39 | var 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 | */ | |
50 | DIALOGUE = 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 | }; | |
103 | Y.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 | ||
220 | M.core.dialogue = DIALOGUE; | |
221 | ||
222 | ||
223 | }, '@VERSION@', {"requires": ["base", "node", "panel", "event-key", "dd-plugin"]}); |