MDL-64506 templates: Move BS2 labels to BS4 badges
[moodle.git] / lib / yui / src / dock / js / dockeditem.js
CommitLineData
ad3f8cd1
DP
1/* global LOGNS, DOCKEDITEM */
2
84192d78
SH
3/**
4 * Dock JS.
5 *
6 * This file contains the docked item class.
7 *
8 * @module moodle-core-dock
9 */
10
11/**
12 * Docked item.
13 *
14 * @namespace M.core.dock
15 * @class DockedItem
16 * @constructor
1f777e5c
AN
17 * @extends Base
18 * @uses EventTarget
84192d78 19 */
a69a7e89 20DOCKEDITEM = function() {
84192d78
SH
21 DOCKEDITEM.superclass.constructor.apply(this, arguments);
22};
23DOCKEDITEM.prototype = {
24 /**
25 * Set to true if this item is currently being displayed.
26 * @property active
27 * @protected
28 * @type Boolean
29 */
5bb4f444 30 active: false,
84192d78
SH
31 /**
32 * Called during the initialisation process of the object.
33 * @method initializer
34 */
5bb4f444 35 initializer: function() {
84192d78 36 var title = this.get('title'),
a69a7e89
SH
37 titlestring,
38 type;
84192d78
SH
39 /**
40 * Fired before the docked item has been drawn.
41 * @event dockeditem:drawstart
42 */
5bb4f444 43 this.publish('dockeditem:drawstart', {prefix: 'dockeditem'});
84192d78
SH
44 /**
45 * Fired after the docked item has been drawn.
46 * @event dockeditem:drawcomplete
47 */
5bb4f444 48 this.publish('dockeditem:drawcomplete', {prefix: 'dockeditem'});
84192d78
SH
49 /**
50 * Fired before the docked item is to be shown.
51 * @event dockeditem:showstart
52 */
5bb4f444 53 this.publish('dockeditem:showstart', {prefix: 'dockeditem'});
84192d78
SH
54 /**
55 * Fired after the docked item has been shown.
56 * @event dockeditem:showcomplete
57 */
5bb4f444 58 this.publish('dockeditem:showcomplete', {prefix: 'dockeditem'});
84192d78
SH
59 /**
60 * Fired before the docked item has been hidden.
61 * @event dockeditem:hidestart
62 */
5bb4f444 63 this.publish('dockeditem:hidestart', {prefix: 'dockeditem'});
84192d78
SH
64 /**
65 * Fired after the docked item has been hidden.
66 * @event dockeditem:hidecomplete
67 */
5bb4f444 68 this.publish('dockeditem:hidecomplete', {prefix: 'dockeditem'});
84192d78
SH
69 /**
70 * Fired when the docked item is removed from the dock.
71 * @event dockeditem:itemremoved
72 */
5bb4f444 73 this.publish('dockeditem:itemremoved', {prefix: 'dockeditem'});
84192d78 74 if (title) {
a69a7e89 75 type = title.get('nodeName');
84192d78 76 titlestring = title.cloneNode(true);
5bb4f444 77 title = Y.Node.create('<' + type + '></' + type + '>');
84192d78
SH
78 title = M.core.dock.fixTitleOrientation(title, titlestring.get('text'));
79 this.set('title', title);
80 this.set('titlestring', titlestring);
81 }
5bb4f444 82 Y.log('Initialised dockeditem for block with title "' + this._getLogDescription(), 'debug', LOGNS);
84192d78
SH
83 },
84 /**
85 * This function draws the item on the dock.
86 * @method draw
87 * @return Boolean
88 */
5bb4f444 89 draw: function() {
84192d78
SH
90 var create = Y.Node.create,
91 dock = this.get('dock'),
92 count = dock.count,
93 docktitle,
94 dockitem,
95 closeicon,
96 closeiconimg,
97 id = this.get('id');
98
99 this.fire('dockeditem:drawstart');
100
bc8b6dc6
DP
101 docktitle = create('<div id="dock_item_' + id + '_title" role="menu" aria-haspopup="true" class="'
102 + CSS.dockedtitle + '"></div>');
84192d78 103 docktitle.append(this.get('title'));
5bb4f444 104 dockitem = create('<div id="dock_item_' + id + '" class="' + CSS.dockeditem + '" tabindex="0" rel="' + id + '"></div>');
84192d78
SH
105 if (count === 1) {
106 dockitem.addClass('firstdockitem');
107 }
108 dockitem.append(docktitle);
109 dock.append(dockitem);
110
557f44d9
AN
111 closeiconimg = create('<img alt="' + M.util.get_string('hidepanel', 'block') +
112 '" title="' + M.util.get_string('hidedockpanel', 'block') + '" />');
84192d78
SH
113 closeiconimg.setAttribute('src', M.util.image_url('t/dockclose', 'moodle'));
114 closeicon = create('<span class="hidepanelicon" tabindex="0"></span>').append(closeiconimg);
115 closeicon.on('forceclose|click', this.hide, this);
5bb4f444 116 closeicon.on('dock:actionkey', this.hide, this, {actions: {enter: true, toggle: true}});
84192d78
SH
117 this.get('commands').append(closeicon);
118
119 this.set('dockTitleNode', docktitle);
120 this.set('dockItemNode', dockitem);
121
122 this.fire('dockeditem:drawcomplete');
123 return true;
124 },
125 /**
126 * This function toggles makes the item active and shows it.
127 * @method show
128 * @return Boolean
129 */
5bb4f444 130 show: function() {
84192d78
SH
131 var dock = this.get('dock'),
132 panel = dock.getPanel(),
133 docktitle = this.get('dockTitleNode');
134
135 dock.hideActive();
136 this.fire('dockeditem:showstart');
5bb4f444 137 Y.log('Showing ' + this._getLogDescription(), 'debug', LOGNS);
84192d78 138 panel.setHeader(this.get('titlestring'), this.get('commands'));
557f44d9
AN
139 panel.setBody(Y.Node.create('<div class="block_' + this.get('blockclass') + ' block_docked"></div>')
140 .append(this.get('contents')));
09869dd5
AO
141 if (M.core.actionmenu !== undefined) {
142 M.core.actionmenu.newDOMNode(panel.get('node'));
143 }
84192d78
SH
144 panel.show();
145 panel.correctWidth();
146
147 this.active = true;
148 // Add active item class first up
149 docktitle.addClass(CSS.activeitem);
150 // Set aria-exapanded property to true.
151 docktitle.set('aria-expanded', "true");
152 this.fire('dockeditem:showcomplete');
153 dock.resize();
154 return true;
155 },
156 /**
157 * This function hides the item and makes it inactive.
158 * @method hide
159 */
5bb4f444 160 hide: function() {
84192d78 161 this.fire('dockeditem:hidestart');
5bb4f444 162 Y.log('Hiding "' + this._getLogDescription(), 'debug', LOGNS);
84192d78
SH
163 if (this.active) {
164 // No longer active
165 this.active = false;
166 // Hide the panel
167 this.get('dock').getPanel().hide();
168 }
169 // Remove the active class
170 // Set aria-exapanded property to false
171 this.get('dockTitleNode').removeClass(CSS.activeitem).set('aria-expanded', "false");
172 this.fire('dockeditem:hidecomplete');
173 },
174 /**
175 * A toggle between calling show and hide functions based on css.activeitem
176 * Applies rules to key press events (dock:actionkey)
177 * @method toggle
178 * @param {String} action
179 */
5bb4f444 180 toggle: function(action) {
84192d78
SH
181 var docktitle = this.get('dockTitleNode');
182 if (docktitle.hasClass(CSS.activeitem) && action !== 'expand') {
183 this.hide();
5bb4f444 184 } else if (!docktitle.hasClass(CSS.activeitem) && action !== 'collapse') {
84192d78
SH
185 this.show();
186 }
187 },
188 /**
189 * This function removes the node and destroys it's bits.
190 * @method remove.
191 */
5bb4f444 192 remove: function() {
84192d78
SH
193 this.hide();
194 // Return the block to its original position.
a69a7e89 195 this.get('block').returnToPage();
84192d78
SH
196 // Remove the dock item node.
197 this.get('dockItemNode').remove();
198 this.fire('dockeditem:itemremoved');
199 },
200 /**
201 * Returns the description of this item to use for log calls.
202 * @method _getLogDescription
203 * @private
204 * @return {String}
205 */
5bb4f444
DP
206 _getLogDescription: function() {
207 return this.get('titlestring').get('innerHTML') + ' (' + this.get('blockinstanceid') + ')';
84192d78
SH
208 }
209};
210Y.extend(DOCKEDITEM, Y.Base, DOCKEDITEM.prototype, {
5bb4f444
DP
211 NAME: 'moodle-core-dock-dockeditem',
212 ATTRS: {
84192d78
SH
213 /**
214 * The block this docked item is associated with.
215 * @attribute block
216 * @type BLOCK
217 * @writeOnce
218 * @required
219 */
5bb4f444
DP
220 block: {
221 writeOnce: 'initOnly'
84192d78
SH
222 },
223 /**
224 * The dock itself.
225 * @attribute dock
226 * @type DOCK
227 * @writeOnce
228 * @required
229 */
5bb4f444
DP
230 dock: {
231 writeOnce: 'initOnly'
84192d78
SH
232 },
233 /**
234 * The docked item ID. This will be given by the dock.
235 * @attribute id
236 * @type Number
237 */
5bb4f444 238 id: {},
84192d78
SH
239 /**
240 * Block instance id.Taken from the associated block.
241 * @attribute blockinstanceid
242 * @type Number
243 * @writeOnce
244 */
5bb4f444
DP
245 blockinstanceid: {
246 writeOnce: 'initOnly',
247 setter: function(value) {
84192d78
SH
248 return parseInt(value, 10);
249 }
250 },
251 /**
252 * The title nodeof the docked item.
253 * @attribute title
254 * @type Node
255 * @default null
256 */
5bb4f444
DP
257 title: {
258 value: null
84192d78
SH
259 },
260 /**
261 * The title string.
262 * @attribute titlestring
263 * @type String
264 */
5bb4f444
DP
265 titlestring: {
266 value: null
84192d78
SH
267 },
268 /**
269 * The contents of the docked item
270 * @attribute contents
271 * @type Node
272 * @writeOnce
273 * @required
274 */
5bb4f444
DP
275 contents: {
276 writeOnce: 'initOnly'
84192d78
SH
277 },
278 /**
279 * Commands associated with the block.
280 * @attribute commands
281 * @type Node
282 * @writeOnce
283 * @required
284 */
5bb4f444
DP
285 commands: {
286 writeOnce: 'initOnly'
84192d78
SH
287 },
288 /**
289 * The block class.
290 * @attribute blockclass
291 * @type String
292 * @writeOnce
293 * @required
294 */
5bb4f444
DP
295 blockclass: {
296 writeOnce: 'initOnly'
84192d78
SH
297 },
298 /**
299 * The title node for the docked block.
300 * @attribute dockTitleNode
301 * @type Node
302 */
5bb4f444
DP
303 dockTitleNode: {
304 value: null
84192d78
SH
305 },
306 /**
307 * The item node for the docked block.
308 * @attribute dockItemNode
309 * @type Node
310 */
5bb4f444
DP
311 dockItemNode: {
312 value: null
84192d78
SH
313 },
314 /**
315 * The container for the docked item (will contain the block contents when visible)
316 * @attribute dockcontainerNode
317 * @type Node
318 */
5bb4f444
DP
319 dockcontainerNode: {
320 value: null
84192d78
SH
321 }
322 }
323});
82955480 324Y.augment(DOCKEDITEM, Y.EventTarget);