flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix build

Browse Source
This commit is contained in:
Ian Richardson
2019-11-05 13:49:11 -06:00
parent d74ecba6ab
commit aba2cb88a3
11 changed files with 180 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+13
View File
@@ -0,0 +1,13 @@
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
experimentalDecorators: true,
},
};
.eslintrc.yaml
-22
View File
@@ -1,22 +0,0 @@
extends: airbnb-base
parser: "@typescript-eslint/parser"
rules:
no-else-return: 0
no-underscore-dangle: 0
nonblock-statement-body-position: 0
curly: 0
no-return-assign: 0
consistent-return: 0
no-mixed-operators: 0
class-methods-use-this: 0
no-nested-ternary: 0
camelcase: 0
no-unused-vars: 0
quotes: 0
comma-dangle: 0
import/no-unresolved: 0
import/prefer-default-export: 0
globals:
window: true
Event: true
customElements: true
.prettierrc.js
+7
View File
@@ -0,0 +1,7 @@
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
README.md
+7
View File
@@ -12,6 +12,12 @@ A community driven boilerplate of best practices for Home Assistant Lovelace cus
[![Discord][discord-shield]][discord]
[![Community Forum][forum-shield]][forum]
## Support
Hey dude! Help me out for a couple of :beers: or a :coffee:!
[![coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/zJtVxUAgH)
## Options
| Name | Type | Requirement | Description | Default |
@@ -35,6 +41,7 @@ A community driven boilerplate of best practices for Home Assistant Lovelace cus
| service | string | **Optional** | Service to call (e.g. media_player.media_play_pause) when action defined as call-service | `none` |
| service_data | object | **Optional** | Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service | `none` |
| haptic | string | **Optional** | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) _success, warning, failure, light, medium, heavy, selection_ | `none` |
| repeat | number | **Optional** | How often to repeat the `hold_action` in milliseconds. | `non` |
## Starting a new card from boilerplate-card
dist/boilerplate-card.js
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
package.json
+47 -44
View File
@@ -1,46 +1,49 @@
{
"name": "boilerplate-card",
"version": "1.1.1",
"description": "Lovelace boilerplate-card",
"keywords": [
"home-assistant",
"homeassistant",
"hass",
"automation",
"lovelace",
"custom-cards"
],
"module": "boilerplate-card.js",
"repository": "git@github.com:custom_cards/boilerplate-card.git",
"author": "Ian Richardson <iantrich@gmail.com>",
"license": "MIT",
"dependencies": {
"custom-card-helpers": "^1.3.5",
"home-assistant-js-websocket": "^4.4.0",
"lit-element": "^2.2.1"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.0",
"@typescript-eslint/eslint-plugin": "^2.6.0",
"@typescript-eslint/parser": "^2.6.0",
"eslint": "^6.6.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.18.2",
"prettier": "^1.18.2",
"rollup": "^1.26.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-typescript2": "^0.24.3",
"rollup-plugin-uglify": "^6.0.3",
"typescript": "^3.6.4"
},
"scripts": {
"start": "rollup -c --watch",
"build": "npm run lint && npm run rollup",
"lint": "eslint src/*.ts",
"rollup": "rollup -c"
}
"name": "boilerplate-card",
"version": "1.1.1",
"description": "Lovelace boilerplate-card",
"keywords": [
"home-assistant",
"homeassistant",
"hass",
"automation",
"lovelace",
"custom-cards"
],
"module": "boilerplate-card.js",
"repository": "git@github.com:custom_cards/boilerplate-card.git",
"author": "Ian Richardson <iantrich@gmail.com>",
"license": "MIT",
"dependencies": {
"custom-card-helpers": "^1.3.9",
"home-assistant-js-websocket": "^4.4.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.0",
"@typescript-eslint/eslint-plugin": "^2.6.0",
"@typescript-eslint/parser": "^2.6.0",
"eslint": "^6.6.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.1",
"prettier": "^1.18.2",
"rollup": "^1.26.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-typescript2": "^0.24.3",
"rollup-plugin-uglify": "^6.0.3",
"typescript": "^3.6.4"
},
"scripts": {
"start": "rollup -c --watch",
"build": "npm run lint && npm run rollup",
"lint": "eslint src/*.ts",
"rollup": "rollup -c"
}
}
src/action-handler-directive.ts
+39 -58
View File
@@ -1,10 +1,7 @@
import { directive, PropertyPart } from "lit-html";
import { fireEvent, ActionHandlerOptions } from "custom-card-helpers";
import { directive, PropertyPart } from 'lit-html';
import { fireEvent, ActionHandlerOptions } from 'custom-card-helpers';
const isTouch =
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
interface ActionHandler extends HTMLElement {
holdTime: number;
@@ -16,6 +13,7 @@ interface ActionHandlerElement extends Element {
class ActionHandler extends HTMLElement implements ActionHandler {
public holdTime: number;
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
public ripple: any;
protected timer: number | undefined;
protected held: boolean;
@@ -26,34 +24,26 @@ class ActionHandler extends HTMLElement implements ActionHandler {
constructor() {
super();
this.holdTime = 500;
this.ripple = document.createElement("mwc-ripple");
this.ripple = document.createElement('mwc-ripple');
this.timer = undefined;
this.held = false;
this.cooldownStart = false;
this.cooldownEnd = false;
}
public connectedCallback() {
public connectedCallback(): void {
Object.assign(this.style, {
position: "absolute",
width: isTouch ? "100px" : "50px",
height: isTouch ? "100px" : "50px",
transform: "translate(-50%, -50%)",
pointerEvents: "none",
position: 'absolute',
width: isTouch ? '100px' : '50px',
height: isTouch ? '100px' : '50px',
transform: 'translate(-50%, -50%)',
pointerEvents: 'none',
});
this.appendChild(this.ripple);
this.ripple.primary = true;
[
"touchcancel",
"mouseout",
"mouseup",
"touchmove",
"mousewheel",
"wheel",
"scroll",
].forEach((ev) => {
['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach(ev => {
document.addEventListener(
ev,
() => {
@@ -61,18 +51,18 @@ class ActionHandler extends HTMLElement implements ActionHandler {
this.stopAnimation();
this.timer = undefined;
},
{ passive: true }
{ passive: true },
);
});
}
public bind(element: ActionHandlerElement, options) {
public bind(element: ActionHandlerElement, options): void {
if (element.actionHandler) {
return;
}
element.actionHandler = true;
element.addEventListener("contextmenu", (ev: Event) => {
element.addEventListener('contextmenu', (ev: Event) => {
const e = ev || window.event;
if (e.preventDefault) {
e.preventDefault();
@@ -82,10 +72,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
}
e.cancelBubble = true;
e.returnValue = false;
return false;
return;
});
const clickStart = (ev: Event) => {
const clickStart = (ev: Event): void => {
if (this.cooldownStart) {
return;
}
@@ -111,38 +101,34 @@ class ActionHandler extends HTMLElement implements ActionHandler {
window.setTimeout(() => (this.cooldownStart = false), 100);
};
const clickEnd = (ev: Event) => {
if (
this.cooldownEnd ||
(["touchend", "touchcancel"].includes(ev.type) &&
this.timer === undefined)
) {
const clickEnd = (ev: Event): void => {
if (this.cooldownEnd || (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined)) {
return;
}
clearTimeout(this.timer);
this.stopAnimation();
this.timer = undefined;
if (this.held) {
fireEvent(element as HTMLElement, "action", { action: "hold" });
fireEvent(element as HTMLElement, 'action', { action: 'hold' });
} else if (options.hasDoubleTap) {
if ((ev as MouseEvent).detail === 1) {
this.dblClickTimeout = window.setTimeout(() => {
fireEvent(element as HTMLElement, "action", { action: "tap" });
fireEvent(element as HTMLElement, 'action', { action: 'tap' });
}, 250);
} else {
clearTimeout(this.dblClickTimeout);
fireEvent(element as HTMLElement, "action", { action: "double_tap" });
fireEvent(element as HTMLElement, 'action', { action: 'double_tap' });
}
} else {
fireEvent(element as HTMLElement, "action", { action: "tap" });
fireEvent(element as HTMLElement, 'action', { action: 'tap' });
}
this.cooldownEnd = true;
window.setTimeout(() => (this.cooldownEnd = false), 100);
};
element.addEventListener("touchstart", clickStart, { passive: true });
element.addEventListener("touchend", clickEnd);
element.addEventListener("touchcancel", clickEnd);
element.addEventListener('touchstart', clickStart, { passive: true });
element.addEventListener('touchend', clickEnd);
element.addEventListener('touchcancel', clickEnd);
// iOS 13 sends a complete normal touchstart-touchend series of events followed by a mousedown-click series.
// That might be a bug, but until it's fixed, this should make action-handler work.
@@ -150,12 +136,12 @@ class ActionHandler extends HTMLElement implements ActionHandler {
// Note that all events (both touch and mouse) must be listened for in order to work on computers with both mouse and touchscreen.
const isIOS13 = window.navigator.userAgent.match(/iPhone OS 13_/);
if (!isIOS13) {
element.addEventListener("mousedown", clickStart, { passive: true });
element.addEventListener("click", clickEnd);
element.addEventListener('mousedown', clickStart, { passive: true });
element.addEventListener('click', clickEnd);
}
}
private startAnimation(x: number, y: number) {
private startAnimation(x: number, y: number): void {
Object.assign(this.style, {
left: `${x}px`,
top: `${y}px`,
@@ -166,32 +152,29 @@ class ActionHandler extends HTMLElement implements ActionHandler {
this.ripple.unbounded = true;
}
private stopAnimation() {
private stopAnimation(): void {
this.ripple.active = false;
this.ripple.disabled = true;
this.style.display = "none";
this.style.display = 'none';
}
}
// TODO You need to replace all instances of "action-handler-boilerplate" with "action-handler-<your card name>"
customElements.define("action-handler-boilerplate", ActionHandler);
customElements.define('action-handler-boilerplate', ActionHandler);
const geActionHandler = (): ActionHandler => {
const body = document.body;
if (body.querySelector("action-handler-boilerplate")) {
return body.querySelector("action-handler-boilerplate") as ActionHandler;
if (body.querySelector('action-handler-boilerplate')) {
return body.querySelector('action-handler-boilerplate') as ActionHandler;
}
const actionhandler = document.createElement("action-handler-boilerplate");
const actionhandler = document.createElement('action-handler-boilerplate');
body.appendChild(actionhandler);
return actionhandler as ActionHandler;
};
export const actionHandlerBind = (
element: ActionHandlerElement,
options: ActionHandlerOptions
) => {
export const actionHandlerBind = (element: ActionHandlerElement, options: ActionHandlerOptions): void => {
const actionhandler: ActionHandler = geActionHandler();
if (!actionhandler) {
return;
@@ -199,8 +182,6 @@ export const actionHandlerBind = (
actionhandler.bind(element, options);
};
export const actionHandler = directive(
(options: ActionHandlerOptions = {}) => (part: PropertyPart) => {
actionHandlerBind(part.committer.element, options);
}
);
export const actionHandler = directive((options: ActionHandlerOptions = {}) => (part: PropertyPart): void => {
actionHandlerBind(part.committer.element, options);
});
src/boilerplate-card.ts
+25 -23
View File
@@ -1,27 +1,26 @@
import {
LitElement,
html,
customElement,
property,
CSSResult,
TemplateResult,
css,
PropertyValues
} from "lit-element";
import { LitElement, html, customElement, property, CSSResult, TemplateResult, css, PropertyValues } from 'lit-element';
import {
HomeAssistant,
hasConfigOrEntityChanged,
hasAction,
ActionHandlerEvent,
handleAction
} from "custom-card-helpers";
handleAction,
} from 'custom-card-helpers';
import { BoilerplateConfig } from "./types";
import { actionHandler } from "./action-handler-directive";
import { BoilerplateConfig } from './types';
import { actionHandler } from './action-handler-directive';
import { CARD_VERSION } from './const';
/* eslint no-console: 0 */
console.info(
`%c BOILERPLATE-CARD \n%c Version ${CARD_VERSION} `,
'color: orange; font-weight: bold; background: black',
'color: white; font-weight: bold; background: dimgray',
);
// TODO Name your custom element
@customElement("boilerplate-card")
class BoilerplateCard extends LitElement {
@customElement('boilerplate-card')
export class BoilerplateCard extends LitElement {
// TODO Add any properities that should cause your element to re-render here
@property() public hass?: HomeAssistant;
@property() private _config?: BoilerplateConfig;
@@ -29,12 +28,12 @@ class BoilerplateCard extends LitElement {
public setConfig(config: BoilerplateConfig): void {
// TODO Check for required fields and that they are of the proper format
if (!config || config.show_error) {
throw new Error("Invalid configuration");
throw new Error('Invalid configuration');
}
this._config = {
name: "Boilerplate",
...config
name: 'Boilerplate',
...config,
};
}
@@ -61,15 +60,18 @@ class BoilerplateCard extends LitElement {
.header=${this._config.name}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
hasDoubleTap: hasAction(this._config!.double_tap_action)
hasHold: hasAction(this._config.hold_action),
hasDoubleTap: hasAction(this._config.double_tap_action),
repeat: this._config.hold_action ? this._config.hold_action.repeat : undefined,
})}
></ha-card>
`;
}
private _handleAction(ev: ActionHandlerEvent) {
handleAction(this, this.hass!, this._config!, ev.detail.action!);
private _handleAction(ev: ActionHandlerEvent): void {
if (this.hass && this._config && ev.detail.action) {
handleAction(this, this.hass, this._config, ev.detail.action);
}
}
static get styles(): CSSResult {
src/const.ts
+1
View File
@@ -0,0 +1 @@
export const CARD_VERSION = '1.1.2';
src/types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ActionConfig, HASSDomEvent } from "custom-card-helpers";
import { ActionConfig } from 'custom-card-helpers';
// TODO Add your configuration elements here for type-checking
export interface BoilerplateConfig {
yarn.lock
+36 -5
View File
@@ -485,10 +485,10 @@ cross-spawn@^6.0.5:
shebang-command "^1.2.0"
which "^1.2.9"
custom-card-helpers@^1.3.5:
version "1.3.5"
resolved "https://registry.yarnpkg.com/custom-card-helpers/-/custom-card-helpers-1.3.5.tgz#6e55a813ce9e8b83ccdd34011501b8b094d36ab5"
integrity sha512-fEcqN6ESAHpfaYWGn+0EkzG9eH7DBqY66CCvp1OqdWwdZQ9jxOYRm16ZQjEnXaSvfUy9QYDfDmowQQ3SjofxDw==
custom-card-helpers@^1.3.9:
version "1.3.9"
resolved "https://registry.yarnpkg.com/custom-card-helpers/-/custom-card-helpers-1.3.9.tgz#ec4794bd9aadebc93a0d87f79e1d19bdb9610e23"
integrity sha512-lpgkIHLWf6l6leSd9kA4oW9jW7mrXKwlW3jV/0ON04r8qqdhaOtSqaRqecBW+Jqk87bIb0WC4F9Xq2+HpNRwKw==
dependencies:
fecha "^3.0.3"
home-assistant-js-websocket "^4.4.0"
@@ -589,6 +589,13 @@ eslint-config-airbnb-base@^14.0.0:
object.assign "^4.1.0"
object.entries "^1.1.0"
eslint-config-prettier@^6.5.0:
version "6.5.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.5.0.tgz#aaf9a495e2a816865e541bfdbb73a65cc162b3eb"
integrity sha512-cjXp8SbO9VFGW/Z7mbTydqS9to8Z58E5aYhj3e1+Hx7lS9s6gL5ILKNpCqZAFOVYRcSkWPFYljHrEh8QFEK5EQ==
dependencies:
get-stdin "^6.0.0"
eslint-import-resolver-node@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
@@ -622,6 +629,13 @@ eslint-plugin-import@^2.18.2:
read-pkg-up "^2.0.0"
resolve "^1.11.0"
eslint-plugin-prettier@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz#507b8562410d02a03f0ddc949c616f877852f2ba"
integrity sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-scope@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
@@ -749,6 +763,11 @@ fast-deep-equal@^2.0.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-json-stable-stringify@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -857,6 +876,11 @@ functional-red-black-tree@^1.0.1:
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
get-stdin@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
glob-parent@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.0.0.tgz#1dc99f0f39b006d3e92c2c284068382f0c20e954"
@@ -1157,7 +1181,7 @@ lit-element@^2.1.0, lit-element@^2.2.1:
dependencies:
lit-html "^1.0.0"
lit-html@^1.0.0:
lit-html@^1.0.0, lit-html@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.2.tgz#2e3560a7075210243649c888ad738eaf0daa8374"
integrity sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==
@@ -1455,6 +1479,13 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier@^1.18.2:
version "1.18.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"