Fix provider buttons in the share dialog

diff --git a/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts
index 508adcff5ccab60b207348ff5be54b3dc2c51a38..adbd1abcf6beb604874b3f6f7dbf84666b6d5ae8 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Message/Share/Dialog.ts
@@ -11,11 +11,11 @@ import * as Clipboard from "../../../Clipboard";
 import * as UiNotification from "../../Notification";
 import * as StringUtil from "../../../StringUtil";
 import DomChangeListener from "../../../Dom/Change/Listener";
-import * as UiMessageShare from "../Share";
 import { getShareProviders } from "./Providers";
 import { dialogFactory } from "../../../Component/Dialog";
 import WoltlabCoreDialogElement from "../../../Element/woltlab-core-dialog";
 import { getPhrase } from "WoltLabSuite/Core/Language";
+import * as EventHandler from "../../../Event/Handler";
 
 type Label = string;
 type Value = string;
@@ -27,6 +27,15 @@ const offerNativeSharing = window.navigator.share !== undefined;
 
 let dialog: WoltlabCoreDialogElement | undefined = undefined;
 
+interface Provider {
+  selector: string;
+  share(): void;
+}
+
+interface Providers {
+  [key: string]: Provider;
+}
+
 /**
  * Copies the contents of one of the share dialog's input elements to the clipboard.
  */
@@ -227,7 +236,7 @@ function openDialog(event: MouseEvent): void {
     }
 
     if (providerButtons) {
-      UiMessageShare.init();
+      initProviderButtons(dialog.content, link);
     }
   }
 
@@ -252,6 +261,81 @@ function getLink(button: HTMLElement): string {
   return button.dataset.link!;
 }
 
