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