crosstalk-comments-livechat-sdk 0.0.6-beta.4 → 0.0.6-beta.6

package/dist/CrossTalkLiveChatEmbed.d.ts

@@ -1,7 +1,18 @@
-import type { ChatOptions } from './types';
+import type { ChatOptions, ChatOption } from './types';
+export declare class CrossTalkTabbedChatEmbed {
+    private config;
+    private newTabbedGChat;
+    constructor(config: ChatOptions);
+}
 export declare class CrossTalkChatEmbed {
+    private container;
     private config;
+    private iframe;
     render(): void;
-    constructor(config: ChatOptions);
+    constructor(container: HTMLElement, config: ChatOption);
+    update(config: Partial<ChatOption>): void;
+    destroy(): void;
+    getIframe(): HTMLIFrameElement | null;
 }
-export declare function initChats(config: ChatOptions): CrossTalkChatEmbed;
+export declare function initTabbedChats(config: ChatOptions): CrossTalkTabbedChatEmbed;
+export declare function initChat(container: HTMLElement, config: ChatOption): CrossTalkChatEmbed;

package/dist/CrossTalkLiveChatEmbed.js

@@ -7,18 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-function buildIframeUrl(config, wp, theme) {
-    const baseUrl = 'https://widgets.crosstalk.cc/chat';
-    const params = new URLSearchParams();
-    params.append('wp', wp);
-    if (config.url)
-        params.append('url', config.url);
-    else if (config.pageID)
-        params.append('pageID', config.pageID);
-    if (theme)
-        params.append('theme', theme);
-    return `${baseUrl}?${params.toString()}`;
-}
 function createHash(input) {
     if (input.length === 0)
         return "0";
@@ -30,6 +18,18 @@ function createHash(input) {
     }
     return hash.toString(16);
 }
+function buildIframeUrl(url, pageID, wp, theme) {
+    const baseUrl = 'https://widgets.crosstalk.cc/chat';
+    const params = new URLSearchParams();
+    params.append('wp', wp);
+    if (url)
+        params.append('url', url);
+    else if (pageID)
+        params.append('pageID', pageID);
+    if (theme)
+        params.append('theme', theme);
+    return `${baseUrl}?${params.toString()}`;
+}
 function periodicChecks(obj, btnID, isEntity, wp) {
     const btn = document.getElementById(btnID);
     if (isEntity)
@@ -51,73 +51,74 @@ function periodicChecks(obj, btnID, isEntity, wp) {
             }));
         }, 7000);
 }
