releasebird-javascript-sdk 1.0.2

package/src/RbirdWebsiteWidget.js

@@ -0,0 +1,300 @@
+import RbirdUtils from "./RbirdUtils";
+import ReleasebirdImageViewer from "./ReleasebirdImageViewer";
+import {
+    hideWidgetImage,
+    launcher0,
+    launcher1,
+    launcher2,
+    launcher3, launcher4,
+    launcher5,
+    launcher5Open,
+    launcherOpen
+} from "./Styles";
+import RbirdSessionManager from "./RbirdSessionManager";
+import RbirdScreenshotManager from "./RbirdScreenshotManager";
+import RbirdVideoRecorder from "./RbirdVideoRecorder";
+
+export default class RbirdWebsiteWidget {
+
+    websiteWidget;
+
+    websiteWidgetVisible = false;
+
+    static instance;
+
+    widgetContent;
+
+    countBadge;
+
+    escListener;
+
+    iframe;
+
+    hideWidgetButton;
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new RbirdWebsiteWidget();
+        }
+        return this.instance;
+    }
+
+    isMobileDevice = () =>  {
+        const mobileMaxWidth = 768; // Definiert die maximale Breite für mobile Geräte, z.B. Tablets und Smartphones
+        return window.innerWidth <= mobileMaxWidth;
+    }
+
+    renderWebsiteWidget() {
+        if (this.websiteWidgetVisible) {
+            return;
+        }
+        this.websiteWidgetVisible = true;
+
+        let elem = document.createElement("div");
+        elem.onclick = () => {
+            this.openWebsiteWidget();
+        };
+        document.body.appendChild(elem);
+        this.websiteWidget = elem;
+
+        if (RbirdSessionManager.getInstance().widgetSettings?.allowClose) {
+            this.hideWidgetButton = document.createElement("div");
+            this.hideWidgetButton.className = "hideWidgetButton";
+            this.hideWidgetButton.innerHTML = hideWidgetImage;
+            this.hideWidgetButton.onclick = () => this.handleHideWidgetButton();
+            this.hideWidgetButton.style.display = "block";
+            document.body.appendChild(this.hideWidgetButton);
+        }
+
+        this.countBadge = document.createElement("span");
+        this.countBadge.className = "rbird_badge";
+        this.countBadge.style.display = "none";
+        document.body.appendChild(this.countBadge);
+
+        this.styleWidget();
+    }
+
+    isOpen() {
+        return RbirdUtils.hasClass(this.widgetContent, "cta__modal--visible");
+    }
+
+    openWebsiteWidget() {
+        RbirdUtils.addClass(this.widgetContent, "cta__modal--visible");
+        this.registerListeners();
+        if (this.hideWidgetButton) {
+            this.hideWidgetButton.style.display = "none";
+        }
+
+        if (this.isMobileDevice()) {
+            this.hideWidgetButton.style.display = 'none';
+            this.websiteWidget.style.display = 'none';
+        }
+
+        if (RbirdSessionManager.getInstance().widgetSettings.launcher === 5) {
+            this.websiteWidget.innerHTML = launcher5Open(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        } else {
+            this.websiteWidget.innerHTML = launcherOpen(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        }
+
+        this.websiteWidget.onclick = () => this.closeWebsiteWidget();
+
+        const http = new XMLHttpRequest();
+        http.open("POST", `${API}/track/${RbirdSessionManager.getInstance().widgetSettings.subdomain}/trackView?type=WIDGET`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("timezone", Intl.DateTimeFormat().resolvedOptions().timeZone);
+        http.onerror = (error) => {
+            //handle error
+        };
+        http.onreadystatechange = function (e) {
+            if (http.readyState === 4) {
+                if (http.status === 200 || http.status === 201) {
+                    try {
+                        //handle success
+                    } catch (exp) {
+                        //handle error
+                    }
+                } else {
+                    //handle error
+                }
+            }
+        };
+        http.send(JSON.stringify({}));
+    }
+
+    handleHideWidgetButton() {
+        if (this.hideWidgetButton) {
+            this.hideWidgetButton.style.display = 'none';
+            this.websiteWidget.style.display = 'none';
+        }
+    }
+
+    countNotifications() {
+        if (RbirdSessionManager.getInstance().identify?.people || RbirdSessionManager.getInstance().anonymousIdentifier) {
+            const http = new XMLHttpRequest();
+            http.open("GET", `${API}/ewidget/unread`);
+            http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+            http.setRequestHeader("apiKey", RbirdSessionManager.getInstance().apiKey);
+            http.setRequestHeader("peopleId", RbirdSessionManager.getInstance().identify.people);
+            http.setRequestHeader("ai", RbirdSessionManager.getInstance().anonymousIdentifier);
+            const lastView = window.localStorage.getItem("lastPageView");
+            http.onerror = function () {
+                //handle error
+            };
+            const that = this;
+            http.onreadystatechange = function (e) {
+                if (http.readyState === XMLHttpRequest.DONE) {
+                    if (http.status === 200 || http.status === 201) {
+                        try {
+                            let response = JSON.parse(http.responseText);
+                            //const lastView = getValue("lastPageView");
+                            if (response.messageCount > 0) {
+                                that.addBadgeCount(response.messageCount);
+                            } else if (response.lastReleaseNote && lastView < response.lastReleaseNote) {
+                                that.addBadgeCount("1");
+                            } else {
+                                that.addBadgeCount(0);
+                            }
+                        } catch (e) {
+                            console.error(e);
+                        }
+                    }
+                    //reject();
+                }
+            };
+            http.send();
+        }
+    }
+
+    addBadgeCount(count) {
+        if (count === 0) {
+            if (this.countBadge) {
+                this.countBadge.innerText = "0";
+                this.countBadge.style.display = "none";
+                if (!this.isOpen() && this.hideWidgetButton) {
+                    this.hideWidgetButton.style.display = "block";
+                }
+            }
+        } else {
+            this.countBadge.innerText = count;
+            this.countBadge.style.display = "block";
+            if (this.hideWidgetButton) {
+                this.hideWidgetButton.style.display = "none";
+            }
+
+        }
+    }
+
+    closeWebsiteWidget() {
+        if (this.iframe) {
+            this.iframe.contentWindow?.postMessage({
+                type: 'close',
+            }, '*');
+        }
+        if (this.hideWidgetButton && this.countBadge.style.display === "none") {
+            this.hideWidgetButton.style.display = "block";
+        }
+        RbirdUtils.removeClass(this.widgetContent, "cta__modal--visible");
+
+        this.initButton();
+        this.websiteWidget.style.display = 'block';
+
+        this.websiteWidget.onclick = () => this.openWebsiteWidget();
+        this.unregisterListeners();
+    }
+
+    initButton() {
+        if (RbirdSessionManager.getInstance().widgetSettings.launcher === 0) {
+            this.websiteWidget.innerHTML = launcher0(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        } else if (RbirdSessionManager.getInstance().widgetSettings.launcher === 1) {
+            this.websiteWidget.innerHTML = launcher1(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        } else if (RbirdSessionManager.getInstance().widgetSettings.launcher === 2) {
+            this.websiteWidget.innerHTML = launcher2(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        } else if (RbirdSessionManager.getInstance().widgetSettings.launcher === 3) {
+            this.websiteWidget.innerHTML = launcher3(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        } else if (RbirdSessionManager.getInstance().widgetSettings.launcher === 4) {
+            this.websiteWidget.innerHTML = launcher4(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        }  else if (RbirdSessionManager.getInstance().widgetSettings.launcher === 5) {
+            this.websiteWidget.innerHTML = launcher5(RbirdSessionManager.getInstance().widgetSettings.launcherColor);
+        }
+    }
+
+    handleEvent(e, that) {
+        if (e.data === 'close') {
+            that.closeWebsiteWidget();
+        }
+        if (e.data === 'increaseSize') {
+            RbirdUtils.removeClass(that.widgetContent, "cta__modal--standard");
+            RbirdUtils.addClass(that.widgetContent, "cta__modal--big");
+        }
+        if (e.data === 'decreaseSize') {
+            RbirdUtils.removeClass(that.widgetContent, "cta__modal--big");
+            RbirdUtils.addClass(that.widgetContent, "cta__modal--standard");
+        }
+
+        if (e.data?.key === 'showImage') {
+            ReleasebirdImageViewer.showImage(e.data?.url);
+        }
+
+        if (e.data === 'newMessageArrived') {
+            this.countNotifications();
+            if (!RbirdUtils.hasClass(this.widgetContent, 'cta__modal--visible')) {
+                if (this.iframe) {
+                    this.iframe.contentWindow?.postMessage({
+                        type: 'showMessageTab',
+                    }, '*');
+                }
+            }
+        }
+
+        if (e.data === 'start_screenshot') {
+            RbirdScreenshotManager.getInstance().activateMarker(true);
+        }
+
+        if (e.data === 'start_recording') {
+            RbirdVideoRecorder.getInstance().startRecording(false);
+        }
+    }
+
+    styleWidget() {
+        this.websiteWidget.className=RbirdSessionManager.getInstance().widgetSettings.launcher === 5 ? 'launcherButton5' : 'launcherButton' ;
+        this.initButton();
+        this.widgetContent = document.createElement("div");
+        this.widgetContent.className = "cta__modal";
+        this.updateIframe(`${CONTENT_URL}/widget?apiKey=${RbirdSessionManager.getInstance().apiKey}&tab=HOME&ai=${RbirdSessionManager.getInstance().anonymousIdentifier}`);
+        document.body.appendChild(this.widgetContent);
+        window.onmessage = (e) => this.handleEvent(e, this);
+
+        this.countNotifications();
+    }
+
+    updateIframe(iframeSrc) {
+        this.widgetContent.innerHTML = `<iframe src=${iframeSrc} class="rbird-content-iframe" scrolling="yes" title="Releasebird" allow="autoplay; encrypted-media; fullscreen;" frameborder="0"></iframe>`;
+        this.iframe = this.widgetContent.firstChild;
+        this.iframe.scrolling="no";
+    }
+
+    unregisterListeners() {
+        if (this.escListener) {
+            document.removeEventListener("keydown", this.escListener);
+        }
+    }
+
+    registerListeners() {
+        const that = this;
+
+        // Esc listener
+        this.escListener = function (evt) {
+            evt = evt || window.event;
+            let isEscape = false;
+            if ("key" in evt) {
+                isEscape = evt.key === "Escape";
+            }
+            if (isEscape) {
+                that.closeWebsiteWidget();
+            }
+        };
+        document.addEventListener("keydown", this.escListener);
+    }
+
+
+}

package/src/ReleasebirdImageViewer.js

@@ -0,0 +1,24 @@
+export default class ReleasebirdImageViewer {
+
+    static showImage(imageUrl) {
+        let elem = document.createElement("div");
+        elem.id="myModal";
+        elem.className="modalImageViewer";
+
+        let spanElem = document.createElement('span');
+        spanElem.className="rbird_close";
+        spanElem.onclick= () => document.body.removeChild(elem);
+        spanElem.textContent = 'x';
+
+        let img = document.createElement("img");
+        img.className = "modal-content-imageViewer";
+        img.src=imageUrl;
+
+        elem.appendChild(spanElem);
+        elem.appendChild(img);
+
+        document.body.appendChild(elem);
+
+    }
+
+}