@everymatrix/casino-tournaments-filter-controller 0.0.367 → 0.0.368

package/src/CasinoTournamentsFilterController.svelte

@@ -1,244 +1,244 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice, isMobile } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { TournamentsFilterTranslations } from './translations';
-
-  // Array as string, without empty spaces (ex: "All,Scheduled,Ongoing,Finished");
-  export let filters:string = '';
-  export let activefilters:string = '';
-
-  let hasErrors:boolean = false;
-  let filterItems:any = [];
-  let filterNumber:number = 0;
-  let activeIndexes:Array<Number> = new Array(100);
-  let allActive:boolean = true;
-  let userAgent:string = window.navigator.userAgent;
-  let shownStatus:string = '';
-
-  Object.keys(TournamentsFilterTranslations).forEach((item:any) => {
-    addNewMessages(item, TournamentsFilterTranslations[item]);
-  });
-
-  const makeButtonActive = (item:String, index:Number) => {
-    if (index == 0) {
-      allActive = true;
-      activeIndexes = new Array(filterNumber);
-
-      window.postMessage({ type: 'TournamentsFiltersSelected', filters: ['All']});
-    } else {
-      allActive = false;
-
-      if (activeIndexes[index] == 1) {
-        activeIndexes[index] = 0;
-
-        if (activeIndexes.indexOf(1) == -1) {
-          allActive = true;
-        }
-      } else {
-        activeIndexes[index] = 1;
-      }
-
-      if (activeIndexes.indexOf(1) == -1) {
-        window.postMessage({ type: 'TournamentsFiltersSelected', filters: ['All']});
-      } else {
-        let message:Array<String> = [];
-
-        for (let i = 0; i < filterItems.length; i++) {
-          if (activeIndexes[i] == 1) {
-            message.push(filterItems[i]);
-          }
-        }
-
-        window.postMessage({ type: 'TournamentsFiltersSelected', filters: message });
-      }
-    }
-  }
-
-  const matchFilter = (filter:string) => {
-    if (filter == 'Scheduled') {
-      return $_('tournamentsFilter.scheduled');
-    }
-
-    if (filter == 'Ongoing') {
-      return $_('tournamentsFilter.ongoing');
-    }
-
-    if (filter == 'Finished') {
-      return $_('tournamentsFilter.finished');
-    }
-
-    if (filter == 'All') {
-      return $_('tournamentsFilter.all');
-    }
-  }
-
-  const processFilters = () => {
-    filterItems = filters.split(',');
-    filterNumber = filterItems.length;
-  }
-
-  const setActiveFilters = () => {
-    let items = activefilters.split(',');
-
-    activeIndexes = new Array(filterNumber);
-
-    if (items.indexOf('All') != -1) {
-      allActive = true;
-    } else {
-      allActive = false;
-
-      items.forEach((item) => {
-        let index = filterItems.indexOf(item);
-
-        if (index > 0) {
-          $: activeIndexes[index] = 1;
-        }
-      });
-    }
-  }
-
-  $: filters && processFilters();
-  $: activefilters && setActiveFilters();
-</script>
-<div class="FiltersController { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FiltersController { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
-  {#if filterItems.length > 0}
-    <ul class="FiltersList { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FiltersList { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
-      <li class="FiltersTitle { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FiltersTitle { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
-        {$_('tournamentsFilter.tournaments')}:
-      </li>
-      {#each filterItems as filter, index}
-        <li class="FiltersItem" part="FiltersItem" on:click={() => makeButtonActive(filter, index)}>
-          <button class="{activeIndexes[index] == 1 || (allActive && index == 0) ? 'Active' : ''} { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="{activeIndexes[index] == 1 || (allActive && index == 0) ? 'Active' : ''} { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
-            {#if activeIndexes[index] == 1 || (allActive && index == 0)}
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" part="bi bi-check" viewBox="0 0 16 16">
-                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
-              </svg>
-            {/if}
-            <div class="FilterButton { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FilterButton { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
-              {#if filter == 'Scheduled'}
-                {$_('tournamentsFilter.scheduled')}
-              {/if}
-              {#if filter == 'Ongoing'}
-                {$_('tournamentsFilter.ongoing')}
-              {/if}
-              {#if filter == 'Finished'}
-                {$_('tournamentsFilter.finished')}
-              {/if}
-              {#if filter == 'All'}
-                {$_('tournamentsFilter.all')}
-              {/if}
-            </div>
-          </button>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>
-
-
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  ul {
-    display: flex;
-    gap: 10px;
-    &.MobileClass {
-      padding-top: 21px;
-    }
-  }
-
-  li:first-child {
-    height: 100%;
-    position: realtive;
-    padding: 1em 0;
-    margin: 0;
-    font-size: 14px;
-    text-align:center;
-    letter-spacing: 0px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    opacity: 1;
-  }
-
-  li.MobileClass {
-    position: absolute;
-    left: 10px;
-    top: -15px;
-    font-size: 14px;
-    height: auto;
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    background-color: transparent;
-    justify-content: center;
-    padding: 10px;
-    height: 40px;
-    border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-    min-width: 40px;
-    text-align: center;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    &.MobileClass {
-      height: 30px;
-    }
-  }
-
-  button:hover {
-    background-color: var(--emfe-w-color-gray-100, #E6E6E6);
-    border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-    color: var(--emfe-w-color-black, #000000);
-    cursor: pointer;
-  }
-
-  .FiltersController {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 20px;
-    &.MobileClass {
-      justify-content: flex-start;
-      margin-bottom: 10px;
-    }
-
-    .FilterButton {
-      font-size: 14px;
-      letter-spacing: 0px;
-      opacity: 1;
-      text-transform: uppercase;
-      &.MobileClass {
-        font-size: 10px;
-      }
-    }
-
-    .Active {
-      background-color: var(--emfe-w-color-gray-300, #58586B);
-      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-    }
-
-    .Active:hover {
-      background-color: var(--emfe-w-color-gray-300, #58586B);
-      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-    }
-
-  }
-
-
-
-
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice, isMobile } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TournamentsFilterTranslations } from './translations';
+
+  // Array as string, without empty spaces (ex: "All,Scheduled,Ongoing,Finished");
+  export let filters:string = '';
+  export let activefilters:string = '';
+
+  let hasErrors:boolean = false;
+  let filterItems:any = [];
+  let filterNumber:number = 0;
+  let activeIndexes:Array<Number> = new Array(100);
+  let allActive:boolean = true;
+  let userAgent:string = window.navigator.userAgent;
+  let shownStatus:string = '';
+
+  Object.keys(TournamentsFilterTranslations).forEach((item:any) => {
+    addNewMessages(item, TournamentsFilterTranslations[item]);
+  });
+
+  const makeButtonActive = (item:String, index:Number) => {
+    if (index == 0) {
+      allActive = true;
+      activeIndexes = new Array(filterNumber);
+
+      window.postMessage({ type: 'TournamentsFiltersSelected', filters: ['All']});
+    } else {
+      allActive = false;
+
+      if (activeIndexes[index] == 1) {
+        activeIndexes[index] = 0;
+
+        if (activeIndexes.indexOf(1) == -1) {
+          allActive = true;
+        }
+      } else {
+        activeIndexes[index] = 1;
+      }
+
+      if (activeIndexes.indexOf(1) == -1) {
+        window.postMessage({ type: 'TournamentsFiltersSelected', filters: ['All']});
+      } else {
+        let message:Array<String> = [];
+
+        for (let i = 0; i < filterItems.length; i++) {
+          if (activeIndexes[i] == 1) {
+            message.push(filterItems[i]);
+          }
+        }
+
+        window.postMessage({ type: 'TournamentsFiltersSelected', filters: message });
+      }
+    }
+  }
+
+  const matchFilter = (filter:string) => {
+    if (filter == 'Scheduled') {
+      return $_('tournamentsFilter.scheduled');
+    }
+
+    if (filter == 'Ongoing') {
+      return $_('tournamentsFilter.ongoing');
+    }
+
+    if (filter == 'Finished') {
+      return $_('tournamentsFilter.finished');
+    }
+
+    if (filter == 'All') {
+      return $_('tournamentsFilter.all');
+    }
+  }
+
+  const processFilters = () => {
+    filterItems = filters.split(',');
+    filterNumber = filterItems.length;
+  }
+
+  const setActiveFilters = () => {
+    let items = activefilters.split(',');
+
+    activeIndexes = new Array(filterNumber);
+
+    if (items.indexOf('All') != -1) {
+      allActive = true;
+    } else {
+      allActive = false;
+
+      items.forEach((item) => {
+        let index = filterItems.indexOf(item);
+
+        if (index > 0) {
+          $: activeIndexes[index] = 1;
+        }
+      });
+    }
+  }
+
+  $: filters && processFilters();
+  $: activefilters && setActiveFilters();
+</script>
+<div class="FiltersController { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FiltersController { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
+  {#if filterItems.length > 0}
+    <ul class="FiltersList { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FiltersList { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
+      <li class="FiltersTitle { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FiltersTitle { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
+        {$_('tournamentsFilter.tournaments')}:
+      </li>
+      {#each filterItems as filter, index}
+        <li class="FiltersItem" part="FiltersItem" on:click={() => makeButtonActive(filter, index)}>
+          <button class="{activeIndexes[index] == 1 || (allActive && index == 0) ? 'Active' : ''} { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="{activeIndexes[index] == 1 || (allActive && index == 0) ? 'Active' : ''} { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
+            {#if activeIndexes[index] == 1 || (allActive && index == 0)}
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" part="bi bi-check" viewBox="0 0 16 16">
+                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+              </svg>
+            {/if}
+            <div class="FilterButton { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }" part="FilterButton { isMobile(userAgent) ? 'MobileClass' : 'Non-MobileClass/empty' }">
+              {#if filter == 'Scheduled'}
+                {$_('tournamentsFilter.scheduled')}
+              {/if}
+              {#if filter == 'Ongoing'}
+                {$_('tournamentsFilter.ongoing')}
+              {/if}
+              {#if filter == 'Finished'}
+                {$_('tournamentsFilter.finished')}
+              {/if}
+              {#if filter == 'All'}
+                {$_('tournamentsFilter.all')}
+              {/if}
+            </div>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  ul {
+    display: flex;
+    gap: 10px;
+    &.MobileClass {
+      padding-top: 21px;
+    }
+  }
+
+  li:first-child {
+    height: 100%;
+    position: realtive;
+    padding: 1em 0;
+    margin: 0;
+    font-size: 14px;
+    text-align:center;
+    letter-spacing: 0px;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    opacity: 1;
+  }
+
+  li.MobileClass {
+    position: absolute;
+    left: 10px;
+    top: -15px;
+    font-size: 14px;
+    height: auto;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    justify-content: center;
+    padding: 10px;
+    height: 40px;
+    border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+    min-width: 40px;
+    text-align: center;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    &.MobileClass {
+      height: 30px;
+    }
+  }
+
+  button:hover {
+    background-color: var(--emfe-w-color-gray-100, #E6E6E6);
+    border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+    color: var(--emfe-w-color-black, #000000);
+    cursor: pointer;
+  }
+
+  .FiltersController {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+    &.MobileClass {
+      justify-content: flex-start;
+      margin-bottom: 10px;
+    }
+
+    .FilterButton {
+      font-size: 14px;
+      letter-spacing: 0px;
+      opacity: 1;
+      text-transform: uppercase;
+      &.MobileClass {
+        font-size: 10px;
+      }
+    }
+
+    .Active {
+      background-color: var(--emfe-w-color-gray-300, #58586B);
+      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+    }
+
+    .Active:hover {
+      background-color: var(--emfe-w-color-gray-300, #58586B);
+      border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+    }
+
+  }
+
+
+
+
+</style>

package/src/i18n.js

@@ -1,27 +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 };
+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

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