OLD | NEW |
1 <!-- | 1 <!-- |
2 The common.js file must be included before this file. | 2 The common.js file must be included before this file. |
3 | 3 |
4 This in an HTML Import-able file that contains the definition | 4 This in an HTML Import-able file that contains the definition |
5 of the following elements: | 5 of the following elements: |
6 | 6 |
7 <query-sk> | 7 <query-sk> |
8 | 8 |
9 To use this file import it: | 9 To use this file import it: |
10 | 10 |
11 <link href="/res/imp/query.html" rel="import" /> | 11 <link href="/res/imp/query.html" rel="import" /> |
12 | 12 |
13 Usage: | 13 Usage: |
14 | 14 |
15 <query-sk scale=0 tile=-1></query-sk> | 15 <query-sk></query-sk> |
16 | |
17 Attributes: | |
18 scale: The tile scale to use. | |
19 tile: The tile index to use. | |
20 | 16 |
21 Properties: | 17 Properties: |
22 currentQuery: The current URL query formatted selections. | 18 currentQuery: The current URL query formatted selections. |
23 | 19 |
24 Methods: | 20 Methods: |
| 21 setParamSet(set): Set the params to be displayed. |
25 clearSelections(): Clear all selections. | 22 clearSelections(): Clear all selections. |
26 | 23 |
27 Events: | 24 Events: |
28 'change' | 25 'change' |
29 The 'sk-query' element will produce 'change' events when the query | 26 The 'sk-query' element will produce 'change' events when the query |
30 parameters chosen have changed. The event contains the current | 27 parameters chosen have changed. The event contains the current |
31 selections formatted as a URL query, found in e.detail. | 28 selections formatted as a URL query, found in e.detail. |
32 --> | 29 --> |
33 <polymer-element name="query-sk" attributes="scale tile"> | 30 <polymer-element name="query-sk"> |
34 <template> | 31 <template> |
35 <style type="text/css" media="screen"> | 32 <style type="text/css" media="screen"> |
36 #more.display { | 33 #more.display { |
37 display: none; | 34 display: none; |
38 } | 35 } |
39 select { | 36 select { |
40 overflow: auto; | 37 overflow: auto; |
41 margin: 0.3em; | 38 margin: 0.3em; |
42 } | 39 } |
43 | 40 |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
94 </div> | 91 </div> |
95 </template> | 92 </template> |
96 <script> | 93 <script> |
97 (function(){ | 94 (function(){ |
98 var whitelist = [ | 95 var whitelist = [ |
99 'name', 'bench_type', 'os', 'source_type', 'scale', 'extra_config', | 96 'name', 'bench_type', 'os', 'source_type', 'scale', 'extra_config', |
100 'config', 'arch']; | 97 'config', 'arch']; |
101 | 98 |
102 Polymer({ | 99 Polymer({ |
103 created: function() { | 100 created: function() { |
104 this.paramset = {}; | |
105 | |
106 // Both primary and secondary are arrays of objects that look like: | 101 // Both primary and secondary are arrays of objects that look like: |
107 // | 102 // |
108 // { | 103 // { |
109 // name: "config", | 104 // name: "config", |
110 // values: ["565", "8888", "gpu"] | 105 // values: ["565", "8888", "gpu"] |
111 // } | 106 // } |
112 // | 107 // |
113 // Where primary contains selections that are in the whitelist, and | 108 // Where primary contains selections that are in the whitelist, and |
114 // secondary contains all the other selections. | 109 // secondary contains all the other selections. |
115 this.primary = []; | 110 this.primary = []; |
116 this.secondary = []; | 111 this.secondary = []; |
117 }, | 112 }, |
118 | 113 |
119 ready: function() { | 114 ready: function() { |
120 this.currentQuery = ''; | 115 this.currentQuery = ''; |
121 this.tile = this.tile || -1; | |
122 this.scale = this.scale || 0; | |
123 | |
124 // TODO requery when scale or tile attrs change. | |
125 var that = this; | |
126 sk.get('/tiles/0/-1/').then(JSON.parse).then(function(json){ | |
127 that.paramset = json.paramset; | |
128 }); | |
129 | 116 |
130 this.$.inputs.addEventListener('core-select', this.fireChange.bind(thi
s)); | 117 this.$.inputs.addEventListener('core-select', this.fireChange.bind(thi
s)); |
131 this.$.more.addEventListener('core-select', this.fireChange.bind(this)
); | 118 this.$.more.addEventListener('core-select', this.fireChange.bind(this)
); |
132 | 119 |
133 this.$.clear.addEventListener('click', this.clearSelections.bind(this)
); | 120 this.$.clear.addEventListener('click', this.clearSelections.bind(this)
); |
134 }, | 121 }, |
135 | 122 |
136 clearSelections: function() { | 123 clearSelections: function() { |
137 $$('core-selector', this.$.inputs).forEach(function(elem) { | 124 $$('core-selector', this.$.inputs).forEach(function(elem) { |
138 elem.selected = []; | 125 elem.selected = []; |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
178 if (select.selected) { | 165 if (select.selected) { |
179 select.selected.forEach(function(value) { | 166 select.selected.forEach(function(value) { |
180 console.log(key, value); | 167 console.log(key, value); |
181 sel.push(encodeURIComponent(key) + '=' + encodeURIComponent(va
lue)); | 168 sel.push(encodeURIComponent(key) + '=' + encodeURIComponent(va
lue)); |
182 }); | 169 }); |
183 } | 170 } |
184 }); | 171 }); |
185 return sel.join('&') | 172 return sel.join('&') |
186 }, | 173 }, |
187 | 174 |
188 // When paramset changes rebuild the primary and secondary values. | 175 // When paramset is changed we rebuild primary and secondary. |
189 // | 176 // |
190 // The paramset is an object that maps selection names | 177 // The paramset is an object that maps selection names |
191 // to a list of selection values, not necessarily in alphabetical | 178 // to a list of selection values, not necessarily in alphabetical |
192 // order. | 179 // order. |
193 paramsetChanged: function() { | 180 setParamSet: function(paramset) { |
194 var keylist = Object.keys(this.paramset).sort(); | 181 var keylist = Object.keys(paramset).sort(); |
195 | 182 |
| 183 this.primary = []; |
| 184 this.secondary = []; |
196 for (var i = 0; i < keylist.length; i++) { | 185 for (var i = 0; i < keylist.length; i++) { |
197 var key = keylist[i]; | 186 var key = keylist[i]; |
198 var sel = { | 187 var sel = { |
199 name: key, | 188 name: key, |
200 values: this.paramset[key].sort() | 189 values: paramset[key].sort() |
201 } | 190 } |
202 if (whitelist.indexOf(key) != -1) { | 191 if (whitelist.indexOf(key) != -1) { |
203 this.primary.push(sel); | 192 this.primary.push(sel); |
204 } else { | 193 } else { |
205 this.secondary.push(sel); | 194 this.secondary.push(sel); |
206 } | 195 } |
207 } | 196 } |
208 } | 197 } |
209 }); | 198 }); |
210 })(); | 199 })(); |
211 </script> | 200 </script> |
212 </polymer-element> | 201 </polymer-element> |
OLD | NEW |