| OLD | NEW |
| (Empty) |
| 1 Polymer.AppLayout = Polymer.AppLayout || {}; | |
| 2 | |
| 3 Polymer.AppLayout._scrollEffects = Polymer.AppLayout._scrollEffects || {}; | |
| 4 | |
| 5 Polymer.AppLayout.scrollTimingFunction = function easeOutQuad(t, b, c, d) { | |
| 6 t /= d; | |
| 7 return -c * t*(t-2) + b; | |
| 8 }; | |
| 9 | |
| 10 /** | |
| 11 * Registers a scroll effect to be used in elements that implement the | |
| 12 * `Polymer.AppScrollEffectsBehavior` behavior. | |
| 13 * | |
| 14 * @param {string} effectName The effect name. | |
| 15 * @param {Object} effectDef The effect definition. | |
| 16 */ | |
| 17 Polymer.AppLayout.registerEffect = function registerEffect(effectName, effectD
ef) { | |
| 18 if (Polymer.AppLayout._scrollEffects[effectName] != null) { | |
| 19 throw new Error('effect `'+ effectName + '` is already registered.'); | |
| 20 } | |
| 21 Polymer.AppLayout._scrollEffects[effectName] = effectDef; | |
| 22 }; | |
| 23 | |
| 24 /** | |
| 25 * Scrolls to a particular set of coordinates in a scroll target. | |
| 26 * If the scroll target is not defined, then it would use the main document as
the target. | |
| 27 * | |
| 28 * To scroll in a smooth fashion, you can set the option `behavior: 'smooth'`.
e.g. | |
| 29 * | |
| 30 * ```js | |
| 31 * Polymer.AppLayout.scroll({top: 0, behavior: 'smooth'}); | |
| 32 * ``` | |
| 33 * | |
| 34 * To scroll in a silent mode, without notifying scroll changes to any app-lay
out elements, | |
| 35 * you can set the option `behavior: 'silent'`. This is particularly useful we
you are using | |
| 36 * `app-header` and you desire to scroll to the top of a scrolling region with
out running | |
| 37 * scroll effects. e.g. | |
| 38 * | |
| 39 * ```js | |
| 40 * Polymer.AppLayout.scroll({top: 0, behavior: 'silent'}); | |
| 41 * ``` | |
| 42 * | |
| 43 * @param {Object} options {top: Number, left: Number, behavior: String(smooth
| silent)} | |
| 44 */ | |
| 45 Polymer.AppLayout.scroll = function scroll(options) { | |
| 46 options = options || {}; | |
| 47 | |
| 48 var docEl = document.documentElement; | |
| 49 var target = options.target || docEl; | |
| 50 var hasNativeScrollBehavior = 'scrollBehavior' in target.style && target.scr
oll; | |
| 51 var scrollClassName = 'app-layout-silent-scroll'; | |
| 52 var scrollTop = options.top || 0; | |
| 53 var scrollLeft = options.left || 0; | |
| 54 var scrollTo = target === docEl ? window.scrollTo : | |
| 55 function scrollTo(scrollLeft, scrollTop) { | |
| 56 target.scrollLeft = scrollLeft; | |
| 57 target.scrollTop = scrollTop; | |
| 58 }; | |
| 59 | |
| 60 if (options.behavior === 'smooth') { | |
| 61 | |
| 62 if (hasNativeScrollBehavior) { | |
| 63 | |
| 64 target.scroll(options); | |
| 65 | |
| 66 } else { | |
| 67 | |
| 68 var timingFn = Polymer.AppLayout.scrollTimingFunction; | |
| 69 var startTime = Date.now(); | |
| 70 var currentScrollTop = target === docEl ? window.pageYOffset : target.sc
rollTop; | |
| 71 var currentScrollLeft = target === docEl ? window.pageXOffset : target.s
crollLeft; | |
| 72 var deltaScrollTop = scrollTop - currentScrollTop; | |
| 73 var deltaScrollLeft = scrollLeft - currentScrollLeft; | |
| 74 var duration = 300; | |
| 75 var updateFrame = (function updateFrame() { | |
| 76 var now = Date.now(); | |
| 77 var elapsedTime = now - startTime; | |
| 78 | |
| 79 if (elapsedTime < duration) { | |
| 80 scrollTo(timingFn(elapsedTime, currentScrollLeft, deltaScrollLeft, d
uration), | |
| 81 timingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration
)); | |
| 82 requestAnimationFrame(updateFrame); | |
| 83 } else { | |
| 84 scrollTo(scrollLeft, scrollTop); | |
| 85 } | |
| 86 }).bind(this); | |
| 87 | |
| 88 updateFrame(); | |
| 89 } | |
| 90 | |
| 91 } else if (options.behavior === 'silent') { | |
| 92 | |
| 93 docEl.classList.add(scrollClassName); | |
| 94 | |
| 95 // Browsers keep the scroll momentum even if the bottom of the scrolling c
ontent | |
| 96 // was reached. This means that calling scroll({top: 0, behavior: 'silent'
}) when | |
| 97 // the momentum is still going will result in more scroll events and thus
scroll effects. | |
| 98 // This seems to only apply when using document scrolling. | |
| 99 // Therefore, when should we remove the class from the document element? | |
| 100 | |
| 101 clearInterval(Polymer.AppLayout._scrollTimer); | |
| 102 | |
| 103 Polymer.AppLayout._scrollTimer = setTimeout(function() { | |
| 104 docEl.classList.remove(scrollClassName); | |
| 105 Polymer.AppLayout._scrollTimer = null; | |
| 106 }, 100); | |
| 107 | |
| 108 scrollTo(scrollLeft, scrollTop); | |
| 109 | |
| 110 } else { | |
| 111 | |
| 112 scrollTo(scrollLeft, scrollTop); | |
| 113 | |
| 114 } | |
| 115 }; | |
| OLD | NEW |