@everymatrix/casino-sort 1.10.1 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-sort",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "afdfc6c00928eb5346760920f381850b562912f8"
+  "gitHead": "0608b5f0449d8bd54dcb9e847e35e9b91c4398a2"
 }

package/src/CasinoSort.svelte

@@ -1,5 +1,7 @@
 <svelte:options tag={null} />
 <script lang="ts">
+  import { onMount } from 'svelte';
+
 
   import { _, addNewMessages, setupI18n, setLocale } from './i18n';
   import { Translations } from './translations';
@@ -17,18 +19,11 @@
   let isSorterActive:boolean = false;
   let isLoading:boolean = true;
   let sortedBy:string = '';
-  let vendorSortingBy:any = {};
-  let sorter:any = {};
+  let vendorSortingBy:string = 'All';
+  let sorter:string = '';
 
   setupI18n({ withLocale: 'en', translations: {}});
 
-  const vendorMap = {
-    'All': 'All',
-    'name': 'A-Z',
-    'isNew': 'Newest',
-    'advancedTags(name(hot))': 'Hottest',
-  }
-
   const setTranslationUrl = ():void => {
     let url:string = translationurl;
 
@@ -46,6 +41,13 @@
     addNewMessages(item, Translations[item]);
   });
 
+  const vendorMap = {
+    'All': $_('Translations.all'),
+    'name': $_('Translations.az'),
+    'isNew': $_('Translations.newest'),
+    'advancedTags(name(hot))': $_('Translations.hottest'),
+  }
+
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -65,13 +67,14 @@
   }
 
   const initialLoad = ():void => {
+    vendorSortingBy = 'All';
     isLoading = false;
     isSorterActive = false;
     let parser = JSON.parse(localStorage.getItem('vendorSortingBy'))?.[categoryid];
     if (parser) {
       vendorSortingBy = parser;
     } else {
-      vendorSortingBy = 'All'
+      vendorSortingBy = 'All';
     }
     vendorSortingBy = vendorMap[parser]
   }
@@ -101,8 +104,23 @@
 
   const toggleList = ():void => {
     isSorterActive = !isSorterActive;
+    window.postMessage({ type: "SortingOpened"}, window.location.href);
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data.type == 'FilterOpened') {
+      isSorterActive = false;
+    }
   }
 
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  })
+
   $: categoryid && initialLoad();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
