@everymatrix/casino-filter-modal 0.0.367 → 0.0.368

package/src/CasinoFilterModal.svelte

@@ -1,204 +1,204 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import { isMobile, checkSession } from 'rvhelper';
-
-  export let show:boolean = false;
-  export let duration:number = 350;
-  export let session:string = '';
-  export let userid:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let endpoint:string = '';
-  export let sessioncheck:string = 'true';
-
-  let hasErrors:boolean = false;
-  let error:string = '';
-  let isLoggedIn:boolean = false;
-  let sessionID:string = '';
-  let playerID:string = '';
-  let userAgent:string = window.navigator.userAgent;
-  let isLoading:boolean = true;
-  let mobileView:boolean = false;
-  let modalElement:HTMLElement;
-  let customStylingContainer:HTMLElement;
-  let width:string;
-  let height:string;
-
-  const close = () => {
-    show = false;
-
-    window.postMessage({ type: 'FiltersModalClosed' }, window.location.href);
-    window.postMessage({ type: 'EnableScroll'}, window.location.href);
-  };
-
-  const messageHandler = (e:any) => {
-    if (e.data.type === 'ShowFilterModal') {
-      show = true;
-
-      window.postMessage({ type: 'FiltersModal', ven: e.data.ven }, window.location.href);
-      window.postMessage({ type: 'DisableScroll'}, window.location.href);
-    }
-
-    if (e.data.type === 'ApplyFilters') {
-      close();
-
-      setTimeout(() => {
-        window.postMessage({ type: 'ModalLoader' }, window.location.href);
-      }, 500);
-    }
-  }
-
-  const setSession = () => {
-    if (sessioncheck == "true") {
-      checkSession(endpoint, session).then((res:any) => {
-        sessionID = res.Guid;
-        playerID = res.UserID;
-        isLoggedIn = true;
-      }, (err:any) => {
-        isLoggedIn = false;
-        console.error('err on session', err);
-      });
-    } else {
-      sessionID = session;
-      isLoggedIn = true;
-    }
-  }
-
-  const setClientStyling = () => {
-    let sheet = document.createElement('style');
-
-    sheet.innerHTML = clientstyling;
-
-    if (show) {
-      setTimeout(() => { modalElement.appendChild(sheet); });
-    }
-  }
-
-  const setClientStylingURL = () => {
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(new URL(clientstylingurl))
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        customStylingContainer.appendChild(cssFile);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    if (isMobile(userAgent)) {
-      mobileView = true;
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: session && userid && endpoint && setSession();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-  $: show && clientstylingurl && setClientStylingURL();
-</script>
-
-<div bind:this={customStylingContainer} part="CustomStylingContainer">
-  {#if show}
-    <div
-      transition:fade="{{ transitionDuration: duration }}"
-      bind:this={modalElement}
-      bind:clientWidth={width}
-      bind:clientHeight={height}
-      class="FilterModalWindow"
-      id="FilterModal"
-      part="FilterModalWindow">
-
-      <div class="FilterModalContainer {mobileView ? 'FilterModalMobileContainer' : ''}" part="FilterModalContainer {mobileView ? 'FilterModalMobileContainer' : ''}">
-        <span class="FilterModalCloseBtn" part="FilterModalCloseBtn" on:click={close} role="button">
-          <slot name="close">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-          </slot>
-        </span>
-
-        <slot />
-      </div>
-
-    </div>
-  {/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;
-    box-sizing: border-box;
-  }
-
-  .FilterModalWindow {
-    display: flex;
-    position: fixed;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, .9);
-    .FilterModalContainer {
-      width: 90%;
-      max-width: 880px;
-      padding: 60px;
-      border-top: 3px solid var(--emfe-w-color-secondary, #FD2839);
-      border-radius: 5px;
-      position: relative;
-      background: var(--emfe-w-color-white, #FFFFFF);
-    }
-    .FilterModalCloseBtn {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      top: 0;
-      right: 0;
-      margin: 15px;
-      border-radius: 50%;
-      color: var(--emfe-w-color-secondary, #FD2839);
-      background: rgba(255, 255, 255, .1);
-      cursor: pointer;
-      transition: all 150ms ease-in-out;
-
-      svg {
-        width: 36px;
-        height: 36px;
-      }
-
-      &:hover {
-        background: rgba(255, 255, 255, .2);
-      }
-    }
-    .FilterModalMobileContainer {
-      padding: 10px;
-      border-top: none;
-      .FilterModalCloseBtn {
-        margin: 10px;
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-  }
-
-
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { isMobile, checkSession } from 'rvhelper';
+
+  export let show:boolean = false;
+  export let duration:number = 350;
+  export let session:string = '';
+  export let userid:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let endpoint:string = '';
+  export let sessioncheck:string = 'true';
+
+  let hasErrors:boolean = false;
+  let error:string = '';
+  let isLoggedIn:boolean = false;
+  let sessionID:string = '';
+  let playerID:string = '';
+  let userAgent:string = window.navigator.userAgent;
+  let isLoading:boolean = true;
+  let mobileView:boolean = false;
+  let modalElement:HTMLElement;
+  let customStylingContainer:HTMLElement;
+  let width:string;
+  let height:string;
+
+  const close = () => {
+    show = false;
+
+    window.postMessage({ type: 'FiltersModalClosed' }, window.location.href);
+    window.postMessage({ type: 'EnableScroll'}, window.location.href);
+  };
+
+  const messageHandler = (e:any) => {
+    if (e.data.type === 'ShowFilterModal') {
+      show = true;
+
+      window.postMessage({ type: 'FiltersModal', ven: e.data.ven }, window.location.href);
+      window.postMessage({ type: 'DisableScroll'}, window.location.href);
+    }
+
+    if (e.data.type === 'ApplyFilters') {
+      close();
+
+      setTimeout(() => {
+        window.postMessage({ type: 'ModalLoader' }, window.location.href);
+      }, 500);
+    }
+  }
+
+  const setSession = () => {
+    if (sessioncheck == "true") {
+      checkSession(endpoint, session).then((res:any) => {
+        sessionID = res.Guid;
+        playerID = res.UserID;
+        isLoggedIn = true;
+      }, (err:any) => {
+        isLoggedIn = false;
+        console.error('err on session', err);
+      });
+    } else {
+      sessionID = session;
+      isLoggedIn = true;
+    }
+  }
+
+  const setClientStyling = () => {
+    let sheet = document.createElement('style');
+
+    sheet.innerHTML = clientstyling;
+
+    if (show) {
+      setTimeout(() => { modalElement.appendChild(sheet); });
+    }
+  }
+
+  const setClientStylingURL = () => {
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(new URL(clientstylingurl))
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        customStylingContainer.appendChild(cssFile);
+      });
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    if (isMobile(userAgent)) {
+      mobileView = true;
+    }
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: session && userid && endpoint && setSession();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+  $: show && clientstylingurl && setClientStylingURL();
+</script>
+
+<div bind:this={customStylingContainer} part="CustomStylingContainer">
+  {#if show}
+    <div
+      transition:fade="{{ transitionDuration: duration }}"
+      bind:this={modalElement}
+      bind:clientWidth={width}
+      bind:clientHeight={height}
+      class="FilterModalWindow"
+      id="FilterModal"
+      part="FilterModalWindow">
+
+      <div class="FilterModalContainer {mobileView ? 'FilterModalMobileContainer' : ''}" part="FilterModalContainer {mobileView ? 'FilterModalMobileContainer' : ''}">
+        <span class="FilterModalCloseBtn" part="FilterModalCloseBtn" on:click={close} role="button">
+          <slot name="close">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+          </slot>
+        </span>
+
+        <slot />
+      </div>
+
+    </div>
+  {/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;
+    box-sizing: border-box;
+  }
+
+  .FilterModalWindow {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, .9);
+    .FilterModalContainer {
+      width: 90%;
+      max-width: 880px;
+      padding: 60px;
+      border-top: 3px solid var(--emfe-w-color-secondary, #FD2839);
+      border-radius: 5px;
+      position: relative;
+      background: var(--emfe-w-color-white, #FFFFFF);
+    }
+    .FilterModalCloseBtn {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      right: 0;
+      margin: 15px;
+      border-radius: 50%;
+      color: var(--emfe-w-color-secondary, #FD2839);
+      background: rgba(255, 255, 255, .1);
+      cursor: pointer;
+      transition: all 150ms ease-in-out;
+
+      svg {
+        width: 36px;
+        height: 36px;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, .2);
+      }
+    }
+    .FilterModalMobileContainer {
+      padding: 10px;
+      border-top: none;
+      .FilterModalCloseBtn {
+        margin: 10px;
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+
+
+</style>

package/src/index.ts

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

package/stories/CasinoFilterModal.stories.js

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

package/tsconfig.json

@@ -1,6 +1,6 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}