← Back to branch summary

~jonas-drange/online-services-common-js/navbar-autocomplete

« back to all changes in this revision

Viewing changes to src/plugin-collapse/js/plugin-collapse.js

  • Committer: Stephen Stewart
  • Date: 2014-03-18 10:35:57 UTC
  • mfrom: (24.1.12 widget-navbar)
  • Revision ID: stephen.stewart@canonical.com-20140318103557-wbkn3aespr1lwrcs
merge lp:~stephen-stewart/online-services-common-js/widget-navbar

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/plugin-collapse/js/plugin-collapse.js
 
1
/**
 
2
 * very simple plugin to collapse a node witha given transition type
 
3
 */
 
4
Y.namespace('Plugin').Collapse = Y.Base.create('collapse', Y.Plugin.Base, [], {
 
5
    initializer: function() {
 
6
        this.host = this.get('host');
 
7
 
 
8
        this.state = this.get('state') || null;
 
9
 
 
10
        this.config = this.getAttrs(['easing', 'duration']);
 
11
 
 
12
        this.host.addClass('collapse');
 
13
        // if state is set to closed/false, set height to 0
 
14
        if (!this.get('state')) {
 
15
            this.host.addClass('in');
 
16
            this.host.setStyle('height', 0);
 
17
        }
 
18
    },
 
19
    open: function() {
 
20
        var host = this.host;
 
21
        var plugin = this;
 
22
 
 
23
        host.removeClass('collapse')
 
24
            .addClass('collapsing');
 
25
 
 
26
        plugin.config.height = host.get('scrollHeight') + 'px';
 
27
 
 
28
        host.transition(plugin.config, function(e) {
 
29
            this.replaceClass('collapsing', 'collapse')
 
30
                .removeClass('in');
 
31
 
 
32
            this.collapse.set('state', true);
 
33
        });
 
34
    },
 
35
    close: function() {
 
36
        var host = this.host;
 
37
        var plugin = this;
 
38
        plugin.config.height = 0;
 
39
 
 
40
        host.removeClass('collapse')
 
41
            .addClass('collapsing');
 
42
 
 
43
        host.transition(this.config, function() {
 
44
            this.replaceClass('collapsing', 'collapse')
 
45
                .addClass('in');
 
46
 
 
47
            this.collapse.set('state', false);
 
48
        });
 
49
    },
 
50
 
 
51
    toggle: function() {
 
52
        if (this.get('state')) {
 
53
            this.close();
 
54
        } else {
 
55
            this.open();
 
56
        }
 
57
    }
 
58
}, {
 
59
    NS: 'collapse',
 
60
    ATTRS: {
 
61
        duration: {
 
62
            value: '0.2'
 
63
        },
 
64
        easing: {
 
65
            value: 'cubic-bezier'
 
66
        },
 
67
        state: {
 
68
            // truthy if open, falsey if closed
 
69
            value: 0
 
70
        }
 
71
    }
 
72
});