@everymatrix/casino-filter 1.7.0

package/src/CasinoFilter.svelte

@@ -0,0 +1,541 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
+  import { Translations } from './translations';
+
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = ''; // Language
+  export let translationurl:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let categoryid:string = '';
+  export let addfilterselector:string = 'false';
+  export let addsortingselector:string = 'false';
+  export let filterbylogo:string = 'false';
+  
+  let isFilterActive:boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let vendorArray:Array<any> = [];
+  let selectedVendorArray:Array<any> = [];
+  let provisionalVendorObject:any = {};
+  let fullSelection:boolean = false;
+  let selectionNumber:number = 0;
+  let isLoading:boolean = true;
+  let customStylingContainer:HTMLElement;
+  let hasErrors:boolean = false;
+
+  // start translations area
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  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) => {
+    addNewMessages(item, Translations[item]);
+  });
+  // end translations area
+
+  // start custom styling area
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(new URL(clientstylingurl))
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+      });
+  }
+  // end custom styling area
+
+  if (provisionalVendorObject[categoryid]) {
+    provisionalVendorObject = {
+      [categoryid]: []
+    }
+  }
+
+  const toggleList = ():void => {
+    isFilterActive = !isFilterActive;
+  }
+
+  const getVendors = (url:any):Promise<any> => {
+    isLoading = true;
+
+    return new Promise((resolve, reject) => {
+      fetch(url)
+        .then((res:any) => res.json())
+        .then((response:any) => {
+          response = response.items;
+
+          resolve(response.items);
+
+          selectedVendorArray = [];
+          let vendors:any=  JSON.parse(localStorage.getItem('vendorFiltersByCategory'));
+          
+          response.forEach((ven:any)  => {
+            if (!vendors) vendors = { currentCategoryId: [] }
+
+            if (vendors[categoryid]?.indexOf(ven.id) >= 0) {
+              ven.isFilterSelected = true;
+              selectedVendorArray.push(ven);
+            } else {
+              ven.isFilterSelected = false;
+            }
+          });
+
+          vendorArray = response;
+
+          // needed to force the update of the filters value
+          updateSelectionNumber();
+
+        }).catch((err:any) => {
+          console.error(err);
+          hasErrors = true;
+          reject(err);
+        }).finally(() => {
+          isLoading = false;
+        });
+    });
+  }
+
+  const filterByVendors = (selectedVendor):void => {
+    let filters = localStorage.getItem("vendorFiltersByCategory");
+
+    selectedVendor.isFilterSelected = !selectedVendor.isFilterSelected;
+
+    if (!selectedVendorArray.length || selectedVendorArray.filter(e => e.name === selectedVendor.name).length == 0) {
+      selectedVendorArray.push(selectedVendor);
+    } else {
+      selectedVendorArray = selectedVendorArray.filter(e => e.name !== selectedVendor.name)
+    }
+
+    if (filters == null) {
+      localStorage.setItem("vendorFiltersByCategory", JSON.stringify(provisionalVendorObject = {
+        [categoryid]: selectedVendorArray.map(vendor => vendor.id)
+      }));
+    } else {
+      filters = JSON.parse(filters);
+      filters[categoryid] = selectedVendorArray.map(vendor => vendor.id);
+      localStorage.setItem("vendorFiltersByCategory", JSON.stringify(filters))
+    }
+
+    window.postMessage({ type: "ApplyFilters", origin: 'filters'}, window.location.href);
+    updateSelectionNumber();
+  }
+
+  const updateSelectionNumber = ():void => {
+    // update filters value
+    fullSelection = (selectedVendorArray.length === vendorArray.length || selectedVendorArray.length == 0) ? true : false;
+    selectionNumber = selectedVendorArray.length;
+  }
+  
+  const initialLoad = ():void => {
+    const url:URL = new URL(`${endpoint}/casino/vendors`);
+    
+    url.searchParams.append("fields" , "id,name,logo,subVendors");
+  
+    url.searchParams.append("language" , lang);
+    url.searchParams.append("datasource" , datasource);
+    url.searchParams.append("platform", getDevice(userAgent));
+    if((categoryid.match(/\$/g) || []).length > 1) {
+      url.searchParams.append("filter" , `games(subGroups=${categoryid})`);
+      url.searchParams.append("subVendors" , `games(subGroups=${categoryid})`);
+    } else {
+      url.searchParams.append("filter" , `games(groups=${categoryid})`);
+    }
+
+    getVendors(url);
+  }
+
+  const clearFilters = ():void => {
+    isLoading = true;
+
+    selectedVendorArray = [];
+    localStorage.setItem("vendorFiltersByCategory", JSON.stringify(provisionalVendorObject = {
+      [categoryid]: selectedVendorArray.map(vendor => vendor.id)
+    }));
+
+    vendorArray.forEach((ven:any)  => ven.isFilterSelected = false);
+
+    setTimeout(() => {
+      isLoading = false;
+    }, 50);
+
+    window.postMessage({ type: "ApplyFilters"}, window.location.href);
+
+
+    fullSelection = true;
+    isFilterActive = false;
+  }
+
+  $: endpoint && datasource && categoryid && filterbylogo && initialLoad();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+</script>
+
+<div bind:this={customStylingContainer}>
+  {#if hasErrors}
+    <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.500')}</p>
+  {:else}
+    {#if !isLoading}
+    <div class="FilterContainer {(addfilterselector == 'true' && addsortingselector == 'true') ? 'FilerContainerSplit' : ''}">
+      <div class="FilterSelector {isFilterActive ? 'FilterSelectorOpen' : ''}" on:click={() => toggleList()}>
+        <div class="FilterMainArea">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+            <path id="noun_filter_736223" d="M12.2,22.2a1.018,1.018,0,0,1-.391-.091.939.939,0,0,1-.533-.857v-6.2L5.267,8.9A.95.95,0,0,1,5,8.225V7.149A.93.93,0,0,1,5.924,6.2H20.076A.93.93,0,0,1,21,7.149V8.225a.95.95,0,0,1-.267.675l-6.009,6.148V19.81a.981.981,0,0,1-.32.712l-1.6,1.423A.9.9,0,0,1,12.2,22.2ZM6,8.189,12,14.355a.95.95,0,0,1,.267.675v6.039l1.44-1.277v-4.78a.95.95,0,0,1,.267-.675L19.987,8.17V7.2H6Z" transform="translate(-5 -6.2)" fill="#fff"/>
+          </svg>          
+          <div class="FilterTextContainer">
+            <span class="FilterName">{$_('Translations.filterby')}</span>
+            <div class="FilterValueContainer">
+              <span>{$_('Translations.providers')}</span>
+              {#if fullSelection}
+                <span class="FilterCounter">{$_('Translations.all')}</span>
+              {:else}
+                <span class="FilterCounter">{selectionNumber}</span>
+              {/if}
+            </div>
+          </div>
+        </div>
+        <span class="TriangleInactive {isFilterActive ? 'TriangleActive' : ''}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
+            <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
+          </svg>
+        </span>
+
+      </div>
+      <div class="FilterDropdownContainer { isFilterActive ? 'FilterOpen' : ''}">
+        <ul class="FilterDropdown">
+          {#each vendorArray as vendor}
+            <li class="FilterItem {filterbylogo === 'true' ? 'FilterItemWithLogos' : ''}" value={vendor.name}>
+              <label class="FilterLabel">
+                <input type="checkbox" name="checkbox" bind:checked={vendor.isFilterSelected} value={vendor.name} on:click={() => filterByVendors(vendor)}>
+                <span class="FiltersCheckmark"></span>
+                {#if filterbylogo === "false"}
+                  <span>{vendor.name}</span>
+                {:else if filterbylogo === "true"}
+                  <img src={vendor.logo} alt="vendor logo" /> <!-- @TODO we should have a placeholder here in case the logo image is missing -->
+                {/if}
+              </label>
+            </li>
+          {/each}
+        </ul>
+      <button class="ClearFilters" on:click={() => clearFilters()} disabled={fullSelection && selectedVendorArray.length != vendorArray.length}>{$_('Translations.clear')}</button>
+      </div>
+    </div>
+    {/if}
+  {/if}
+</div>
+
+
+<style lang="scss">
+  .FilterContainer {
+    color: #fff;
+    position: relative;
+    z-index: 16;
+  }
+
+  .FilterSelector {
+    background-color: #58586B;
+    display: flex;
+    position: relative;
+    padding: 10px 16px;
+    border-radius: 5px;
+    justify-content: space-between;
+    align-items: center;
+    max-width: fit-content;
+    cursor: pointer;
+    &.FilterSelectorOpen {
+      border-radius: 5px 5px 0 0;
+    }
+  }
+
+  .FilterMainArea {
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 16px;
+    }
+  }
+
+  .FilterName {
+    font-size: 11px;
+    line-height: 12px;
+    color: #D1D1D1;
+    text-transform: uppercase;
+  }
+
+  .FilterTextContainer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .FilterValueContainer {
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 300;
+  }
+
+  .TriangleInactive {
+    display: block;
+    color: currentColor;
+    margin: 0 0 0 15px;
+    transition: all .5s;
+  }
+
+  .TriangleActive {
+    transform: rotate(180deg);
+    position: relative;
+    top: 2px;
+  }
+
+  .FilterDropdownContainer {
+    padding: 0;
+    background: rgb(88,88,107);
+    background: linear-gradient(180deg, rgba(88,88,107,0.9) 0%, rgba(7,7,42,0.9) 95%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: max-height 0.15s ease-out;
+    max-height: 0;
+    border-radius: 0 0 5px 5px;
+    position: absolute;
+    top: 48px;
+    margin-bottom: 40px;
+    overflow: hidden;
+    margin: 0;
+    &.FilterOpen {
+      width: 100%;
+      max-height: fit-content;
+      transition: max-height 0.25s ease-in;
+      padding-top: 20px;
+    }
+  }
+
+  .FilterDropdown {
+    width: 100%;
+    max-height: 300px;
+    display: grid;
+    gap: 10px;
+    margin: 0;
+    padding-inline-start: 0;
+    overflow: scroll;
+    list-style: none;
+  }
+
+  // custom checkmark
+  .FilterItem {
+    position: relative;
+    label {
+      font-size: 14px;
+      font-weight: 300;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      -webkit-user-select: none; /* Safari */
+      -ms-user-select: none; /* IE 10 and IE 11 */
+      user-select: none; /* Standard syntax */
+    }
+
+    input {
+      cursor: pointer;
+      margin-right: 10px;
+    }
+
+    &:hover input ~ .FiltersCheckmark {
+      background-color: transparent;
+      border: 1px solid #D0046C;
+    }
+
+    input:checked ~ .FiltersCheckmark {
+      background-color: #D0046C;
+      border: 1px solid #D0046C;
+    }
+
+    .FiltersCheckmark {
+      transition: all 0.05s ease-in;
+      margin: 0 15px;
+    }
+
+    /* unchecked checkmark */
+    .FiltersCheckmark:after {
+      content: "";
+      position: absolute;
+      left: 9px;
+      display: none;
+    }
+
+    /* checkmark after click */
+    input:checked ~ .FiltersCheckmark:after {
+      display: block;
+    }
+
+    /* checkmark */
+    .FiltersCheckmark:after {
+      left: 8px;
+      top: 4px;
+      width: 5px;
+      height: 10px;
+      border: 1px solid white;
+      border-width: 0 2px 2px 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+  }
+
+  .FilerContainerSplit {
+    .FilterItemWithLogos {
+      .FiltersCheckmark {
+        margin: 0;
+      }
+    }
+  }
+
+  .FilterLabel {
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+
+    .FiltersCheckmark {
+      border-radius: 8px;
+      position: relative;
+      height: 22px;
+      width: 22px;
+      min-width: 22px;
+      background-color: transparent;
+      border: 1px solid #fff;
+    }
+  }
+
+  .FilterItemWithLogos {
+    label {
+      height: 70px;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      img {
+        width: 70px;
+      }
+    }
+  }
+
+  .FilterLabel input:checked + span {
+    font-weight: 600;
+  }
+
+  .FilterCounter {
+    display: inline-flex;
+    margin-left: 10px;
+    min-width: 17px;
+  }
+
+  .ClearFilters {
+    margin: 20px auto;
+    border: 0;
+    color: #fff;
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    border: 1px solid var(--emfe-w-color-primary, #D0046C);
+    font-size: 18px;
+    padding: 10px 50px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.1s ease-in;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+    &:disabled {
+      background: var(--emfe-w-color-gray-100, #E6E6E6);
+      border: 1px solid var(--emfe-w-color-gray-150, #828282);
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    .FilterSelector {
+      max-width: initial;
+    }
+
+    .FilterDropdownContainer {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    .FilterDropdown {
+      display: grid;
+      grid-template-columns: minmax(150px, 150px) minmax(150px, 150px);
+      gap: 30px;
+      margin-block-start: 0;;
+    }
+
+    .FilterItemWithLogos {
+      label {
+        justify-content: center;
+      }
+    }
+
+    .FilerContainerSplit {
+      .FilterSelector {
+        padding: 7px;
+        .FilterCounter {
+          margin-left: 0;
+        }
+      }
+      .FilterMainArea svg {
+        margin: 0 10px;
+      }
+      .FilterDropdown {
+        grid-template-columns: 1fr;
+      }
+      .FilterDropdownContainer {
+        top: 42px;
+      }
+      .ClearFilters {
+        padding: 10px 25px;
+      }
+    }
+
+    .FilterLabel .FiltersCheckmark {
+      margin-right: 15px;;
+    }
+
+    .FilterItem.FilterItemWithLogos {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .FilerContainerSplit {
+      .FilterItemWithLogos {
+        .FiltersCheckmark {
+          margin: 0 20px 0 0;
+        }
+      }
+    }
+  }
+</style>

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -0,0 +1,4 @@
+import CasinoFilter from './CasinoFilter.svelte';
+
+!customElements.get('casino-filter') && customElements.define('casino-filter', CasinoFilter);
+export default CasinoFilter;

package/src/translations.js

@@ -0,0 +1,122 @@
+export const Translations = {
+  'en': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'zh': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'de': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'it': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'fr': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'es': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'tr': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'ru': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'ro': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'hr': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'hu': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'pl': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'pt': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'sl': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  },
+  'sr': {
+    'Translations': {
+      'providers': 'Providers:',
+      'filterby': 'Filter by:',
+      'all': 'all',
+      'clear': 'Clear all'
+    }
+  }
+};

package/stories/CasinoFilter.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-element';
+
+import CasinoFilter from '../src/CasinoFilter';
+
+// This default export determines where your story goes in the story list
+export default {
+  title: 'CasinoFilter',
+};
+
+// 👇 We create a “template” of how args map to rendering
+const CasinoFilter = ({ aProperty }) => html`<casino-filter></casino-filter>`;
+
+export const FirstStory = CasinoFilter.bind({});