OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --> | 8 --> |
9 | 9 |
10 <!-- | 10 <!-- |
11 `core-scroll-threshold` is a utility element that listens for `scroll` events fr
om a | 11 `core-scroll-threshold` is a utility element that listens for `scroll` events fr
om a |
12 scrollable region and fires events to indicate when the scroller has reached a p
re-defined | 12 scrollable region and fires events to indicate when the scroller has reached a p
re-defined |
13 limit, specified in pixels from the upper and lower bounds of the scrollable reg
ion. | 13 limit, specified in pixels from the upper and lower bounds of the scrollable reg
ion. |
14 | 14 |
15 This element may wrap a scrollable region and will listen for `scroll` events bu
bbling | 15 This element may wrap a scrollable region and will listen for `scroll` events bu
bbling |
16 through it from its children. In this case, care should be taken that only one
scrollable | 16 through it from its children. In this case, care should be taken that only one
scrollable |
17 region with the same orientation as this element is contained within. Alternati
vely, | 17 region with the same orientation as this element is contained within. Alternati
vely, |
18 the `scrollTarget` property can be set/bound to a non-child scrollable region, f
rom which | 18 the `scrollTarget` property can be set/bound to a non-child scrollable region, f
rom which |
19 it will listen for events. | 19 it will listen for events. |
20 | 20 |
21 Once a threshold has been reached, a `lower-threshold` or `upper-threshold` even
t will | 21 Once a threshold has been reached, a `lower-trigger` or `upper-trigger` event wi
ll |
22 be fired, at which point the user may perform actions such as lazily-loading mor
e data | 22 be fired, at which point the user may perform actions such as lazily-loading mor
e data |
23 to be displayed. After any work is done, the user must then clear the threshold
by | 23 to be displayed. After any work is done, the user must then clear the threshold
by |
24 calling the `clearUpper` or `clearLower` methods on this element, after which it
will | 24 calling the `clearUpper` or `clearLower` methods on this element, after which it
will |
25 begin listening again for the scroll position to reach the threshold again (assu
ming | 25 begin listening again for the scroll position to reach the threshold again assum
ing |
26 the content in the) scrollable region has grown. If the user no longer wishes t
o receive | 26 the content in the scrollable region has grown. If the user no longer wishes to
receive |
27 events (e.g. all data has been exhausted), the | 27 events (e.g. all data has been exhausted), the threshold property in question (e
.g. |
| 28 `lowerThreshold`) may be set to a falsy value to disable events and clear the as
sociated |
| 29 triggered property. |
28 | 30 |
29 Example: | 31 Example: |
30 | 32 |
31 <core-scroll-threshold id="threshold" lowerThreshold="500" | 33 <core-scroll-threshold id="threshold" lowerThreshold="500" |
32 on-lower-triggered="{{loadMore}}" lowerTriggered="{{spinnerShouldShow}}"> | 34 on-lower-trigger="{{loadMore}}" lowerTriggered="{{spinnerShouldShow}}"> |
33 </scroll-threshold> | 35 </core-scroll-threshold> |
34 | 36 |
35 ... | 37 ... |
36 | 38 |
37 loadMore: function() { | 39 loadMore: function() { |
38 this.asyncLoadStuffThen(function() { | 40 this.asyncLoadStuffThen(function() { |
39 this.$.threshold.clearLower(); | 41 this.$.threshold.clearLower(); |
40 }.bind(this)); | 42 }.bind(this)); |
41 } | 43 } |
42 | 44 |
43 @group Polymer Core Elements | 45 @group Polymer Core Elements |
(...skipping 10 matching lines...) Expand all Loading... |
54 Polymer({ | 56 Polymer({ |
55 | 57 |
56 publish: { | 58 publish: { |
57 | 59 |
58 /** | 60 /** |
59 * When set, the given element is observed for scroll position. When unde
fined, | 61 * When set, the given element is observed for scroll position. When unde
fined, |
60 * children can be placed inside and element itself can be used as the scr
ollable | 62 * children can be placed inside and element itself can be used as the scr
ollable |
61 * element. | 63 * element. |
62 * | 64 * |
63 * @attribute scrollTarget | 65 * @attribute scrollTarget |
64 * @type string | 66 * @type Element |
65 * @default null | 67 * @default null |
66 */ | 68 */ |
67 scrollTarget: null, | 69 scrollTarget: null, |
68 | 70 |
69 /** | 71 /** |
70 * Orientation of the scroller to be observed (`v` for vertical, `h` for h
orizontal) | 72 * Orientation of the scroller to be observed (`v` for vertical, `h` for h
orizontal) |
71 * | 73 * |
72 * @attribute orient | 74 * @attribute orient |
73 * @type boolean | 75 * @type boolean |
74 * @default 'v' | 76 * @default 'v' |
75 */ | 77 */ |
76 orient: 'v', | 78 orient: 'v', |
77 | 79 |
78 /** | 80 /** |
79 * Distance from the top (or left, for horizontal) bound of the scroller | 81 * Distance from the top (or left, for horizontal) bound of the scroller |
80 * where the "upper trigger" will fire. | 82 * where the "upper trigger" will fire. |
81 * | 83 * |
82 * @attribute upperThreshold | 84 * @attribute upperThreshold |
83 * @type integer | 85 * @type integer |
84 * @default null | 86 * @default null |
85 */ | 87 */ |
86 upperThreshold: null, | 88 upperThreshold: null, |
87 | 89 |
88 /** | 90 /** |
89 * Distance from the bottom (or right, for horizontal) bound of the scroll
er | 91 * Distance from the bottom (or right, for horizontal) bound of the scroll
er |
90 * where the "lower trigger" will fire. | 92 * where the "lower trigger" will fire. |
91 * | 93 * |
92 * @attribute lowerThreshold | 94 * @attribute lowerThreshold |
93 * @type integer | 95 * @type integer |
94 * @default false | 96 * @default null |
95 */ | 97 */ |
96 lowerThreshold: null, | 98 lowerThreshold: null, |
97 | 99 |
98 /** | 100 /** |
99 * Read-only value that tracks the triggered state of the upper threshold | 101 * Read-only value that tracks the triggered state of the upper threshold |
100 * | 102 * |
101 * @attribute upperTriggered | 103 * @attribute upperTriggered |
102 * @type boolean | 104 * @type boolean |
103 * @default false | 105 * @default false |
104 */ | 106 */ |
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
211 listener.call(this, observer, mutations); | 213 listener.call(this, observer, mutations); |
212 observer.disconnect(); | 214 observer.disconnect(); |
213 }.bind(this)); | 215 }.bind(this)); |
214 observer.observe(this._scrollTarget, {attributes:true, childList: true, su
btree: true}); | 216 observer.observe(this._scrollTarget, {attributes:true, childList: true, su
btree: true}); |
215 } | 217 } |
216 | 218 |
217 }); | 219 }); |
218 | 220 |
219 </script> | 221 </script> |
220 </polymer-element> | 222 </polymer-element> |
OLD | NEW |