← Back to branch summary

~stephen-stewart/online-services-common-js/update-global-nav

« back to all changes in this revision

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

  • Committer: Stephen Stewart
  • Date: 2014-02-22 15:05:16 UTC
  • Revision ID: stephen.stewart@canonical.com-20140222150516-rkzti2c43ggwr2ta
import latest js, convert

Show diffs side-by-side

added added

removed removed

Lines of Context:
build/music-widgets/music-widgets-debug.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
});