OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2014 The Chromium Authors. All rights reserved. | 2 // Copyright 2014 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> | 6 <import src="../../framework/sky-element/sky-element.sky" as="SkyElement" /> |
7 <import src="city-data-service.sky" as="CityDataService" /> | 7 <import src="city-data-service.sky" as="CityDataService" /> |
8 <import src="city-sequence.sky" as="CitySequence" /> | 8 <import src="city-sequence.sky" as="CitySequence" /> |
9 | 9 |
10 <template> | 10 <template> |
11 <style> | 11 <style> |
12 div { | 12 div { |
13 font-size: 16px; | 13 font-size: 16px; |
14 color: #FFF; | 14 color: #FFF; |
15 background-color: #333; | 15 background-color: #333; |
16 padding: 4px 4px 4px 12px; | 16 padding: 4px 4px 4px 12px; |
17 } | 17 } |
18 </style> | 18 </style> |
19 <div>{{ state }}</div> | 19 <div>{{ state }}</div> |
20 </template> | 20 </template> |
(...skipping 130 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
151 </template> | 151 </template> |
152 <script> | 152 <script> |
153 | 153 |
154 (function(global) { | 154 (function(global) { |
155 "use strict"; | 155 "use strict"; |
156 | 156 |
157 var LOAD_LENGTH = 20; | 157 var LOAD_LENGTH = 20; |
158 var LOAD_BUFFER_PRE = LOAD_LENGTH * 4; | 158 var LOAD_BUFFER_PRE = LOAD_LENGTH * 4; |
159 var LOAD_BUFFER_POST = LOAD_LENGTH * 4; | 159 var LOAD_BUFFER_POST = LOAD_LENGTH * 4; |
160 | 160 |
161 function Loader() { | 161 function Loader(cityList) { |
| 162 this.cityList = cityList; |
162 this.loadingData = false; | 163 this.loadingData = false; |
163 this.data = null; | 164 this.data = null; |
164 this.zeroIndex = 0; | 165 this.zeroIndex = 0; |
165 this.loadIndex = 0; | 166 this.loadIndex = 0; |
166 } | 167 } |
167 | 168 |
168 Loader.prototype.localIndex = function(externalIndex) { | 169 Loader.prototype.localIndex = function(externalIndex) { |
169 return externalIndex + this.zeroIndex; | 170 return externalIndex + this.zeroIndex; |
170 } | 171 } |
171 | 172 |
172 Loader.prototype.externalIndex = function(localIndex) { | 173 Loader.prototype.externalIndex = function(localIndex) { |
173 return localIndex - this.zeroIndex; | 174 return localIndex - this.zeroIndex; |
174 } | 175 } |
175 | 176 |
176 Loader.prototype.getItems = function() { | 177 Loader.prototype.getItems = function() { |
177 return this.data ? this.data.items : []; | 178 return this.data ? this.data.items : []; |
178 } | 179 } |
179 | 180 |
180 Loader.prototype.maybeLoadMoreData = function(dataloadedCallback, | 181 Loader.prototype.maybeLoadMoreData = |
181 firstVisible) { | 182 function(dataloadedCallback, firstVisible) { |
182 if (this.loadingData) | 183 if (this.loadingData) |
183 return; | 184 return; |
184 | 185 |
185 if (firstVisible) { | 186 if (firstVisible) { |
186 this.loadIndex = this.externalIndex( | 187 this.loadIndex = this.externalIndex( |
187 this.data.items.indexOf(firstVisible)); | 188 this.data.items.indexOf(firstVisible)); |
188 } | 189 } |
189 | 190 |
190 var localIndex = this.localIndex(this.loadIndex); | 191 var localIndex = this.localIndex(this.loadIndex); |
191 var loadedPre = 0; | 192 var loadedPre = 0; |
192 var loadedPost = 0; | 193 var loadedPost = 0; |
193 | 194 |
194 if (this.data) { | 195 if (this.data) { |
195 loadedPre = localIndex; | 196 loadedPre = localIndex; |
196 loadedPost = this.data.items.length - loadedPre; | 197 loadedPost = this.data.items.length - loadedPre; |
197 } | 198 } |
198 | 199 |
199 var loadTime; | 200 var loadTime; |
200 if (loadedPre >= LOAD_BUFFER_PRE && loadedPost >= LOAD_BUFFER_POST) { | 201 if (loadedPre >= LOAD_BUFFER_PRE && |
| 202 loadedPost >= LOAD_BUFFER_POST) { |
| 203 |
| 204 var cityList = this.cityList; |
| 205 setTimeout(function() { |
| 206 cityList.dispatchEvent(new Event('load')); |
| 207 }); |
| 208 |
201 if (window.startLoad) { | 209 if (window.startLoad) { |
202 loadTime = new Date().getTime() - window.startLoad; | 210 loadTime = new Date().getTime() - window.startLoad; |
203 console.log('Load: ' + loadTime + 'ms'); | 211 console.log('Load: ' + loadTime + 'ms'); |
204 window.startLoad = undefined; | 212 window.startLoad = undefined; |
205 } | 213 } |
206 return; | 214 return; |
207 } | 215 } |
208 | 216 |
209 this.loadingData = true; | 217 this.loadingData = true; |
210 | 218 |
(...skipping 319 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
530 name: 'city-list', | 538 name: 'city-list', |
531 loader: null, | 539 loader: null, |
532 scroller: null, | 540 scroller: null, |
533 tiler: null, | 541 tiler: null, |
534 date: null, | 542 date: null, |
535 month: null, | 543 month: null, |
536 views: null, | 544 views: null, |
537 | 545 |
538 attached: function() { | 546 attached: function() { |
539 this.views = {}; | 547 this.views = {}; |
540 this.loader = new Loader(); | 548 this.loader = new Loader(this); |
541 this.scroller = new Scroller(); | 549 this.scroller = new Scroller(); |
542 this.tiler = new Tiler( | 550 this.tiler = new Tiler( |
543 this.shadowRoot.getElementById('contentarea'), this.views, { | 551 this.shadowRoot.getElementById('contentarea'), this.views, { |
544 stateHeader: 27, | 552 stateHeader: 27, |
545 letterHeader: 18, | 553 letterHeader: 18, |
546 cityItem: 30 | 554 cityItem: 30 |
547 }); | 555 }); |
548 | 556 |
549 this.dataLoaded = this.dataLoaded.bind(this); | 557 this.dataLoaded = this.dataLoaded.bind(this); |
550 this.shadowRoot.getElementById('scroller') | 558 this.scrollerElement = this.shadowRoot.getElementById('scroller'); |
551 .addEventListener('scroll', this.handleScroll.bind(this)); | 559 this.scrollerElement.addEventListener('scroll', |
| 560 this.handleScroll.bind(this)); |
552 | 561 |
553 var self = this; | 562 var self = this; |
554 requestAnimationFrame(function() { | 563 setTimeout(function() { |
555 self.domReady(); | 564 self.domReady(); |
556 self.loader.maybeLoadMoreData(self.dataLoaded); | 565 self.loader.maybeLoadMoreData(self.dataLoaded); |
557 }); | 566 }); |
558 }, | 567 }, |
559 | 568 |
560 domReady: function() { | 569 domReady: function() { |
561 this.scroller.setup(this.shadowRoot.getElementById('scroller'), | 570 this.scroller.setup(this.shadowRoot.getElementById('scroller'), |
562 this.shadowRoot.getElementById('scrollarea'), | 571 this.shadowRoot.getElementById('scrollarea'), |
563 this.shadowRoot.getElementById('contentarea')); | 572 this.shadowRoot.getElementById('contentarea')); |
564 var scrollFrame = this.scroller.getCurrentFrame(); | 573 var scrollFrame = this.scroller.getCurrentFrame(); |
(...skipping 19 matching lines...) Expand all Loading... |
584 return; | 593 return; |
585 | 594 |
586 this.updateView(this.loader.getItems(), true); | 595 this.updateView(this.loader.getItems(), true); |
587 } | 596 } |
588 }); | 597 }); |
589 | 598 |
590 })(this); | 599 })(this); |
591 | 600 |
592 </script> | 601 </script> |
593 | 602 |
OLD | NEW |