LEFT | RIGHT |
1 'use strict'; | 1 'use strict'; |
2 | 2 |
3 | 3 |
4 /** | 4 /** |
5 Provides searching functionality for the charm browser. | 5 Provides searching functionality for the charm browser. |
6 | 6 |
7 @namespace juju | 7 @namespace juju |
8 @module browser | 8 @module browser |
9 @submodule views | 9 @submodule views |
10 */ | 10 */ |
11 YUI.add('subapp-browser-searchview', function(Y) { | 11 YUI.add('subapp-browser-searchview', function(Y) { |
12 var ns = Y.namespace('juju.browser.views'), | 12 var ns = Y.namespace('juju.browser.views'), |
13 views = Y.namespace('juju.views'), | 13 views = Y.namespace('juju.views'), |
14 widgets = Y.namespace('juju.widgets'), | 14 widgets = Y.namespace('juju.widgets'), |
15 models = Y.namespace('juju.models'); | 15 models = Y.namespace('juju.models'); |
16 | 16 |
17 ns.BrowserSearchView = Y.Base.create('browser-view-searchview', Y.View, [ | 17 ns.BrowserSearchView = Y.Base.create('browser-view-searchview', Y.View, [ |
18 views.utils.apiFailingView, | 18 views.utils.apiFailingView, |
19 Y.Event.EventTracker | 19 Y.Event.EventTracker |
20 ], { | 20 ], { |
21 events: { | 21 events: { |
22 '.charm-token': { | 22 '.charm-token': { |
23 click: '_handleCharmSelection' | 23 click: '_handleCharmSelection' |
24 }, | 24 }, |
25 '.filterControl': { | 25 '.filterControl a': { |
26 click: '_toggleFilters' | 26 click: '_toggleFilters' |
27 } | 27 } |
28 }, | 28 }, |
29 | 29 |
30 template: views.Templates.search, | 30 template: views.Templates.search, |
31 | 31 |
32 /** | 32 /** |
33 When a filter is changed, catch the event and build a change object for | 33 When a filter is changed, catch the event and build a change object for |
34 the subapp to generate a new route for. | 34 the subapp to generate a new route for. |
35 | 35 |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 }, | 72 }, |
73 | 73 |
74 /** | 74 /** |
75 Show/hide the filters based on the click of this control. | 75 Show/hide the filters based on the click of this control. |
76 | 76 |
77 @method _toggleFilters | 77 @method _toggleFilters |
78 @param {Event} ev The click event from YUI. | 78 @param {Event} ev The click event from YUI. |
79 | 79 |
80 */ | 80 */ |
81 _toggleFilters: function(ev) { | 81 _toggleFilters: function(ev) { |
| 82 ev.halt(); |
| 83 |
82 var control = ev.currentTarget; | 84 var control = ev.currentTarget; |
83 var hidden = control.hasClass('less'); | 85 var newTarget = control.hasClass('less') ? 'more' : 'less'; |
84 if (hidden) { | 86 newTarget = this.get('container').one('.filterControl .' + newTarget); |
85 control.setContent(' ^ Hide filters'); | 87 |
86 control.removeClass('less'); | 88 control.hide(); |
| 89 newTarget.show(); |
| 90 |
| 91 if (newTarget.hasClass('less')) { |
87 this.get('container').one('.search-filters').show(); | 92 this.get('container').one('.search-filters').show(); |
88 } else { | 93 } else { |
89 control.setContent(' v Show filters'); | |
90 control.addClass('less'); | |
91 this.get('container').one('.search-filters').hide(); | 94 this.get('container').one('.search-filters').hide(); |
92 } | 95 } |
93 }, | 96 }, |
94 | 97 |
95 /** | 98 /** |
96 Update the node in the editorial list marked as 'active'. | 99 Update the node in the editorial list marked as 'active'. |
97 @method _updateActive | 100 @method _updateActive |
98 @param {Node} clickTarget the charm-token clicked on to activate. | 101 @param {Node} clickTarget the charm-token clicked on to activate. |
99 | 102 |
100 */ | 103 */ |
101 _updateActive: function(clickTarget) { | 104 _updateActive: function(clickTarget) { |
102 // Remove the active class from any nodes that have it. | 105 // Remove the active class from any nodes that have it. |
103 Y.all('.yui3-charmtoken.active').removeClass('active'); | 106 Y.all('.yui3-charmtoken.active').removeClass('active'); |
104 | 107 |
105 // Add it to the current node. | 108 // Add it to the current node. |
106 clickTarget.ancestor('.yui3-charmtoken').addClass('active'); | 109 if (clickTarget) { |
| 110 clickTarget.ancestor('.yui3-charmtoken').addClass('active'); |
| 111 } |
107 }, | 112 }, |
108 | 113 |
109 /** | 114 /** |
110 Renders the search results from the the store query. | 115 Renders the search results from the the store query. |
111 | 116 |
112 @method _renderSearchResults | 117 @method _renderSearchResults |
113 | 118 |
114 */ | 119 */ |
115 _renderSearchResults: function(results) { | 120 _renderSearchResults: function(results) { |
116 var target = this.get('renderTo'), | 121 var target = this.get('renderTo'), |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
156 @method apiFailure | 161 @method apiFailure |
157 @param {Object} data the json decoded response text. | 162 @param {Object} data the json decoded response text. |
158 @param {Object} request the original io_request object for debugging. | 163 @param {Object} request the original io_request object for debugging. |
159 | 164 |
160 */ | 165 */ |
161 apiFailure: function(data, request) { | 166 apiFailure: function(data, request) { |
162 this._apiFailure(data, request, 'Failed to load search results.'); | 167 this._apiFailure(data, request, 'Failed to load search results.'); |
163 }, | 168 }, |
164 | 169 |
165 /** | 170 /** |
166 Renders the searchview, rendering search results for the view's search | 171 * General YUI initializer. |
167 text. | 172 * |
168 | 173 * @method initializer |
169 @method render | 174 * @param {Object} cfg configuration object. |
| 175 * |
| 176 */ |
| 177 initializer: function(cfg) { |
| 178 this.on('activeIDChange', function(ev) { |
| 179 var id = ev.newVal; |
| 180 if (id) { |
| 181 id = this.get('container').one( |
| 182 '.charm-token[data-charmid="' + id + '"]'); |
| 183 } |
| 184 this._updateActive(id); |
| 185 }); |
| 186 }, |
| 187 |
| 188 /** |
| 189 * Renders the searchview, rendering search results for the view's search |
| 190 * text. |
| 191 * |
| 192 * @method render |
170 */ | 193 */ |
171 render: function() { | 194 render: function() { |
172 // This is only rendered once from the subapp and so the filters is the | 195 // This is only rendered once from the subapp and so the filters is the |
173 // initial set from the application. All subsequent renders go through | 196 // initial set from the application. All subsequent renders go through |
174 // the subapp so we don't have to keep the filters in sync here. | 197 // the subapp so we don't have to keep the filters in sync here. |
175 // If caching/reusing comes into play though an event to track the | 198 // If caching/reusing comes into play though an event to track the |
176 // change of the filters ATTR would make sense to re-draw. | 199 // change of the filters ATTR would make sense to re-draw. |
177 this.get('store').search(this.get('filters'), { | 200 this.get('store').search(this.get('filters'), { |
178 'success': function(data) { | 201 'success': function(data) { |
179 var results = this.get('store').resultsToCharmlist(data.result); | 202 var results = this.get('store').resultsToCharmlist(data.result); |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
222 'base-build', | 245 'base-build', |
223 'browser-charm-token', | 246 'browser-charm-token', |
224 'browser-filter-widget', | 247 'browser-filter-widget', |
225 'browser-overlay-indicator', | 248 'browser-overlay-indicator', |
226 'event-tracker', | 249 'event-tracker', |
227 'juju-browser-models', | 250 'juju-browser-models', |
228 'juju-view-utils', | 251 'juju-view-utils', |
229 'view' | 252 'view' |
230 ] | 253 ] |
231 }); | 254 }); |
LEFT | RIGHT |