@everymatrix/casino-filter-page 0.0.94 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-filter-page",
-  "version": "0.0.94",
+  "version": "0.0.98",
   "main": "dist/casino-filter-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "22c01bfe195ffacb2177610d0728c9f876e3a057"
+  "gitHead": "3ecd09ff4964585af90dab401fed6fc7e49e596e"
 }

package/src/CasinoFilterPage.svelte

@@ -55,6 +55,7 @@
 
           if (!provisionalVendorArray) {
             let filters = sessionStorage.getItem("vendorFiltersByCategory");
+
             if (filters == null) {
               sessionStorage.setItem("vendorFiltersByCategory", JSON.stringify(provisionalVendorObject = {
                 [currentCategoryId]: provisionalVendorArray
@@ -73,8 +74,8 @@
 
           if (selectedVendorsArray) {
             if (selectedVendorsArray.length) {
-              vendorsArray.forEach((vendor) => {
-                selectedVendorsArray.forEach((selected)  => {
+              vendorsArray.forEach((vendor:any) => {
+                selectedVendorsArray.forEach((selected:any)  => {
                   if (vendor.id === selected) {
                     vendor.isFilterSelected = true;
                   }
@@ -84,7 +85,7 @@
           }
 
           // populate values for vendor filter selection control
-          previousFilterSelection = vendorsArray.reduce((arr, obj) => (obj.isFilterSelected && arr.push(obj.id), arr), []);
+          previousFilterSelection = vendorsArray.reduce((arr:Array<any>, obj:any) => (obj.isFilterSelected && arr.push(obj.id), arr), []);
           provisionalVendorArray = previousFilterSelection;
           // initially, since there is no change in the vendor filter selection, the apply button is disabled
           applyFilters = false;
@@ -92,27 +93,27 @@
 
         case 'AvailableVendors':
           vendorsArray = e.data.venArray;
-          provisionalVendorArray = vendorsArray.reduce((a, o) => (o.isFilterSelected && a.push(o.id), a), []);
+          provisionalVendorArray = vendorsArray.reduce((arr:Array<any>, obj:any) => (obj.isFilterSelected && arr.push(obj.id), arr), []);
           break;
 
         case 'UpdateSelectedVendorFilters':
           vendorsArray = e.data.venArray;
-          if(vendorsArray) {
-            provisionalVendorArray = vendorsArray.reduce((a, o) => (o.isFilterSelected && a.push(o.id), a), []);
+          if (vendorsArray) {
+            provisionalVendorArray = vendorsArray.reduce((arr:Array<any>, obj:any) => (obj.isFilterSelected && arr.push(obj.id), arr), []);
           }
           break;
 
         case 'ClearVendorFilters':
           clearVendorFilter();
-          window.postMessage({ type: "ApplyFilters"}, window.location.href);
+          window.postMessage({ type: "ApplyFilters" }, window.location.href);
           applyFilters = false;
           break;
 
         case 'ModalClosed':
-          vendorsArray.forEach((ven)  => {
-            ven.isFilterSelected = false;
+          vendorsArray.forEach((vendor:any)  => {
+            vendor.isFilterSelected = false;
           });
-          window.postMessage({ type: "UpdateFilters", vendorsArray}, window.location.href);
+          window.postMessage({ type: "UpdateFilters", vendorsArray }, window.location.href);
           break;
 
         case 'CategoryVendors':
@@ -123,6 +124,7 @@
               provisionalVendorArray = categoryVendorFiltersCollection[currentCategoryId];
             }
           }
+
           break;
 
         case 'ModalLoader':
@@ -139,35 +141,35 @@
   const getVendors = (url:any) => {
     return new Promise((resolve, reject) => {
       fetch(url)
-      .then((res:any) => res.json())
-      .then((response:any) => {
-        response = response.items;
+        .then((res:any) => res.json())
+        .then((response:any) => {
+          response = response.items;
 
-        resolve(response.items);
+          resolve(response.items);
 
-        response.forEach((ven:any)  => {
-          let vendors = JSON.parse(sessionStorage.getItem('vendorFiltersByCategory'));
+          response.forEach((ven:any)  => {
+            let vendors = JSON.parse(sessionStorage.getItem('vendorFiltersByCategory'));
 
-          if (!vendors) {
-            vendors = {
-              currentCategoryId: []
+            if (!vendors) {
+              vendors = {
+                currentCategoryId: []
+              }
             }
-          }
 
-          if (currentCategoryId) {
-            if (vendors[currentCategoryId]) {
-              ven.isFilterSelected = (vendors[currentCategoryId].indexOf(ven.id) >= 0) ? true : false;
+            if (currentCategoryId) {
+              if (vendors[currentCategoryId]) {
+                ven.isFilterSelected = (vendors[currentCategoryId].indexOf(ven.id) >= 0) ? true : false;
+              }
             }
-          }
-        });
+          });
 
-        vendorsArray = response;
+          vendorsArray = response;
 
-        window.postMessage({ type: "UpdateFilters", vendorsArray}, window.location.href);
-      }).catch((err:any) => {
-        console.error(err);
-        reject(err);
-      });
+          window.postMessage({ type: "UpdateFilters", vendorsArray}, window.location.href);
+        }).catch((err:any) => {
+          console.error(err);
+          reject(err);
+        });
     });
   }
 
@@ -192,12 +194,16 @@
   // simple check for array euqlity, indifferent to array's elements order
   const checkArrayEquality = (arr1:Array<string>, arr2:Array<string>) => {
     if (arr1.length !== arr2.length) return false;
+
     const uniqueValues = new Set([...arr1, ...arr2]);
+
     for (const v of uniqueValues) {
       const arr1Count = arr1.filter(e => e === v).length;
       const arr2Count = arr2.filter(e => e === v).length;
+
       if (arr1Count !== arr2Count) return false;
     }
+
     return true;
   }
 
@@ -205,16 +211,21 @@
     vendorsArray.forEach((ven)  => {
       ven.isFilterSelected = false;
     });
-
     let filters = sessionStorage.getItem("vendorFiltersByCategory");
 
     window.postMessage({ type: "ClearFilters", vendorsArray}, window.location.href);
+
     filtersMarkedForClearance = true;
-    applyFilters = (!provisionalVendorArray.length && checkArrayEquality(provisionalVendorArray, previousFilterSelection)) ? false : true;
+
+    // check if there are any differences between current and previous selections
+    applyFilters = checkArrayEquality(provisionalVendorArray, previousFilterSelection);
+    // clear current array
+    provisionalVendorArray = [];
 
     if (filters !== null) {
       filters = JSON.parse(filters);
       filters[currentCategoryId] = provisionalVendorArray;
+
       sessionStorage.setItem("vendorFiltersByCategory", JSON.stringify(filters))
     }
   }
@@ -231,32 +242,32 @@
     } else {
       filters = JSON.parse(filters);
       filters[currentCategoryId] = provisionalVendorArray;
+
       sessionStorage.setItem("vendorFiltersByCategory", JSON.stringify(filters))
     }
+
     window.postMessage({ type: "ApplyFilters"}, window.location.href);
   }
 
   const setClientStyling = () => {
     let sheet = document.createElement('style');
+
     sheet.innerHTML = clientstyling;
     customStylingContainer.appendChild(sheet);
   }
 
   const setClientStylingURL = () => {
     let cssFile = document.createElement('style');
-    cssFile.innerHTML = `@import ${clientstylingurl}`;
 
-    if (clientstylingurl) {
-      fetch(new URL(clientstylingurl))
-        .then((res) => res.text())
-        .then((data) => {
-          cssFile.innerHTML = data
+    fetch(new URL(clientstylingurl))
+      .then((res) => res.text())
+      .then((data) => {
+        cssFile.innerHTML = data
 
-          if (customStylingContainer) {
-            setTimeout(() => { customStylingContainer.appendChild(cssFile); });
-          }
-        });
-    }
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile); });
+        }
+      });
   }
 
   onMount(() => {
@@ -275,41 +286,42 @@
   $: clientstylingurl && setClientStylingURL();
 </script>
 
-{#if isLoading}
-  <!-- <p class="FilterLoading">{$_('filters.loading')}</p> -->
-  <div class="lds-dual-ring"></div>
-{:else}
-  <div class="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}" bind:this={customStylingContainer}>
-    <section class="FilterHeaderSection">
-      <div class="FilterHeaderDetails">
-        <h4 class="FilterHeaderTitle">{$_('filters.filterModalTitle')}</h4>
-        <h5 class="FilterHeaderSubtitle">{$_('filters.filterModalSubtitle')}</h5>
-      </div>
-    </section>
-    <section class="FilterContentSection">
-      {#if vendorsArray}
-        {#each vendorsArray as vendor}
-          <div class="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" on:click="{() => toggleVendorFilter(vendor)}">
-            <img class="VendorImage" src="{vendor.image}" alt="{vendor.name}" />
-            {#if vendor.isFilterSelected}
-              <div class="FilterIconContainer">
-                <div class="CheckMark"></div>
-              </div>
-            {/if}
-          </div>
-        {/each}
-      {/if}
-    </section>
-    <section class="FilterFooterSection">
-      {#if provisionalVendorArray}
-        {#if provisionalVendorArray.length}
-          <div class="ClearFiltersButton" on:click="{() => clearVendorFilter()}">{$_('filters.filterClear')}</div>
+<div bind:this={customStylingContainer}>
+  {#if isLoading}
+    <div class="lds-dual-ring"></div>
+  {:else}
+    <div class="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}" >
+      <section class="FilterHeaderSection">
+        <div class="FilterHeaderDetails">
+          <h4 class="FilterHeaderTitle">{$_('filters.filterModalTitle')}</h4>
+          <h5 class="FilterHeaderSubtitle">{$_('filters.filterModalSubtitle')}</h5>
+        </div>
+      </section>
+      <section class="FilterContentSection">
+        {#if vendorsArray}
+          {#each vendorsArray as vendor}
+            <div class="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" on:click="{() => toggleVendorFilter(vendor)}">
+              <img class="VendorImage" src="{vendor.image}" alt="{vendor.name}" />
+              {#if vendor.isFilterSelected}
+                <div class="FilterIconContainer">
+                  <div class="CheckMark"></div>
+                </div>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+      </section>
+      <section class="FilterFooterSection">
+        {#if provisionalVendorArray}
+          {#if provisionalVendorArray.length}
+            <div class="ClearFiltersButton" on:click="{() => clearVendorFilter()}">{$_('filters.filterClear')}</div>
+          {/if}
         {/if}
-      {/if}
-      <div class="ApplyFiltersButton {!applyFilters ? "ApplyFilterButtonDisabled" : ''}" on:click="{() => applyVendorFilter()}">{$_('filters.filterApply')}</div>
-    </section>
-  </div>
-{/if}
+        <div class="ApplyFiltersButton {!applyFilters ? "ApplyFilterButtonDisabled" : ''}" on:click="{() => applyVendorFilter()}">{$_('filters.filterApply')}</div>
+      </section>
+    </div>
+  {/if}
+</div>
 
 <style lang="scss">
   .FilterModalContent {

package/src/translations.js

@@ -3,7 +3,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Loading',
       filterModalTitle: 'Filter',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'You can select multiple options',
       filterClear: 'Reset filter',
       filterApply: 'Done'
     }
@@ -12,7 +12,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Loading',
       filterModalTitle: 'Filter',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Mehrfachauswahl möglich',
       filterClear: 'Filter zurücksetzen',
       filterApply: 'Fertig'
     }
@@ -21,7 +21,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Loading',
       filterModalTitle: 'Filtro',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'È possibile la selezione multipla',
       filterClear: 'Resetta il filtro',
       filterApply: 'Fatto'
     }
@@ -75,7 +75,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Učitavanje',
       filterModalTitle: 'Filter',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Možete odabrati više opcija',
       filterClear: 'Ponovno postavi filter',
       filterApply: 'Gotovo'
     }
@@ -84,7 +84,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'betöltés',
       filterModalTitle: 'Szűrő',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Több lehetőséget is kiválaszthat',
       filterClear: 'Szűrő visszaállítása',
       filterApply: 'Kész'
     }
@@ -93,7 +93,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Ładowanie',
       filterModalTitle: 'Wyszukaj',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Możliwy wybór wielokrotny',
       filterClear: 'Wyłącz filtr',
       filterApply: 'Gotowe'
     }
@@ -102,7 +102,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'A carregar',
       filterModalTitle: 'Filtrar',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Escolha múltipla possível',
       filterClear: 'Limpar filtro',
       filterApply: 'Feito'
     }
@@ -111,7 +111,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Loading',
       filterModalTitle: 'Filter',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Izberete lahko več možnosti',
       filterClear: 'Ponastavi filter',
       filterApply: 'Končano'
     }
@@ -120,7 +120,7 @@ export const VendorFilterPageTranslations = {
     filters: {
       loading: 'Loading',
       filterModalTitle: 'Filter',
-      filterModalSubtitle: 'You can select multiple vendors',
+      filterModalSubtitle: 'Moguć je višestruki izbor',
       filterClear: 'Resetujte filter',
       filterApply: 'Gotovo'
     }