@everymatrix/casino-hamburger-menu 1.0.2 → 1.0.4

package/package.json

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

package/src/CasinoHamburgerMenu.svelte

@@ -11,6 +11,8 @@
   export let lang:string = 'en';
   export let activecategory:string = '';
   export let languageslist:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
 
   let modalElement:any;
   // let isLoggedIn:Boolean = false;
@@ -29,6 +31,7 @@
   let languageChanged:boolean = false;
 
   let selectedLanguage = '';
+  let customStylingContainer:HTMLElement;
 
   // setupI18n({ withLocale: 'en', translations: {}});
 
@@ -63,6 +66,14 @@
     activeMenuItemId = id;
     // check first if primary menu item has children
     activeMenuItemChildren = children ? children : [];
+
+    //Analytics event
+    if(typeof gtag == 'function'){
+      gtag('event', 'ChangeMenu', {
+        'context': 'HamburgerMenu',
+        'menuItem' : `${activeMenuItemId}`
+      });
+    }
   }
 
   const setActiveIndex = ():void => {
@@ -133,56 +144,79 @@
     }
   });
 
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    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
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+
   $: lang && languageslist && initialLoad();
   $: activecategory && !isLoading && setActiveIndex();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
 </script>
 
-{#if show === true}
-  <div
-    transition:fade="{{ transitionDuration: duration }}"
-    bind:this={modalElement}
-    class="HamburgerModalWindow"
-    part="HamburgerModalWindow">
-    <span class="{modalIsOpen ? 'ModalCloseBtn' : ''}" part="{modalIsOpen ? 'ModalCloseBtn' : ''}" on:click={close} role="button">
-      <slot name="close">
-        <svg class="w-6 h-6" part="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-      </slot>
-    </span>
-    <div class="HamburgerModalContainer {modalIsOpen ? 'ActiveHamburgerMenu' : ''}" part="HamburgerModalContainer {modalIsOpen ? 'ActiveHamburgerMenu' : ''}">
-      <ul class="HamburgerPrimaryMenu {menuIsFixed ? 'HamburgerPrimaryMenuFixed' : ''}" part="HamburgerPrimaryMenu {menuIsFixed ? 'HamburgerPrimaryMenuFixed' : ''}">
-        {#each HamburgerMenuItems as mainItem}
-          <li class="{activeMenuItemId === mainItem.id ? 'ActiveItem' : ''}" part="{activeMenuItemId === mainItem.id ? 'ActiveItem' : ''}" on:click={()=>changeMenu(mainItem.id, mainItem.children)}>
-            <div class="HamburgerItemContainer" part="HamburgerItemContainer">
-              <img src={mainItem.img} alt="menu icon" />
-              {mainItem.label}
-            </div>
-          </li>
-        {/each}
-      </ul>
-      <ul class="HamburgerSecondaryMenu {menuIsFixed ? 'HamburgerSecondaryMenuFixed' : ''}" part="HamburgerSecondaryMenu {menuIsFixed ? 'HamburgerSecondaryMenuFixed' : ''}">
-        {#each activeMenuItemChildren as secondaryItem}
-          <li>
-            <a href={secondaryItem.path}>
-              <img src={secondaryItem.img} alt="menu icon" />
-              {secondaryItem.label}
-            </a>
-          </li>
-        {/each}
-      </ul>
-      <div class="LanguageSelectorTitle" part="LanguageSelectorTitle">
-        <span>{$_('languageSelector.language')}</span>
-        <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>sendLangChange()}>
-          {#each languagesArray as lang}
-            <option value={lang} selected>{lang}</option>
+<div bind:this={customStylingContainer}>
+  {#if show === true}
+    <div
+      transition:fade="{{ transitionDuration: duration }}"
+      bind:this={modalElement}
+      class="HamburgerModalWindow"
+      part="HamburgerModalWindow">
+      <span class="{modalIsOpen ? 'ModalCloseBtn' : ''}" part="{modalIsOpen ? 'ModalCloseBtn' : ''}" on:click={close} role="button">
+        <slot name="close">
+          <svg class="w-6 h-6" part="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+        </slot>
+      </span>
+      <div class="HamburgerModalContainer {modalIsOpen ? 'ActiveHamburgerMenu' : ''}" part="HamburgerModalContainer {modalIsOpen ? 'ActiveHamburgerMenu' : ''}">
+        <ul class="HamburgerPrimaryMenu {menuIsFixed ? 'HamburgerPrimaryMenuFixed' : ''}" part="HamburgerPrimaryMenu {menuIsFixed ? 'HamburgerPrimaryMenuFixed' : ''}">
+          {#each HamburgerMenuItems as mainItem}
+            <li class="{activeMenuItemId === mainItem.id ? 'ActiveItem' : ''}" part="{activeMenuItemId === mainItem.id ? 'ActiveItem' : ''}" on:click={()=>changeMenu(mainItem.id, mainItem.children)}>
+              <div class="HamburgerItemContainer" part="HamburgerItemContainer">
+                <img src={mainItem.img} alt="menu icon" />
+                {mainItem.label}
+              </div>
+            </li>
           {/each}
-        </select>
-
+        </ul>
+        <ul class="HamburgerSecondaryMenu {menuIsFixed ? 'HamburgerSecondaryMenuFixed' : ''}" part="HamburgerSecondaryMenu {menuIsFixed ? 'HamburgerSecondaryMenuFixed' : ''}">
+          {#each activeMenuItemChildren as secondaryItem}
+            <li>
+              <a href={secondaryItem.path}>
+                <img src={secondaryItem.img} alt="menu icon" />
+                {secondaryItem.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+        <div class="LanguageSelectorTitle" part="LanguageSelectorTitle">
+          <span>{$_('languageSelector.language')}</span>
+          <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>sendLangChange()}>
+            {#each languagesArray as lang}
+              <option value={lang} selected>{lang}</option>
+            {/each}
+          </select>
+
+        </div>
       </div>
-    </div>
 
 
-  </div>
-{/if}
+    </div>
+  {/if}
+</div>
 
 <style lang="scss">