-function newGChat(obj, parentDiv, wp, theme) {
-    const chatHolder = document.createElement("div");
-    chatHolder.setAttribute("style", "margin-right: 5px");
-    let pageHash = "";
-    let isEntity = false;
-    if (obj.pageID != null && obj.pageID != undefined && obj.pageID != "") {
-        isEntity = true;
-        pageHash = createHash(obj.pageID);
-    }
-    else if (obj.url != null && obj.url != undefined && obj.url != "")
-        pageHash = createHash(obj.url);
-    const iframe = document.createElement("iframe");
-    const mainChatID = `id_${wp}_${pageHash}`;
-    iframe.id = mainChatID;
-    iframe.src = buildIframeUrl(obj, wp, theme);
-    iframe.setAttribute("class", "crosstalk_frame");
-    iframe.sandbox = "allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups";
-    iframe.setAttribute("scrolling", "auto");
-    chatHolder.appendChild(iframe);
-    const chatShowHideButton = document.createElement("span");
-    if (theme == 'light')
-        chatShowHideButton.setAttribute("class", "crosstalk_btn");
-    else
-        chatShowHideButton.setAttribute("class", "crosstalk_btn dark");
-    const onlineSpan = document.createElement("span");
-    onlineSpan.setAttribute("class", "crosstalk_online");
-    onlineSpan.innerText = "●";
-    chatShowHideButton.appendChild(onlineSpan);
-    const buttonName = document.createElement("span");
-    buttonName.innerHTML = `<b class='crosstalk_btnTxt'>${obj.title}</b>`;
-    buttonName.id = `online_${wp}_${pageHash}`;
-    chatShowHideButton.onclick = function (ev) {
-        const mainIframe = document.getElementById(mainChatID);
-        if (mainIframe.style.display === "block") {
-            mainIframe.style.display = "none";
-            chatShowHideButton.style.width = "200px";
-            chatShowHideButton.style.borderTopLeftRadius = "5px";
-            chatShowHideButton.style.borderTopRightRadius = "5px";
+export class CrossTalkTabbedChatEmbed {
+    newTabbedGChat(obj, parentDiv, wp, theme) {
+        const chatHolder = document.createElement("div");
+        chatHolder.setAttribute("style", "margin-right: 5px");
+        let pageHash = "";
+        let isEntity = false;
+        if (obj.pageID != null && obj.pageID != undefined && obj.pageID != "") {
+            isEntity = true;
+            pageHash = createHash(obj.pageID);
         }
-        else {
-            mainIframe.style.display = "block";
-            chatShowHideButton.style.width = "400px";
-            chatShowHideButton.style.borderTopLeftRadius = "0px";
-            chatShowHideButton.style.borderTopRightRadius = "0px";
+        else if (obj.url != null && obj.url != undefined && obj.url != "")
+            pageHash = createHash(obj.url);
+        const iframe = document.createElement("iframe");
+        const mainChatID = `id_${wp}_${pageHash}`;
+        iframe.id = mainChatID;
+        iframe.src = buildIframeUrl(obj.url, obj.pageID, wp, theme);
+        iframe.setAttribute("class", "crosstalk_frame");
+        iframe.sandbox = "allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups";
+        iframe.setAttribute("scrolling", "auto");
+        chatHolder.appendChild(iframe);
+        const chatShowHideButton = document.createElement("span");
+        if (theme == 'light')
+            chatShowHideButton.setAttribute("class", "crosstalk_btn");
+        else
+            chatShowHideButton.setAttribute("class", "crosstalk_btn dark");
+        const onlineSpan = document.createElement("span");
+        onlineSpan.setAttribute("class", "crosstalk_online");
+        onlineSpan.innerText = "●";
+        chatShowHideButton.appendChild(onlineSpan);
+        const buttonName = document.createElement("span");
+        buttonName.innerHTML = `<b class='crosstalk_btnTxt'>${obj.title}</b>`;
+        buttonName.id = `online_${wp}_${pageHash}`;
+        chatShowHideButton.onclick = function (ev) {
+            const mainIframe = document.getElementById(mainChatID);
+            if (mainIframe.style.display === "block") {
+                mainIframe.style.display = "none";
+                chatShowHideButton.style.width = "200px";
+                chatShowHideButton.style.borderTopLeftRadius = "5px";
+                chatShowHideButton.style.borderTopRightRadius = "5px";
+            }
+            else {
+                mainIframe.style.display = "block";
+                chatShowHideButton.style.width = "400px";
+                chatShowHideButton.style.borderTopLeftRadius = "0px";
+                chatShowHideButton.style.borderTopRightRadius = "0px";
+            }
+        };
+        chatShowHideButton.appendChild(buttonName);
+        chatShowHideButton.id = `button_${mainChatID}`;
+        chatHolder.appendChild(chatShowHideButton);
+        parentDiv.appendChild(chatHolder);
+        if (obj.collapsed == true) {
+            const mainIframe = document.getElementById(mainChatID);
+            mainIframe.style.visibility = "hidden";
+            mainIframe.style.pointerEvents = "none";
+            setTimeout(() => {
+                mainIframe.style.display = "none";
+                mainIframe.style.visibility = "visible";
+                mainIframe.style.pointerEvents = "auto";
+                chatShowHideButton.style.width = "200px";
+                chatShowHideButton.style.borderTopLeftRadius = "5px";
+                chatShowHideButton.style.borderTopRightRadius = "5px";
+            }, 3000);
         }
-    };
-    chatShowHideButton.appendChild(buttonName);
-    chatShowHideButton.id = `button_${mainChatID}`;
-    chatHolder.appendChild(chatShowHideButton);
-    parentDiv.appendChild(chatHolder);
-    if (obj.collapsed == true) {
-        const mainIframe = document.getElementById(mainChatID);
-        mainIframe.style.visibility = "hidden";
-        mainIframe.style.pointerEvents = "none";
-        setTimeout(() => {
-            mainIframe.style.display = "none";
-            mainIframe.style.visibility = "visible";
-            mainIframe.style.pointerEvents = "auto";
-            chatShowHideButton.style.width = "200px";
-            chatShowHideButton.style.borderTopLeftRadius = "5px";
-            chatShowHideButton.style.borderTopRightRadius = "5px";
-        }, 3000);
+        periodicChecks(obj, `online_${wp}_${pageHash}`, isEntity, wp);
     }
-    periodicChecks(obj, `online_${wp}_${pageHash}`, isEntity, wp);
-}
-export class CrossTalkChatEmbed {
-    render() {
+    constructor(config) {
+        this.config = config;
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = 'https://widgets.crosstalk.cc/tab_livechat.css';
@@ -128,17 +129,47 @@ export class CrossTalkChatEmbed {
             parentDiv.id = "crosstalkChatHolder";
             document.body.appendChild(parentDiv);
         }
+        parentDiv.setAttribute("class", "crosstalk_parent");
         if (!this.config.theme)
             this.config.theme = "light";
         this.config.pageIDs.forEach(pageID => {
-            newGChat(pageID, parentDiv, this.config.wp, this.config.theme);
+            this.newTabbedGChat(pageID, parentDiv, this.config.wp, this.config.theme);
         });
     }
-    constructor(config) {
+}
+export class CrossTalkChatEmbed {
+    render() {
+        this.container.innerHTML = '';
+        this.iframe = document.createElement('iframe');
+        this.iframe.src = buildIframeUrl(this.config.url, this.config.pageID, this.config.wp, this.config.theme);
+        this.iframe.setAttribute("style", "width: 100%; scrollbar-width:thin !important; min-width: 300px; min-height: 480px;");
+        this.iframe.setAttribute("frameborder", "0");
+        this.iframe.sandbox = "allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups";
+        this.container.appendChild(this.iframe);
+    }
+    constructor(container, config) {
+        this.container = container;
         this.config = config;
+        this.iframe = null;
+        this.render();
+    }
+    update(config) {
+        this.config = Object.assign(Object.assign({}, this.config), config);
         this.render();
     }
+    destroy() {
+        if (this.iframe && this.iframe.parentNode) {
+            this.iframe.parentNode.removeChild(this.iframe);
+            this.iframe = null;
+        }
+    }
+    getIframe() {
+        return this.iframe;
+    }
+}
+export function initTabbedChats(config) {
+    return new CrossTalkTabbedChatEmbed(config);
 }
-export function initChats(config) {
-    return new CrossTalkChatEmbed(config);
+export function initChat(container, config) {
+    return new CrossTalkChatEmbed(container, config);
 }

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export { CrossTalkCommentsEmbed, initComments } from './CrossTalkCommentsEmbed';
 export { CrossTalkVideoPlayerEmbed, initPlayer } from './CrossTalkVideoPlayerEmbed';
 export { CrossTalkPollEmbed, initPoll } from './CrossTalkPollEmbed';
 export { CrossTalkAISummaryEmbed, initAISummary } from './CrossTalkAISummaryEmbed';
-export { CrossTalkChatEmbed, initChats } from './CrossTalkLiveChatEmbed';
+export { CrossTalkTabbedChatEmbed, initTabbedChats, CrossTalkChatEmbed, initChat } from './CrossTalkLiveChatEmbed';
 export type { CommentsEmbedOptions, VideoPlayerEmbedOptions, PollEmbedOptions, AISummaryOptions, ChatOptions, ChatPageOptions } from './types';

package/dist/index.js

@@ -3,4 +3,4 @@ export { CrossTalkCommentsEmbed, initComments } from './CrossTalkCommentsEmbed';
 export { CrossTalkVideoPlayerEmbed, initPlayer } from './CrossTalkVideoPlayerEmbed';
 export { CrossTalkPollEmbed, initPoll } from './CrossTalkPollEmbed';
 export { CrossTalkAISummaryEmbed, initAISummary } from './CrossTalkAISummaryEmbed';
-export { CrossTalkChatEmbed, initChats } from './CrossTalkLiveChatEmbed';
+export { CrossTalkTabbedChatEmbed, initTabbedChats, CrossTalkChatEmbed, initChat } from './CrossTalkLiveChatEmbed';

package/dist/types.d.ts

@@ -35,4 +35,8 @@ export interface ChatOptions {
     theme?: string;
     pageIDs?: ChatPageOptions[];
 }
+export interface ChatOption extends ChatPageOptions {
+    wp?: string;
+    theme?: string;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crosstalk-comments-livechat-sdk",
-  "version": "0.0.6-beta.4",
+  "version": "0.0.6-beta.6",
   "description": "Add Comments, Live Chat, and Video Player Embeds to your website with CrossTalk Comments and Live Chat!",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",