Skip to content

Commit

Permalink
fix hold/repeat actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@iantrich
iantrich committed Nov 4, 2019
1 parent 2bf9ec9 commit c9f47fb
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 43 deletions.
69 changes: 43 additions & 26 deletions dist/roku-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2951,6 +2951,12 @@ class ActionHandler extends HTMLElement {
this.timer = window.setTimeout(() => {
this.startAnimation(x, y);
this.held = true;
if (options.repeat && !element.isRepeating) {
element.isRepeating = true;
this.repeatTimeout = setInterval(() => {
A(element, "action", { action: "hold" });
}, options.repeat);
}
}, this.holdTime);
}
this.cooldownStart = true;
Expand All @@ -2960,13 +2966,23 @@ class ActionHandler extends HTMLElement {
if (this.cooldownEnd ||
(["touchend", "touchcancel"].includes(ev.type) &&
this.timer === undefined)) {
if (element.isRepeating && this.repeatTimeout) {
clearInterval(this.repeatTimeout);
element.isRepeating = false;
}
return;
}
clearTimeout(this.timer);
if (element.isRepeating && this.repeatTimeout) {
clearInterval(this.repeatTimeout);
}
element.isRepeating = false;
this.stopAnimation();
this.timer = undefined;
if (this.held) {
A(element, "action", { action: "hold" });
if (!options.repeat) {
A(element, "action", { action: "hold" });
}
}
else if (options.hasDoubleTap) {
if (ev.detail === 1) {
Expand Down Expand Up @@ -3035,14 +3051,14 @@ const actionHandler = directive((options = {}) => (part) => {
actionHandlerBind(part.committer.element, options);
});

const CARD_VERSION = '1.0.3';
const CARD_VERSION = '1.0.4';

const defaultRemoteAction = {
action: "call-service",
service: "remote.send_command"
};
/* eslint no-console: 0 */
console.info(`%c ROKU-CARD \n%c Version ${CARD_VERSION} `, 'color: orange; font-weight: bold; background: black', 'color: white; font-weight: bold; background: dimgray');
console.info(`%c ROKU-CARD \n%c Version ${CARD_VERSION} `, "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");
let RokuCard = class RokuCard extends LitElement {
getCardSize() {
return 7;
Expand All @@ -3062,7 +3078,7 @@ let RokuCard = class RokuCard extends LitElement {
if (!stateObj) {
return html `
<ha-card>
<div class="warning">Show Warning</div>
<div class="warning">Entity Unavailable</div>
</ha-card>
`;
}
Expand Down Expand Up @@ -3172,7 +3188,10 @@ let RokuCard = class RokuCard extends LitElement {
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: G(this._config.apps[index].hold_action),
hasDoubleTap: G(this._config.apps[index].double_tap_action)
hasDoubleTap: G(this._config.apps[index].double_tap_action),
repeat: this._config.apps[index].hold_action
? this._config.apps[index].hold_action.repeat
: undefined
})}
/>
`
Expand All @@ -3181,7 +3200,8 @@ let RokuCard = class RokuCard extends LitElement {
`;
}
_renderButton(button, icon, title) {
return this._config[button] && this._config[button].show === false
const config = this._config[button];
return config && config.show === false
? html `
<paper-icon-button></paper-icon-button>
`
Expand All @@ -3192,10 +3212,11 @@ let RokuCard = class RokuCard extends LitElement {
title=${title}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: this._config[button] &&
G(this._config[button].hold_action),
hasDoubleTap: this._config[button] &&
G(this._config[button].double_tap_action)
hasHold: config && G(config.hold_action),
hasDoubleTap: config && G(config.double_tap_action),
repeat: config && config.hold_action
? config.hold_action.repeat
: undefined
})}
></paper-icon-button>
`;
Expand All @@ -3207,22 +3228,18 @@ let RokuCard = class RokuCard extends LitElement {
const remote = this._config.remote
? this._config.remote
: "remote." + this._config.entity.split(".")[1];
W(this, this.hass, config && config.tap_action
? config
: app
? Object.assign({ tap_action: {
action: "call-service",
service: "media_player.select_source",
service_data: {
entity_id: this._config.entity,
source: app
}
} }, config) : {
tap_action: Object.assign({ service_data: {
command: button,
entity_id: remote
} }, defaultRemoteAction)
}, ev.detail.action);
W(this, this.hass, app
? Object.assign({ tap_action: {
action: "call-service",
service: "media_player.select_source",
service_data: {
entity_id: this._config.entity,
source: app
}
} }, config) : Object.assign({ tap_action: Object.assign({ service_data: {
command: button,
entity_id: remote
} }, defaultRemoteAction) }, config), ev.detail.action);
}
};
__decorate([
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"author": "Ian Richardson <[email protected]>",
"license": "MIT",
"dependencies": {
"custom-card-helpers": "^1.3.5",
"custom-card-helpers": "^1.3.8",
"home-assistant-js-websocket": "^4.4.0",
"lit-element": "^2.2.1"
},
Expand Down
20 changes: 19 additions & 1 deletion src/action-handler-directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface ActionHandler extends HTMLElement {
}
interface ActionHandlerElement extends Element {
actionHandler?: boolean;
isRepeating?: boolean | undefined;
}

class ActionHandler extends HTMLElement implements ActionHandler {
Expand All @@ -22,6 +23,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
protected cooldownStart: boolean;
protected cooldownEnd: boolean;
private dblClickTimeout: number | undefined;
private repeatTimeout: NodeJS.Timeout | undefined;

constructor() {
super();
Expand Down Expand Up @@ -104,6 +106,12 @@ class ActionHandler extends HTMLElement implements ActionHandler {
this.timer = window.setTimeout(() => {
this.startAnimation(x, y);
this.held = true;
if (options.repeat && !element.isRepeating) {
element.isRepeating = true;
this.repeatTimeout = setInterval(() => {
fireEvent(element as HTMLElement, "action", { action: "hold" });
}, options.repeat);
}
}, this.holdTime);
}

Expand All @@ -117,13 +125,23 @@ class ActionHandler extends HTMLElement implements ActionHandler {
(["touchend", "touchcancel"].includes(ev.type) &&
this.timer === undefined)
) {
if (element.isRepeating && this.repeatTimeout) {
clearInterval(this.repeatTimeout);
element.isRepeating = false;
}
return;
}
clearTimeout(this.timer);
if (element.isRepeating && this.repeatTimeout) {
clearInterval(this.repeatTimeout);
}
element.isRepeating = false;
this.stopAnimation();
this.timer = undefined;
if (this.held) {
fireEvent(element as HTMLElement, "action", { action: "hold" });
if (!options.repeat) {
fireEvent(element as HTMLElement, "action", { action: "hold" });
}
} else if (options.hasDoubleTap) {
if ((ev as MouseEvent).detail === 1) {
this.dblClickTimeout = window.setTimeout(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/const.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const CARD_VERSION = '1.0.4';
export const CARD_VERSION = '1.0.5';
31 changes: 17 additions & 14 deletions src/roku-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ const defaultRemoteAction = {
/* eslint no-console: 0 */
console.info(
`%c ROKU-CARD \n%c Version ${CARD_VERSION} `,
'color: orange; font-weight: bold; background: black',
'color: white; font-weight: bold; background: dimgray',
"color: orange; font-weight: bold; background: black",
"color: white; font-weight: bold; background: dimgray"
);

@customElement("roku-card")
Expand Down Expand Up @@ -194,7 +194,10 @@ class RokuCard extends LitElement {
hasHold: hasAction(this._config!.apps[index].hold_action),
hasDoubleTap: hasAction(
this._config!.apps[index].double_tap_action
)
),
repeat: this._config!.apps[index].hold_action
? this._config!.apps[index].hold_action!.repeat
: undefined
})}
/>
`
Expand All @@ -208,7 +211,8 @@ class RokuCard extends LitElement {
icon: string,
title: string
): TemplateResult {
return this._config![button] && this._config![button].show === false
const config = this._config![button];
return config && config.show === false
? html`
<paper-icon-button></paper-icon-button>
`
Expand All @@ -219,12 +223,12 @@ class RokuCard extends LitElement {
title=${title}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold:
this._config![button] &&
hasAction(this._config![button].hold_action),
hasDoubleTap:
this._config![button] &&
hasAction(this._config![button].double_tap_action)
hasHold: config && hasAction(config.hold_action),
hasDoubleTap: config && hasAction(config.double_tap_action),
repeat:
config && config.hold_action
? config.hold_action.repeat
: undefined
})}
></paper-icon-button>
`;
Expand All @@ -241,9 +245,7 @@ class RokuCard extends LitElement {
handleAction(
this,
this.hass!,
config && config.tap_action
? config
: app
app
? {
tap_action: {
action: "call-service",
Expand All @@ -262,7 +264,8 @@ class RokuCard extends LitElement {
entity_id: remote
},
...defaultRemoteAction
}
},
...config
},
ev.detail.action!
);
Expand Down

0 comments on commit c9f47fb

Please sign in to comment.