OLD | NEW |
1 'use strict'; | 1 'use strict'; |
2 | 2 |
3 | 3 |
4 /** | 4 /** |
5 * Browser Editorial View. | 5 * Browser Editorial View. |
6 * | 6 * |
7 * @module juju.browser | 7 * @module juju.browser |
8 * @submodule views | 8 * @submodule views |
9 * | 9 * |
10 */ | 10 */ |
11 YUI.add('subapp-browser-editorial', function(Y) { | 11 YUI.add('subapp-browser-editorial', function(Y) { |
12 var ns = Y.namespace('juju.browser.views'), | 12 var ns = Y.namespace('juju.browser.views'), |
13 models = Y.namespace('juju.models'), | 13 models = Y.namespace('juju.models'), |
14 views = Y.namespace('juju.views'), | 14 views = Y.namespace('juju.views'), |
15 widgets = Y.namespace('juju.widgets'); | 15 widgets = Y.namespace('juju.widgets'); |
16 | 16 |
17 | 17 |
18 /** | 18 /** |
19 * Editorial view for landing pages. | 19 * Editorial view for landing pages. |
20 * | 20 * |
21 * @class Editorial | 21 * @class Editorial |
22 * @extends {juju.browser.views.Editorial} | 22 * @extends {juju.browser.views.Editorial} |
23 * | 23 * |
24 */ | 24 */ |
25 ns.EditorialView = Y.Base.create('browser-view-sidebar', Y.View, [], { | 25 ns.EditorialView = Y.Base.create('browser-view-sidebar', Y.View, [], { |
26 template: views.Templates.editorial, | 26 template: views.Templates.editorial, |
27 | 27 |
| 28 events: { |
| 29 '.charm-token': { |
| 30 click: '_handleCharmSelection' |
| 31 } |
| 32 }, |
| 33 |
| 34 /** |
| 35 When selecting a charm from the list make sure we re-route the app to |
| 36 the details view with that charm selected. |
| 37 |
| 38 @method _handleCharmSelection |
| 39 @param {Event} ev the click event handler for the charm selected. |
| 40 |
| 41 */ |
| 42 _handleCharmSelection: function(ev) { |
| 43 var charm = ev.currentTarget; |
| 44 var charmID = charm.getData('charmid'); |
| 45 |
| 46 this.fire('viewNavigate', { |
| 47 change: { |
| 48 charmID: charmID |
| 49 } |
| 50 }); |
| 51 }, |
| 52 |
28 /** | 53 /** |
29 * General YUI initializer. | 54 * General YUI initializer. |
30 * | 55 * |
31 * @method initializer | 56 * @method initializer |
32 * @param {Object} cfg configuration object. | 57 * @param {Object} cfg configuration object. |
33 * | 58 * |
34 */ | 59 */ |
35 initializer: function(cfg) { | 60 initializer: function(cfg) { |
36 // Hold onto charm data so we can pass model instances to other views when | 61 // Hold onto charm data so we can pass model instances to other views when |
37 // charms are selected. | 62 // charms are selected. |
38 this._cacheCharms = new models.BrowserCharmList(); | 63 this._cacheCharms = new models.BrowserCharmList(); |
39 }, | 64 }, |
40 | 65 |
41 /** | 66 /** |
42 * Load the editorial content into the container specified. | 67 * Load the editorial content into the container specified. |
43 * | 68 * |
44 * @method render | 69 * @method render |
45 * @param {Node} container An optional node to override where it's going. | 70 * @param {Node} container An optional node to override where it's going. |
46 * | 71 * |
47 */ | 72 */ |
48 render: function(container) { | 73 render: function() { |
49 var tpl = this.template(this.getAttrs()), | 74 var tpl = this.template(this.getAttrs()), |
50 tplNode = Y.Node.create(tpl), | 75 tplNode = Y.Node.create(tpl), |
51 store = this.get('store'); | 76 store = this.get('store'); |
52 | 77 |
53 if (typeof container !== 'object') { | |
54 container = this.get('container'); | |
55 } else { | |
56 this.set('container', container); | |
57 } | |
58 | |
59 // By default we grab the editorial content from the api to use for | 78 // By default we grab the editorial content from the api to use for |
60 // display. | 79 // display. |
61 this.get('store').interesting({ | 80 this.get('store').interesting({ |
62 'success': function(data) { | 81 'success': function(data) { |
63 // Add featured charms | 82 // Add featured charms |
64 var featuredCharms = this.get('store').resultsToCharmlist( | 83 var featuredCharms = this.get('store').resultsToCharmlist( |
65 data.result.featured); | 84 data.result.featured); |
66 var featuredContainer = tplNode.one('.featured'); | 85 var featuredContainer = tplNode.one('.featured'); |
67 var featuredCharmContainer = new widgets.browser.CharmContainer({ | 86 var featuredCharmContainer = new widgets.browser.CharmContainer({ |
68 name: 'Featured Charms', | 87 name: 'Featured Charms', |
(...skipping 20 matching lines...) Expand all Loading... |
89 var newCharms = this.get('store').resultsToCharmlist( | 108 var newCharms = this.get('store').resultsToCharmlist( |
90 data.result['new']); | 109 data.result['new']); |
91 var newCharmContainer = new widgets.browser.CharmContainer({ | 110 var newCharmContainer = new widgets.browser.CharmContainer({ |
92 name: 'New Charms', | 111 name: 'New Charms', |
93 cutoff: 2, | 112 cutoff: 2, |
94 children: newCharms.map(function(charm) { | 113 children: newCharms.map(function(charm) { |
95 return charm.getAttrs(); }) | 114 return charm.getAttrs(); }) |
96 }); | 115 }); |
97 newCharmContainer.render(newContainer); | 116 newCharmContainer.render(newContainer); |
98 | 117 |
99 container.setHTML(tplNode); | 118 var container = this.get('container'); |
| 119 container.append(tplNode); |
| 120 this.get('renderTo').setHTML(container); |
100 | 121 |
101 // Add the charms to the cache for use in other views. | 122 // Add the charms to the cache for use in other views. |
102 // Start with a reset to empty any current cached models. | 123 // Start with a reset to empty any current cached models. |
103 this._cacheCharms.reset(newCharms); | 124 this._cacheCharms.reset(newCharms); |
104 this._cacheCharms.add(popularCharms); | 125 this._cacheCharms.add(popularCharms); |
105 this._cacheCharms.add(featuredCharms); | 126 this._cacheCharms.add(featuredCharms); |
106 this.charmContainers = [ | 127 this.charmContainers = [ |
107 featuredCharmContainer, | 128 featuredCharmContainer, |
108 newCharmContainer, | 129 newCharmContainer, |
109 popularCharmContainer | 130 popularCharmContainer |
(...skipping 30 matching lines...) Expand all Loading... |
140 container.destroy(); | 161 container.destroy(); |
141 }); | 162 }); |
142 } | 163 } |
143 this._cacheCharms.destroy(); | 164 this._cacheCharms.destroy(); |
144 } | 165 } |
145 }, { | 166 }, { |
146 ATTRS: { | 167 ATTRS: { |
147 isFullscreen: { | 168 isFullscreen: { |
148 value: false | 169 value: false |
149 }, | 170 }, |
| 171 renderTo: { |
| 172 |
| 173 }, |
150 store: { | 174 store: { |
151 | 175 |
152 } | 176 } |
153 } | 177 } |
154 }); | 178 }); |
155 | 179 |
156 }, '0.1.0', { | 180 }, '0.1.0', { |
157 requires: [ | 181 requires: [ |
158 'browser-charm-container', | 182 'browser-charm-container', |
159 'browser-charm-token', | 183 'browser-charm-token', |
160 'browser-search-widget', | 184 'browser-search-widget', |
161 'juju-charm-store', | 185 'juju-charm-store', |
162 'juju-models', | 186 'juju-models', |
163 'juju-templates', | 187 'juju-templates', |
164 'view' | 188 'view' |
165 ] | 189 ] |
166 }); | 190 }); |
OLD | NEW |