482decc6fc8733d76a47d1207d8fb47422609086
[moodle.git] / lib / yui / src / dock / js / dockeditem.js
1 /* global LOGNS, DOCKEDITEM */
3 /**
4  * Dock JS.
5  *
6  * This file contains the docked item class.
7  *
8  * @module moodle-core-dock
9  */
11 /**
12  * Docked item.
13  *
14  * @namespace M.core.dock
15  * @class DockedItem
16  * @constructor
17  * @extends Base
18  * @uses EventTarget
19  */
20 DOCKEDITEM = function() {
21     DOCKEDITEM.superclass.constructor.apply(this, arguments);
22 };
23 DOCKEDITEM.prototype = {
24     /**
25      * Set to true if this item is currently being displayed.
26      * @property active
27      * @protected
28      * @type Boolean
29      */
30     active: false,
31     /**
32      * Called during the initialisation process of the object.
33      * @method initializer
34      */
35     initializer: function() {
36         var title = this.get('title'),
37             titlestring,
38             type;
39         /**
40          * Fired before the docked item has been drawn.
41          * @event dockeditem:drawstart
42          */
43         this.publish('dockeditem:drawstart', {prefix: 'dockeditem'});
44         /**
45          * Fired after the docked item has been drawn.
46          * @event dockeditem:drawcomplete
47          */
48         this.publish('dockeditem:drawcomplete', {prefix: 'dockeditem'});
49         /**
50          * Fired before the docked item is to be shown.
51          * @event dockeditem:showstart
52          */
53         this.publish('dockeditem:showstart', {prefix: 'dockeditem'});
54         /**
55          * Fired after the docked item has been shown.
56          * @event dockeditem:showcomplete
57          */
58         this.publish('dockeditem:showcomplete', {prefix: 'dockeditem'});
59         /**
60          * Fired before the docked item has been hidden.
61          * @event dockeditem:hidestart
62          */
63         this.publish('dockeditem:hidestart', {prefix: 'dockeditem'});
64         /**
65          * Fired after the docked item has been hidden.
66          * @event dockeditem:hidecomplete
67          */
68         this.publish('dockeditem:hidecomplete', {prefix: 'dockeditem'});
69         /**
70          * Fired when the docked item is removed from the dock.
71          * @event dockeditem:itemremoved
72          */
73         this.publish('dockeditem:itemremoved', {prefix: 'dockeditem'});
74         if (title) {
75             type = title.get('nodeName');
76             titlestring = title.cloneNode(true);
77             title = Y.Node.create('<' + type + '></' + type + '>');
78             title = M.core.dock.fixTitleOrientation(title, titlestring.get('text'));
79             this.set('title', title);
80             this.set('titlestring', titlestring);
81         }
82         Y.log('Initialised dockeditem for block with title "' + this._getLogDescription(), 'debug', LOGNS);
83     },
84     /**
85      * This function draws the item on the dock.
86      * @method draw
87      * @return Boolean
88      */
89     draw: function() {
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');
99         this.fire('dockeditem:drawstart');
101         docktitle = create('<div id="dock_item_' + id + '_title" role="menu" aria-haspopup="true" class="'
102             + CSS.dockedtitle + '"></div>');
103         docktitle.append(this.get('title'));
104         dockitem = create('<div id="dock_item_' + id + '" class="' + CSS.dockeditem + '" tabindex="0" rel="' + id + '"></div>');
105         if (count === 1) {
106             dockitem.addClass('firstdockitem');
107         }
108         dockitem.append(docktitle);
109         dock.append(dockitem);
111         closeiconimg = create('<img alt="' + M.util.get_string('hidepanel', 'block') +
112                 '" title="' + M.util.get_string('hidedockpanel', 'block') + '" />');
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);
116         closeicon.on('dock:actionkey', this.hide, this, {actions: {enter: true, toggle: true}});
117         this.get('commands').append(closeicon);
119         this.set('dockTitleNode', docktitle);
120         this.set('dockItemNode', dockitem);
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      */
130     show: function() {
131         var dock = this.get('dock'),
132             panel = dock.getPanel(),
133             docktitle = this.get('dockTitleNode');
135         dock.hideActive();
136         this.fire('dockeditem:showstart');
137         Y.log('Showing ' + this._getLogDescription(), 'debug', LOGNS);
138         panel.setHeader(this.get('titlestring'), this.get('commands'));
139         panel.setBody(Y.Node.create('<div class="block_' + this.get('blockclass') + ' block_docked"></div>')
140              .append(this.get('contents')));
141         if (M.core.actionmenu !== undefined) {
142             M.core.actionmenu.newDOMNode(panel.get('node'));
143         }
144         panel.show();
145         panel.correctWidth();
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      */
160     hide: function() {
161         this.fire('dockeditem:hidestart');
162         Y.log('Hiding "' + this._getLogDescription(), 'debug', LOGNS);
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      */
180     toggle: function(action) {
181         var docktitle = this.get('dockTitleNode');
182         if (docktitle.hasClass(CSS.activeitem) && action !== 'expand') {
183             this.hide();
184         } else if (!docktitle.hasClass(CSS.activeitem) && action !== 'collapse') {
185             this.show();
186         }
187     },
188     /**
189      * This function removes the node and destroys it's bits.
190      * @method remove.
191      */
192     remove: function() {
193         this.hide();
194         // Return the block to its original position.
195         this.get('block').returnToPage();
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      */
206     _getLogDescription: function() {
207         return this.get('titlestring').get('innerHTML') + ' (' + this.get('blockinstanceid') + ')';
208     }
209 };
210 Y.extend(DOCKEDITEM, Y.Base, DOCKEDITEM.prototype, {
211     NAME: 'moodle-core-dock-dockeditem',
212     ATTRS: {
213         /**
214          * The block this docked item is associated with.
215          * @attribute block
216          * @type BLOCK
217          * @writeOnce
218          * @required
219          */
220         block: {
221             writeOnce: 'initOnly'
222         },
223         /**
224          * The dock itself.
225          * @attribute dock
226          * @type DOCK
227          * @writeOnce
228          * @required
229          */
230         dock: {
231             writeOnce: 'initOnly'
232         },
233         /**
234          * The docked item ID. This will be given by the dock.
235          * @attribute id
236          * @type Number
237          */
238         id: {},
239         /**
240          * Block instance id.Taken from the associated block.
241          * @attribute blockinstanceid
242          * @type Number
243          * @writeOnce
244          */
245         blockinstanceid: {
246             writeOnce: 'initOnly',
247             setter: function(value) {
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          */
257         title: {
258             value: null
259         },
260         /**
261          * The title string.
262          * @attribute titlestring
263          * @type String
264          */
265         titlestring: {
266             value: null
267         },
268         /**
269          * The contents of the docked item
270          * @attribute contents
271          * @type Node
272          * @writeOnce
273          * @required
274          */
275         contents: {
276             writeOnce: 'initOnly'
277         },
278         /**
279          * Commands associated with the block.
280          * @attribute commands
281          * @type Node
282          * @writeOnce
283          * @required
284          */
285         commands: {
286             writeOnce: 'initOnly'
287         },
288         /**
289          * The block class.
290          * @attribute blockclass
291          * @type String
292          * @writeOnce
293          * @required
294          */
295         blockclass: {
296             writeOnce: 'initOnly'
297         },
298         /**
299          * The title node for the docked block.
300          * @attribute dockTitleNode
301          * @type Node
302          */
303         dockTitleNode: {
304             value: null
305         },
306         /**
307          * The item node for the docked block.
308          * @attribute dockItemNode
309          * @type Node
310          */
311         dockItemNode: {
312             value: null
313         },
314         /**
315          * The container for the docked item (will contain the block contents when visible)
316          * @attribute dockcontainerNode
317          * @type Node
318          */
319         dockcontainerNode: {
320             value: null
321         }
322     }
323 });
324 Y.augment(DOCKEDITEM, Y.EventTarget);