| OLD | NEW |
| (Empty) |
| 1 Polymer({ | |
| 2 is: 'app-box', | |
| 3 | |
| 4 behaviors: [ | |
| 5 Polymer.AppScrollEffectsBehavior, | |
| 6 Polymer.IronResizableBehavior | |
| 7 ], | |
| 8 | |
| 9 listeners: { | |
| 10 'iron-resize': '_resizeHandler' | |
| 11 }, | |
| 12 | |
| 13 /** | |
| 14 * The current scroll progress. | |
| 15 * | |
| 16 * @type {number} | |
| 17 */ | |
| 18 _progress: 0, | |
| 19 | |
| 20 attached: function() { | |
| 21 this.resetLayout(); | |
| 22 }, | |
| 23 | |
| 24 /** | |
| 25 * Resets the layout. This method is automatically called when the element
is attached to the DOM. | |
| 26 * | |
| 27 * @method resetLayout | |
| 28 */ | |
| 29 resetLayout: function() { | |
| 30 this.debounce('_resetLayout', function() { | |
| 31 // noop if the box isn't in the rendered tree | |
| 32 if (this.offsetWidth === 0 && this.offsetHeight === 0) { | |
| 33 return; | |
| 34 } | |
| 35 | |
| 36 var scrollTop = this._clampedScrollTop; | |
| 37 var savedDisabled = this.disabled; | |
| 38 | |
| 39 this.disabled = true; | |
| 40 this._elementTop = this._getElementTop(); | |
| 41 this._elementHeight = this.offsetHeight; | |
| 42 this._cachedScrollTargetHeight = this._scrollTargetHeight; | |
| 43 this._setUpEffect(); | |
| 44 this._updateScrollState(scrollTop); | |
| 45 this.disabled = savedDisabled; | |
| 46 }, 1); | |
| 47 }, | |
| 48 | |
| 49 _getElementTop: function() { | |
| 50 var currentNode = this; | |
| 51 var top = 0; | |
| 52 | |
| 53 while (currentNode && currentNode !== this.scrollTarget) { | |
| 54 top += currentNode.offsetTop; | |
| 55 currentNode = currentNode.offsetParent; | |
| 56 } | |
| 57 return top; | |
| 58 }, | |
| 59 | |
| 60 _updateScrollState: function(scrollTop) { | |
| 61 if (this.isOnScreen()) { | |
| 62 var viewportTop = this._elementTop - scrollTop; | |
| 63 this._progress = 1 - (viewportTop + this._elementHeight) / this._cache
dScrollTargetHeight; | |
| 64 this._runEffects(this._progress, scrollTop); | |
| 65 } | |
| 66 }, | |
| 67 | |
| 68 /** | |
| 69 * Returns true if this app-box is on the screen. | |
| 70 * That is, visible in the current viewport. | |
| 71 * | |
| 72 * @method isOnScreen | |
| 73 * @return {boolean} | |
| 74 */ | |
| 75 isOnScreen: function() { | |
| 76 return this._elementTop < this._scrollTop + this._cachedScrollTargetHeig
ht | |
| 77 && this._elementTop + this._elementHeight > this._scrollTop; | |
| 78 }, | |
| 79 | |
| 80 _resizeHandler: function() { | |
| 81 this.resetLayout(); | |
| 82 }, | |
| 83 | |
| 84 _getDOMRef: function(id) { | |
| 85 if (id === 'background') { | |
| 86 return this.$.background; | |
| 87 } | |
| 88 if (id === 'backgroundFrontLayer') { | |
| 89 return this.$.backgroundFrontLayer; | |
| 90 } | |
| 91 }, | |
| 92 | |
| 93 /** | |
| 94 * Returns an object containing the progress value of the scroll effects. | |
| 95 * | |
| 96 * @method getScrollState | |
| 97 * @return {Object} | |
| 98 */ | |
| 99 getScrollState: function() { | |
| 100 return { progress: this._progress }; | |
| 101 } | |
| 102 }); | |
| OLD | NEW |