Merge branch 'wip-mdl-39955' of git://github.com/rajeshtaneja/moodle
[moodle.git] / lib / yui / src / notification / js / dialogue.js
CommitLineData
78686995
AN
1/**
2 * The generic dialogue class for use in Moodle.
3 *
4 * @module moodle-core-notification
5 * @submodule moodle-core-notification-dialogue
6 */
7
8var DIALOGUE_NAME = 'Moodle dialogue',
9 DIALOGUE;
10
11/**
12 * A re-usable dialogue box with Moodle classes applied.
13 *
14 * @param {Object} config Object literal specifying the dialogue configuration properties.
15 * @constructor
16 * @class M.core.dialogue
17 * @extends Y.Panel
18 */
19DIALOGUE = function(config) {
20 COUNT++;
21 var id = 'moodle-dialogue-'+COUNT;
22 config.notificationBase =
23 Y.Node.create('<div class="'+CSS.BASE+'">')
24 .append(Y.Node.create('<div id="'+id+'" role="dialog" aria-labelledby="'+id+'-header-text" class="'+CSS.WRAP+'"></div>')
baffb422 25 .append(Y.Node.create('<div id="'+id+'-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
78686995
AN
26 .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
27 .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>')));
28 Y.one(document.body).append(config.notificationBase);
b59f2e3b
SH
29
30 if (config.additionalBaseClass) {
31 config.notificationBase.addClass(config.additionalBaseClass);
32 }
33
78686995
AN
34 config.srcNode = '#'+id;
35 config.width = config.width || '400px';
36 config.visible = config.visible || false;
37 config.center = config.centered || true;
38 config.centered = false;
39 config.COUNT = COUNT;
40
b59f2e3b
SH
41 if (config.width === 'auto') {
42 delete config.width;
43 }
44
78686995
AN
45 // lightbox param to keep the stable versions API.
46 if (config.lightbox !== false) {
47 config.modal = true;
48 }
49 delete config.lightbox;
50
51 // closeButton param to keep the stable versions API.
52 if (config.closeButton === false) {
53 config.buttons = null;
54 } else {
55 config.buttons = [
56 {
57 section: Y.WidgetStdMod.HEADER,
58 classNames: 'closebutton',
59 action: function () {
60 this.hide();
61 }
62 }
63 ];
64 }
65 DIALOGUE.superclass.constructor.apply(this, [config]);
66
67 if (config.closeButton !== false) {
68 // The buttons constructor does not allow custom attributes
69 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
70 }
71};
72Y.extend(DIALOGUE, Y.Panel, {
73 initializer : function() {
74 this.after('visibleChange', this.visibilityChanged, this);
75 this.render();
76 this.show();
77 this.set('COUNT', COUNT);
78
79 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
80 // and allow setting of z-index in theme.
81 this.get('boundingBox').setStyle('zIndex', null);
82 },
83 visibilityChanged : function(e) {
84 var titlebar;
85 if (e.attrName === 'visible') {
86 this.get('maskNode').addClass(CSS.LIGHTBOX);
87 if (this.get('center') && !e.prevVal && e.newVal) {
88 this.centerDialogue();
89 }
90 if (this.get('draggable')) {
91 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
92 this.plug(Y.Plugin.Drag, {handles : [titlebar]});
93 Y.one(titlebar).setStyle('cursor', 'move');
94 }
95 }
96 },
97 centerDialogue : function() {
98 var bb = this.get('boundingBox'),
99 hidden = bb.hasClass(DIALOGUE_PREFIX+'-hidden'),
100 x, y;
101 if (hidden) {
102 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_PREFIX+'-hidden');
103 }
104 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
105 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
106
107 if (hidden) {
108 bb.addClass(DIALOGUE_PREFIX+'-hidden');
109 }
110 bb.setStyle('left', x).setStyle('top', y);
111 }
112}, {
113 NAME : DIALOGUE_NAME,
114 CSS_PREFIX : DIALOGUE_PREFIX,
115 ATTRS : {
116 notificationBase : {
117
118 },
119
120 /**
121 * Whether to display the dialogue modally and with a
122 * lightbox style.
123 *
124 * @attribute lightbox
125 * @type Boolean
126 * @default true
127 */
128 lightbox : {
129 validator : Y.Lang.isBoolean,
130 value : true
131 },
132
133 /**
134 * Whether to display a close button on the dialogue.
135 *
136 * Note, we do not recommend hiding the close button as this has
137 * potential accessibility concerns.
138 *
139 * @attribute closeButton
140 * @type Boolean
141 * @default true
142 */
143 closeButton : {
144 validator : Y.Lang.isBoolean,
145 value : true
146 },
147
148 /**
149 * The title for the close button if one is to be shown.
150 *
151 * @attribute closeButtonTitle
152 * @type String
153 * @default 'Close'
154 */
155 closeButtonTitle : {
156 validator : Y.Lang.isString,
157 value : 'Close'
158 },
159
160 /**
161 * Whether to display the dialogue centrally on the screen.
162 *
163 * @attribute center
164 * @type Boolean
165 * @default true
166 */
167 center : {
168 validator : Y.Lang.isBoolean,
169 value : true
170 },
171
172 /**
173 * Whether to make the dialogue movable around the page.
174 *
175 * @attribute draggable
176 * @type Boolean
177 * @default false
178 */
179 draggable : {
180 validator : Y.Lang.isBoolean,
181 value : false
182 },
183 COUNT: {
184 value: 0
185 }
186 }
187});
188
189M.core.dialogue = DIALOGUE;