Add gallery demo for Long Press directive (#2189)

* Convert gallery to TS

* Add long press demo

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -69,7 +69,7 @@ class DemoAlarmPanelEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-conditional-card.ts

@@ -74,7 +74,7 @@ class DemoConditional extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-entities-card.ts

@@ -188,7 +188,7 @@ class DemoEntities extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -89,7 +89,7 @@ class DemoEntityButtonEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -105,7 +105,7 @@ class DemoFilter extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-glance-card.ts

@@ -230,7 +230,7 @@ class DemoPicEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-light-card.ts

@@ -38,7 +38,7 @@ class DemoLightEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-map-card.ts

@@ -139,7 +139,7 @@ class DemoMap extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -95,7 +95,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -93,7 +93,7 @@ class DemoPicElements extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -36,7 +36,7 @@ class DemoShoppingListEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
 

gallery/src/demos/demo-hui-stack-card.ts

@@ -104,7 +104,7 @@ class DemoStack extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -75,7 +75,7 @@ class DemoThermostatEntity extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-more-info-light.ts

@@ -8,16 +8,7 @@ import getEntity from "../data/entity";
 import provideHass from "../data/provide_hass";
 
 import "../components/demo-more-infos";
-
-/* eslint-disable no-unused-vars */
-
-const SUPPORT_BRIGHTNESS = 1;
-const SUPPORT_COLOR_TEMP = 2;
-const SUPPORT_EFFECT = 4;
-const SUPPORT_FLASH = 8;
-const SUPPORT_COLOR = 16;
-const SUPPORT_TRANSITION = 32;
-const SUPPORT_WHITE_VALUE = 128;
+import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -49,7 +40,7 @@ class DemoMoreInfoLight extends PolymerElement {
     };
   }
 
-  ready() {
+  public ready() {
     super.ready();
     const hass = provideHass(this);
     hass.addEntities(ENTITIES);

gallery/src/demos/demo-util-long-press.ts

@@ -0,0 +1,79 @@
+import { html, LitElement } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-button/paper-button";
+
+import "../../../src/components/ha-card";
+import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
+
+export class DemoUtilLongPress extends LitElement {
+  public render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      ${
+        [1, 2, 3].map(
+          () => html`
+            <ha-card>
+              <paper-button
+                @ha-click="${this._handleTap}"
+                @ha-hold="${this._handleHold}"
+                .longPress="${longPress()}"
+              >
+                (long) press me!
+              </paper-button>
+
+              <textarea></textarea>
+
+              <div>(try pressing and scrolling too!)</div>
+            </ha-card>
+          `
+        )
+      }
+    `;
+  }
+
+  private _handleTap(ev: Event) {
+    this._addValue(ev, "tap");
+  }
+
+  private _handleHold(ev: Event) {
+    this._addValue(ev, "hold");
+  }
+
+  private _addValue(ev: Event, value: string) {
+    const area = (ev.currentTarget as HTMLElement)
+      .nextElementSibling! as HTMLTextAreaElement;
+    const now = new Date().toTimeString().split(" ")[0];
+    area.value += `${now}: ${value}\n`;
+    area.scrollTop = area.scrollHeight;
+  }
+
+  private renderStyle() {
+    return html`
+      <style>
+        ha-card {
+          width: 200px;
+          margin: calc(42vh - 140px) auto;
+          padding: 8px;
+          text-align: center;
+        }
+        ha-card:first-of-type {
+          margin-top: 16px;
+        }
+        ha-card:last-of-type {
+          margin-bottom: 16px;
+        }
+
+        paper-button {
+          font-weight: bold;
+          color: var(--primary-color);
+        }
+
+        textarea {
+          height: 50px;
+        }
+      </style>
+    `;
+  }
+}
+
+customElements.define("demo-util-long-press", DemoUtilLongPress);

gallery/src/ha-gallery.js

@@ -11,7 +11,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../src/managers/notification-manager";
 
-const DEMOS = require.context("./demos", true, /^(.*\.(js$))[^.]*$/im);
+const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
 const fixPath = (path) => path.substr(2, path.length - 5);
 
@@ -118,6 +118,22 @@ class HaGallery extends PolymerElement {
                   </a>
                 </template>
               </paper-card>
+
+              <paper-card heading="Util demos">
+                <div class='card-content intro'>
+                  <p>
+                    Test pages for our utility functions.
+                  </p>
+                </div>
+                <template is='dom-repeat' items='[[_utilDemos]]'>
+                  <a href='#[[item]]'>
+                    <paper-item>
+                      <paper-item-body>{{ item }}</paper-item-body>
+                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                    </paper-item>
+                  </a>
+                </template>
+              </paper-card>
             </div>
           </template>
         </div>
@@ -145,6 +161,10 @@ class HaGallery extends PolymerElement {
         type: Array,
         computed: "_computeMoreInfos(_demos)",
       },
+      _utilDemos: {
+        type: Array,
+        computed: "_computeUtil(_demos)",
+      },
     };
   }
 
@@ -178,7 +198,7 @@ class HaGallery extends PolymerElement {
     while (root.lastChild) root.removeChild(root.lastChild);
 
     if (demo) {
-      DEMOS(`./${demo}.js`);
+      DEMOS(`./${demo}.ts`);
       const el = document.createElement(demo);
       root.appendChild(el);
     }
@@ -199,6 +219,10 @@ class HaGallery extends PolymerElement {
   _computeMoreInfos(demos) {
     return demos.filter((demo) => demo.includes("more-info"));
   }
+
+  _computeUtil(demos) {
+    return demos.filter((demo) => demo.includes("util"));
+  }
 }
 
 customElements.define("ha-gallery", HaGallery);

src/data/light.ts

@@ -0,0 +1,7 @@
+export const SUPPORT_BRIGHTNESS = 1;
+export const SUPPORT_COLOR_TEMP = 2;
+export const SUPPORT_EFFECT = 4;
+export const SUPPORT_FLASH = 8;
+export const SUPPORT_COLOR = 16;
+export const SUPPORT_TRANSITION = 32;
+export const SUPPORT_WHITE_VALUE = 128;