From 13c8a00e9746c9ba9bf711ca3895b2535bd57048 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 16 Jun 2018 22:32:05 -0400 Subject: [PATCH] Cleanup deps (#1288) * Upgrade uglify-js * Remove unused deps * Add views --- package.json | 13 -- src/components/ha-cards.js | 8 +- src/layouts/partial-panel-resolver.js | 3 +- .../ha-panel-experimental-ui.js | 49 ++--- .../experimental-ui/hui-entities-card.js | 15 +- src/panels/experimental-ui/hui-root.js | 147 +++++++++++++++ src/panels/experimental-ui/hui-view.js | 12 +- yarn.lock | 171 +----------------- 8 files changed, 187 insertions(+), 231 deletions(-) create mode 100644 src/panels/experimental-ui/hui-root.js diff --git a/package.json b/package.json index 244c494e55..03caedb29a 100644 --- a/package.json +++ b/package.json @@ -101,10 +101,7 @@ "gulp": "^3.9.1", "gulp-babel": "^7.0.0", "gulp-batch-replace": "^0.0.0", - "gulp-file": "^0.4.0", - "gulp-filter": "^5.0.1", "gulp-foreach": "^0.1.0", - "gulp-gzip": "^1.4.0", "gulp-hash": "^4.0.1", "gulp-html-minifier": "^0.1.8", "gulp-if": "^2.0.2", @@ -113,9 +110,7 @@ "gulp-jsonminify": "^1.0.0", "gulp-merge-json": "^1.0.0", "gulp-rename": "^1.2.2", - "gulp-rollup-each": "^2.0.0", "gulp-uglify": "^3.0.0", - "gulp-util": "^3.0.8", "html-loader": "^0.5.5", "html-minifier": "^3.5.6", "merge-stream": "^1.0.1", @@ -128,15 +123,7 @@ "pump": "^3.0.0", "reify": "^0.14.1", "require-dir": "^1.0.0", - "rollup": "^0.56.0", - "rollup-plugin-babel": "^3.0.2", - "rollup-plugin-commonjs": "^8.2.6", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-replace": "^2.0.0", - "rollup-watch": "^4.3.1", - "run-sequence": "^2.2.0", "sinon": "^4.1.6", - "sw-precache": "^5.2.0", "uglify-es": "^3.1.9", "uglify-js": "^3.1.9", "uglifyjs-webpack-plugin": "^1.2.5", diff --git a/src/components/ha-cards.js b/src/components/ha-cards.js index e50e39bf3a..c756496b58 100644 --- a/src/components/ha-cards.js +++ b/src/components/ha-cards.js @@ -82,8 +82,7 @@ class HaCards extends PolymerElement { - - - - -
Experimental UI
- - - - - - + + `; } @@ -56,10 +54,7 @@ class ExperimentalUI extends PolymerElement { _config: { type: Object, value: null, - observer: '_configChanged', }, - - _curView: Object }; } @@ -85,12 +80,6 @@ class ExperimentalUI extends PolymerElement { this.hass.connection.sendMessagePromise({ type: 'frontend/experimental_ui' }) .then((conf) => { this._config = conf.result; }); } - - _configChanged(config) { - if (!config) return; - // Currently hardcode to first view. - this._curView = config.views[0]; - } } customElements.define('ha-panel-experimental-ui', ExperimentalUI); diff --git a/src/panels/experimental-ui/hui-entities-card.js b/src/panels/experimental-ui/hui-entities-card.js index 2c126beed4..25b7bace56 100644 --- a/src/panels/experimental-ui/hui-entities-card.js +++ b/src/panels/experimental-ui/hui-entities-card.js @@ -9,19 +9,6 @@ import '../../components/ha-card.js'; // just importing this now as shortcut to import correct state-card-* import '../../state-summary/state-card-content.js'; -// Support for overriding type from attributes should be removed -// Instead, it should be coded inside entity config. -// stateCardType requires `hass` because we check if a service exists. -// This should also be determined during runtime. -function stateElement(hass, entityId, stateObj) { - if (!stateObj) { - return 'state-card-display'; - } else if (stateObj.attributes && 'custom_ui_state_card' in stateObj.attributes) { - return stateObj.attributes.custom_ui_state_card; - } - return 'state-card-' + stateCardType(hass, stateObj); -} - class HuiEntitiesCard extends PolymerElement { static get template() { return html` @@ -93,7 +80,7 @@ class HuiEntitiesCard extends PolymerElement { for (let i = 0; i < config.entities.length; i++) { const entityId = config.entities[i]; const stateObj = this.hass.states[entityId]; - const tag = stateElement(this.hass, entityId, stateObj); + const tag = stateObj ? `state-card-${stateCardType(this.hass, stateObj)}` : 'state-card-display'; const element = document.createElement(tag); element.stateObj = stateObj; element.hass = this.hass; diff --git a/src/panels/experimental-ui/hui-root.js b/src/panels/experimental-ui/hui-root.js new file mode 100644 index 0000000000..9769f97c7a --- /dev/null +++ b/src/panels/experimental-ui/hui-root.js @@ -0,0 +1,147 @@ +import '@polymer/app-layout/app-header-layout/app-header-layout.js'; +import '@polymer/app-layout/app-header/app-header.js'; +import '@polymer/app-layout/app-toolbar/app-toolbar.js'; +import '@polymer/paper-icon-button/paper-icon-button.js'; +import '@polymer/paper-tabs/paper-tab.js'; +import '@polymer/paper-tabs/paper-tabs.js'; +import '@polymer/iron-icon/iron-icon.js'; + +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import EventsMixin from '../../mixins/events-mixin.js'; +import '../../layouts/ha-app-layout.js'; +import './hui-view.js'; + +class HUIRoot extends EventsMixin(PolymerElement) { + static get template() { + return html` + + + + + +
[[_computeTitle(config)]]
+ + + +
+ + + +
+ + + + + `; + } + + static get properties() { + return { + hass: Object, + narrow: Boolean, + showMenu: Boolean, + config: Object, + columns: Number, + + _curView: { + type: Number, + value: 0, + } + }; + } + + _computeTitle(config) { + return config.title || 'Experimental UI'; + } + + _computeTabsHidden(views) { + return views.length < 2; + } + + _computeTabTitle(view) { + return view.tab_title || view.name || 'Unnamed View'; + } + + _computeViewConfig(views, _curView) { + return views[_curView]; + } + + _handleRefresh() { + this.fire('config-refresh'); + } + + _handleViewSelected(ev) { + this._curView = ev.detail.selected; + } + + /** + * 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() { + // 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); + } +} + +customElements.define('hui-root', HUIRoot); diff --git a/src/panels/experimental-ui/hui-view.js b/src/panels/experimental-ui/hui-view.js index c10f9970cf..700750b071 100644 --- a/src/panels/experimental-ui/hui-view.js +++ b/src/panels/experimental-ui/hui-view.js @@ -18,14 +18,13 @@ function cardElement(type) { return null; } -class HaView extends PolymerElement { +class HUIView extends PolymerElement { static get template() { return html`