Fix downloads on mobile (#9375)

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -22,6 +22,7 @@ import {
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-snapshot-content";
 import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
@@ -288,12 +289,11 @@ class HassioSnapshotDialog
       }
     }
 
-    const a = document.createElement("a");
+    fileDownload(
-    a.href = signedPath.path;
+      this,
-    a.download = `home_assistant_snapshot_${slugify(this._computeName)}.tar`;
+      signedPath.path,
-    this.shadowRoot!.appendChild(a);
+      `home_assistant_snapshot_${slugify(this._computeName)}.tar`
-    a.click();
+    );
-    this.shadowRoot!.removeChild(a);
   }
 
   private get _computeName() {

src/components/ha-gauge.ts

@@ -7,14 +7,14 @@ import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
 
+// Workaround for https://github.com/home-assistant/frontend/issues/6467
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
   return (percentage * 180) / 100;
 };
 
-// Workaround for https://github.com/home-assistant/frontend/issues/6467
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
 @customElement("ha-gauge")
 export class Gauge extends LitElement {
   @property({ type: Number }) public min = 0;

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -24,6 +24,7 @@ import {
 import "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
+import { fileDownload } from "../../../../../util/file_download";
 import "../../../ha-config-section";
 import { showZWaveJSAddNodeDialog } from "./show-dialog-zwave_js-add-node";
 import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node";
@@ -312,12 +313,7 @@ class ZWaveJSConfigDashboard extends LitElement {
       return;
     }
 
-    const a = document.createElement("a");
+    fileDownload(this, signedPath.path, `zwave_js_dump.jsonl`);
-    a.href = signedPath.path;
-    a.download = `zwave_js_dump.jsonl`;
-    this.shadowRoot!.appendChild(a);
-    a.click();
-    this.shadowRoot!.removeChild(a);
   }
 
   static get styles(): CSSResultGroup {

src/resources/safari-14-attachshadow-patch.ts

@@ -2,6 +2,7 @@
 const isSafari14 = /^((?!chrome|android).)*version\/14\.0\s.*safari/i.test(
   navigator.userAgent
 );
+
 if (isSafari14) {
   const origAttachShadow = window.Element.prototype.attachShadow;
   window.Element.prototype.attachShadow = function (init) {

src/util/file_download.ts

@@ -0,0 +1,14 @@
+export const fileDownload = (
+  element: HTMLElement,
+  href: string,
+  filename: string
+): void => {
+  const a = document.createElement("a");
+  a.target = "_blank";
+  a.href = href;
+  a.download = filename;
+
+  element.shadowRoot!.appendChild(a);
+  a.dispatchEvent(new MouseEvent("click"));
+  element.shadowRoot!.removeChild(a);
+};