@everymatrix/casino-footer 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-footer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/casino-footer.js",
   "svelte": "src/index.ts",
   "scripts": {

package/src/CasinoFooter.svelte

@@ -48,7 +48,6 @@
   let socialLinksRepeater:Array<Object> = [];
   let copyright:string = '';
   let licenseDesc:string = '';
-  let footerWidget:HTMLElement;
   let hasErrors:boolean = false;
   let isLoading:boolean = false;
   let receivedFooterData:any;
@@ -74,6 +73,9 @@
 
   let timeString:string = '';
 
+  let customStylingContainer:HTMLElement;
+  let displayNoneCustomStyling:Boolean = false;
+
   Object.keys(CasinoFooterTranslations).forEach((item:any) => {
     addNewMessages(item, CasinoFooterTranslations[item]);
   });
@@ -213,12 +215,6 @@
     element.append(htmlContent);
   }
 
-  const setClientStyling = () => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    footerWidget.appendChild(sheet);
-  }
-
   const changeLanguage = () => {
     window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
   };
@@ -264,6 +260,32 @@
     }
   }
 
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    if (customStylingContainer) {
+      customStylingContainer.appendChild(sheet);
+    }
+  }
+
+  const setClientStylingURL = ():void => {
+    displayNoneCustomStyling = true;
+
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+          setTimeout(() => { displayNoneCustomStyling = false; }, 500);
+        }
+      });
+  }
+
   onMount(() => {
     languagesArray = languageslist.replace(/ /g,'').split(',');
     languagesArray = languagesArray.map((language:string) => language.toUpperCase());
@@ -272,7 +294,8 @@
   $: lang && setLocale(lang);
   $: session && userid && endpoint && setSession();
   $: isLoggedIn && lang && setSessionTimer();
-  $: clientstyling && setClientStyling();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: endpoint && lang && env && userroles && getCmsData();
   $: clockenabled !== 'false' && clocksecondsenabled && clockcustomformat && clockDisplay();
   $: clockenabled !== 'false' && clocksecondsenabled && (refreshRate = clocksecondsenabled == "true" ? 1000 : 60000) && refreshClock();
@@ -286,13 +309,14 @@
   {/if}
 </svelte:head>
 
+<div bind:this={customStylingContainer}>
 {#if hasErrors}
   <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error</p>
 {:else}
   {#if isLoading}
     <p class="SearchLoading" part="SearchLoading">Loading ...</p>
   {:else}
-    <div class="FooterGrid {sponsorsRepeater ? '' : 'NoSponsorSpacing'}" part="FooterGrid {sponsorsRepeater ? '' : 'NoSponsorSpacing'}" bind:this={footerWidget}>
+    <div class="FooterGrid {sponsorsRepeater ? '' : 'NoSponsorSpacing'}" part="FooterGrid {sponsorsRepeater ? '' : 'NoSponsorSpacing'}">
       <!-- start optionals section -->
       {#if (clockenabled==="true" || languageselectorenabled==="true" || panicbuttonenabled==="true")}
         <div class="GridRow ProvisionalRow" part="GridRow">
@@ -476,6 +500,7 @@
     </div>
   {/if}
 {/if}
+</div>
 
 <style lang="scss">