← Back to branch summary

~launchpad-pqm/launchpad/devel

« back to all changes in this revision

Viewing changes to lib/lp/app/javascript/lazr/overlay/overlay.js

[r=deryck][bug=803954] Bring lazr-js source into lp tree and package
        yui as a dependency

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/lp/app/javascript/lazr/overlay/overlay.js
 
1
/* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
 
2
 
 
3
YUI.add('lazr.overlay', function(Y) {
 
4
 
 
5
/**
 
6
 * LAZR-specific overlay implementation.
 
7
 *
 
8
 * @module lazr.overlay
 
9
 */
 
10
 
 
11
var ESCAPE = 27,
 
12
    CANCEL = 'cancel',
 
13
    BOUNDING_BOX = 'boundingBox',
 
14
    CONTENT_BOX = 'contentBox',
 
15
    BINDUI = "bindUI";
 
16
 
 
17
 
 
18
   /**
 
19
    * An Overlay subclass which draws a rounded-corner, drop-shadow
 
20
    * border around the content.
 
21
    * TODO PrettyOverlay implements an in-page modal dialog box.
 
22
    * The background is blocked using a layer, in order to prevent
 
23
    * clicks on other elements on the page. Pressing Escape or clicking
 
24
    * the close button at the top-right corner dismisses the box.
 
25
    *
 
26
    * Note: Classes extending PrettyOverlay must have a corresponding
 
27
    * yui3-widget-name-hidden CSS class in order to allow hiding.
 
28
    * Also, all extending classes must explicitly calls PrettyOverlay's
 
29
    * bindUI method in order to get the event handlers attached.
 
30
    *
 
31
    * @class PrettyOverlay
 
32
    * @namespace lazr
 
33
    */
 
34
    var PrettyOverlay = function() {
 
35
        // Check whether the callsite has set a zIndex... if not, set it
 
36
        // to 1000, as the YUI.overlay default is zero.
 
37
        if (arguments[0] && arguments[0].zIndex === undefined){
 
38
            arguments[0].zIndex = 1000;
 
39
        }
 
40
        PrettyOverlay.superclass.constructor.apply(this, arguments);
 
41
        Y.after(this._bindUIPrettyOverlay, this, BINDUI);
 
42
 
 
43
    };
 
44
 
 
45
    PrettyOverlay.NAME = 'pretty-overlay';
 
46
 
 
47
    PrettyOverlay.ATTRS = {
 
48
       /**
 
49
        * The value, in percentage, of the progress bar.
 
50
        *
 
51
        * @attribute progress
 
52
        * @type Float
 
53
        * @default 100
 
54
        */
 
55
        progress: {
 
56
            value: 100
 
57
        },
 
58
 
 
59
       /**
 
60
        * Should the progress bar be shown?
 
61
        * (note that if set to true, headerContent must be supplied).
 
62
        *
 
63
        * @attribute progressbar
 
64
        * @type Boolean
 
65
        * @default true
 
66
        */
 
67
        progressbar: {
 
68
            value: true
 
69
        },
 
70
 
 
71
       /**
 
72
        * Title for this step, displayed below the progressbar.
 
73
        * (you must have a progressbar to have a steptitle)
 
74
        *
 
75
        * @attribute steptitle
 
76
        * @type Boolean
 
77
        * @default null
 
78
        */
 
79
        steptitle: {
 
80
          value: null
 
81
        }
 
82
    };
 
