From af246a144742506e5949731c7105b1bf9421f8d4 Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Fri, 7 May 2021 13:02:56 +0200 Subject: [PATCH] Add support for the native web share API in share dialog (#4201) Close #4193 --- .../templates/headIncludeJavaScript.tpl | 1 + .../Core/Ui/Message/Share/Dialog.ts | 40 +++++++++++++++++++ .../Core/Ui/Message/Share/Dialog.js | 30 ++++++++++++++ wcfsetup/install/lang/de.xml | 1 + wcfsetup/install/lang/en.xml | 1 + 5 files changed, 73 insertions(+) diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl index 599f9f1ea6..fe9b47518a 100644 --- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl +++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl @@ -148,6 +148,7 @@ window.addEventListener('pageshow', function(event) { 'wcf.message.share.socialMedia': '{jslang}wcf.message.share.socialMedia{/jslang}', 'wcf.message.share.copy': '{jslang}wcf.message.share.copy{/jslang}', 'wcf.message.share.copy.success': '{jslang}wcf.message.share.copy.success{/jslang}', + 'wcf.message.share.nativeShare': '{jslang}wcf.message.share.nativeShare{/jslang}', 'wcf.global.button.rss': '{jslang}wcf.global.button.rss{/jslang}', 'wcf.global.rss.copy': '{jslang}wcf.global.rss.copy{/jslang}', 'wcf.global.rss.copy.success': '{jslang}wcf.global.rss.copy.success{/jslang}', diff --git a/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts index e62eb19ebb..f090976e0d 100644 --- a/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts +++ b/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts @@ -20,6 +20,8 @@ import * as UiMessageShareProviders from "./Providers"; const shareButtons = new WeakSet(); +const offerNativeSharing = window.navigator.share !== undefined; + /** * Copies the contents of one of the share dialog's input elements to the clipboard. */ @@ -104,6 +106,24 @@ function getProviderButtons(): string { return ""; } +/** + * Opens the native share menu. + */ +async function nativeShare(event: Event): Promise { + event.preventDefault(); + + const button = event.currentTarget as HTMLButtonElement; + + const shareOptions: ShareData = { + url: button.dataset.url!, + }; + if (button.dataset.title) { + shareOptions.title = button.dataset.title; + } + + await window.navigator.share(shareOptions); +} + /** * Opens the share dialog after clicking on the share button. */ @@ -124,10 +144,27 @@ function openDialog(event: MouseEvent): void { `; } + let nativeSharingElement = ""; + if (offerNativeSharing) { + nativeSharingElement = ` +
+
+
+ +
+
+ `; + } + const dialogContent = `
${getDialogElements(target)} ${providerElement} + ${nativeSharingElement}
`; @@ -139,6 +176,9 @@ function openDialog(event: MouseEvent): void { dialogData.content .querySelectorAll(".shareDialogCopyButton") .forEach((el) => el.addEventListener("click", (ev) => copy(ev))); + if (offerNativeSharing) { + dialogData.content.querySelector(".shareDialogNativeButton")!.addEventListener("click", (ev) => nativeShare(ev)); + } if (providerButtons) { UiMessageShare.init(); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share/Dialog.js index 3c76010fd2..ecaf9ec696 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share/Dialog.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share/Dialog.js @@ -21,6 +21,7 @@ define(["require", "exports", "tslib", "../../Dialog", "../../../Dom/Util", "../ UiMessageShare = tslib_1.__importStar(UiMessageShare); UiMessageShareProviders = tslib_1.__importStar(UiMessageShareProviders); const shareButtons = new WeakSet(); + const offerNativeSharing = window.navigator.share !== undefined; /** * Copies the contents of one of the share dialog's input elements to the clipboard. */ @@ -83,6 +84,20 @@ define(["require", "exports", "tslib", "../../Dialog", "../../../Dom/Util", "../ } return ""; } + /** + * Opens the native share menu. + */ + async function nativeShare(event) { + event.preventDefault(); + const button = event.currentTarget; + const shareOptions = { + url: button.dataset.url, + }; + if (button.dataset.title) { + shareOptions.title = button.dataset.title; + } + await window.navigator.share(shareOptions); + } /** * Opens the share dialog after clicking on the share button. */ @@ -99,12 +114,24 @@ define(["require", "exports", "tslib", "../../Dialog", "../../../Dom/Util", "../
${Language.get("wcf.message.share.socialMedia")}
${providerButtons}
+ `; + } + let nativeSharingElement = ""; + if (offerNativeSharing) { + nativeSharingElement = ` +
+
+
+ +
+
`; } const dialogContent = `
${getDialogElements(target)} ${providerElement} + ${nativeSharingElement}
`; const dialogData = Dialog_1.default.openStatic(dialogId, dialogContent, { @@ -114,6 +141,9 @@ define(["require", "exports", "tslib", "../../Dialog", "../../../Dom/Util", "../ dialogData.content .querySelectorAll(".shareDialogCopyButton") .forEach((el) => el.addEventListener("click", (ev) => copy(ev))); + if (offerNativeSharing) { + dialogData.content.querySelector(".shareDialogNativeButton").addEventListener("click", (ev) => nativeShare(ev)); + } if (providerButtons) { UiMessageShare.init(); } diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 2215a10ef8..59b0bc2c67 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -4221,6 +4221,7 @@ Dateianhänge: + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index f55155d0c1..883aa69dfc 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -4168,6 +4168,7 @@ Attachments: + -- 2.20.1