MDL-40678 JavaScript: Split out moodle-core-notification into submodules
[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>')
25 .append(Y.Node.create('<div class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
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);
29 config.srcNode = '#'+id;
30 config.width = config.width || '400px';
31 config.visible = config.visible || false;
32 config.center = config.centered || true;
33 config.centered = false;
34 config.COUNT = COUNT;
35
36 // lightbox param to keep the stable versions API.
37 if (config.lightbox !== false) {
38 config.modal = true;
39 }
40 delete config.lightbox;
41
42 // closeButton param to keep the stable versions API.
43 if (config.closeButton === false) {
44 config.buttons = null;
45 } else {
46 config.buttons = [
47 {
48 section: Y.WidgetStdMod.HEADER,
49 classNames: 'closebutton',
50 action: function () {
51 this.hide();
52 }
53 }
54 ];
55 }
56 DIALOGUE.superclass.constructor.apply(this, [config]);
57
58 if (config.closeButton !== false) {
59 // The buttons constructor does not allow custom attributes
60 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
61 }
62};
63Y.extend(DIALOGUE, Y.Panel, {
64 initializer : function() {
65 this.after('visibleChange', this.visibilityChanged, this);
66 this.render();
67 this.show();
68 this.set('COUNT', COUNT);
69
70 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
71 // and allow setting of z-index in theme.
72 this.get('boundingBox').setStyle('zIndex', null);
73 },
74 visibilityChanged : function(e) {
75 var titlebar;
76 if (e.attrName === 'visible') {
77 this.get('maskNode').addClass(CSS.LIGHTBOX);
78 if (this.get('center') && !e.prevVal && e.newVal) {
79 this.centerDialogue();
80 }
81 if (this.get('draggable')) {
82 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
83 this.plug(Y.Plugin.Drag, {handles : [titlebar]});
84 Y.one(titlebar).setStyle('cursor', 'move');
85 }
86 }
87 },
88 centerDialogue : function() {
89 var bb = this.get('boundingBox'),
90 hidden = bb.hasClass(DIALOGUE_PREFIX+'-hidden'),
91 x, y;
92 if (hidden) {
93 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_PREFIX+'-hidden');
94 }
95 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
96 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
97
98 if (hidden) {
99 bb.addClass(DIALOGUE_PREFIX+'-hidden');
100 }
101 bb.setStyle('left', x).setStyle('top', y);
102 }
103}, {
104 NAME : DIALOGUE_NAME,
105 CSS_PREFIX : DIALOGUE_PREFIX,
106 ATTRS : {
107 notificationBase : {
108
109 },
110
111 /**
112 * Whether to display the dialogue modally and with a
113 * lightbox style.
114 *
115 * @attribute lightbox
116 * @type Boolean
117 * @default true
118 */
119 lightbox : {
120 validator : Y.Lang.isBoolean,
121 value : true
122 },
123
124 /**
125 * Whether to display a close button on the dialogue.
126 *
127 * Note, we do not recommend hiding the close button as this has
128 * potential accessibility concerns.
129 *
130 * @attribute closeButton
131 * @type Boolean
132 * @default true
133 */
134 closeButton : {
135 validator : Y.Lang.isBoolean,
136 value : true
137 },
138
139 /**
140 * The title for the close button if one is to be shown.
141 *
142 * @attribute closeButtonTitle
143 * @type String
144 * @default 'Close'
145 */
146 closeButtonTitle : {
147 validator : Y.Lang.isString,
148 value : 'Close'
149 },
150
151 /**
152 * Whether to display the dialogue centrally on the screen.
153 *
154 * @attribute center
155 * @type Boolean
156 * @default true
157 */
158 center : {
159 validator : Y.Lang.isBoolean,
160 value : true
161 },
162
163 /**
164 * Whether to make the dialogue movable around the page.
165 *
166 * @attribute draggable
167 * @type Boolean
168 * @default false
169 */
170 draggable : {
171 validator : Y.Lang.isBoolean,
172 value : false
173 },
174 COUNT: {
175 value: 0
176 }
177 }
178});
179
180M.core.dialogue = DIALOGUE;