share eingebaut

public/js/app.js

@@ -2931,11 +2931,15 @@ ScriptLoader.scriptPromises = {};
 ScriptLoader.cssPromises = {};
 
 class ShareButton {
-    constructor(deviceType, icon, callback)
+    constructor(deviceType, icon, callback, shouldLoadImg)
     {
         this._deviceType = deviceType;
         this._icon = icon;
         this._callback = callback;
+        console.log("shouldLoad", Helper.nonNull(shouldLoadImg, false), shouldLoadImg);
+        if (Helper.nonNull(shouldLoadImg, false)){
+            this._icon = ViewInflater.inflate(this._icon);
+        }
     }
 
     shouldShowFor(deviceType)
@@ -2968,13 +2972,11 @@ class ShareManager {
         ShareManager.shareButtons.push(shareButton);
     }
 
-    static generateDefaultShareElement(shareUrl)
-    {
+    static generateDefaultShareElement(shareUrl) {
         return ShareManager.generateShareElement(shareUrl, ShareManager.getDefaultGenerateCallback());
     }
 
-    static generateDefaultShareElementForButtons(shareUrl, buttons)
-    {
+    static generateDefaultShareElementForButtons(shareUrl, buttons) {
         return ShareManager.generateShareElementForButtons(shareUrl, buttons, ShareManager.getDefaultGenerateCallback());
     }
 
@@ -2982,14 +2984,13 @@ class ShareManager {
         return ShareManager.generateShareElementForButtons(shareUrl, ShareManager.shareButtons, generateCallback);
     }
 
-    static generateShareElementForButtons(shareUrl, buttons,  generateCallback)
-    {
+    static generateShareElementForButtons(shareUrl, buttons, generateCallback) {
         let shareButtonElement = document.createElement("div");
         let currentDeviceType = ShareManager.getCurrentDeviceType();
         for (let i = 0, n = buttons.length; i < n; i++) {
             if (buttons[i].shouldShowFor(currentDeviceType)) {
                 let elem = generateCallback(buttons[i], shareUrl);
-                elem.onclick = function(event){
+                elem.onclick = function (event) {
                     buttons[i].getCallback()(shareUrl, this, event);
                 };
                 shareButtonElement.appendChild(elem);
@@ -3010,15 +3011,22 @@ class ShareManager {
         }
     }
 
-    static getDefaultGenerateCallback()
-    {
-        return function(button){
+    static getDefaultGenerateCallback() {
+        return function (button) {
             let linkElement = document.createElement("a");
-            let iconElement = document.createElement("img");
-            linkElement.appendChild(iconElement);
-
-            iconElement.src = Helper.basePath(button.getIcon());
-            iconElement.classList.add("share-icon");
+            linkElement.classList.add("share-icon");
+            let iconUrl = button.getIcon();
+            if (typeof iconUrl === "string") {
+                let iconElement = document.createElement("img");
+                iconElement.src = Helper.basePath(button.getIcon());
+                iconElement.classList.add("share-icon");
+                linkElement.appendChild(iconElement);
+            }
+            else {
+                Promise.resolve(iconUrl).then(elem => {
+                    linkElement.appendChild(elem);
+                });
+            }
 
             return linkElement;
         }
@@ -3029,7 +3037,7 @@ ShareManager.init();
 
 class SmsShareButton extends ShareButton
 {
-    constructor(icon) {
+    constructor(icon, shouldLoadImg) {
         super(ShareButton.TYPE_MOBILE, icon, function (link) {
             let linkToOpen = "";
             if (ShareManager.getCurrentDeviceType() === ShareButton.TYPE_MOBILE_APPLE) {
@@ -3039,21 +3047,21 @@ class SmsShareButton extends ShareButton
                 linkToOpen = "sms:?body=" + encodeURIComponent(link);
             }
             window.open(linkToOpen, '_blank');
-        });
+        }, shouldLoadImg);
     }
 }
 
 class TelegramShareButton extends ShareButton {
-    constructor(icon) {
+    constructor(icon, shouldLoadImg) {
         super(ShareButton.TYPE_ALL, icon, function (link) {
             let linkToOpen = "https://t.me/share/url?url="+encodeURIComponent(link);
             window.open(linkToOpen, '_blank');
-        });
+        }, shouldLoadImg);
     }
 }
 
 class WhatsappShareButton extends ShareButton {
-    constructor(icon) {
+    constructor(icon, shouldLoadImg) {
         super(ShareButton.TYPE_ALL, icon, function (link) {
             let linkToOpen = "";
             if (ShareManager.getCurrentDeviceType() === ShareButton.TYPE_DESKTOP) {
@@ -3063,7 +3071,7 @@ class WhatsappShareButton extends ShareButton {
                 linkToOpen = "whatsapp://send?text=" + encodeURIComponent(link);
             }
             window.open(linkToOpen, '_blank');
-        });
+        }, shouldLoadImg);
     }
 }
 
@@ -6496,6 +6504,24 @@ class MainMenuLevel extends FourWordsLevel{
     // }
 }
 
+class ShareDialog extends Dialog{
+    constructor() {
+        let viewPromise = ViewInflater.inflate("html/application/dialog/share.html").then(view => {
+            view.appendChild(ShareManager.generateDefaultShareElement(window.location.hostname + Helper.basePath("")));
+            let closeListener = () => {
+                this.close();
+            };
+
+            view.querySelectorAll("a").forEach((element) => {
+               element.addEventListener("click", closeListener);
+            });
+            return view;
+        });
+
+        super(viewPromise, "share-dialog");
+    }
+}
+
 class MenuSite extends WordRotatorBaseSite {
     constructor(siteManager) {
         super(siteManager, "html/application/menu.html");
@@ -6641,6 +6667,11 @@ class MenuSite extends WordRotatorBaseSite {
             soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
             Matomo.push(["trackEvent", "MainMenu", "PlaySound", "Play Sound", (playSoundButton.checked) ? 1 : 0]);
         });
+
+        this.findBy("#share-button").addEventListener("click", () => {
+            new ShareDialog().show();
+        });
+        // this.findBy("#share-buttons").appendChild(ShareManager.generateDefaultShareElement("https://wordrotator.silas.link"));
     }
 
     onPause(args) {
@@ -6814,9 +6845,9 @@ class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
         InstallManager.setCanInstallListener(() => {
             let installButton = this.findBy("#install-button");
             installButton.addEventListener("click", () => {
+                installButton.classList.add("hidden");
                 InstallManager.prompt().then((e) => {
                     console.log("clicked", e);
-                    installButton.classList.add("hidden");
                 });
             });
             installButton.classList.remove("hidden");
@@ -6856,9 +6887,9 @@ ThemeManager.addTheme(new Theme("green", "green"));
 ThemeManager.addTheme(new Theme("pink", "pink"));
 ThemeManager.addTheme(new Theme("dark", "dark"));
 
-ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg'));
-ShareManager.addShareButton(new SmsShareButton('img/sms.svg'));
-ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg'));
+ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg', true));
+ShareManager.addShareButton(new SmsShareButton('img/sms.svg', true));
+ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg', true));
 // ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
 
 let app = new App();