83
 
 
84
    Y.extend(PrettyOverlay, Y.Overlay, {
 
85
        /**
 
86
         * The div element shown behind the modal dialog.
 
87
         *
 
88
         * @private
 
89
         * @property _blocking_div
 
90
         * @type Node
 
91
         */
 
92
        _blocking_div: null,
 
93
 
 
94
        /**
 
95
         * The key press handler..
 
96
         *
 
97
         * @private
 
98
         * @property _doc_kp_handler
 
99
         * @type EventHandle
 
100
         */
 
101
        _doc_kp_handler: null,
 
102
 
 
103
        /**
 
104
         * The div displaying the prograss bar.
 
105
         *
 
106
         * @private
 
107
         * @property _green_bar
 
108
         * @type Node
 
109
         */
 
110
        _green_bar: null,
 
111
 
 
112
       /**
 
113
        * Create the DOM elements needed by the widget.
 
114
        *
 
115
        * @protected
 
116
        * @method initializer
 
117
        */
 
118
        initializer: function() {
 
119
            // The 20% width style is here to force
 
120
            // legacy browsers to include an accessible
 
121
            // style attribute.
 
122
            this._green_bar = Y.Node.create([
 
123
              '<div class="steps">',
 
124
              '<div class="step-on" style="width:20%;">',
 
125
              '</div></div>'].join(""));
 
126
 
 
127
            this._blocking_div = Y.Node.create(
 
128
                '<div class="blocking-div"></div>');
 
129
 
 
130
            this.after("renderedChange", function() {
 
131
                var bounding_box = this.get(BOUNDING_BOX);
 
132
                var content_box = this.get(CONTENT_BOX);
 
133
                var content_box_container = bounding_box.one(
 
134
                    ".content_box_container");
 
135
                if (content_box_container) {
 
136
                    content_box_container.appendChild(content_box);
 
137
                }
 
138
                this._setupCloseFacilities();
 
139
            });
 
140
 
 
141
            this.after('visibleChange', function(e) {
 
142
                this._setupCloseFacilities();
 
143
            });
 
144
 
 
145
           /**
 
146
            * Fires when the user presses the 'Cancel' button.
 
147
            *
 
148
            * @event cancel
 
149
            * @preventable _defCancel
 
150
            */
 
151
            this.publish(CANCEL, {
 
152
                defaultFn: this._defaultCancel
 
153
            });
 
154
        },
 
155
 
 
156
        /**
 
157
         * Event handler to update HTML when steptitle is set.
 
158
         *
 
159
         * @private
 
160
         * @param e {Event.Facade}
 
161
         * @method _afterSteptitleChange
 
162
         */
 
163
        _afterSteptitleChange: function(e) {
 
164
            // It's only possible to  have a step title
 
165
            // if you also have a progress bar.
 
166
            var progress_bar = this.get(BOUNDING_BOX).one(".steps");
 
167
            if (!progress_bar) {
 
168
                return;
 
169
            }
 
170
            var h2 = progress_bar.one("h2");
 
171
            if (!h2) {
 
172
              h2 = Y.Node.create("<h2></h2>");
 
173
              progress_bar.appendChild(h2);
 
174
              progress_bar.addClass("contains-steptitle");
 
175
            }
 
176
            // We can't just set innerHTML here because Firefox gets it wrong
 
177
            // so remove all existing nodes and add the steptitle as a textnode
 
178
            while (h2.hasChildNodes()) {
 
179
              h2.removeChild(h2.get("firstChild"));
 
180
            }
 
181
            h2.appendChild(document.createTextNode(this.get("steptitle")));
 
182
        },
 
183
 
 
184
        /**
 
185
         * Handle the progress change event, adjusting the display
 
186
         * of the progress bar.
 
187
         *
 
188
         * @private
 
189
         * @param e {Event.Facade}
 
190
         * @method _afterProgressChange
 
191
         */
 
192
        _afterProgressChange: function(e) {
 
193
            var width = parseInt(this.get("progress"), 10);
 
194
            if (width < 0) {
 
195
                width = 0;
 
196
            }
 
197
            if (width > 100) {
 
198
                width = 100;
 
199
            }
 
200
            if (this.get("progressbar") &&
 
201
                this.get(CONTENT_BOX).one(".steps")) {
 
202
                // The prograss bar is only being created if
 
203
                // you both ask for it and supply header content
 
204
                var progress_steps = this.get(CONTENT_BOX).one(".step-on");
 
205
                progress_steps.setStyle("width", width + "%");
 
206
            }
 
207
        },
 
208
 
 
209
        /**
 
210
         * Hook the events for the escape key press and include
 
211
         * the blocking div.
 
212
         *
 
213
         * @protected
 
214
         * @method _setupCloseFacilities
 
215
         */
 
216
        _setupCloseFacilities: function() {
 
217
            var self = this;
 
218
            var visible = this.get('visible');
 
219
            if (visible) {
 
220
                Y.one('body').appendChild(this._blocking_div);
 
221
                // Handle Escape (code 27) on keydown.
 
222
                this._doc_kp_handler = Y.on('key', function() {
 
223
                        self.fire(CANCEL);
 
224
                    }, document, 'down:27');
 
225
            } else {
 
226
                this._removeBlockingDiv();
 
227
            }
 
228
        },
 
229
 
 
230
        /**
 
231
         * Remove the HTML for the blocking DIV.
 
232
         *
 
233
         * @method _removeBlockingDiv
 
234
         */
 
235
        _removeBlockingDiv: function() {
 
236
            if (this._blocking_div) {
 
237
                var blocking_div = Y.one(this._blocking_div);
 
238
                if (blocking_div) {
 
239
                    var parent = blocking_div.get('parentNode');
 
240
                    if (parent) {
 
241
                        parent.removeChild(this._blocking_div);
 
242
                    }
 
243
                }
 
244
            }
 
245
        },
 
246
 
 
247
        /**
 
248
         * Destroy the widget (remove its HTML from the page).
 
249
         *
 
250
         * @method destructor
 
251
         */
 
252
        destructor: function() {
 
253
            this._removeBlockingDiv();
 
254
            if (this._doc_kp_handler) {
 
255
                this._doc_kp_handler.detach();
 
256
            }
 
257
        },
 
258
 
 
259
        /**
 
260
         * Bind UI events.
 
261
         * <p>
 
262
         * This method is invoked after bindUI is invoked for the Widget class
 
263
         * using YUI's aop infrastructure.
 
264
         * </p>
 
265
         *
 
266
         * @method _bindUIPrettyOverlay
 
267
         * @protected
 
268
         */
 
269
        _bindUIPrettyOverlay: function() {
 
270
            var self = this;
 
271
            var close_button = this.get(BOUNDING_BOX).one('.close a');
 
272
            close_button.on('click', function(e) {
 
273
                e.halt();
 
274
                self.fire(CANCEL);
 
275
            });
 
276
            this._blocking_div.on('click', function(e) {
 
277
                e.halt();
 
278
                self.fire(CANCEL);
 
279
            });
 
280
            // Ensure that when the overlay is clicked, it doesn't stay
 
281
            // focused (with the ugly gray border).
 
282
            var bounding_box = this.get(BOUNDING_BOX);
 
283
            bounding_box.on('click', function(e) {
 
284
                bounding_box.blur();
 
285
            });
 
286
            this.after('steptitleChange', this._afterSteptitleChange);
 
287
            this.after('progressChange', this._afterProgressChange);
 
288
        },
 
289
 
 
290
        /**
 
291
         * Event handler for cancel event; hides the widget.
 
292
         *
 
293
         * @private
 
294
         * @method _defaultCancel
 
295
         */
 
296
        _defaultCancel: function(e) {
 
297
            this.hide();
 
298
            this._doc_kp_handler.detach();
 
299
        },
 
300
 
 
301
        /**
 
302
         * Overrides the method from WidgetStdMod which creates the separate
 
303
         * sections in the contentBox to also add the progressbar widget
 
304
         * after headerContent.
 
305
         *
 
306
         * @private
 
307
         * @method _insertStdModSection
 
308
         */
 
309
        _insertStdModSection: function(content_box, section, section_node) {
 
310
            PrettyOverlay.superclass._insertStdModSection.apply(
 
311
                this, arguments);
 
312
            if (section === Y.WidgetStdMod.HEADER &&
 
313
                this.get("progressbar"))
 
314
            {
 
315
                var nxt = section_node.next();
 
316
                if (nxt) {
 
317
                  content_box.insertBefore(this._green_bar, nxt);
 
318
                } else {
 
319
                  content_box.appendChild(this._green_bar);
 
320
                }
 
321
            }
 
322
            this._afterProgressChange();
 
323
            if (this.get('steptitle')) {
 
324
                this._afterSteptitleChange();
 
325
            }
 
326
        }
 
327
    });
 
328
 
 
329
   /**
 
330
    * The HTML for drawing the border.
 
331
    *
 
332
    * The border is implemented using a table. The content area is
 
333
    * marked with the `content_box_container` class so that the widget
 
334
    * can find it and insert the content box into it.
 
335
    *
 
336
    * @property BOUNDING_TEMPLATE
 
337
    */
 
338
    PrettyOverlay.prototype.BOUNDING_TEMPLATE = [
 
339
        '<div class="pretty-overlay-window">',
 
340
        '<div class="content_box_container" id="yui3-pretty-overlay-modal">',
 
341
        '<div class="close">',
 
342
        '<a href="#" title="Close" class="close-button"></a>',
 
343
        '</div>',
 
344
        '</div>',
 
345
        '</div>'].join('');
 
346
 
 
347
    Y.namespace('lazr');
 
348
 
 
349
    Y.lazr.PrettyOverlay = PrettyOverlay;
 
350
 
 
351
}, "0.1", {"skinnable": true, "requires": ["oop", "overlay", "event", "widget", "widget-stack", "widget-position"]});