-
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from Sian-Lee-SA/dev
New inheritance system
- Loading branch information
Showing
6 changed files
with
155 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,11 +3,26 @@ | |
| * @Date: 2020-04-23T02:41:27+09:30 | ||
| * @Email: [email protected] | ||
| * @Filename: helpers.js | ||
| * @Last modified by: Sian Croser | ||
| * @Last modified time: 2020-04-26T07:33:31+09:30 | ||
| * @Last modified by: Sian Croser <Sian-Lee-SA> | ||
| * @Last modified time: 2020-04-29T05:08:15+09:30 | ||
| * @License: GPL-3 | ||
| */ | ||
|
|
||
| export function fireEvent( _node, _event, _detail = {}, _options = {}) | ||
| { | ||
| const event = new Event( _event, Object.assign({ | ||
| bubbles: true, | ||
| cancelable: false, | ||
| composed: true | ||
| }, _options)); | ||
|
|
||
| event.detail = _detail; | ||
|
|
||
| _node.dispatchEvent(event); | ||
|
|
||
| return event; | ||
| } | ||
|
|
||
| export function evalTemplate(hass, state, func) | ||
| { | ||
| try { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,13 +3,11 @@ | |
| * @Date: 2020-04-19T19:45:08+09:30 | ||
| * @Email: [email protected] | ||
| * @Filename: comb.js | ||
| * @Last modified by: Sian Croser | ||
| * @Last modified time: 2020-04-27T06:55:33+09:30 | ||
| * @Last modified by: Sian Croser <Sian-Lee-SA> | ||
| * @Last modified time: 2020-04-30T16:16:53+09:30 | ||
| * @License: GPL-3 | ||
| */ | ||
|
|
||
| var cardTools = customElements.get('card-tools'); | ||
|
|
||
| class HoneycombMenuItem extends Polymer.Element | ||
| { | ||
| static get is() | ||
|
|
@@ -49,6 +47,7 @@ class HoneycombMenuItem extends Polymer.Element | |
| return Polymer.html` | ||
| <style> | ||
| :host { | ||
| --paper-item-icon-active-color: var(--paper-item-icon-color); | ||
| } | ||
| :host([active]) { | ||
| --paper-card-background-color: var(--paper-card-active-background-color); | ||
|
|
@@ -124,19 +123,23 @@ class HoneycombMenuItem extends Polymer.Element | |
| active: false | ||
| }, this.config); | ||
|
|
||
| if( ! this.config.active ) | ||
| this.style.setProperty('--paper-item-icon-active-color', 'var(--paper-item-icon-color)'); | ||
|
|
||
| this.$.item.append( this._createLovelaceCard() ); | ||
| this.$.item.append( this._createItemCard() ); | ||
| } | ||
|
|
||
| _createLovelaceCard() | ||
| _createItemCard() | ||
| { | ||
| var card = cardTools.createCard(_.merge({}, { | ||
| var card = cardTools.createCard({ | ||
| type: 'custom:button-card', | ||
| entity: this.config.entity, | ||
| size: '30px', | ||
| show_name: false | ||
| }, this.config)); | ||
| show_name: false, | ||
| icon: this.config.icon, | ||
| tap_action: this.config.tap_action, | ||
| hold_action: this.config.hold_action, | ||
| double_tap_action: this.config.double_tap_action, | ||
| confirmation: this.config.confirmation, | ||
| color: this.config.color | ||
| }); | ||
| cardTools.provideHass( card ); | ||
|
|
||
| card.addEventListener('action', e => { | ||
|
|
@@ -145,7 +148,7 @@ class HoneycombMenuItem extends Polymer.Element | |
| e.detail.audio = this.config.audio; | ||
| }); | ||
|
|
||
| var sheet = new CSSStyleSheet | ||
| var sheet = new CSSStyleSheet; | ||
| sheet.replaceSync( `ha-card { height: 100%; position: fixed !important; }`); | ||
| card.shadowRoot.adoptedStyleSheets = [ ...card.shadowRoot.adoptedStyleSheets, sheet ]; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,8 +3,8 @@ | |
| * @Date: 2020-04-19T12:09:12+09:30 | ||
| * @Email: [email protected] | ||
| * @Filename: honeycomb-menu.js | ||
| * @Last modified by: Sian Croser | ||
| * @Last modified time: 2020-04-27T15:19:26+09:30 | ||
| * @Last modified by: Sian Croser <Sian-Lee-SA> | ||
| * @Last modified time: 2020-04-30T09:33:00+09:30 | ||
| * @License: GPL-3 | ||
| */ | ||
|
|
||
|
|
@@ -13,14 +13,13 @@ const _ = require('lodash'); | |
| import EventManager from './event-manager.js'; | ||
| import "./honeycomb-menu-item.js"; | ||
| import "./xy-pad.js"; | ||
| import { objectEvalTemplate } from "./helpers.js"; | ||
| import { objectEvalTemplate, fireEvent } from "./helpers.js"; | ||
|
|
||
| // Hook / Hack the HaCard to handle our needs and allow instantiating the hoeycomb | ||
| customElements.whenDefined('ha-card').then(() => { | ||
| const HaCard = customElements.get('ha-card'); | ||
| Object.assign( HaCard.prototype, EventManager.prototype ); | ||
|
|
||
| const cardTools = customElements.get('card-tools'); | ||
| Object.assign( HaCard.prototype, EventManager.prototype ); | ||
|
|
||
| _.templateSettings.interpolate = /{{([\s\S]+?)}}/g; | ||
|
|
||
|
|
@@ -64,6 +63,37 @@ customElements.whenDefined('ha-card').then(() => { | |
| if( ! config || ! config.honeycomb ) | ||
| return; | ||
|
|
||
| function traverseConfigs( _config ) | ||
| { | ||
| if( _.isString(_config) ) | ||
| _config = cardTools.lovelace.config.honeycomb_menu_templates[_config]; | ||
| // Allow non extensible to be a new object that can be extended. Using | ||
| // merge will also affect sub properties | ||
| _config = _.merge({}, _config ); | ||
| // If there are no buttons then we want it defined for returned calculations | ||
| if( ! _config.buttons ) | ||
| _config.buttons = new Array(6); | ||
|
|
||
| if( ! _config.template || | ||
| ! cardTools.lovelace.config.honeycomb_menu_templates || | ||
| ! cardTools.lovelace.config.honeycomb_menu_templates[_config.template] | ||
| ) return _config; | ||
|
|
||
| let pConfig = traverseConfigs( cardTools.lovelace.config.honeycomb_menu_templates[_config.template] ); | ||
|
|
||
| for( let i = 0; i < 6; i++ ) | ||
| { | ||
| if( ! _config.buttons[i] || _config.buttons[i] == 'skip' ) | ||
| _config.buttons[i] = pConfig.buttons[i]; | ||
| } | ||
| return Object.assign({}, pConfig, _config ); | ||
| } | ||
|
|
||
| const honeycombConfig = traverseConfigs( config.honeycomb ); | ||
| if( ! honeycombConfig.entity ) | ||
| honeycombConfig.entity = config.entity; | ||
|
|
||
| // console.dir(honeycombConfig); | ||
| // Remove the following listeners that were defined by ActionHandler so to avoid duplicates | ||
| this.removeEventListeners(['contextmenu', 'touchstart', 'touchend', 'touchcancel', 'mousedown', 'click', 'keyup']); | ||
|
|
||
|
|
@@ -73,14 +103,14 @@ customElements.whenDefined('ha-card').then(() => { | |
| // regardless of our config action | ||
| document.body.querySelector("action-handler").bind(this, { | ||
| hasHold: true, | ||
| hasDoubleClick: true, | ||
| hasDoubleClick: true | ||
| }); | ||
|
|
||
| // Push our action listener to the top of the list so we can | ||
| // see if our menu was trigger and to stop propagation if so... | ||
| // If not, then the event will follow through to the other listeners | ||
| this.prependEventListener('action', e => { | ||
| if( e.detail.action != config.honeycomb.action ) | ||
| if( e.detail.action != honeycombConfig.action ) | ||
| return; | ||
|
|
||
| e.stopImmediatePropagation(); | ||
|
|
@@ -92,11 +122,8 @@ customElements.whenDefined('ha-card').then(() => { | |
| manager.honeycomb = document.createElement('honeycomb-menu'); | ||
| // Some configs can be non extensible so we make them | ||
| // extensible | ||
| manager.honeycomb.config = Object.create( config.honeycomb ); | ||
| manager.honeycomb.base = Object.create( config ); | ||
|
|
||
| manager.honeycomb.config = honeycombConfig; | ||
| manager.honeycomb.display( cardTools.lovelace_view(), manager.position.x, manager.position.y ); | ||
|
|
||
| manager.honeycomb.addEventListener('closing', e => { | ||
| manager.honeycomb = null; | ||
| }); | ||
|
|
@@ -116,7 +143,6 @@ class HoneycombMenu extends Polymer.Element | |
| return { | ||
| hass: Object, | ||
| config: Object, | ||
| base: Object, | ||
| sizes: { | ||
| type: Object, | ||
| readonly: true | ||
|
|
@@ -296,7 +322,7 @@ class HoneycombMenu extends Polymer.Element | |
|
|
||
| _.defaults(this.config, { | ||
| action: 'hold', | ||
| entity: this.base.entity, | ||
| entity: null, | ||
| active: false, | ||
| autoclose: true, | ||
| size: 225, | ||
|
|
@@ -326,7 +352,7 @@ class HoneycombMenu extends Polymer.Element | |
| this._setCssVars(); | ||
| } | ||
|
|
||
| close( _item ) | ||
| close( _item = null ) | ||
| { | ||
| if( this.closing ) | ||
| return; | ||
|
|
@@ -335,20 +361,14 @@ class HoneycombMenu extends Polymer.Element | |
|
|
||
| if( _item ) _item.setAttribute('selected', ''); | ||
|
|
||
| var details = { | ||
| detail: { | ||
| item: _item || false | ||
| } | ||
| }; | ||
|
|
||
| this.dispatchEvent( new CustomEvent('closing', details) ); | ||
| fireEvent(this, 'closing', { item: _item }); | ||
| // Remove shade div earlier to allow clicking of other lovelace elements while the animation continues | ||
| this.$.shade.addEventListener('animationend', function(e) { | ||
| this.remove(); | ||
| }); | ||
| this.shadowRoot.querySelectorAll('honeycomb-menu-item')[5].addEventListener('animationend', e => { | ||
| this.remove(); | ||
| this.dispatchEvent( new CustomEvent('closed', details) ); | ||
| fireEvent(this, 'closed', { item: _item }); | ||
| }); | ||
| } | ||
|
|
||
|
|
@@ -359,10 +379,7 @@ class HoneycombMenu extends Polymer.Element | |
| { | ||
| let button = {}; | ||
|
|
||
| if( this.config.template_buttons && this.config.template_buttons[i] ) | ||
| button = this.config.template_buttons[i]; | ||
|
|
||
| if( this.config.buttons && this.config.buttons[i] && this.config.buttons[i] != 'skip' ) | ||
| if( this.config.buttons && this.config.buttons[i] ) | ||
| button = this.config.buttons[i]; | ||
|
|
||
| if( button == 'break' ) | ||
|
|
@@ -495,7 +512,6 @@ class HoneycombMenu extends Polymer.Element | |
| { | ||
| if( _.isEmpty(item) ) | ||
| return item; | ||
|
|
||
| return _.omit( _.merge( {}, this.config, item ), ['buttons', 'size', 'action', 'template_buttons', 'xy_pad', 'spacing'] ); | ||
| } | ||
|
|
||
|
|
||
Oops, something went wrong.