← Back to branch summary

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

« back to all changes in this revision

Viewing changes to build/music-widgets/music-widgets.js

  • Committer: Stephen Stewart
  • Date: 2014-02-22 23:57:25 UTC
  • mfrom: (18.1.2 trunk)
  • Revision ID: stephen.stewart@canonical.com-20140222235725-iw6f15t9umws19xd
merge lp:~stephen-stewart/online-services-common-js/remove-u1

Show diffs side-by-side

added added

removed removed

Lines of Context:
build/music-widgets/music-widgets.js
1
 
YUI.add('music-widgets', function (Y, NAME) {
2
 
 
3
 
"use strict";
4
 
/*global GLOBAL_PLAYLIST_LIST */
5
 
var CLICK = 'click',
6
 
    ACTION = 'action',
7
 
    PARENTNODE = 'parentNode',
8
 
    OPTIONS = 'options',
9
 
    EVENTS = 'events',
10
 
    EXPANDED = 'expanded',
11
 
    LI = 'li',
12
 
    SLIDER = 'slider',
13
 
    BOUNDINGBOX = 'boundingBox',
14
 
    DIALOG = 'dialog',
15
 
    YESBUTTON = 'yesButton',
16
 
    NOBUTTON = 'noButton',
17
 
    BODYCONTENT = 'bodyContent',
18
 
    HASHADDTOPLAYLIST = '#add-to-playlist',
19
 
    VALUE = 'value',
20
 
    DIV = '<div></div>',
21
 
    exports = Y.namespace('Music');
22
 
 
23
 
exports.SubMenu = Y.Base.create('submenu', Y.Widget, [], {
24
 
    renderUI: function() {
25
 
        var first = this.get('first'),
26
 
        items = this.get('items'),
27
 
        action = Y.Node.create(DIV),
28
 
        options = Y.Node.create(DIV);
29
 
        action.addClass('yui3-submenu-action');
30
 
        first.insert(action, 0);
31
 
        this.set(ACTION, action);
32
 
 
33
 
        options.addClass('yui3-submenu-options');
34
 
        items.get(PARENTNODE).append(options);
35
 
        items.each(function(item) {
36
 
            if (item !== first) {
37
 
                item.remove();
38
 
                options.appendChild(item);
39
 
            }
40
 
        });
41
 
        this.set(OPTIONS, options);
42
 
    },
43
 
    bindUI: function() {
44
 
        this.get(ACTION).on(CLICK, this.onClick, this);
45
 
    },
46
 
    onClick: function(e) {
47
 
        e.preventDefault();
48
 
        var parentNode = this.get(OPTIONS).get(PARENTNODE),
49
 
        events = this.get(EVENTS),
50
 
        eventsLength;
51
 
 
52
 
        if (parentNode.hasClass(EXPANDED)) {
53
 
            parentNode.removeClass(EXPANDED);
54
 
 
55
 
            eventsLength = events.length;
56
 
            while (events.length) {
57
 
                events.pop().detach();
58
 
            }
59
 
        } else {
60
 
            parentNode.addClass(EXPANDED);
61
 
 
62
 
            events.push(Y.one('html').on(CLICK, function(e) {
63
 
                var action = this.get(ACTION);
64
 
                if (!action.contains(e.target)) {
65
 
                    action.simulate(CLICK);
66
 
                }
67
 
            }, this));
68
 
        }
69
 
        this.set(EVENTS, events);
70
 
    }
71
 
}, {
72
 
    ATTRS: {
73
 
        action: { value: null },
74
 
        events: { value: [] },
75
 
        first: { value: null },
76
 
        items: { value: [] },
77
 
        options: { value: null }
78
 
    },
79
 
    HTML_PARSER: {
80
 
        first: LI,
81
 
        items: [LI]
82
 
    }
83
 
});
84
 
 
85
 
exports.Slider = Y.Base.create('slideroverlay', Y.Overlay, [], {
86
 
    afterRender: function() {
87
 
        var slider = new Y.Slider({
88
 
            axis: 'y',
89
 
            value: 0,
90
 
            zIndex: 5
91
 
        });
92
 
        slider.render(this.get('contentBox'));
93
 
        slider.on('valueChange', this.get('valueChangeHandler'));
94
 
        this.set(SLIDER, slider);
95
 
    },
96
 
    renderUI: function() {
97
 
        this.get(BOUNDINGBOX).addClass('yui3-skin-sam');
98
 
    },
99
 
    bindUI: function() {
100
 
        this.after('render', this.afterRender, this);
101
 
    },
102
 
    getValue: function() {
103
 
        return this.get(SLIDER).getValue();
104
 
    }
105
 
}, {
106
 
    ATTRS: {
107
 
        height: { value: '150px' },
108
 
        valueChangeHandler: { value: null },
109
 
        slider: { value: false },
110
 
        width: { value: '20px' }
111
 
    }
112
 
});
113
 
 
114
 
exports.Dialog = Y.Base.create(DIALOG, Y.Widget,
115
 
                               [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetPositionAlign,
116
 
                                   Y.WidgetPositionConstrain], {
117
 
                                       destructor: function() {
118
 
                                           var focusNode = this.get('focusNode');
119
 
                                           if (focusNode) {
120
 
                                               focusNode.focus();
121
 
                                           }
122
 
                                       }
123
 
                                   }, {
124
 
                                       ATTRS: {
125
 
                                           centered: { value: true },
126
 
                                           focusNode: { value: null }
127
 
                                       }
128
 
                                   });
129
 
 
130
 
                                   exports.YesNoDialog = Y.Base.create('yes-no-dialog', exports.Dialog, [], {
131
 
                                       renderUI: function() {
132
 
                                           var footerContent = Y.Node.create(DIV),
133
 
                                           yesButton = Y.Node.create('<button>Yes</button>'),
134
 
                                           noButton = Y.Node.create('<button class="cancel">No</button>'),
135
 
                                           msg = this.get('message');
136
 
 
137
 
                                           this.set(YESBUTTON, yesButton);
138
 
                                           this.set(NOBUTTON, noButton);
139
 
                                           footerContent.appendChild(yesButton);
140
 
                                           footerContent.appendChild(noButton);
141
 
 
142
 
                                           if (this.get("escapeHTML") === true){
143
 
                                               msg = Y.Escape.html(msg);
144
 
                                           }
145
 
 
146
 
                                           this.set(BODYCONTENT, msg);
147
 
                                           this.set('footerContent', footerContent);
148
 
                                       },
149
 
                                       bindUI: function() {
150
 
                                           this.get(YESBUTTON).on(CLICK, this.get('yesFn'));
151
 
                                           this.get(NOBUTTON).on(CLICK, this.get('noFn'));
152
 
                                       }
153
 
                                   }, {
154
 
                                       ATTRS: {
155
 
                                           message: { value: null },
156
 
                                           yesButton : { value: null },
157
 
                                           yesFn: { value: function() {} },
158
 
                                           noButton: { value: null },
159
 
                                           noFn: { value: function() {} },
160
 
                                           escapeHTML: { value: true }
161
 
                                       }
162
 
                                   });
163
 
 
164
 
                                   exports.PlaylistDialog = Y.Base.create(DIALOG, exports.Dialog, [], {
165
 
                                       renderUI: function() {
166
 
                                           var playlistTemplate = Y.one('#playlist-select').getContent(),
167
 
                                           playlistDisplay = Y.Node.create(
168
 
                                               Y.one(HASHADDTOPLAYLIST).getContent()),
169
 
                                               selectionNode = playlistDisplay.one('.selection'),
170
 
                                               length = GLOBAL_PLAYLIST_LIST.length,
171
 
                                               escapeHtml = function(k,v){
172
 
                                                   return Y.Escape.html(v);
173
 
                                               },
174
 
                                               i,
175
 
                                               playlist,
176
 
                                               rendered;
177
 
 
178
 
                                               if (this.get('addFn') !== null) {
179
 
                                                   if (length > 0) {
180
 
                                                       selectionNode.setContent('');
181
 
                                                   }
182
 
                                                   for (i=0; i<length; i++) {
183
 
                                                       playlist = GLOBAL_PLAYLIST_LIST[i],
184
 
                                                       rendered = Y.Node.create(
185
 
                                                           Y.substitute(playlistTemplate, playlist, escapeHtml));
186
 
                                                           selectionNode.appendChild(rendered);
187
 
                                                   }
188
 
                                               } else {
189
 
                                                   selectionNode.get(PARENTNODE).remove();
190
 
                                                   this.set('height', '130px');
191
 
                                               }
192
 
                                               this.set(BODYCONTENT, playlistDisplay);
193
 
                                       },
194
 
                                       bindUI: function() {
195
 
                                           var createFn = this.get('createFn'),
196
 
                                           addFn = this.get('addFn'),
197
 
                                           self = this;
198
 
                                           this.get('createButton').on(CLICK, function(e) {
199
 
                                               var name = e.target.get(PARENTNODE).one('input').get(VALUE);
200
 
                                               createFn(name);
201
 
                                               self.destroy();
202
 
                                           });
203
 
                                           if (addFn !== null) {
204
 
                                               this.get('cancelButton').on(CLICK, Y.bind(this.destroy, this));
205
 
                                               this.get('addButton').on(CLICK, function(e) {
206
 
                                                   var radioButton = e.target.get(PARENTNODE).one('input:checked');
207
 
                                                   if (radioButton) {
208
 
                                                       addFn(radioButton.get(VALUE));
209
 
                                                       self.destroy();
210
 
                                                   } else {
211
 
                                                       Y.Global.fire('one:error', {message: 'No playlist selected. Please select a playlist to add to'});
212
 
                                                   }
213
 
                                               });
214
 
                                           }
215
 
                                       }
216
 
                                   }, {
217
 
                                       ATTRS: {
218
 
                                           createFn: { value: function() {} },
219
 
                                           addFn: { value: function() {} },
220
 
                                           headerContent: { value: 'Create a new playlist' },
221
 
                                           createButton: { getter: function() {
222
 
                                               return this.get(BOUNDINGBOX).one('#create-new');
223
 
                                           }},
224
 
                                           createPlaylist: { getter: function() {
225
 
                                               return this.get(BOUNDINGBOX).one('#new-playlist');
226
 
                                           }},
227
 
                                           cancelButton: { getter: function() {
228
 
                                               return this.get(BOUNDINGBOX).one('.cancel');
229
 
                                           }},
230
 
                                           addButton: { getter: function() {
231
 
                                               return this.get(BOUNDINGBOX).one(HASHADDTOPLAYLIST);
232
 
                                           }},
233
 
                                           height: { value: '420px' },
234
 
                                           width: { value: '400px' }
235
 
                                       }
236
 
                                   });
237
 
 
238
 
 
239
 
}, '@VERSION@', {
240
 
    "requires": [
241
 
        "base-base",
242
 
        "base-pluginhost",
243
 
        "base-build",
244
 
        "escape",
245
 
        "node-event-simulate",
246
 
        "overlay",
247
 
        "slider-base",
248
 
        "slider-value-range",
249
 
        "clickable-rail",
250
 
        "range-slider",
251
 
        "widget-base",
252
 
        "widget-htmlparser",
253
 
        "widget-uievents",
254
 
        "widget-skin",
255
 
        "widget-stdmod",
256
 
        "widget-position",
257
 
        "widget-stack",
258
 
        "widget-position-align",
259
 
        "widget-position-constrain"
260
 
    ]
261
 
});