@everymatrix/casino-promotions-slider 1.13.0

package/src/CasinoPromotionsSlider.svelte

@@ -0,0 +1,737 @@
+<svelte:options tag={null} />
+<script lang="ts">
+
+// start implement slider
+  import Siema from 'siema';
+  import { createEventDispatcher, onMount } from 'svelte';
+// end implement slider
+
+  import { getDevice } from 'rvhelper';  // Start implement Fetch data from CMS(api)
+ // Start implement translation
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TRANSLATIONS } from './translations';
+ // End implement translation
+
+ // Start implement Fetch data from CMS(api)
+  export let endpoint:string = "";
+  export let lang:string = '';
+  export let env:string = '';
+  export let userroles: string = '';
+  export let translationurl:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+
+  let customStylingContainer:HTMLElement;
+  
+  let isLoading:boolean = false;
+  let promotions:Array<Object> = [];
+  let promotionsSlider:HTMLElement;
+  let totalDots = 0;
+  // End implement Fetch data from CMS(api)
+
+  // Start implement translation
+  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:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+  
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+  
+  // End implement translation
+  
+  let userAgent:string = window.navigator.userAgent;
+  // Start implement Fetch data from CMS(api)
+  const getCmsData = ():void => {
+    isLoading = true;
+
+    let url:URL = new URL(`${endpoint}/${lang}/promotions?env=${env}`);
+
+    let device = getDevice(userAgent)
+
+    if(device){
+      if(device === 'PC'){
+        url.searchParams.append('device', 'dk')
+      } else if(device === 'iPad' || device === 'iPhone') {
+        url.searchParams.append('device', 'ios')
+      } else {
+        url.searchParams.append('device', 'mtWeb')
+      }
+    }
+
+    fetch(url.href)
+      .then((res: any) => res.json())
+      .then((data: any) => {
+        isLoading = false;
+        promotions = data;
+      })
+      .catch((err: any) => {
+        isLoading = false;
+        console.error(err);
+      });
+  };
+  // End implement Fetch data from CMS(api)
+
+  // Start clientstyling & clientstylingurl functionality 
+  const setClientStyling = () => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.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
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+      });
+  }   // End clientstyling & clientstylingurl functionality 
+  
+
+  // start implement slider
+  let perPage = 4;
+	let loop = true;
+	let autoplay = 4000;
+	let duration = 200;
+	let easing = 'ease-out';
+	let startIndex = 0;
+	let draggable = true;
+	let multipleDrag = true	;
+	let dots = true	;
+	let controls = true;
+	let threshold = 20;
+	let rtl = false;
+	let currentIndex = startIndex;
+	let siema;
+	let controller;
+	let timer;
+	const dispatch = createEventDispatcher();
+  let sliderWidth;
+  const debounce = (func, delay) => {
+		let timer;
+
+		return function () {
+			const context = this;
+			const args = arguments;
+			clearTimeout(timer);
+			timer = setTimeout(() => func.apply(context, args), delay);
+		};
+	};
+
+  const getPerPage = () => {
+    if(sliderWidth>=1536){
+      perPage = 4
+    } else if(sliderWidth>=1024){
+      perPage = 3
+    } else if(sliderWidth>=768){
+      perPage = 2
+    } else if(sliderWidth>=320){
+      perPage = 1
+    }
+    return typeof perPage === 'object' ? perPage : Number(perPage);
+  }
+  
+  const setCurrentPerPage = () => {
+    return controller ? controller.perPage : perPage;
+  }
+
+  const setTotalDots = () => {
+    return controller ? Math.ceil(controller.innerElements.length / currentPerPage) : 0;
+  }
+
+  const getLoop = () => {
+    return promotions.length  <= getPerPage() ? false : true;
+  }
+
+  const setController = () => {
+		if(controller){
+      perPage = currentPerPage = setCurrentPerPage();
+      totalDots = setTotalDots();
+    }
+	};
+	
+	const debouncedSetController = debounce(setController, 300);
+
+  onMount(() => {		
+		window.addEventListener('resize', debouncedSetController);
+		
+		return () => {
+			window.removeEventListener('resize', debouncedSetController);
+		}
+	});
+
+	
+	const initSliders = () => {
+
+    controller = new Siema({
+			selector: siema,
+			  loop: getLoop(),
+  			duration,
+  			easing,
+  			startIndex,
+  			draggable,
+ 			  multipleDrag,
+  			threshold,
+  			rtl,
+			onChange: handleChange,
+      perPage: {
+      320: 1,   // wider than 320px show 1 promo.card
+      768: 2,   // wider than 850px show 2 promo.cards
+      1024: 3,  // wider than 1200px show 3 promo.cards
+      1536: 4,  // wider than 1600px show 4 promo.cards
+  },
+		})
+		
+		if(autoplay) {
+			timer = setInterval(() => (controller.next()), autoplay);
+		}
+		return () => {
+			autoplay && clearInterval(timer)
+			controller.destroy()
+		}
+  }
+	
+	
+	function handleChange () {
+		currentIndex = controller.currentSlide;
+		dispatch('change', {
+			currentSlide: controller.currentSlide,
+			slideCount: controller.innerElements.length
+		} )
+	}
+
+ // Get number of page
+  const getCurrentNumber = (currentIndex, currentPerPage) => {
+    const number = Math.ceil((currentIndex+1) / currentPerPage);
+    return number===0 ? totalDots : number;
+  }
+
+  let modalItem = {};
+  let modalIsOpen = false;
+
+  const handleOpenModal = (item) =>{
+    modalItem = item;
+    modalIsOpen = true;
+  }
+
+  const handleCloseModal = () =>{
+    modalItem = {};
+    modalIsOpen = false;
+  }
+
+  $: lang && setActiveLanguage(); // Start implement translation
+  $: translationurl && setTranslationUrl();  // TranslationUrl functionality
+  $: endpoint && lang && env && getCmsData(); // Start implement Fetch data from CMS(api)
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: currentPerPage = controller ? controller.perPage : perPage;
+	$: totalDots = controller ? Math.ceil(controller.innerElements.length / currentPerPage) : 0;
+  $: promotions && promotionsSlider && initSliders(); // waiting promotions data and slider elements before initial siema module.
+  $: controller && setController();
+  
+</script>
+
+
+<div class="CasinoPromotionsSlider" bind:this={customStylingContainer}>
+
+  <section class="PromotionSlider" bind:clientWidth={sliderWidth}>
+  
+    <h2 class="title">{$_('promotionsTitle')}</h2>
+    <p class="SubTitle">{$_('promotionsSubTitle')}</p>
+  
+    <div class="container"> 
+      <!-- Promotion cards -->
+      {#if isLoading}
+        <p class="text__center w__100"> {$_('promotionsLoading')}</p>
+      {:else}
+        {#if promotions.length > 0}
+        <div class="carousel" bind:this={promotionsSlider}>
+          <div class="slides" bind:this={siema}>
+            {#each promotions as promotion}
+            <div class="d-flex">
+              <div class="PromotionCard">
+                <picture class="PromotionImg" part="PromotionImg">
+                  {#each promotion.image.sources as imgSource}
+                    <source
+                      srcset={imgSource.pictureSource}
+                      media="({imgSource.media})"
+                    />
+                  {/each}
+                  <img src={promotion.image.src} alt={promotion.title}>
+                </picture>
+                <h3 class="PromotionTitle" part="PromotionTitle"> {@html promotion.title}</h3>
+                <div class="description" part="description">{@html promotion.content.split('</div>')[0]}</div>
+                <div class="btnArea">
+                  <a href="javascript:void(0)" class="btn"
+                   on:click={
+                    ()=> {handleOpenModal(promotion)}}
+                    > <b>{$_('promotionsButton')}</b> 
+                    <svg class="arrow" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+                    <style type="text/css">
+                      .st0{fill:#FFFFFF;}
+                    </style>
+                    <path class="st0" d="M9.5,13.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7L12.4,9H1.2C0.9,9,0.7,8.9,0.5,8.7
+                      C0.3,8.5,0.2,8.3,0.2,8s0.1-0.5,0.3-0.7C0.7,7.1,0.9,7,1.2,7h11.1L9.5,4.1C9.3,3.9,9.2,3.7,9.2,3.4c0-0.3,0.1-0.5,0.3-0.7
+                      c0.2-0.2,0.4-0.3,0.7-0.3c0.3,0,0.5,0.1,0.7,0.3l4.6,4.6c0.1,0.1,0.2,0.2,0.2,0.3c0,0.1,0.1,0.2,0.1,0.4s0,0.3-0.1,0.4
+                      c0,0.1-0.1,0.2-0.2,0.3l-4.6,4.6c-0.2,0.2-0.4,0.3-0.7,0.3C10,13.6,9.7,13.5,9.5,13.3z"/>
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+            {/each}
+          </div>
+          
+        {#if totalDots > 1}
+          <div class="numberOfPage">
+            {`${getCurrentNumber(currentIndex, currentPerPage)} / ${totalDots}`}
+          </div> 
+          {/if}
+        </div>
+        {:else}
+            <p class="text__center w__100">{$_('promotionsNone')}</p>
+        {/if}
+      {/if}
+
+    </div>
+  </section>
+  {#if modalIsOpen}
+    <div class="modal__overlay" on:click={()=>handleCloseModal()}></div>
+     <div class="modal">
+      <div class="wrapper">
+        <a href="#" class="IconClose" on:click={()=>handleCloseModal()}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="close_multi"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </a>
+      </div>
+
+          <picture class="modal__img" part="modal-img">
+            {#each modalItem.image.sources as imgSource}
+              <source
+                srcset={imgSource.pictureSource}
+                media="({imgSource.media})"
+              />
+            {/each}
+            <img src={modalItem.image.src} alt={modalItem.title}>
+          </picture>
+          <h3 class="modal__title">{@html modalItem['title']}</h3>
+          <div class="modal__description">{@html modalItem['content']}</div>
+     </div>
+  {/if}
+</div>
+
+
+<style lang="scss">
+  :host {
+    font-family: 'Montserrat', sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  $bp-largest: 1700px;
+  //   1600: 4,  wider than 1600px show 4 promo.card
+  $bp-large: 1300px;
+  //   1200: 3,  wider than 1200px show 3 promo.card
+  $bp-medium: 950px;
+  //   850: 2,  wider than 850px show 2 promo.card
+  $bp-small: 720px;
+  $bp-smallest: 600px;
+  //   320: 1, wider than 320px show 1 promo.card
+
+
+
+  *,
+  *::before,
+  *::after {
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  $color-button: linear-gradient(180deg, #F9253C, #D50866);
+  $color-text: #080843;
+
+  .CasinoPromotionsSlider {
+    height: 590px;
+    background: linear-gradient(180deg, #F3F1FF, #ECE8FF);
+    color: $color-text;
+    text-align: center;
+    container-type: inline-size;
+    container-name: container-slider;
+    
+    
+    .title {
+      margin-bottom: 4px;
+      
+      }
+
+    
+    .SubTitle {
+      margin-bottom: 20px;
+      
+    }
+
+    .sliders {
+      .carousel {
+      position: relative;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+	    }
+    }
+  
+
+    .PromotionSlider {
+      overflow: hidden;
+      position: relative;
+
+      padding: 20px 130px;
+
+    }
+    
+    .container {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .carousel {
+        width: 100%;
+        position: relative;
+      }
+
+      .slides {
+        height: 440px;
+      }
+      
+    }
+    
+    .PromotionCard {
+      height: 420px;
+      background: #fff;
+      box-shadow: 0 4px 6px rgba($color: #000000, $alpha: 0.2);
+      border-radius: 4px;
+      padding: 10px 10px 20px 10px;
+      text-align: center;
+      margin: 0 10px;
+      max-width: 450px;
+      color: $color-text;
+      position: relative;
+      
+      .PromotionImg img {
+        object-fit: cover;
+        border-radius: 4px;
+        width: 100%;
+        height: 214px;
+      }
+      
+      .PromotionTitle {
+        margin-bottom: 4px;
+        text-align: left;
+        font-size: 18px;
+        display: -webkit-box !important;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+      }
+      
+      .description {
+        margin-bottom: 20px;
+        text-align: left;
+        font-size: 14px;
+        line-height: 16px;
+        display: -webkit-box !important;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+      }
+      
+      .arrow {
+        width: 19px;
+        height: 19px;
+        position: absolute;
+        transform: translateX(10px) translateY(-3px);
+      }
+      
+      .btnArea {
+        display: flex;
+        align-items: center;
+        height: 60px;
+        width: 93%;
+        position: absolute;
+        bottom: 0;
+        
+      }
+      
+      .btn:link,
+      .btn:visited {
+        text-transform: uppercase;
+        padding: 10px 60px;
+        background: $color-button;
+        color: #fff;
+        display: inline-block;
+        border-radius: 100px;
+        transition: all .2s;
+        transition-timing-function: ease-out;
+        position: relative;
+        font-size: 14px;
+        justify-content: center;
+        margin: 0 auto;
+        
+      }
+
+      .btn:hover {
+        padding: 12px 62px;
+        
+        .arrow {
+          transform: translateX(20px) translateY(-3px);
+          transition: all .2s;
+        }
+      }
+    }
+
+    .text__center {
+      text-align: center;
+    }
+
+    .w__100 {
+      width: 100%;
+    }
+    
+    .d-flex{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+  
+
+    .numberOfPage {
+      color: #D50866;
+      font-size: 18px;
+      margin-top: 15px;
+    }
+
+    // MODAL //////////////
+    .modal {
+      background: #fff;
+      box-shadow: 0 4px 6px rgba($color: #000000, $alpha: 0.2);
+      border-radius: 4px;
+      padding: 40px;
+      max-height: 90%;
+      width: 1000px;
+      color: $color-text;
+      position: absolute;
+      z-index: 10;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+
+      .wrapper {
+        position: sticky;
+        top: 0;
+        right: 0;
+        z-index: 10;
+      }
+
+      .IconClose {
+        width: 24px;
+        height: 24px;
+        color: #888;
+        position: absolute;
+        top: -30px;
+        right: -30px;
+        z-index: 20;
+      }
+
+        .IconClose:hover,
+        .IconClose:focus {
+          cursor: pointer;
+          color: #222;
+        }
+      }
+
+      .modal::-webkit-scrollbar {
+      display: none;}
+
+      .modal__img {
+        display: block;
+        position: relative;
+
+        img {
+          object-fit: cover;
+          border-radius: 4px;
+          max-height: 300px;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    
+      
+      .modal__title {
+        margin-bottom: 4px;
+        text-align: left;
+        font-size: 18px;
+
+      }
+
+      .modal__description {
+          margin-bottom: 20px;
+          text-align: left;
+          font-size: 14px;
+          line-height: 16px;
+
+      }
+
+      .modal__overlay{
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0, 0, 0, 0.4);
+        z-index: 5;
+      }
+    }
+
+
+      .CasinoPromotionsSlider {
+        @container container-slider  (max-width: 1700px) {
+          .PromotionSlider {
+            padding: 20px 100px;
+          }
+        }
+      }
+      
+      .CasinoPromotionsSlider {
+      @container container-slider (max-width: 1300px) {
+          .title {
+            font-size: 22px;
+          }
+
+          .SubTitle {
+            font-size: 15px;
+          }
+
+          .PromotionSlider {
+            padding: 20px 80px;
+          }
+
+          .PromotionTitle {
+            font-size: 16px;
+          }
+
+          .description {
+           font-size: 13px;
+          }
+
+          .btn:link,
+          .btn:visited { 
+            font-size: 13px;
+          }
+
+          .numberOfPage  {
+            font-size: 16px;
+          }
+
+          .modal {
+            width: 900px;
+          }
+
+          .modal__title {
+            font-size: 16px;
+          }
+
+          .modal__description {
+            font-size: 13px;
+          }
+        }
+      }
+
+      .CasinoPromotionsSlider {  
+      @container container-slider (max-width: 950px) {
+          .PromotionSlider {
+            padding: 20px 20px;
+          }
+
+          .modal {
+            padding: 30px;
+            width: 600px;
+          }
+
+          .modal .IconClose {
+            width: 20px;
+            height: 20px;
+            top: -24px;
+            right: -24px;
+          }
+        }
+      }
+
+      .CasinoPromotionsSlider {  
+        @container container-slider (max-width: 720px) {
+          .PromotionSlider {
+            padding: 20px 10px;
+          }
+
+          .modal {
+            padding: 30px;
+            width: 500px;
+          }
+        
+        }
+      }
+
+      .CasinoPromotionsSlider {  
+        @container container-slider (max-width: 600px) {
+          .modal {
+            padding: 26px;
+            width: 90%;
+          }
+
+          .modal .IconClose {
+            width: 20px;
+            height: 20px;
+            top: -20px;
+            right: -20px;
+          }
+        }
+      }
+
+</style>