MDL-64506 templates: Move BS2 labels to BS4 badges
[moodle.git] / lib / yui / src / dock / js / panel.js
CommitLineData
ad3f8cd1
DP
1/* global DOCKPANEL, LOGNS */
2
84192d78
SH
3/**
4 * Dock JS.
5 *
6 * This file contains the panel class used by the dock to display the content of docked blocks.
7 *
8 * @module moodle-core-dock
9 */
10
11/**
12 * Panel.
13 *
14 * @namespace M.core.dock
15 * @class Panel
16 * @constructor
1f777e5c
AN
17 * @extends Base
18 * @uses EventTarget
84192d78 19 */
a69a7e89 20DOCKPANEL = function() {
84192d78
SH
21 DOCKPANEL.superclass.constructor.apply(this, arguments);
22};
23DOCKPANEL.prototype = {
24 /**
25 * True once the panel has been created.
26 * @property created
27 * @protected
28 * @type {Boolean}
29 */
5bb4f444 30 created: false,
84192d78
SH
31 /**
32 * Called during the initialisation process of the object.
33 * @method initializer
34 */
5bb4f444 35 initializer: function() {
82955480 36 Y.log('Panel initialising', 'debug', LOGNS);
84192d78
SH
37 /**
38 * Fired before the panel is shown.
39 * @event dockpane::beforeshow
40 */
5bb4f444 41 this.publish('dockpanel:beforeshow', {prefix: 'dockpanel'});
84192d78
SH
42 /**
43 * Fired after the panel is shown.
44 * @event dockpanel:shown
45 */
5bb4f444 46 this.publish('dockpanel:shown', {prefix: 'dockpanel'});
84192d78
SH
47 /**
48 * Fired before the panel is hidden.
49 * @event dockpane::beforehide
50 */
5bb4f444 51 this.publish('dockpanel:beforehide', {prefix: 'dockpanel'});
84192d78
SH
52 /**
53 * Fired after the panel is hidden.
54 * @event dockpanel:hidden
55 */
5bb4f444 56 this.publish('dockpanel:hidden', {prefix: 'dockpanel'});
84192d78
SH
57 /**
58 * Fired when ever the dock panel is either hidden or shown.
59 * Always fired after the shown or hidden events.
60 * @event dockpanel:visiblechange
61 */
5bb4f444 62 this.publish('dockpanel:visiblechange', {prefix: 'dockpanel'});
84192d78
SH
63 },
64 /**
65 * Creates the Panel if it has not already been created.
66 * @method create
67 * @return {Boolean}
68 */
5bb4f444 69 create: function() {
84192d78
SH
70 if (this.created) {
71 return true;
72 }
73 this.created = true;
74 var dock = this.get('dock'),
75 node = dock.get('dockNode');
76 this.set('node', Y.Node.create('<div id="dockeditempanel" class="dockitempanel_hidden"></div>'));
77 this.set('contentNode', Y.Node.create('<div class="dockeditempanel_content"></div>'));
78 this.set('headerNode', Y.Node.create('<div class="dockeditempanel_hd"></div>'));
79 this.set('bodyNode', Y.Node.create('<div class="dockeditempanel_bd"></div>'));
80 node.append(
81 this.get('node').append(this.get('contentNode').append(this.get('headerNode')).append(this.get('bodyNode')))
82 );
83 },
84 /**
85 * Displays the panel.
86 * @method show
87 */
5bb4f444 88 show: function() {
84192d78
SH
89 this.create();
90 this.fire('dockpanel:beforeshow');
91 this.set('visible', true);
92 this.get('node').removeClass('dockitempanel_hidden');
93 this.fire('dockpanel:shown');
94 this.fire('dockpanel:visiblechange');
95 },
96 /**
97 * Hides the panel
98 * @method hide
99 */
5bb4f444 100 hide: function() {
84192d78
SH
101 this.fire('dockpanel:beforehide');
102 this.set('visible', false);
103 this.get('node').addClass('dockitempanel_hidden');
104 this.fire('dockpanel:hidden');
105 this.fire('dockpanel:visiblechange');
106 },
107 /**
108 * Sets the panel header.
109 * @method setHeader
110 * @param {Node|String} content
111 */
5bb4f444 112 setHeader: function(content) {
84192d78 113 this.create();
a69a7e89
SH
114 var header = this.get('headerNode'),
115 i;
84192d78
SH
116 header.setContent(content);
117 if (arguments.length > 1) {
a69a7e89
SH
118 for (i = 1; i < arguments.length; i++) {
119 if (Y.Lang.isNumber(i) || Y.Lang.isString(i)) {
120 header.append(arguments[i]);
121 }
84192d78
SH
122 }
123 }
124 },
125 /**
126 * Sets the panel body.
127 * @method setBody
128 * @param {Node|String} content
129 */
5bb4f444 130 setBody: function(content) {
84192d78
SH
131 this.create();
132 this.get('bodyNode').setContent(content);
133 },
134 /**
135 * Sets the new top mark of the panel.
136 *
137 * @method setTop
138 * @param {Number} newtop
139 */
5bb4f444 140 setTop: function(newtop) {
84192d78
SH
141 if (Y.UA.ie > 0 && Y.UA.ie < 7) {
142 this.get('node').setY(newtop);
143 } else {
5bb4f444 144 this.get('node').setStyle('top', newtop.toString() + 'px');
84192d78
SH
145 }
146 },
147 /**
148 * Corrects the width of the panel.
149 * @method correctWidth
150 */
5bb4f444 151 correctWidth: function() {
84192d78
SH
152 var bodyNode = this.get('bodyNode'),
153 // Width of content.
154 width = bodyNode.get('clientWidth'),
155 // Scrollable width of content.
156 scroll = bodyNode.get('scrollWidth'),
157 // Width of content container with overflow.
158 offsetWidth = bodyNode.get('offsetWidth'),
159 // The new width - defaults to the current width.
160 newWidth = width,
161 // The max width (80% of screen).
162 maxWidth = Math.round(bodyNode.get('winWidth') * 0.8);
163
164 // If the scrollable width is more than the visible width
165 if (scroll > width) {
166 // Content width
167 // + the difference
168 // + any rendering difference (borders, padding)
169 // + 10px to make it look nice.
5bb4f444 170 newWidth = width + (scroll - width) + ((offsetWidth - width) * 2) + 10;
84192d78
SH
171 }
172
173 // Make sure its not more then the maxwidth
174 if (newWidth > maxWidth) {
175 newWidth = maxWidth;
176 }
177
178 // Set the new width if its more than the old width.
179 if (newWidth > offsetWidth) {
5bb4f444 180 this.get('node').setStyle('width', newWidth + 'px');
84192d78
SH
181 }
182 }
183};
184Y.extend(DOCKPANEL, Y.Base, DOCKPANEL.prototype, {
5bb4f444
DP
185 NAME: 'moodle-core-dock-panel',
186 ATTRS: {
84192d78
SH
187 /**
188 * The dock itself.
189 * @attribute dock
190 * @type DOCK
191 * @writeonce
192 */
5bb4f444
DP
193 dock: {
194 writeOnce: 'initOnly'
84192d78
SH
195 },
196 /**
197 * The node that contains the whole panel.
198 * @attribute node
199 * @type Node
200 */
5bb4f444
DP
201 node: {
202 value: null
84192d78
SH
203 },
204 /**
205 * The node that contains the header, body and footer.
206 * @attribute contentNode
207 * @type Node
208 */
5bb4f444
DP
209 contentNode: {
210 value: null
84192d78
SH
211 },
212 /**
213 * The node that contains the header
214 * @attribute headerNode
215 * @type Node
216 */
5bb4f444
DP
217 headerNode: {
218 value: null
84192d78
SH
219 },
220 /**
221 * The node that contains the body
222 * @attribute bodyNode
223 * @type Node
224 */
5bb4f444
DP
225 bodyNode: {
226 value: null
84192d78
SH
227 },
228 /**
229 * True if the panel is currently visible.
230 * @attribute visible
231 * @type Boolean
232 */
5bb4f444
DP
233 visible: {
234 value: false
84192d78
SH
235 }
236 }
237});
238Y.augment(DOCKPANEL, Y.EventTarget);