← Back to branch summary

~ubuntu-branches/ubuntu/utopic/moodle/utopic

« back to all changes in this revision

Viewing changes to lib/yui/src/dock/js/panel.js

  • Committer: Package Import Robot
  • Author(s): Thijs Kinkhorst
  • Date: 2014-05-12 16:10:38 UTC
  • mfrom: (36.1.3 sid)
  • Revision ID: package-import@ubuntu.com-20140512161038-puyqf65k4e0s8ytz
Tags: 2.6.3-1
New upstream release.

Show diffs side-by-side

added added

removed removed

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