Forward haptic events to parent window (#4719)

hassio/src/addon-view/hassio-addon-info.ts

@@ -319,6 +319,7 @@ class HassioAddonInfo extends LitElement {
                   <ha-switch
                     @change=${this._startOnBootToggled}
                     .checked=${this.addon.boot === "auto"}
+                    haptic
                   ></ha-switch>
                 </div>
                 <div class="state">
@@ -326,6 +327,7 @@ class HassioAddonInfo extends LitElement {
                   <ha-switch
                     @change=${this._autoUpdateToggled}
                     .checked=${this.addon.auto_update}
+                    haptic
                   ></ha-switch>
                 </div>
                 ${this.addon.ingress
@@ -336,6 +338,7 @@ class HassioAddonInfo extends LitElement {
                           @change=${this._panelToggled}
                           .checked=${this.addon.ingress_panel}
                           .disabled=${this._computeCannotIngressSidebar}
+                          haptic
                         ></ha-switch>
                         ${this._computeCannotIngressSidebar
                           ? html`
@@ -363,6 +366,7 @@ class HassioAddonInfo extends LitElement {
                         <ha-switch
                           @change=${this._protectionToggled}
                           .checked=${this.addon.protected}
+                          haptic
                         ></ha-switch>
                       </div>
                     `

hassio/src/hassio-main.ts

@@ -76,7 +76,6 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       },
     },
   };
-
   @property() private _supervisorInfo: HassioSupervisorInfo;
   @property() private _hostInfo: HassioHostInfo;
   @property() private _hassOsInfo?: HassioHassOSInfo;
@@ -111,6 +110,14 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       })
     );
 
+    // Forward haptic events to parent window.
+    window.addEventListener("haptic", (ev) => {
+      // @ts-ignore
+      fireEvent(window.parent, ev.type, ev.detail, {
+        bubbles: false,
+      });
+    });
+
     makeDialogManager(this, document.body);
   }
 

src/components/ha-switch.ts

@@ -1,14 +1,19 @@
-import { customElement, CSSResult, css, query } from "lit-element";
+import { customElement, CSSResult, css, query, property } from "lit-element";
 import "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
 // tslint:disable-next-line
 import { Switch } from "@material/mwc-switch";
 import { Constructor } from "../types";
+import { forwardHaptic } from "../data/haptics";
 // tslint:disable-next-line
 const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
 
 @customElement("ha-switch")
 export class HaSwitch extends MwcSwitch {
+  // Generate a haptic vibration.
+  // Only set to true if the new value of the switch is applied right away when toggling.
+  // Do not add haptic when a user is required to press save.
+  @property({ type: Boolean }) public haptic = false;
   @query("slot") private _slot!: HTMLSlotElement;
 
   protected firstUpdated() {
@@ -22,6 +27,11 @@ export class HaSwitch extends MwcSwitch {
       Boolean(this._slot.assignedNodes().length)
     );
     this._slot.addEventListener("click", () => (this.checked = !this.checked));
+    this.addEventListener("change", () => {
+      if (this.haptic) {
+        forwardHaptic("light");
+      }
+    });
   }
 
   protected static get styles(): CSSResult[] {