Left: | ||
Right: |
OLD | NEW |
---|---|
(Empty) | |
1 'use strict'; | |
2 | |
3 | |
4 /** | |
5 Provides the filter widget, for selecting filters on search. | |
6 | |
7 @namespace juju | |
8 @module widgets | |
9 @submodule browser | |
10 */ | |
11 YUI.add('browser-filter-widget', function(Y) { | |
12 var views = Y.namespace('juju.views'), | |
13 models = Y.namespace('juju.models.browser'), | |
14 ns = Y.namespace('juju.widgets.browser'); | |
15 /** | |
16 Filter widget | |
17 | |
18 @class | |
19 @extends {Y.Widget} | |
20 @event EV_FILTER_CHANGED when the filter values have changed will fire | |
21 with a change object stating what field/value is updated. | |
22 | |
23 */ | |
24 ns.Filter = Y.Base.create('Filter', Y.Widget, [Y.Event.EventTracker], { | |
25 EV_FILTER_CHANGED: 'filter_changed', | |
26 template: views.Templates.filters, | |
27 | |
28 /** | |
29 When the filter inputs have changed, update the filters based on the | |
30 current state and fire an event to let everyone know. | |
31 | |
32 @method _changeFilters | |
33 @param {Event} e The change event from the inputs in the filter. | |
34 | |
35 */ | |
36 _changeFilters: function(e) { | |
37 var filters = this.get('filters'), | |
38 target = e.currentTarget, | |
39 val = target.get('value'); | |
40 | |
41 var filterType = target.get('parentNode').get('parentNode').get('id'); | |
42 filterType = filterType.replace('search-filter-', ''); | |
43 | |
44 var filterValue = this.get(filterType); | |
45 | |
46 if (target.get('checked')) { | |
47 // In this case we've checked a new filter that needs to be added to | |
48 // the correct property. | |
49 if (!filters[filterType]) { | |
50 filters[filterType] = []; | |
51 } | |
52 filters[filterType].push(val); | |
53 | |
54 // update our filters data. | |
55 this.fire(this.EV_FILTER_CHANGED, { | |
56 change: { | |
57 field: filterType, | |
58 value: filters[filterType] | |
59 } | |
60 }); | |
61 } else { | |
62 // Otherwise we're unchecking a filter and need to remove it from the | |
63 // list and determine if that list is now empty. | |
64 filterValue = filters[filterType].filter(function(item) { | |
65 return item !== val; | |
66 }); | |
67 filters[filterType] = filterValue; | |
68 this.fire(this.EV_FILTER_CHANGED, { | |
69 change: { | |
70 field: filterType, | |
71 value: filters[filterType] | |
72 } | |
73 }); | |
74 } | |
75 | |
76 }, | |
77 | |
78 /** | |
79 Widget UI binding. | |
80 | |
81 @method bindUI | |
82 | |
83 */ | |
84 bindUI: function() { | |
85 var cb = this.get('contentBox'); | |
86 this.addEvent( | |
87 cb.one('form').delegate( | |
88 'click', this._changeFilters, 'input[type="checkbox"]', this) | |
89 ); | |
90 }, | |
91 | |
92 /** | |
93 Widget render method. | |
94 | |
95 @method renderUI | |
96 | |
97 */ | |
98 renderUI: function() { | |
99 var tplNode = this.template(this.getAttrs()); | |
100 this.get('contentBox').setHTML(tplNode); | |
101 } | |
102 | |
103 }, { | |
104 ATTRS: { | |
105 /** | |
106 @attribute categories | |
107 @default See models.browser.Filter | |
108 @type {Array} | |
109 | |
110 */ | |
111 'category': { | |
112 /** | |
113 Given the list of filters available, which of ours are set or not | |
114 set. | |
115 | |
116 @method categories.getter | |
117 @return {Array} list of the categories set. | |
118 | |
119 */ | |
120 getter: function() { | |
121 var filters = this.get('filters'); | |
122 var res = []; | |
123 if (!filters || !filters.category) { | |
124 filters = {category: []}; | |
125 } | |
126 Y.Object.each(models.FILTER_CATEGORIES, function(val, key) { | |
127 res.push({ | |
128 name: val, | |
129 value: key, | |
130 checked: filters.category.indexOf(key) !== -1 ? true : false | |
131 }); | |
132 }); | |
133 return res; | |
134 } | |
135 }, | |
136 | |
137 /** | |
138 An object of the combined filters for all of the properties we track. | |
139 | |
140 This is the primary source of data as the other's are basically for | |
141 the template to use to generate the ul's of the various filter | |
142 options. | |
143 | |
144 @attribute filters | |
145 @default See models.browser.Filter | |
146 @type {Object} | |
147 | |
148 */ | |
149 'filters': {}, | |
150 | |
151 /** | |
152 @attribute providers | |
153 @default See models.browser.Filter | |
154 @type {Array} | |
155 | |
156 */ | |
157 'provider': { | |
158 /** | |
159 Given the list of filters available, which of ours are set or not | |
160 set. | |
161 | |
162 @method providers.getter | |
163 @return {Array} list of the providers set. | |
164 | |
165 */ | |
166 getter: function() { | |
167 var filters = this.get('filters'); | |
168 var res = []; | |
169 if (!filters || !filters.provider) { | |
170 filters = {provider: []}; | |
171 } | |
172 Y.Object.each(models.FILTER_PROVIDERS, function(val, key) { | |
173 res.push({ | |
174 name: val, | |
175 value: key, | |
176 checked: filters.provider.indexOf(key) !== -1 ? true : false | |
benji
2013/04/29 20:18:08
This could be just "filters.provider.indexOf(key)
rharding
2013/04/29 20:24:59
Thanks, good call.
| |
177 }); | |
178 }); | |
179 return res; | |
180 } | |
181 }, | |
182 | |
183 /** | |
184 @attribute series | |
185 @default See models.browser.Filter | |
186 @type {Array} | |
187 | |
188 */ | |
189 'series': { | |
190 /** | |
191 Given the list of filters available, which of ours are set or not | |
192 set. | |
193 | |
194 @method series.getter | |
195 @return {Array} list of the series set. | |
196 | |
197 */ | |
198 getter: function() { | |
199 var filters = this.get('filters'); | |
200 var res = []; | |
201 if (!filters || !filters.series) { | |
202 filters = {series: []}; | |
203 } | |
204 Y.Object.each(models.FILTER_SERIES, function(val, key) { | |
205 res.push({ | |
206 name: val, | |
207 value: key, | |
208 checked: filters.series.indexOf(key) !== -1 ? true : false | |
209 }); | |
210 }); | |
211 return res; | |
212 } | |
213 }, | |
214 | |
215 /** | |
216 @attribute types | |
217 @default See models.browser.Filter | |
218 @type {Array} | |
219 | |
220 */ | |
221 'type': { | |
222 /** | |
223 Given the list of filters available, which of ours are set or not | |
224 set. | |
225 | |
226 @method types.getter | |
227 @return {Array} list of the types set. | |
228 | |
229 */ | |
230 getter: function() { | |
231 var filters = this.get('filters'); | |
232 var res = []; | |
233 if (!filters || !filters.type) { | |
234 filters = {type: []}; | |
235 } | |
236 Y.Object.each(models.FILTER_TYPES, function(val, key) { | |
237 res.push({ | |
238 name: val, | |
239 value: key, | |
240 checked: filters.type.indexOf(key) !== -1 ? true : false | |
241 }); | |
242 }); | |
243 return res; | |
244 } | |
245 } | |
246 } | |
247 }); | |
248 | |
249 }, '0.1.0', { | |
250 requires: [ | |
251 'base-build', | |
252 'event-tracker', | |
253 'juju-templates', | |
254 'juju-browser-models', | |
255 'juju-view-utils', | |
256 'widget' | |
257 ] | |
258 }); | |
OLD | NEW |