@@ -115,7 +133,7 @@
     <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.500')}</p>
   {:else}
     {#if !isLoading}
-    <div class="SorterContainer {(addSorterSelector == 'true' && addsortingselector == 'true') ? 'SorterContainerSplitt' : ''}">
+    <div class="SorterContainer">
       <div class="SorterSelector {isSorterActive ? 'SorterSelectorOpen' : ''}" on:click={() => toggleList()}>
         <div class="SorterMainArea">
           <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 26.003 22.819">
@@ -128,9 +146,7 @@
           <div class="SorterTextContainer">
             <span class="SorterName">{$_('Translations.sortby')}</span>
             <div class="SorterValueContainer">
-              {#if vendorSortingBy}
-                <span>{vendorSortingBy}</span>
-              {/if}
+              <span>{vendorSortingBy || $_('Translations.all')}</span>
             </div>
           </div>
         </div>
@@ -141,11 +157,11 @@
         </span>
       </div>
       <div class="SorterDropdownContainer { isSorterActive ? 'SorterOpen' : ''}">
-        <ul class="SorterDropdown" style="list-style-type: none; padding: 10px 0px;margin: 0;">
+        <ul class="SorterDropdown">
           {#each Object.values(vendorMap) as sort}
-            <li class="FilterItem" value=sort>
-              <label class="SorterLabel">
-                <input type="radio" name="checkbox" value=sort checked={vendorSortingBy == sort ? true : false} on:click={() => sortBy(sort)}>
+            <li class="SorterItem" value={sort}>
+              <label class="SorterLabel CustomRadioButton">
+                <input type="radio" name="radio" value={sort} checked={vendorSortingBy == sort ? true : (vendorSortingBy == undefined && sort == $_('Translations.all') ? true : false)} on:click={() => sortBy(sort)}>
                 <span class="SortersCheckmark"></span>
                   <span>{sort}</span>
               </label>
@@ -239,10 +255,11 @@
       width: 100%;
       max-height: fit-content;
       transition: max-height 0.25s ease-in;
+      padding-top: 20px;
     }
   }
 
-  .FilterDropdown {
+  .SorterDropdown {
     width: 100%;
     max-height: 300px;
     display: grid;
@@ -253,6 +270,10 @@
     list-style: none;
     -ms-overflow-style: none;  /* Internet Explorer 10+ */
     scrollbar-width: none;  /* Firefox */
+    list-style-type: none;
+    padding: 10px;
+    margin: 0;
+    box-sizing: border-box;
 
     &::-webkit-scrollbar {
       display: none;  /* Safari and Chrome */
@@ -261,7 +282,7 @@
 
 
   // custom checkmark
-  .FilterItem {
+  .SorterItem {
     position: relative;
     label {
       font-size: 14px;
@@ -280,54 +301,59 @@
       margin-right: 10px;
     }
 
-    &:hover input ~ .SortersCheckmark {
-      background-color: transparent;
-      border: 1px solid #D0046C;
-    }
-
-    input:checked ~ .SortersCheckmark {
-      background-color: #D0046C;
-      border: 1px solid #D0046C;
-    }
-
     .SortersCheckmark {
-      transition: all 0.05s ease-in;
       margin: 0 15px;
     }
 
     /* unchecked checkmark */
-    .SortersCheckmark:after {
-      content: "";
+
+    .CustomRadioButton input[type="radio"] {
       position: absolute;
-      left: 9px;
-      display: none;
+      left: -9999px
     }
 
-    /* checkmark after click */
-    input:checked ~ .SortersCheckmark:after {
-      display: block;
+    .CustomRadioButton input[type="radio"]+span {
+      position: relative;
+      padding: 0 0 0 30px;
+      cursor: pointer
     }
 
-    /* checkmark */
-    .SortersCheckmark: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);
+    .CustomRadioButton input[type="radio"]+span:before {
+      content: '';
+      background: transparent;
+      border: 1px solid #fff;
+      height: 18px;
+      width: 18px;
+      border-radius: 50%;
+      position: absolute;
+      top: -11px;
+      left: -1px;
     }
-  }
 
-  .SorterContainerSplitt {
-    .FilterItemWithLogos {
-      .SortersCheckmark {
-        margin: 0;
+    .CustomRadioButton input[type="radio"]+span:after {
+      content: '';
+      background: var(--emfe-w-color-primary, #D0046C);
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      position: absolute;
+      top: -8px;
+      left: 2px;
+      opacity: 0;
+      transform: scale(2);
+      transition: transform 0.3s linear, opacity 0.3s linear;
+      @supports (-webkit-touch-callout: none) {
+        /* CSS specific to iOS devices */
+        position: absolute;
+        top: -7px;
+        left: 2.5px;
       }
     }
+
+    .CustomRadioButton input[type="radio"]:checked+span:after {
+      opacity: 1;
+      transform: scale(1)
+    }
   }
 
   .SorterLabel {
@@ -338,40 +364,12 @@
       height: 0;
       width: 0;
     }
-
-    .SortersCheckmark {
-      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;
-      }
-    }
   }
 
   .SorterLabel input:checked + span {
     font-weight: 600;
   }
 
-  .FilterCounter {
-    display: inline-flex;
-    margin-left: 10px;
-    min-width: 17px;
-  }
-
   .ClearSorters {
     margin: 20px auto;
     border: 0;
@@ -394,64 +392,28 @@
     }
   }
 
+
+
   @media only screen and (max-width: 768px) {
     .SorterSelector {
       max-width: initial;
+      padding: 7px 16px;
     }
 
-    .FilterDropdownContainer {
+    .SorterDropdownContainer {
       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;
-      }
-    }
-
-    .SorterContainerSplitt {
-      .SorterSelector {
-        padding: 7px;
-        .FilterCounter {
-          margin-left: 0;
-        }
-      }
-      .SorterMainArea svg {
-        margin: 0 10px;
-      }
-      .FilterDropdown {
-        grid-template-columns: 1fr;
-      }
-      .FilterDropdownContainer {
-        top: 42px;
-      }
-      .ClearSorters {
-        padding: 10px 25px;
-      }
-    }
-
-    .SorterLabel .SortersCheckmark {
-      margin-right: 15px;;
-    }
-
-    .FilterItem.FilterItemWithLogos {
+    .SorterDropdown {
       display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .SorterContainerSplitt {
-      .FilterItemWithLogos {
-        .SortersCheckmark {
-          margin: 0 20px 0 0;
+      flex-direction: column;
+      gap: 12px;
+      margin-block-start: 0;
+      .SorterLabel {
+        line-height: 24px;
+        &> * {
+          pointer-events: none; // this fixes ios mobile devices top on selected item from the dropdown
         }
       }
     }

package/src/translations.js

@@ -2,76 +2,136 @@ export const Translations = {
   'en': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'zh': {
     'Translations': {
       'sortby': 'Sort by',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'de': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'it': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'fr': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'es': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'tr': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'ru': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'ro': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'hr': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'hu': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'pl': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'pt': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'sl': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   },
   'sr': {
     'Translations': {
       'sortby': 'Sort by:',
+      'all': 'All',
+      'az': 'A-Z',
+      'newest': 'Newest',
+      'hottest': 'Hottest'
     }
   }
 };