@everymatrix/casino-footer 1.44.0 → 1.45.2

package/src/CasinoFooter.svelte

@@ -1,752 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import '@everymatrix/casino-footer-section';
-  import '@everymatrix/player-panic-button';
-
-  import moment from 'moment';
-  import { onMount } from 'svelte';
-  import { checkSession, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { TRANSLATIONS } from './translations.js'
-
-  export let endpoint:string = '';
-  export let lang:string = 'en';
-  export let env:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-  // Clock exposed attributes - If the clock is enabled, all attributes should be given a value, otherwise they can be ignored safely
-  export let clockenabled:string = ''; // "true" to enable, anything to disable
-  export let clocksecondsenabled:string = ''; // "true" to display seconds in our default format and to refresh the clock every 1000ms
-  export let clockcustomformat:string = ''; // "false" for defaulting to our format
-  export let clocktext:string = 'Time'; // string preceding clock
-
-  export let languageselectorenabled = 'true';
-  export let languageslist:string = 'en, ro';
-  export let languagedisplaytype = 'name';
-  export let session:string = '';
-  export let userid:string = '';
-  export let userendpoint:string = '';
-  export let userroles:string = '';
-
-  export let panicbuttonenabled:string = 'true';
-
-  export let sessiontimerenabled = 'true'; // 'true' to enable, anything to disable
-  export let baseurl:string = '';
-
-  let gameVendorsLinksTitle:string = '';
-  let gameVendorsRepeater:Array<Object> = [];
-  let paymentLinksTitle:string = '';
-  let paymentMethodsRepeater:Array<Object> = [];
-  let sponsorsLinksTitle:string = '';
-  let sponsorsRepeater:Array<Object> = [];
-  let helpLinksTitle:string = '';
-  let helpLinksRepeater:Array<Object> = [];
-  let licensesLinksTitle:string = '';
-  let licensesRepeater:Array<Object> = [];
-  let socialLinksTitle:string = '';
-  let socialLinksRepeater:Array<Object> = [];
-  let copyright:string = '';
-  let licenseDesc:string = '';
-  let hasErrors:boolean = false;
-  let isLoading:boolean = false;
-  let receivedFooterData:any;
-  let headScript:boolean = false;
-  let licenseScriptSrc:string = '';
-  let licenseScript:string = '';
-  let isLoggedIn:boolean = false;
-  let sessionID:string = '';
-  let playerID:string = '';
-  let selectedLanguage:string = 'hr';
-  let languages:Array<object> = [];
-  let userAgent = window.navigator.userAgent;
-
-  let time:string;
-  let refreshRate: number;
-
-  let languagesArray:Array<string> = [];
-  let languageDrawer: HTMLElement;
-  let languageDisplayName:string = '';
-  let currentLanguageFlag:string = '';
-  let languagePackLoaded:boolean = false;
-
-  let timeString:string = '';
-
-  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);
-    });
-  }
-    
-  let customStylingContainer:HTMLElement;
-  let displayNoneCustomStyling:Boolean = false;
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  // needed for session timer
-  const setSession = ():void => {
-    checkSession(userendpoint, session).then((res:any) => {
-      sessionID = res.Guid;
-      playerID = res.UserID;
-      isLoggedIn = true;
-    }, (err:any) => {
-      isLoggedIn = false;
-      console.error('Error while checking the session - ', err)
-    });
-  }
-
-  const setSessionTimer = ():void => {
-    // using Date instead of moment because they recommend in their docs to stop using it for new projects
-      const sessionData = JSON.parse(localStorage.session);
-      const loginTime = new Date(sessionData.Login);
-      const timezoneOffsetHours = new Date().getTimezoneOffset() / 60;
-      let currentTime = new Date();
-      let milisecondDifference = currentTime.getTime() - loginTime.getTime();
-
-      let hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
-      let minutes = Math.floor(milisecondDifference % 3600000 / 60000);
-      let seconds = Math.floor(milisecondDifference % 60000 / 1000);
-
-      setInterval(() => {
-        hours = Math.floor(milisecondDifference / 3600000) + timezoneOffsetHours;
-        minutes = Math.floor(milisecondDifference % 3600000 / 60000);
-        seconds = Math.floor(milisecondDifference % 60000 / 1000);
-
-        timeString = `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${seconds > 9 ? seconds : '0' + seconds}`;
-
-        milisecondDifference += 1000;
-      },1000);
-  }
-
-  const refreshClock = () => {
-    setInterval(() => {
-    clockDisplay();
-  }, refreshRate);
-  }
-
-  const clockDisplay = ():void => {
-    const format = clockcustomformat != 'false' ? clockcustomformat : `hh:mm${clocksecondsenabled === "true" ? ':ss' : ''} (UTC Z)`;
-    time = moment().format(format);
-  }
-
-  const getCmsData = () => {
-    let url:URL = new URL(`${endpoint}/${lang}/footer-raw-data?env=${env}`);
-    
-    let device = getDevice(userAgent);
-
-    url.searchParams.append('userRoles', userroles);
-
-    if(device){
-      if(device === 'PC'){
-        url.searchParams.append('device', 'dk')
-      } else 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')
-      }
-    }
-
-    hasErrors = false;
-    isLoading = true;
-    fetch(url)
-      .then((res:any) => res.json())
-      .then((data:any) => {
-        isLoading = false;
-
-        receivedFooterData = data;
-        let licenseHeadScriptSrc,
-            licenseScriptBody,
-            licenseEvent;
-
-        ({
-          gameVendorsLinksTitle,
-          gameVendorsRepeater,
-          paymentLinksTitle,
-          paymentMethodsRepeater,
-          sponsorsLinksTitle,
-          sponsorsRepeater,
-          helpLinksTitle,
-          helpLinksRepeater,
-          licensesLinksTitle,
-          licensesRepeater,
-          socialLinksTitle,
-          socialLinksRepeater,
-          copyright,
-          licenseDesc,
-          licenseHeadScriptSrc,
-          licenseScriptBody,
-          licenseEvent,
-          language : languages
-        } = receivedFooterData);
-
-        if (languages) {
-          languagePackLoaded = true;
-          updateLanguageDisplayName();
-        }
-
-        if (licenseHeadScriptSrc?.length > 0) {
-          headScript = true;
-          licenseScriptSrc = licenseHeadScriptSrc;
-        }
-
-        if (licenseScriptBody?.length > 0) {
-          licenseScript = licenseScriptBody;
-        }
-
-        window.postMessage({ type: licenseEvent }, window.location.href);
-
-        window.postMessage({
-          type: 'FooterData',
-          gameVendorsRepeater,
-          paymentMethodsRepeater,
-          sponsorsRepeater,
-          helpLinksRepeater,
-          licensesRepeater,
-          socialLinksRepeater
-        }, window.location.href);
-      }).catch((err:any) => {
-        hasErrors = true;
-        isLoading = false;
-
-        console.error(err);
-      });
-  }
-
-  const setContent = (element:HTMLElement, content:any) => {
-    let htmlContent = document.createElement("div");
-    htmlContent.innerHTML = content;
-    element.append(htmlContent);
-  }
-
-  const changeLanguage = () => {
-    window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
-  };
-
-  const toggleLanguageDrawer = () => {
-    languageDrawer.classList.toggle('hidden');
-  }
-
-  const overlayOptionTrigger = (e) => {
-    let option = e.target.closest('.overlayLanguageOption');
-    selectedLanguage = option.getAttribute('data-lang');
-    changeLanguage();
-    updateLanguageDisplayName();
-    languageDrawer.classList.toggle('hidden');
-  };
-
-  const updateLanguageDisplayName = ():void => {
-    let matchFound = false;
-    languages.forEach((l, i) => {
-      if (l.code == selectedLanguage.toLowerCase()) {
-        matchFound = true;
-        let langName:string = '';
-        currentLanguageFlag = l.flag_icon_editable;
-        switch (languagedisplaytype) {
-          case 'name':
-            langName = l.name;
-          break;
-
-          case 'translatedName':
-            langName = l.translated_name;
-          break;
-
-          default:
-          langName = l.code;
-          break;
-        }
-        languageDisplayName = langName;
-      }
-    });
-
-    if (!matchFound) {
-      languageDisplayName = selectedLanguage;
-    }
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    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;
-
-        // after the first call is made for the custom styling file, save the css inside clientstyling in order to avoid multiple fetches inside subwidgets
-        clientstyling = clientstyling ? clientstyling + data : data;
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-        setTimeout(() => { displayNoneCustomStyling = false; }, 500);
-      });
-  }
-
-  onMount(() => {
-    languagesArray = languageslist.replace(/ /g,'').split(',');
-    languagesArray = languagesArray.map((language:string) => language.toUpperCase());
-  });
-
-  $: lang && setLocale(lang);
-  $: session && userid && endpoint && setSession();
-  $: isLoggedIn && lang && setSessionTimer();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: endpoint && lang && env && userroles && getCmsData();
-  $: translationurl && setTranslationUrl();
-  $: clockenabled !== 'false' && clocksecondsenabled && clockcustomformat && clockDisplay();
-  $: clockenabled !== 'false' && clocksecondsenabled && (refreshRate = clocksecondsenabled == "true" ? 1000 : 60000) && refreshClock();
-  $: lang && (selectedLanguage = lang) && languages && (languages.length > 0) && updateLanguageDisplayName();
-
-</script>
-
-<svelte:head>
-  {#if headScript}
-    <script src={licenseScriptSrc}></script>
-  {/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'}">
-        <!-- start optionals section -->
-        {#if (clockenabled==="true" || languageselectorenabled==="true" || panicbuttonenabled==="true")}
-          <div class="GridRow ProvisionalRow" part="GridRow">
-            {#if clockenabled==="true"}
-            <div class="ClockContainer">
-              <span class="ClockText">{clocktext}:</span>
-              <span class="ClockTime">{time}</span>
-            </div>
-            {/if}
-
-            {#if panicbuttonenabled==="true"}
-              <player-panic-button
-              lang={lang}
-              ></player-panic-button>
-            {/if}
-
-            {#if (languageselectorenabled==="true" && languagePackLoaded && selectedLanguage)}
-              <div class="languageSelectorContainer">
-                <!-- traditional dropdown option for screenreader users. Works the same way as the old language selector. Display: none -->
-                <select bind:value={selectedLanguage} class="Item ItemLanguage" part="Item ItemLanguage" on:change={()=>changeLanguage()}>
-                  {#each languagesArray as operatorLanguage}
-                    <option value={operatorLanguage} selected>{operatorLanguage}</option>
-                  {/each}
-                </select>
-
-                <!-- Custom dropdown in order to be able to display country flags -->
-                <div class="languageSelectorOverlay">
-                  <button class="drawerButton" value="{selectedLanguage}" on:click={toggleLanguageDrawer}><img class="languageFlag" src={currentLanguageFlag}>{languageDisplayName}<img class="downwardChevron" src="https://upload.wikimedia.org/wikipedia/commons/2/24/White_arrow_down.svg"></button>
-                    <div bind:this={languageDrawer} class="languageDrawer hidden">
-                      <ul id="languageList">
-                        {#each languages as language}
-                          <li class="overlayLanguageOption" data-lang={language.code} on:click={overlayOptionTrigger}><img class="languageFlag" src={language.flag_icon_editable}><a href="javascript:void(0)"><span>{language.name}</span></a></li>
-                        {/each}
-                      </ul>
-                    </div>
-                </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
-
-        {#if (sessiontimerenabled === 'true') && localStorage.session}
-          <div class="GridRow ProvisionalRow" part="GridRow">
-            <div class="sessionTimerContainer">
-              <span class="SessionText">{$_('sessionTimer')} {timeString}</span>
-            </div>
-          </div>
-        {/if}
-        <!-- end optionals section -->
-        {#if sponsorsRepeater}
-          <div class="GridRow" part="GridRow">
-            <!-- start sponsors section -->
-            {#if sponsorsRepeater}
-            <div class="GridCol" part="GridCol">
-              {#if sponsorsLinksTitle}
-                <p class="FooterTitle" part="FooterTitle">{sponsorsLinksTitle}</p>
-              {/if}
-              <casino-footer-section
-                class="FooterSection"
-                part="FooterSection"
-                sponsorflag="1"
-                {clientstyling}
-                {baseurl}
-                {lang}
-                footertype="footerprimary">
-              </casino-footer-section>
-            </div>
-            {/if}
-            <!-- end sponsors section -->
-          </div>
-        {/if}
-        {#if paymentMethodsRepeater || gameVendorsRepeater}
-          <div class="GridRow {(paymentMethodsRepeater && gameVendorsRepeater) ? 'SplitRow': ''}" part="GridRow {(paymentMethodsRepeater && gameVendorsRepeater) ? 'SplitRow': ''}">
-            <!-- start payments section -->
-            {#if paymentMethodsRepeater}
-              <div class="GridCol" part="GridCol">
-                {#if paymentLinksTitle}
-                  <p class="FooterTitle" part="FooterTitle">{paymentLinksTitle}</p>
-                {/if}
-                <casino-footer-section
-                  class="FooterSection"
-                  part="FooterSection"
-                  paymentflag="1"
-                  {clientstyling}
-                  {clientstylingurl}
-                  {baseurl}
-                  {lang}
-                  footertype="footerprimary">
-                </casino-footer-section>
-              </div>
-            {/if}
-            <!-- end payments section -->
-            <!-- start vendors section -->
-            {#if gameVendorsRepeater}
-              <div class="GridCol" part="GridCol">
-                {#if gameVendorsLinksTitle}
-                  <p class="FooterTitle" part="FooterTitle">{gameVendorsLinksTitle}</p>
-                {/if}
-                <casino-footer-section
-                  class="FooterSection"
-                  part="FooterSection"
-                  vendorflag="1"
-                  {clientstyling}
-                  {clientstylingurl}
-                  {baseurl}
-                  {lang}
-                  footertype="footerprimary">
-                </casino-footer-section>
-              </div>
-            {/if}
-            <!-- end vendors section -->
-          </div>
-        {/if}
-        {#if helpLinksRepeater || licensesRepeater}
-          <div class="GridRow {(helpLinksRepeater && licensesRepeater) ? 'SplitRow': ''}" part="GridRow {(helpLinksRepeater && licensesRepeater) ? 'SplitRow': ''}">
-            <!-- start helper section -->
-            {#if helpLinksRepeater}
-              <div class="GridCol" part="GridCol">
-                {#if helpLinksTitle}
-                  <p class="FooterTitle" part="FooterTitle">{helpLinksTitle}</p>
-                {/if}
-                <casino-footer-section
-                  class="FooterSection"
-                  part="FooterSection"
-                  helperflag="1"
-                  {clientstyling}
-                  {clientstylingurl}
-                  {baseurl}
-                  {lang}
-                  footertype="footerprimary">
-                </casino-footer-section>
-              </div>
-            {/if}
-            <!-- end helper section -->
-            <!-- start license section -->
-            {#if licensesRepeater}
-              <div class="GridCol" part="GridCol">
-                {#if licensesLinksTitle}
-                  <p class="FooterTitle" part="FooterTitle">{licensesLinksTitle}</p>
-                {/if}
-                <casino-footer-section
-                  class="FooterSection"
-                  part="FooterSection"
-                  licenseFlag="1"
-                  {clientstyling}
-                  {clientstylingurl}
-                  {baseurl}
-                  {lang}
-                  footertype="footerprimary">
-                </casino-footer-section>
-              </div>
-            {/if}
-            <!-- end license section -->
-          </div>
-        {/if}
-        {#if licenseDesc || copyright}
-          <div class="GridRow LicenseRow" part="GridRow LicenseRow">
-            <!-- start social section -->
-              <div class="GridCol" part="GridCol">
-                <!-- start detailed licenses section -->
-                <div class="DetailedLicenses" part="DetailedLicenses" use:setContent={licenseDesc}></div>
-                <div class="DetailedCustomLicenses" part="DetailedCustomLicenses" use:setContent={licenseScript}></div>
-                <!-- end detailed licenses section -->
-                {#if socialLinksRepeater}
-                  {#if socialLinksTitle}
-                    <p class="FooterTitle" part="FooterTitle">{socialLinksTitle}</p>
-                  {/if}
-                  <casino-footer-section 
-                    class="FooterSection SocialSection"
-                    part="FooterSection SocialSection"
-                    socialflag="1"
-                    {clientstyling}
-                    {clientstylingurl}
-                    {baseurl}
-                    {lang}
-                    footertype="footerprimary">
-                  </casino-footer-section>
-                {/if}
-                <!-- start copyright section -->
-                <div class="CopyrightAreaRights CopyrightArea" part="CopyrightAreaRights CopyrightArea" use:setContent={copyright}></div>
-                <!-- end copyright section -->
-              </div>
-            <!-- end social section -->
-          </div>
-        {/if}
-      </div>
-    {/if}
-  {/if}
-</div>
-
-
-<style lang="scss">
-
-
-
-  .SearchLoading {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    text-align: center;
-  }
-
-  .FooterGrid {
-    font-weight: 400;
-    display: flex;
-    padding: 10px 40px;
-    background-color: var(--emfe-w-color-footer-bg, var(--emfe-w-color-background-secondary, #212529));
-    color: var(--emfe-w-color-white, #FFFFFF);
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    &.NoSponsorSpacing {
-      padding-top: 30px;
-    }
-    .GridRow {
-      display: flex;
-      flex-flow: row wrap;
-      width: 100%;
-      padding: 20px 0;
-      align-items: flex-start;
-      justify-content: center;
-      &:first-child {
-        padding-top: 0;
-      }
-      &:not(:last-child) {
-        border-bottom: 1px solid rgba(255, 255, 255, .1);
-      }
-      &.LicenseRow{
-        border-bottom: 0;
-      }
-      &.SplitRow {
-        .GridCol:first-child {
-          flex-basis: 50%;
-        }
-        .GridCol:nth-child(2) {
-          flex-basis: calc(50% - 1px);
-          border-left: 1px solid rgba(255, 255, 255, .1);
-        }
-      }
-      &.ProvisionalRow {
-        padding-top: 12px;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .GridCol {
-        width: 100%;
-        flex:1;
-        p {
-          text-align: center;
-          &.FooterTitle {
-            font-size: 12px;
-            font-weight: 700;
-          }
-        }
-        .PaymentsTitle, .VendorsTitle {
-          margin: 0 auto 20px;
-          font-size: 10px;
-          font-weight: 700;
-        }
-      }
-    }
-    .DetailedLicenses {
-      margin: 30px 50px 20px;
-      font-size: 10px;
-      text-align: center;
-      color: var(--emfe-w-color-gray-150, #828282);
-    }
-    .CopyrightAreaRights {
-      margin-top: 10px;
-    }
-    .CopyrightTextArea p, .CopyrightArea p {
-      margin: 0;
-      color: var(--emfe-w-color-gray-150, #828282);
-      font-size: 9px;
-    }
-  }
-  @media only screen and (max-width: 768px) {
-    .FooterGrid {
-      padding: 5px 20px;
-      .FooterTitle {
-        margin-top: 0;
-      }
-      .GridRow {
-        padding: 0;
-        &:not(:last-child) {
-          border-bottom: 0;
-
-        &.ProvisionalRow {
-          padding-top: 12px;
-          justify-content: space-between;
-
-          flex-direction: column;
-          align-items: center;
-          gap: 1rem;
-      }
-        }
-        &:last-child {
-          .GridCol:last-child {
-            border-bottom: 0;
-          }
-        }
-        &.SplitRow {
-          .GridCol:first-child, .GridCol:nth-child(2) {
-            flex-basis: unset;
-          }
-          .GridCol:nth-child(2) {
-            border-left: none;
-          }
-        }
-        .GridCol {
-          border-bottom: 1px solid rgba(255, 255, 255, .1);
-          padding: 15px 0;
-          #DetailedLicenses {
-            margin: 10px auto 25px;
-          }
-          .PaymentsTitle, .VendorsTitle {
-            margin: 10px auto;
-          }
-        }
-      }
-    }
-  }
-
-  .ClockContainer {
-    color: var(--emfe-w-color-gray-150, #c3c3c3);
-  }
-
-  .SessionText {
-    color: var(--emfe-w-color-gray-150, #c3c3c3);
-  }
-
-.ItemLanguage {
-  display: none;
-}
-
-#languageList {
-  padding: 0;
-  margin: 0;
-}
-
-.languageSelectorOverlay {
-  position: relative;
-}
-
-.drawerButton {
-  height: 30px;
-  width: 150px;
-  background: #212529;
-	color: inherit;
-	border: none;
-	padding: 0;
-	font: inherit;
-	cursor: pointer;
-	outline: inherit;
-
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-
-  border-radius: 0px;
-  border: 0;
-}
-
-.languageDrawer {
-    position:absolute;
-    background: #363e46;
-    width: 150px;
-    top: 30px;
-    padding: 6px 0;
-
-    &.hidden {
-       display: none;
-    }
-}
-
-.languageFlag {
-  margin-right: 8px;
-  background: white;
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  }
-
- .downwardChevron {
-  margin-left: 8px;
-  margin-top: 4px;
-  width: 8px;
-  height: auto;
-}
-
-.overlayLanguageOption {
-  list-style: none;
-  width: 24px;
-  position: relative;
-  padding: 0;
-  justify-content: center;
-
-  img {
-    position: absolute;
-    z-index: 0;
-    cursor: pointer;
-    top: 6px;
-    left: 12px;
-  }
-
-  a {
-    text-decoration: none;
-    color: #fff;
-    display: inline-block;
-
-    width: 150px;
-
-    span {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      margin: 4px 0;
-    }
-  }
-}
-
-</style>