Merge pull request #4 from kizza/polish

Tweaks, polish and readme update
kizza · Feb 24, 2024 · 380325d · 380325d
2 parents a69a9dc + 6cfda1b
commit 380325d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,15 @@ Single clicking a colour chip will set all the configured lights to this colour
 
 ## Installation
 
+### HACS
+Magic Home Party Card is available in [HACS][hacs] (Home Assistant Community Store).
+
+1. Install HACS if you don't have it already
+2. Open HACS in Home Assistant
+3. Go to "Frontend" section
+4. Click button with "+" icon
+5. Search for "Magic Home Party Card"
+
 ### Manual
 1. Download `magic-home-party-card.js` file from the [latest-release](https://github.com/kizza/magic-home-party-card/releases/latest).
 2. Put magic-home-party.js file into your `config/www` folder.

diff --git a/src/const.ts b/src/const.ts
@@ -5,7 +5,7 @@ export const DEFAULT_CONFIG: Partial<MagicHomePartyConfig> = {
   speed: 20,
 }
 
-export const CARD_VERSION = '0.0.1';
+export const CARD_VERSION = '0.1.3';
 
 export const RADIUS = css`0.8em`;
 

diff --git a/src/editor.ts b/src/editor.ts
@@ -37,6 +37,8 @@ export class MagicHomePartyEditor extends LitElement {
     }
 
     return html`
+      Single click to preview a color. Double click to add-or-remove a color.
+
       <div style="display: flex; align-items: center;">
         <h3>Selected Colours</h3>
         <span class="copyButton" @click=${this._copyToClipboard}> Copy to clipboard </span>
@@ -78,7 +80,27 @@ export class MagicHomePartyEditor extends LitElement {
 
   private _copyToClipboard() {
     const colours = this.selectedColours.map(colour => `  - [${colour.join(', ')}]`);
-    navigator.clipboard.writeText(colours.join('\n'));
+
+    try {
+      navigator.clipboard.writeText(colours.join('\n'));
+    } catch(err) {
+      console.info('Failed to copy: ', err);
+      this._copyToClipboardAlt()
+    }
+  }
+
+  private _copyToClipboardAlt() {
+    const colours = this.selectedColours.map(colour => `  - [${colour.join(', ')}]`);
+    const input = document.createElement('textarea');
+    document.body.appendChild(input);
+    input.value = colours.join('\n');
+    input.focus();
+    input.select();
+
+    const isSuccessful = document.execCommand('copy');
+    if (!isSuccessful) {
+      console.error('Failed to copy text again');
+    }
   }
 
   private _setLight = (colour: Colour) =>
@@ -136,7 +158,7 @@ export class MagicHomePartyEditor extends LitElement {
       top: 1px;
       margin-left: auto;
       color: var(--mdc-theme-primary, #6200ee);
-      cursor: default;
+      cursor: pointer;
       -webkit-font-smoothing: antialiased;
       font-family: var(
         --mdc-typography-button-font-family,

diff --git a/src/elements/chip.ts b/src/elements/chip.ts
@@ -41,7 +41,7 @@ export class Chip extends LitElement {
   static styles = css`
     :host {
       border-radius: ${RADIUS};
-      cursor: default;
+      cursor: pointer;
       display: inline-block;
       padding: 0.5em 1em;
       white-space: nowrap;

diff --git a/src/elements/entities-picker.ts b/src/elements/entities-picker.ts
@@ -1,5 +1,5 @@
 import { fireEvent, HomeAssistant } from 'custom-card-helpers';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { EntityFilter } from '../types';
 import { loadHomeAsssistantComponents } from '../util';
@@ -73,6 +73,12 @@ export class EntitiesPicker extends LitElement {
     (event.currentTarget as any).value = ''; // Reset value of adding element
     this._updateEntities([...this.currentEntities, event.detail.value]);
   }
+
+  static styles = css`
+    :host {
+      overflow-x: hidden;
+    }
+  `
 }
 
 declare global {