+function initProviderButtons(container: HTMLElement, link: string): void {
+  const providers: Providers = {
+    facebook: {
+      selector: '.messageShareProvider[data-identifier="Facebook"]',
+      share(): void {
+        share("facebook", "https://www.facebook.com/sharer.php?u={pageURL}&t={text}", true, link);
+      },
+    },
+    reddit: {
+      selector: '.messageShareProvider[data-identifier="Reddit"]',
+      share(): void {
+        share("reddit", "https://ssl.reddit.com/submit?url={pageURL}", false, link);
+      },
+    },
+    twitter: {
+      selector: '.messageShareProvider[data-identifier="Twitter"]',
+      share(): void {
+        share("twitter", "https://twitter.com/share?url={pageURL}&text={text}", false, link);
+      },
+    },
+    linkedIn: {
+      selector: '.messageShareProvider[data-identifier="LinkedIn"]',
+      share(): void {
+        share("linkedIn", "https://www.linkedin.com/cws/share?url={pageURL}", false, link);
+      },
+    },
+    pinterest: {
+      selector: '.messageShareProvider[data-identifier="Pinterest"]',
+      share(): void {
+        share("pinterest", "https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}", false, link);
+      },
+    },
+    xing: {
+      selector: '.messageShareProvider[data-identifier="XING"]',
+      share(): void {
+        share("xing", "https://www.xing.com/social_plugins/share?url={pageURL}", false, link);
+      },
+    },
+    whatsApp: {
+      selector: '.messageShareProvider[data-identifier="WhatsApp"]',
+      share(): void {
+        window.location.href = "https://api.whatsapp.com/send?text=" + getPageDescription() + "%20" + link;
+      },
+    },
+  };
+
+  EventHandler.fire("com.woltlab.wcf.message.share", "shareProvider", {
+    container,
+    providers,
+    pageDescription: getPageDescription(),
+    pageUrl: link,
+  });
+
+  Object.values(providers).forEach((provider) => {
+    container.querySelector(provider.selector)?.addEventListener("click", () => provider.share());
+  });
+}
+
+function share(objectName: string, url: string, appendUrl: boolean, pageUrl: string): void {
+  window.open(
+    url.replace("{pageURL}", pageUrl).replace("{text}", getPageDescription() + (appendUrl ? `%20${pageUrl}` : "")),
+    objectName,
+    "height=600,width=600",
+  );
+}
+
+function getPageDescription(): string {
+  const title = document.querySelector('meta[property="og:title"]') as HTMLMetaElement;
+  if (title !== null) {
+    return encodeURIComponent(title.content);
+  }
+
+  return "";
+}
+
 export function setup(): void {
   registerButtons();
   DomChangeListener.add("WoltLabSuite/Core/Ui/Message/Share/Dialog", () => registerButtons());

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 78f8e7ad5985193be8952994d201a1ab3c057247..b5768bd5002f07ad7a39509be623f9864dfdb60e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share/Dialog.js
@@ -5,7 +5,7 @@
  * @copyright  2001-2021 WoltLab GmbH
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  */
-define(["require", "exports", "tslib", "../../../Dom/Traverse", "../../../Clipboard", "../../Notification", "../../../StringUtil", "../../../Dom/Change/Listener", "../Share", "./Providers", "../../../Component/Dialog", "WoltLabSuite/Core/Language"], function (require, exports, tslib_1, DomTraverse, Clipboard, UiNotification, StringUtil, Listener_1, UiMessageShare, Providers_1, Dialog_1, Language_1) {
+define(["require", "exports", "tslib", "../../../Dom/Traverse", "../../../Clipboard", "../../Notification", "../../../StringUtil", "../../../Dom/Change/Listener", "./Providers", "../../../Component/Dialog", "WoltLabSuite/Core/Language", "../../../Event/Handler"], function (require, exports, tslib_1, DomTraverse, Clipboard, UiNotification, StringUtil, Listener_1, Providers_1, Dialog_1, Language_1, EventHandler) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = void 0;
@@ -14,7 +14,7 @@ define(["require", "exports", "tslib", "../../../Dom/Traverse", "../../../Clipbo
     UiNotification = tslib_1.__importStar(UiNotification);
     StringUtil = tslib_1.__importStar(StringUtil);
     Listener_1 = tslib_1.__importDefault(Listener_1);
-    UiMessageShare = tslib_1.__importStar(UiMessageShare);
+    EventHandler = tslib_1.__importStar(EventHandler);
     const shareButtons = new WeakSet();
     const offerNativeSharing = window.navigator.share !== undefined;
     let dialog = undefined;
@@ -183,7 +183,7 @@ define(["require", "exports", "tslib", "../../../Dom/Traverse", "../../../Clipbo
                 dialog.content.querySelector(".shareDialogNativeButton").addEventListener("click", (ev) => nativeShare(ev));
             }
             if (providerButtons) {
-                UiMessageShare.init();
+                initProviderButtons(dialog.content, link);
             }
         }
         dialog.show((0, Language_1.getPhrase)("wcf.message.share"));
@@ -202,6 +202,71 @@ define(["require", "exports", "tslib", "../../../Dom/Traverse", "../../../Clipbo
         }
         return button.dataset.link;
     }
+    function initProviderButtons(container, link) {
+        const providers = {
+            facebook: {
+                selector: '.messageShareProvider[data-identifier="Facebook"]',
+                share() {
+                    share("facebook", "https://www.facebook.com/sharer.php?u={pageURL}&t={text}", true, link);
+                },
+            },
+            reddit: {
+                selector: '.messageShareProvider[data-identifier="Reddit"]',
+                share() {
+                    share("reddit", "https://ssl.reddit.com/submit?url={pageURL}", false, link);
+                },
+            },
+            twitter: {
+                selector: '.messageShareProvider[data-identifier="Twitter"]',
+                share() {
+                    share("twitter", "https://twitter.com/share?url={pageURL}&text={text}", false, link);
+                },
+            },
+            linkedIn: {
+                selector: '.messageShareProvider[data-identifier="LinkedIn"]',
+                share() {
+                    share("linkedIn", "https://www.linkedin.com/cws/share?url={pageURL}", false, link);
+                },
+            },
+            pinterest: {
+                selector: '.messageShareProvider[data-identifier="Pinterest"]',
+                share() {
+                    share("pinterest", "https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}", false, link);
+                },
+            },
+            xing: {
+                selector: '.messageShareProvider[data-identifier="XING"]',
+                share() {
+                    share("xing", "https://www.xing.com/social_plugins/share?url={pageURL}", false, link);
+                },
+            },
+            whatsApp: {
+                selector: '.messageShareProvider[data-identifier="WhatsApp"]',
+                share() {
+                    window.location.href = "https://api.whatsapp.com/send?text=" + getPageDescription() + "%20" + link;
+                },
+            },
+        };
+        EventHandler.fire("com.woltlab.wcf.message.share", "shareProvider", {
+            container,
+            providers,
+            pageDescription: getPageDescription(),
+            pageUrl: link,
+        });
+        Object.values(providers).forEach((provider) => {
+            container.querySelector(provider.selector)?.addEventListener("click", () => provider.share());
+        });
+    }
+    function share(objectName, url, appendUrl, pageUrl) {
+        window.open(url.replace("{pageURL}", pageUrl).replace("{text}", getPageDescription() + (appendUrl ? `%20${pageUrl}` : "")), objectName, "height=600,width=600");
+    }
+    function getPageDescription() {
+        const title = document.querySelector('meta[property="og:title"]');
+        if (title !== null) {
+            return encodeURIComponent(title.content);
+        }
+        return "";
+    }
     function setup() {
         registerButtons();
         Listener_1.default.add("WoltLabSuite/Core/Ui/Message/Share/Dialog", () => registerButtons());