@everymatrix/general-navigation-bar 1.44.0 → 1.45.0

package/src/GeneralNavigationBar.svelte

@@ -1,725 +0,0 @@
-<svelte:options tag={null} />
-<script lang="ts">
-
-  import { getDevice } from 'rvhelper';
-  import { onMount } from 'svelte';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  export let cmsendpoint:string = '';
-  export let lang:string = '';
-  export let env:string = '';
-  export let secondarymenutitle:string = '';
-  export let userroles:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-  export let activecategory:string = '';
-  export let flowermenustyle:string = 'false';
-
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-  let isLoading:boolean = true;
-  let showNavigation:boolean = false;
-
-  let navigationWindowOpened:boolean = false;
-  let activeMenuItemId:string = '';
-  let navigationBarSimple:boolean = false;
-  let primaryMenu:Array<Object> = [];
-  let primaryMenuSpliced:Array<Object> = [];
-  let secondaryMenu:Array<Object> = [];
-  let customStylingContainer:HTMLElement;
-  let imageIconUrl:string = '';
-  let eventInterpreted:object = {};
-  let mobileLandscapeView:boolean;
-  let isFlowerMenu:boolean = false;
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const messageHandler = (e:any) => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'PlayerAccountMenuActive':
-          navigationWindowOpened = false;
-          break;
-
-        case 'OpenLoginRegisterModal':
-          navigationWindowOpened = false;
-          break;
-
-        case 'GoToHomepage':
-          navigationWindowOpened = false;
-          break;
-          
-        default:
-          break;
-      }
-    }
-  }
-
-  const setFlowerMenu = () => {
-    isFlowerMenu = flowermenustyle.toLowerCase() === 'true';
-  }
-
-  const navigationWindowToggle = () => {
-    navigationWindowOpened = !navigationWindowOpened;
-    window.postMessage({ type: 'MobileBottomNav', navigationWindowOpened }, window.location.href);
-  }
-
-  const createPrimaryMenu = (data):void => {
-    primaryMenuSpliced = [];
-    primaryMenuSpliced = navigationBarSimple ? data.splice(0,5) : data.splice(0,4);
-    
-    if (activecategory) {
-      setActiveIndex();
-    }
-  }
-
-  const getMobileBottomMenu = ():void => {
-    orientationChangeHandler();
-
-    isLoading = true;
-    let device = getDevice(userAgent);
-    let url:URL = new URL(`${cmsendpoint}/${lang}/bottom-mobile-menu?env=${env}`);
-      
-    url.searchParams.append('userRoles', userroles);
-
-    if (device){
-       if(device === 'iPad' || device === 'iPhone') {
-        url.searchParams.append('device', 'mtWeb');  // replace with ios when we will have a native ios up for this
-      } else {
-        url.searchParams.append('device', 'mtWeb')
-      }
-    }
-
-    fetch(url.href)
-      .then((res: any) => res.json())
-      .then((data: any):void => {
-
-        // Reset arrays
-        primaryMenu = [];
-        secondaryMenu = [];
-
-        // Show navigation only if there are items coming from CMS
-        showNavigation = data.length > 0;
-
-        // Get items
-        data.forEach((item):void => {
-          //check if the operator wants an event interpreted
-          eventInterpreted[item.label] =  item.eventTrigger ? item.path : null
-
-          if (item.path == '/menu-item') {
-            imageIconUrl = item?.img;
-            secondaryMenu = item.children;
-          } else {
-            primaryMenu.push(item);
-          }
-        });
-
-        // Hide secondary menu if there are no items configured in CMS
-        navigationBarSimple = secondaryMenu.length == 0;
-        
-        //Deleting the elements from secondaryMenu when flowerMenu is true
-        if(secondaryMenu.length >= 5 && isFlowerMenu) {
-          secondaryMenu = secondaryMenu.splice(0, 5);
-        }
-        createPrimaryMenu(primaryMenu);
-
-        isLoading = false;
-      })
-      .catch((err: any) => {
-        isLoading = false;
-        console.error(err);
-      });
-  }
-
-  const setActiveIndex = ():void => {
-    
-    const listOfMenus = primaryMenuSpliced.concat(secondaryMenu);
-
-    const activeMenu:any = listOfMenus.find((menu:any) => menu.path.includes(activecategory))
-    if(activeMenu){
-      activeMenuItemId = activeMenu.id;
-    }
-  }
-
-  const triggerNavigation = (url, target?, externalLink?, label?) => {
-    if(eventInterpreted[label]){
-      window.postMessage({ type: `MobileBottomNavigationEvent`, event: eventInterpreted[label]}, window.location.href);
-    } else {
-      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: externalLink || false }, window.location.href);
-    }
-    
-    navigationWindowOpened = false;
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'ChangeMenu', {
-        'context': 'MobileBottomNavigation',
-        'menuItem' : `${url}`
-      });
-    } 
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    if(clientstyling && customStylingContainer) {
-      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);
-      });
-  }
-
-  const setActiveLanguage = () => {
-    setLocale(lang);
-  }
-  
-  const orientationChangeHandler = (): void => {
-    mobileLandscapeView = isMobile && window.innerHeight / window.innerWidth < 1;
-  }
-
-  const handleFocusIn = (): void => {
-  if (navigationWindowOpened) {
-    navigationWindowOpened = false;
-  }
-}
-
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    document.addEventListener('focusin', handleFocusIn);
-
-    if (isMobile) {
-      window.screen.orientation.addEventListener('change', orientationChangeHandler);
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      document.removeEventListener('focusin', handleFocusIn);
-      if (isMobile) {
-        window.screen.orientation.removeEventListener('change', orientationChangeHandler);
-      }
-    }
-  });
-  
-  $: flowermenustyle && setFlowerMenu();
-  $: activecategory && !isLoading && setActiveIndex();
-  $: lang && setActiveLanguage();
-  $: cmsendpoint && lang && env && userroles && getMobileBottomMenu();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: translationurl && setTranslationUrl();
-
-</script>
-
-  <div class="NavigationWrapper {mobileLandscapeView ? 'NavigationWrapperLandScape' : ''}" bind:this={customStylingContainer}>
-   {#if !isLoading && isMobile && showNavigation}
-    <div class="NavigationPanel">
-      {#if !navigationBarSimple}
-        <div class="NavigationWindow {navigationWindowOpened ? 'NavigationWindowOpened' : ''}">
-          <span class="ModalCloseBtn" part="ModalCloseBtn" on:click={navigationWindowToggle} 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 part="ModalCloseBtnPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-            </slot>
-          </span>
-          <h3 class="NavigationWindowTitle">{secondarymenutitle || $_('secondaryMenuTitle')}</h3>
-          <div class="NavigationSecondaryWrapper">
-            {#each secondaryMenu as item}
-              <div on:click={() => {!item.attrs?.target ? triggerNavigation(item.path, null, item?.externalLink, item.label) : triggerNavigation(item.path, item.attrs?.target, item?.externalLink, item.label)}} class="NavigationSecondaryItemAnchor {activeMenuItemId === item.id ? 'ActiveItem' : ''}">
-                {#if item.img}
-                  <div class="NavigationSecondaryItemImgWrapper" part="NavigationSecondaryItemImgWrapper">
-                    <img class="NavigationSecondaryItemImg" part="NavigationSecondaryItemImg" src="{item.img}" alt="{item.label}">
-                  </div>
-                {/if}
-                <p class="NavigationSecondaryItemLabel" part="NavigationSecondaryItemLabel">{item.label}</p>
-              </div>
-            {/each}
-          </div>
-        </div>
-      {/if}
-      <div class="NavigationBar {navigationWindowOpened ? 'NavigationBarOpened' : ''} {navigationBarSimple ? 'NavigationBarSimple' : ''}" part="NavigationBar {navigationWindowOpened ? 'NavigationBarOpened' : ''} {navigationBarSimple ? 'NavigationBarSimple' : ''}">
-        {#each primaryMenuSpliced as item, i}
-          <div on:click={() => {!item.attrs?.target ? triggerNavigation(item.path, null, item?.externalLink, item.label) : triggerNavigation(item.path, item.attrs?.target, item?.externalLink, item.label)}} class="NavigationPrimaryItemAnchor NavItem{i} {activeMenuItemId === item.id ? 'ActiveItem' : ''}">
-            {#if item.img}
-              <div class="NavigationPrimaryItemImgWrapper">
-                <img class="NavigationPrimaryItemImg" src="{item.img}" alt="{item.label}">
-              </div>
-            {/if}
-            <p class="NavigationPrimaryItemLabel">{item.label}</p>
-          </div>
-        {/each}
-        {#if !navigationBarSimple}
-          <button class="NavigationButton {navigationWindowOpened ? 'NavigationButtonActive' : ''}" on:click={navigationWindowToggle}>
-            <span class="NavigationButtonSpan" part="NavigationButtonSpan">
-              {#if !isFlowerMenu}
-                {#if imageIconUrl}
-                  <img src="{imageIconUrl}" class="middleIcon" alt="{imageIconUrl}">
-                {:else}
-                  <svg class="middleIcon" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><g transform="translate(-150 -514)"><g class="a" part="a" transform="translate(150 514)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g><g class="a" part="a" transform="translate(161 514)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g><g class="a" part="a" transform="translate(161 525)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g><g class="a" part="a" transform="translate(150 525)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g></g></svg>
-                {/if}
-              {:else}
-                <div class="labelMiddleIcon {navigationWindowOpened ? 'labelMiddleIconActive' : ''}">
-                  <span class="middleIconLine"></span>
-                  <span class="middleIconLine"></span>
-                  <span class="middleIconLine"></span>
-                </div>
-              {/if}
-            </span>
-          </button>
-          {/if}
-      </div>
-    </div>
-   {/if}
-  </div>
-
-{#if !isFlowerMenu}
-  <style lang="scss">
-    
-  .NavigationWrapper {
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-    width: 100%;
-    height: 100px;
-  }
-
-  .NavigationPanel {
-    position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: calc(100% - 30px);
-    max-width: 450px;
-    height: 70px;
-    z-index: 30;
-  }
-
-  .NavigationWindow {
-    display: flex;
-    flex-direction: column;
-    background: var(--emfe-w-color-white, #FFFFFF);
-    position: absolute;
-    bottom: 30px;
-    left: 0;
-    opacity: 0;
-    transform: translateY(100%);
-    border-radius: 5px 5px 0 0;
-    transition: .25s ease;
-    width: 100%;
-    max-height: 40vh;
-    &.NavigationWindowOpened {
-      opacity: 1;
-      padding-bottom: 60px;
-      transform: translateY(5px);
-    } 
-
-    .ModalCloseBtn {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 24px;
-      height: 24px;
-      border-radius: 100%;
-      color: var(--emfe-w-color-secondary, var(--emfe-w-color-secondary, #FD2839));
-      background: rgba(255, 255, 255, .1);
-      cursor: pointer;
-      transition: all 150ms ease-in-out;
-      z-index: 1;
-
-      svg {
-        width: 24px;
-        height: 24px;
-        margin: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      &:hover {
-        background: rgba(255, 255, 255, .2);
-      }
-    }
-
-    .NavigationWindowTitle {
-      padding: 16px 10px;
-      margin: 0;
-      color: var(--emfe-w-color-black, #000000);
-      font-size: 12px;
-      flex-grow: 0;
-    }
-
-    .NavigationSecondaryWrapper {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 0 10px;
-      flex-grow: 1;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem0 {
-    grid-area: item0;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem1 {
-    grid-area: item1;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem2 {
-    grid-area: item2;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem3 {
-    grid-area: item3;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem4 {
-    grid-area: item4;
-  }
-
-  .NavigationBar {
-    background: var(--emfe-w-color-white, #FFFFFF);
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr 1fr 20% 1fr 1fr;
-    grid-template-areas: "item0 item1 . item2 item3";
-    height: 70px;
-    border-radius: 5px;
-    position: relative;
-    &.NavigationBarSimple {
-      grid-template-columns: repeat(5, 20%);
-      grid-template-areas: "item0 item1 item2 item3 item4";
-    }
-    &.NavigationBarOpened {
-      box-shadow: 0 0 11px rgba(0, 0, 0, 0.09);
-    }
-  }
-
-  .NavigationPrimaryItemAnchor,
-  .NavigationSecondaryItemAnchor{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    text-decoration: none;
-    color: var(--emfe-w-color-black, #000000);
-    font-size: 9px;
-    overflow: hidden;
-    white-space: nowrap;
-    padding-bottom: 12px;
-    .NavigationPrimaryItemImg,
-    .NavigationSecondaryItemImg {
-      width: 20px;
-    }
-    .NavigationPrimaryItemLabel,
-    .NavigationSecondaryItemLabel{
-      margin: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      width: 100%;
-      text-align: center;
-    }
-  }
-
-  .NavigationSecondaryItemAnchor {
-    width: 25%;
-    padding: 10px 0;
-  }
-
-  .ActiveItem {
-      background-color: var(--emfe-w-color-primary-50, var(--emfe-w-color-pink-20, #FBECF4));
-  }
-  .NavigationButton {
-    background: var(--emfe-w-color-white, #FFFFFF);
-    border: none;
-    width: 20%;
-    height: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 0;
-    padding-bottom: 12px;
-    .middleIcon {
-      width: 32px;
-      height: 32px;
-      .a{fill:var(--emfe-w-color-white, #FFFFFF);
-        stroke:var(--emfe-w-color-primary, #D0046C);
-        stroke-linecap:round;stroke-linejoin:round;}
-      .b{stroke:none;}
-      .c{fill:none;}
-    }
-    &:before {
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 8px solid var(--emfe-w-color-gray-50, #F9F8F8);
-      content: "";
-      height: 0;
-      left: 50%;
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      transform: translateX(-50%);
-      width: 0;
-    }
-    &.NavigationButtonActive:before {
-      opacity: 1;
-      transition: .7s ease;
-    }
-  }
-</style>
-{:else}
-  <style lang="scss">
-  
-  .NavigationWrapper {
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-    width: 100%;
-  }
-
-  .NavigationPanel {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    bottom: 0;
-    width: 100%;
-    z-index: 30;
-  }
-
-  .NavigationWindow {
-    display: flex;
-    flex-direction: column;
-    backdrop-filter: blur(2px);
-    background: linear-gradient(0deg, var(--emfe-w-color-black, #000000) 0%, transparent 100%);
-    opacity: 0;
-    transition: .25s ease;
-    width: 100%;
-    max-height: 0vh;
-
-    &.NavigationWindowOpened {
-      opacity: 1;
-      max-height: 200px;
-      .NavigationSecondaryWrapper{
-        .NavigationSecondaryItemAnchor {
-          &:nth-child(1){
-            transform: translate3d(-210%, 50%, 0);
-            transition: transform .1s;
-          }
-          &:nth-child(2){
-            transform: translate3d(-150%, -50%, 0);
-            transition: transform .1s .1s;
-          }
-          &:nth-child(3){
-            transform: translate3d(-50%, -100%, 0);
-            transition: transform .1s .2s;
-          }
-          &:nth-child(4){
-            transform: translate3d(50%, -50%, 0);
-            transition: transform .1s .3s;
-          }
-          &:nth-child(5){
-            transform: translate3d(110%, 50%, 0);
-            transition: transform .1s .4s;
-          }
-        }
-      }
-    } 
-
-    .ModalCloseBtn, .NavigationWindowTitle {
-      display: none;
-    }
-
-    .NavigationSecondaryWrapper {
-      position: relative;
-      width: 100%;
-      height: 170px;
-      list-style: none;
-      .NavigationSecondaryItemAnchor {
-        display: flex;
-        width: 60px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        padding: 0px;
-        flex-direction: column;
-        transform: translate(-50%, 150%);
-        .NavigationSecondaryItemLabel{
-          width: 100%;
-          height: 20px;
-          text-wrap: pretty;
-          line-height: 10px;
-          color: var(--emfe-w-color-white, #FFFFFF);
-        }
-      } 
-    }
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem0 {
-    grid-area: item0;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem1 {
-    grid-area: item1;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem2 {
-    grid-area: item2;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem3 {
-    grid-area: item3;
-  }
-
-  .NavigationPrimaryItemAnchor.NavItem4 {
-    grid-area: item4;
-  }
-
-  .NavigationBar {
-    background: var(--emfe-w-color-white, #FFFFFF);
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr 1fr 20% 1fr 1fr;
-    grid-template-areas: "item0 item1 . item2 item3";
-    border-radius: 5px;
-    position: relative;
-    &.NavigationBarSimple {
-      grid-template-columns: repeat(5, 20%);
-      grid-template-areas: "item0 item1 item2 item3 item4";
-    }
-    &.NavigationBarOpened {
-      box-shadow: 0 0 11px rgba(0, 0, 0, 0.09);
-    }
-  }
-
-  .NavigationPrimaryItemAnchor,
-  .NavigationSecondaryItemAnchor{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
-    text-decoration: none;
-    color: var(--emfe-w-color-black, #000000);
-    font-size: 9px;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: 10px;
-    .NavigationPrimaryItemImg{
-      width: 20px;
-      height: 20px;
-    }
-
-    .NavigationSecondaryItemImgWrapper{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 5px;
-      border-radius: 100%;
-      background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)); 
-      .NavigationSecondaryItemImg{
-        width: 25px;
-        height: 25px;
-      }
-    }
-
-    .NavigationPrimaryItemLabel,
-    .NavigationSecondaryItemLabel{
-      margin: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-align: center;
-    }
-  }
-
-  .NavigationButton {
-    background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    border: none;
-    position: absolute;
-    border-radius: 100%;
-    top: 20%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 10px;
-      .NavigationButtonSpan{
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .labelMiddleIcon {
-        cursor: pointer;
-        display: grid;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        padding: 4px;
-        overflow: hidden;
-      }
-
-      .labelMiddleIcon .middleIconLine{
-        background: var(--emfe-w-color-white, #FFFFFF);
-        content: '';
-        height: 2px;
-        width: 20px;
-        grid-row-start: 1;
-        grid-column-start: 1;
-        transition: transform ease .2s, margin-top ease .2s .2s,  width ease .2s .4s;
-      
-        &:nth-child(1){
-          margin-top: 10px;
-        }
-        &:nth-child(2){
-          margin: auto;
-        }
-        &:nth-child(3){
-         margin-top: -10px;
-        }
-      }
-
-      .labelMiddleIconActive .middleIconLine{
-        &:nth-child(1) {
-          margin-top: 0px;
-          transform: rotate(-45deg);
-          transition: margin-top ease .2s .2s, transform ease .2s .4s;
-        }
-        &:nth-child(2) {
-          width: 0px;
-          transition: width ease .2s;
-        }
-        &:nth-child(3) {
-          margin-top: 0px;
-          transform:  rotate(45deg);
-          transition: margin-top ease .2s .2s, transform ease .2s .4s;
-        }
-      }
-    }
-  </style>
-{/if}
-