← 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: Launchpad Patch Queue Manager
  • Date: 2011-07-17 23:09:32 UTC
  • mfrom: (13452.1.1 revert-lots)
  • Revision ID: launchpad@pqm.canonical.com-20110717230932-sp6yro99is2077fx
[r=wgrant][rollback=13421] Revert r13421 and r13438 (already
 partially reverted in r13443 and restored in r13445). Fix for DSP:+index
 expanders has not yet landed.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/lp/app/javascript/expander.js
50
50
 *         "expander" as its argument.  Once the loader has constructed the
51
51
 *         output Node or NodeList it wants to display ("output"), it calls
52
52
 *         expander.receive(output) to update the content node.
53
 
 *     animate_node: A node to perform an animation on.  Mostly useful for
54
 
 *         animating table rows/cells when you want to animate the inner
55
 
 *         content (eg. a <div>).
56
 
 *     no_animation: Set to true if no animation should be used.  Useful for
57
 
 *         when you can't rearrange the nodes so animations apply to them
58
 
 *         (eg. we want to show a bunch of rows in the same table).
59
53
 */
60
54
function Expander(icon_node, content_node, config) {
61
55
    if (!Y.Lang.isObject(icon_node)) {
72
66
        this.config = {};
73
67
    }
74
68
    this.loaded = !Y.Lang.isValue(this.config.loader);
75
 
 
76
 
    if (Y.Lang.isValue(this.config.animate_node)) {
77
 
        this._animate_node = Y.one(this.config.animate_node);
78
 
    } else {
79
 
        this._animate_node = this.content_node;
80
 
    }
81
 
 
82
 
    if (this.config.no_animation !== true) {
83
 
        this._animation = Y.lazr.effects.reversible_slide_out(
84
 
            this._animate_node);
85
 
    } else {
86
 
        this._animation = undefined;
87
 
    }
 
69
    this._animation = Y.lazr.effects.reversible_slide_out(
 
70
        this.content_node);
88
71
 
89
72
    // Is setup complete?  Skip any animations until it is.
90
73
    this.fully_set_up = false;
150
133
    foldContentNode: function(expand, no_animation) {
151
134
        var expander = this;
152
135
        var has_paused = false;
153
 
        if (no_animation === true || Y.Lang.isUndefined(this._animation)) {
 
136
        if (no_animation === true) {
154
137
            // Make the animation have the proper direction set from
155
138
            // the start.
156
 
            if (!Y.Lang.isUndefined(this._animation)) {
157
 
                this._animation.set('reverse', expand);
158
 
            }
 
139
            this._animation.set('reverse', expand);
159
140
            expander.setContentClassIf(
160
141
                !expand, expander.css_classes.unseen);
161
142
        } else {
184
165
 
185
166
    revealIcon: function() {
186
167
        this.icon_node
187
 
            .addClass('sprite')
 
168
            .addClass('sprite').addClass('js-action')
188
169
            .removeClass('unseen');
189
170
    },
190
171
 
211
192
        if (failed === true) {
212
193
            this.loaded = false;
213
194
        }
214
 
        var from_height = this._animate_node.getStyle('height');
215
 
        this._animate_node.setContent(output);
216
 
        if (Y.Lang.isUndefined(this._animation)) {
217
 
            return;
218
 
        }
219
 
        var to_height = this._animate_node.get('scrollHeight');
 
195
        var from_height = this.content_node.getStyle('height');
 
196
        this.content_node.setContent(output);
 
197
        var to_height = this.content_node.get('scrollHeight');
220
198
        if (this._animation.get('running')) {
221
199
            this._animation.stop();
222
200
        }
249
227
        this.setExpanded(expanded);
250
228
    },
251
229
 
252
 
    /**
253
 
     * Wrap node content in an <a> tag and mark it as js-action.
254
 
     *
255
 
     * @param node Y.Node object to modify: its content is modified
256
 
     *     in-place so node events won't be lost, but anything set on
257
 
     *     the inner content nodes might be.
258
 
     */
259
 
    wrapNodeWithLink: function(node) {
260
 
        var link_node = Y.Node.create('<a></a>')
261
 
            .addClass('js-action')
262
 
            .set('href', '#')
263
 
            .setContent(node.getContent());
264
 
        node.setContent(link_node);
265
 
    },
266
 
 
267
230
    /*
268
231
     * Set up an expander's DOM and event handler.
269
232
     *
270
 
     * @param linkify {Boolean} Wrap the icon node into an <A> tag with
271
 
     *     proper CSS classes and content from the icon node.
272
233
     */
273
 
    setUp: function(linkify) {
 
234
    setUp: function() {
274
235
        var expander = this;
275
236
        function click_handler(e) {
276
237
            e.halt();
278
239
        }
279
240
 
280
241
        this.render(this.isExpanded(), true);
281
 
        if (linkify === true) {
282
 
            this.wrapNodeWithLink(this.icon_node);
283
 
        }
284
242
        this.icon_node.on('click', click_handler);
285
243
        this.revealIcon();
286
244
        this.fully_set_up = true;