From: Alexander Ebert Date: Thu, 5 Nov 2020 17:07:54 +0000 (+0100) Subject: Convert `Ui/Message/Share` to TypeScript X-Git-Tag: 5.4.0_Alpha_1~630^2~6 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4295ad3d8146889b13fd7120703504273f48b6af;p=GitHub%2FWoltLab%2FWCF.git Convert `Ui/Message/Share` to TypeScript --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share.js index 74187d87f1..eb73e220f2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Share.js @@ -1,111 +1,112 @@ /** * Provides buttons to share a page through multiple social community sites. * - * @author Marcel Werk - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Message/Share + * @author Marcel Werk + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Message/Share */ -define(['EventHandler', 'StringUtil'], function (EventHandler, StringUtil) { +define(["require", "exports", "tslib", "../../Event/Handler", "../../StringUtil"], function (require, exports, tslib_1, EventHandler, StringUtil) { "use strict"; - /** - * @exports WoltLabSuite/Core/Ui/Message/Share - */ - return { - _pageDescription: '', - _pageUrl: '', - init: function () { - var title = elBySel('meta[property="og:title"]'); - if (title !== null) - this._pageDescription = encodeURIComponent(title.content); - var url = elBySel('meta[property="og:url"]'); - if (url !== null) - this._pageUrl = encodeURIComponent(url.content); - elBySelAll('.jsMessageShareButtons', null, (function (container) { - container.classList.remove('jsMessageShareButtons'); - var pageUrl = encodeURIComponent(StringUtil.unescapeHTML(elData(container, 'url') || '')); - if (!pageUrl) { - pageUrl = this._pageUrl; - } - var providers = { - facebook: { - link: elBySel('.jsShareFacebook', container), - share: (function (event) { - event.preventDefault(); - this._share('facebook', 'https://www.facebook.com/sharer.php?u={pageURL}&t={text}', true, pageUrl); - }).bind(this) + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + EventHandler = tslib_1.__importStar(EventHandler); + StringUtil = tslib_1.__importStar(StringUtil); + let _pageDescription = ""; + let _pageUrl = ""; + function share(objectName, url, appendUrl, pageUrl) { + // fallback for plugins + if (!pageUrl) { + pageUrl = _pageUrl; + } + window.open(url.replace("{pageURL}", pageUrl).replace("{text}", _pageDescription + (appendUrl ? `%20${pageUrl}` : "")), objectName, "height=600,width=600"); + } + function init() { + const title = document.querySelector('meta[property="og:title"]'); + if (title !== null) { + _pageDescription = encodeURIComponent(title.content); + } + const url = document.querySelector('meta[property="og:url"]'); + if (url !== null) { + _pageUrl = encodeURIComponent(url.content); + } + document.querySelectorAll(".jsMessageShareButtons").forEach((container) => { + container.classList.remove("jsMessageShareButtons"); + let pageUrl = encodeURIComponent(StringUtil.unescapeHTML(container.dataset.url || "")); + if (!pageUrl) { + pageUrl = _pageUrl; + } + const providers = { + facebook: { + link: container.querySelector(".jsShareFacebook"), + share(event) { + event.preventDefault(); + share("facebook", "https://www.facebook.com/sharer.php?u={pageURL}&t={text}", true, pageUrl); + }, + }, + google: { + link: container.querySelector(".jsShareGoogle"), + share(event) { + event.preventDefault(); + share("google", "https://plus.google.com/share?url={pageURL}", false, pageUrl); }, - google: { - link: elBySel('.jsShareGoogle', container), - share: (function (event) { - event.preventDefault(); - this._share('google', 'https://plus.google.com/share?url={pageURL}', false, pageUrl); - }).bind(this) + }, + reddit: { + link: container.querySelector(".jsShareReddit"), + share(event) { + event.preventDefault(); + share("reddit", "https://ssl.reddit.com/submit?url={pageURL}", false, pageUrl); }, - reddit: { - link: elBySel('.jsShareReddit', container), - share: (function (event) { - event.preventDefault(); - this._share('reddit', 'https://ssl.reddit.com/submit?url={pageURL}', false, pageUrl); - }).bind(this) + }, + twitter: { + link: container.querySelector(".jsShareTwitter"), + share(event) { + event.preventDefault(); + share("twitter", "https://twitter.com/share?url={pageURL}&text={text}", false, pageUrl); }, - twitter: { - link: elBySel('.jsShareTwitter', container), - share: (function (event) { - event.preventDefault(); - this._share('twitter', 'https://twitter.com/share?url={pageURL}&text={text}', false, pageUrl); - }).bind(this) + }, + linkedIn: { + link: container.querySelector(".jsShareLinkedIn"), + share(event) { + event.preventDefault(); + share("linkedIn", "https://www.linkedin.com/cws/share?url={pageURL}", false, pageUrl); }, - linkedIn: { - link: elBySel('.jsShareLinkedIn', container), - share: (function (event) { - event.preventDefault(); - this._share('linkedIn', 'https://www.linkedin.com/cws/share?url={pageURL}', false, pageUrl); - }).bind(this) + }, + pinterest: { + link: container.querySelector(".jsSharePinterest"), + share(event) { + event.preventDefault(); + share("pinterest", "https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}", false, pageUrl); }, - pinterest: { - link: elBySel('.jsSharePinterest', container), - share: (function (event) { - event.preventDefault(); - this._share('pinterest', 'https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}', false, pageUrl); - }).bind(this) + }, + xing: { + link: container.querySelector(".jsShareXing"), + share(event) { + event.preventDefault(); + share("xing", "https://www.xing.com/social_plugins/share?url={pageURL}", false, pageUrl); }, - xing: { - link: elBySel('.jsShareXing', container), - share: (function (event) { - event.preventDefault(); - this._share('xing', 'https://www.xing.com/social_plugins/share?url={pageURL}', false, pageUrl); - }).bind(this) + }, + whatsApp: { + link: container.querySelector(".jsShareWhatsApp"), + share(event) { + event.preventDefault(); + window.location.href = "https://api.whatsapp.com/send?text=" + _pageDescription + "%20" + _pageUrl; }, - whatsApp: { - link: elBySel('.jsShareWhatsApp', container), - share: (function (event) { - event.preventDefault(); - window.location.href = 'https://api.whatsapp.com/send?text=' + this._pageDescription + '%20' + this._pageUrl; - }).bind(this) - } - }; - EventHandler.fire('com.woltlab.wcf.message.share', 'shareProvider', { - container: container, - providers: providers, - pageDescription: this._pageDescription, - pageUrl: this._pageUrl - }); - for (var provider in providers) { - if (providers.hasOwnProperty(provider)) { - if (providers[provider].link !== null) { - providers[provider].link.addEventListener('click', providers[provider].share); - } - } + }, + }; + EventHandler.fire("com.woltlab.wcf.message.share", "shareProvider", { + container, + providers, + pageDescription: _pageDescription, + pageUrl: _pageUrl, + }); + Object.values(providers).forEach((provider) => { + if (provider.link !== null) { + const link = provider.link; + link.addEventListener("click", (ev) => provider.share(ev)); } - }).bind(this)); - }, - _share: function (objectName, url, appendUrl, pageUrl) { - // fallback for plugins - if (!pageUrl) { - pageUrl = this._pageUrl; - } - window.open(url.replace(/\{pageURL}/, pageUrl).replace(/\{text}/, this._pageDescription + (appendUrl ? "%20" + pageUrl : "")), objectName, 'height=600,width=600'); - } - }; + }); + }); + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/Share.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/Share.js deleted file mode 100644 index 8373f37b32..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/Share.js +++ /dev/null @@ -1,122 +0,0 @@ -/** - * Provides buttons to share a page through multiple social community sites. - * - * @author Marcel Werk - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Message/Share - */ -define(['EventHandler', 'StringUtil'], function(EventHandler, StringUtil) { - "use strict"; - - /** - * @exports WoltLabSuite/Core/Ui/Message/Share - */ - return { - _pageDescription: '', - _pageUrl: '', - - init: function() { - var title = elBySel('meta[property="og:title"]'); - if (title !== null) this._pageDescription = encodeURIComponent(title.content); - var url = elBySel('meta[property="og:url"]'); - if (url !== null) this._pageUrl = encodeURIComponent(url.content); - - elBySelAll('.jsMessageShareButtons', null, (function(container) { - container.classList.remove('jsMessageShareButtons'); - - var pageUrl = encodeURIComponent(StringUtil.unescapeHTML(elData(container, 'url') || '')); - if (!pageUrl) { - pageUrl = this._pageUrl; - } - - var providers = { - facebook: { - link: elBySel('.jsShareFacebook', container), - share: (function(event) { - event.preventDefault(); - this._share('facebook', 'https://www.facebook.com/sharer.php?u={pageURL}&t={text}', true, pageUrl); - }).bind(this) - }, - google: { - link: elBySel('.jsShareGoogle', container), - share: (function(event) { - event.preventDefault(); - this._share('google', 'https://plus.google.com/share?url={pageURL}', false, pageUrl); - }).bind(this) - }, - reddit: { - link: elBySel('.jsShareReddit', container), - share: (function(event) { - event.preventDefault(); - this._share('reddit', 'https://ssl.reddit.com/submit?url={pageURL}', false, pageUrl); - }).bind(this) - }, - twitter: { - link: elBySel('.jsShareTwitter', container), - share: (function(event) { - event.preventDefault(); - this._share('twitter', 'https://twitter.com/share?url={pageURL}&text={text}', false, pageUrl); - }).bind(this) - }, - linkedIn: { - link: elBySel('.jsShareLinkedIn', container), - share: (function(event) { - event.preventDefault(); - this._share('linkedIn', 'https://www.linkedin.com/cws/share?url={pageURL}', false, pageUrl); - }).bind(this) - }, - pinterest: { - link: elBySel('.jsSharePinterest', container), - share: (function(event) { - event.preventDefault(); - this._share('pinterest', 'https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}', false, pageUrl); - }).bind(this) - }, - xing: { - link: elBySel('.jsShareXing', container), - share: (function(event) { - event.preventDefault(); - this._share('xing', 'https://www.xing.com/social_plugins/share?url={pageURL}', false, pageUrl); - }).bind(this) - }, - whatsApp: { - link: elBySel('.jsShareWhatsApp', container), - share: (function(event) { - event.preventDefault(); - window.location.href = 'https://api.whatsapp.com/send?text=' + this._pageDescription + '%20' + this._pageUrl; - }).bind(this) - } - }; - - EventHandler.fire('com.woltlab.wcf.message.share', 'shareProvider', { - container: container, - providers: providers, - pageDescription: this._pageDescription, - pageUrl: this._pageUrl - }); - - for (var provider in providers) { - if (providers.hasOwnProperty(provider)) { - if (providers[provider].link !== null) { - providers[provider].link.addEventListener('click', providers[provider].share); - } - } - } - }).bind(this)); - }, - - _share: function(objectName, url, appendUrl, pageUrl) { - // fallback for plugins - if (!pageUrl) { - pageUrl = this._pageUrl; - } - - window.open( - url.replace(/\{pageURL}/, pageUrl).replace(/\{text}/, this._pageDescription + (appendUrl ? "%20" + pageUrl : "")), - objectName, - 'height=600,width=600' - ); - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/Share.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/Share.ts new file mode 100644 index 0000000000..23170860df --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Message/Share.ts @@ -0,0 +1,136 @@ +/** + * Provides buttons to share a page through multiple social community sites. + * + * @author Marcel Werk + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Message/Share + */ + +import * as EventHandler from "../../Event/Handler"; +import * as StringUtil from "../../StringUtil"; + +let _pageDescription = ""; +let _pageUrl = ""; + +function share(objectName: string, url: string, appendUrl: boolean, pageUrl: string) { + // fallback for plugins + if (!pageUrl) { + pageUrl = _pageUrl; + } + + window.open( + url.replace("{pageURL}", pageUrl).replace("{text}", _pageDescription + (appendUrl ? `%20${pageUrl}` : "")), + objectName, + "height=600,width=600", + ); +} + +interface Provider { + link: HTMLElement | null; + + share(event: MouseEvent): void; +} + +interface Providers { + [key: string]: Provider; +} + +export function init(): void { + const title = document.querySelector('meta[property="og:title"]') as HTMLMetaElement; + if (title !== null) { + _pageDescription = encodeURIComponent(title.content); + } + + const url = document.querySelector('meta[property="og:url"]') as HTMLMetaElement; + if (url !== null) { + _pageUrl = encodeURIComponent(url.content); + } + + document.querySelectorAll(".jsMessageShareButtons").forEach((container: HTMLElement) => { + container.classList.remove("jsMessageShareButtons"); + + let pageUrl = encodeURIComponent(StringUtil.unescapeHTML(container.dataset.url || "")); + if (!pageUrl) { + pageUrl = _pageUrl; + } + + const providers: Providers = { + facebook: { + link: container.querySelector(".jsShareFacebook"), + share(event: MouseEvent): void { + event.preventDefault(); + share("facebook", "https://www.facebook.com/sharer.php?u={pageURL}&t={text}", true, pageUrl); + }, + }, + google: { + link: container.querySelector(".jsShareGoogle"), + share(event: MouseEvent): void { + event.preventDefault(); + share("google", "https://plus.google.com/share?url={pageURL}", false, pageUrl); + }, + }, + reddit: { + link: container.querySelector(".jsShareReddit"), + share(event: MouseEvent): void { + event.preventDefault(); + share("reddit", "https://ssl.reddit.com/submit?url={pageURL}", false, pageUrl); + }, + }, + twitter: { + link: container.querySelector(".jsShareTwitter"), + share(event: MouseEvent): void { + event.preventDefault(); + share("twitter", "https://twitter.com/share?url={pageURL}&text={text}", false, pageUrl); + }, + }, + linkedIn: { + link: container.querySelector(".jsShareLinkedIn"), + share(event: MouseEvent): void { + event.preventDefault(); + share("linkedIn", "https://www.linkedin.com/cws/share?url={pageURL}", false, pageUrl); + }, + }, + pinterest: { + link: container.querySelector(".jsSharePinterest"), + share(event: MouseEvent): void { + event.preventDefault(); + share( + "pinterest", + "https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}", + false, + pageUrl, + ); + }, + }, + xing: { + link: container.querySelector(".jsShareXing"), + share(event: MouseEvent): void { + event.preventDefault(); + share("xing", "https://www.xing.com/social_plugins/share?url={pageURL}", false, pageUrl); + }, + }, + whatsApp: { + link: container.querySelector(".jsShareWhatsApp"), + share(event: MouseEvent): void { + event.preventDefault(); + window.location.href = "https://api.whatsapp.com/send?text=" + _pageDescription + "%20" + _pageUrl; + }, + }, + }; + + EventHandler.fire("com.woltlab.wcf.message.share", "shareProvider", { + container, + providers, + pageDescription: _pageDescription, + pageUrl: _pageUrl, + }); + + Object.values(providers).forEach((provider) => { + if (provider.link !== null) { + const link = provider.link as HTMLAnchorElement; + link.addEventListener("click", (ev) => provider.share(ev)); + } + }); + }); +}