diff --git a/src/app-core.js b/src/app-core.js index 0cd2739817..78b1e41eae 100644 --- a/src/app-core.js +++ b/src/app-core.js @@ -32,7 +32,7 @@ hass.reactor.batch(function () { setTimeout(hass.startLocalStoragePreferencesSync, 5000); if ('serviceWorker' in navigator) { - window.addEventListener('load', function() { + window.addEventListener('load', function () { navigator.serviceWorker.register('/service_worker.js'); }); } diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html index e530cfcc4b..0d926e42ec 100644 --- a/src/components/ha-cards.html +++ b/src/components/ha-cards.html @@ -10,15 +10,12 @@ - - - - + - - + + - + states='[[states]]' columns='[[columns]]' hass='[[hass]]' + > + @@ -229,8 +179,43 @@ Polymer({ this.columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu)); }, + /** + * Scroll to a specific y coordinate. + * + * Copied from paper-scroll-header-panel. + * + * @method scroll + * @param {number} top The coordinate to scroll to, along the y-axis. + * @param {boolean} smooth true if the scroll position should be smoothly adjusted. + */ scrollToTop: function () { - this.$.panel.scrollToTop(true); + // the scroll event will trigger _updateScrollState directly, + // However, _updateScrollState relies on the previous `scrollTop` to update the states. + // Calling _updateScrollState will ensure that the states are synced correctly. + var top = 0; + var scroller = this.$.layout.header.scrollTarget; + var easingFn = function easeOutQuad(t, b, c, d) { + /* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */ + t /= d; + return -c * t*(t-2) + b; + /* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */ + }; + var animationId = Math.random(); + var duration = 200; + var startTime = Date.now(); + var currentScrollTop = scroller.scrollTop; + var deltaScrollTop = top - currentScrollTop; + this._currentAnimationId = animationId; + (function updateFrame() { + var now = Date.now(); + var elapsedTime = now - startTime; + if (elapsedTime > duration) { + scroller.scrollTop = top; + } else if (this._currentAnimationId === animationId) { + scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration); + requestAnimationFrame(updateFrame.bind(this)); + } + }).call(this); }, handleRefresh: function () { @@ -241,46 +226,6 @@ Polymer({ this.hass.voiceActions.listen(); }, - contentScroll: function () { - if (this.debouncedContentScroll) return; - - this.debouncedContentScroll = this.async(function () { - this.checkRaised(); - this.debouncedContentScroll = false; - }.bind(this), 100); - }, - - checkRaised: function () { - this.toggleClass( - 'raised', - this.$.panel.scroller.scrollTop > (this.hasViews ? 56 : 0), - this.$.panel); - }, - - headerScrollAdjust: function (ev) { - if (!this.hasViews) return; - this.translate3d('0', '-' + ev.detail.y + 'px', '0', this.$.menu); - // this.toggleClass('condensed', ev.detail.y === 56, this.$.panel); - }, - - computeHeaderHeight: function (hasViews, narrow) { - if (hasViews) { - return 104; - } else if (narrow) { - return 56; - } - return 64; - }, - - computeCondensedHeaderHeight: function (hasViews, narrow) { - if (hasViews) { - return 48; - } else if (narrow) { - return 56; - } - return 64; - }, - computeMenuButtonClass: function (narrow, showMenu) { return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon'; }, @@ -300,9 +245,5 @@ Polymer({ computeHasViews: function (views) { return views.length > 0; }, - - toggleMenu: function () { - this.fire('open-menu'); - }, }); diff --git a/src/layouts/partial-panel-resolver.html b/src/layouts/partial-panel-resolver.html index e6d3894f2e..bf9e3ce772 100644 --- a/src/layouts/partial-panel-resolver.html +++ b/src/layouts/partial-panel-resolver.html @@ -1,12 +1,14 @@ - + + +