← Back to branch summary

~launchpad-pqm/launchpad/devel

« back to all changes in this revision

Viewing changes to lib/lp/app/javascript/expander.js

  • Committer: Julian Edwards
  • Date: 2011-07-28 20:46:18 UTC
  • mfrom: (13553 devel)
  • mto: This revision was merged to the branch mainline in revision 13555.
  • Revision ID: julian.edwards@canonical.com-20110728204618-tivj2wx2oa9s32bx
merge trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/lp/app/javascript/expander.js
31
31
 * created in its expanded state instead, mark your content tag with the
32
32
 * "expanded" class.
33
33
 *
34
 
 * An expander may be created with a group_id. Expanders which belong to the
35
 
 * same group can only have one instance in the expanded state at any time. If
36
 
 * a collapsed expander is opened, any other open expander within the same
37
 
 * group will be closed.
38
 
 *
39
34
 * @module lp.app.widgets.expander
40
35
 * @requires node, event
41
36
 */
44
39
 
45
40
var namespace = Y.namespace('lp.app.widgets.expander');
46
41
 
47
 
// Define some constants.
48
 
var EXPANDER_CREATED = 'expander:created',
49
 
    EXPANDER_DESTROYED = 'expander:destroyed',
50
 
    EXPANDER_STATE_CHANGED = 'expander:state_changed',
51
 
    EXPANDED = 'expander:expanded',
52
 
    COLLAPSED = 'expander:collapsed';
53
 
 
54
 
namespace.EXPANDER_CREATED = EXPANDER_CREATED;
55
 
namespace.EXPANDER_DESTORYED = EXPANDER_DESTROYED;
56
 
namespace.EXPANDER_STATE_CHANGED = EXPANDER_STATE_CHANGED;
57
 
namespace.EXPANDED = EXPANDED;
58
 
namespace.COLLAPSED = COLLAPSED;
59
 
 
60
 
/**
61
 
 * A single ExpanderRadioController instance is created for this namespace.
62
 
 * Each expander instance which is created with a group id is registered with
63
 
 * this controller. The controller ensures that only one expander from each
64
 
 * group is open at any time.
65
 
 */
66
 
function ExpanderRadioController() {
67
 
    ExpanderRadioController.superclass.constructor.apply(this, arguments);
68
 
}
69
 
 
70
 
ExpanderRadioController.NAME = "ExpanderRadioController";
71
 
 
72
 
Y.extend(ExpanderRadioController, Y.Base, {
73
 
 
74
 
    initializer: function() {
75
 
        this.expanders = {};
76
 
        var controller = this;
77
 
        Y.on(EXPANDER_CREATED, function(group_id, expander) {
78
 
            controller._registerExpander(group_id, expander);
79
 
        });
80
 
        Y.on(EXPANDER_DESTROYED, function(group_id, expander) {
81
 
            controller._deregisterExpander(group_id, expander);
82
 
        });
83
 
        Y.on(EXPANDER_STATE_CHANGED,
84
 
            function(group_id, new_state, active_expander) {
85
 
                controller._stateChangeProcessor(
86
 
                    group_id, new_state, active_expander);
87
 
            });
88
 
    },
89
 
 
90
 
    _stateChangeProcessor: function(group_id, new_state, active_expander) {
91
 
        this.expanders[group_id].forEach(function(expander) {
92
 
            if (new_state === EXPANDED && expander !== active_expander) {
93
 
                if (expander.isExpanded()) {
94
 
                    expander.render(false);
95
 
                }
96
 
            }
97
 
        }, this);
98
 
    },
99
 
 
100
 
    _registerExpander: function(group_id, expander) {
101
 
        if (!this.expanders.hasOwnProperty(group_id)) {
102
 
            this.expanders[group_id] = [];
103
 
        }
104
 
        this.expanders[group_id].push(expander);
105
 
    },
106
 
 
107
 
    _deregisterExpander: function(group_id, expander) {
108
 
        if (this.expanders.hasOwnProperty(group_id)) {
109
 
            var idx = this.expanders[group_id].indexOf(expander);
110
 
            if (idx !== -1) {
111
 
                this.expanders[group_id].splice(idx, 1);
112
 
            }
113
 
        }
114
 
    }
115
 
});
116
 
 
117
 
// Create the controller instance
118
 
if (namespace.expanderRadioController === undefined) {
119
 
    namespace.expanderRadioController = new ExpanderRadioController();
120
 
}
121
 
 
122
42
/*
123
43
 * Create an expander.
124
44
 *
138
58
 *         (eg. we want to show a bunch of rows in the same table).
139
59
 */
140
60
function Expander(icon_node, content_node, config) {
141
 
    Expander.superclass.constructor.apply(this);
142
 
 
143
61
    if (!Y.Lang.isObject(icon_node)) {
144
62
        throw new Error("No icon node given.");
145
63
    }
168
86
        this._animation = undefined;
169
87
    }
170
88
 
171
 
    if (Y.Lang.isValue(this.config.group_id)) {
172
 
        Y.fire(EXPANDER_CREATED, this.config.group_id, this);
173
 
    }
174
 
 
175
89
    // Is setup complete?  Skip any animations until it is.
176
90
    this.fully_set_up = false;
177
91
}
178
 
Expander.NAME = "Expander";
179
92
namespace.Expander = Expander;
180
93
 
181
 
Y.extend(Expander, Y.Base, {
 
94
namespace.Expander.prototype = {
182
95
    /*
183
96
     * CSS classes.
184
97
     */
187
100
        unseen: 'unseen'
188
101
    },
189
102
 
190
 
    destructor: function() {
191
 
        if (Y.Lang.isValue(this.config.group_id)) {
192
 
            Y.fire(EXPANDER_DESTROYED, this.config.group_id, this);
193
 
        }
194
 
    },
195
 
 
196
103
    /*
197
104
     * Return sprite name for given expander state.
198
105
     */
228
135
    },
229
136
 
230
137
    /*
231
 
     * Record the expanded/collapsed state of the content tag and fire the
232
 
     * state_changed event.
 
138
     * Record the expanded/collapsed state of the content tag.
233
139
     */
234
140
    setExpanded: function(is_expanded) {
235
 
        var state_changed = this.isExpanded() !== is_expanded;
236
141
        this.setContentClassIf(is_expanded, this.css_classes.expanded);
237
 
        if (state_changed && Y.Lang.isValue(this.config.group_id)) {
238
 
            Y.fire(
239
 
                EXPANDER_STATE_CHANGED,
240
 
                this.config.group_id,
241
 
                is_expanded?EXPANDED:COLLAPSED, this);
242
 
        }
243
142
    },
244
143
 
245
144
    /*
388
287
        this.fully_set_up = true;
389
288
        return this;
390
289
    }
391
 
});
 
290
};
392
291
 
393
292
/*
394
293
 * Initialize expanders based on CSS selectors.
419
318
}
420
319
namespace.createByCSS = createByCSS;
421
320
 
422
 
}, "0.1", {"requires": ["base", "event", "node", "lazr.effects"]});
 
321
}, "0.1", {"requires": ["node", "lazr.effects"]});