@teddy-dev/frontend 1.0.1

package/components/mc-splash-controller.js

@@ -0,0 +1,32 @@
+await loadComponent('./components/mc-splash-link.js', false);
+class McSplashController extends HTMLElement {
+
+  connectedCallback() {
+    if (!this.dataset.homeLink) {
+      console.warn("McSplashController: 'data-home-link' attribute is required.");
+      return;
+    }
+    this.checkHomeLinks();
+    this.checkLinks();
+  }
+
+  // controlla se siamo in una pagina impostata come home
+  checkHomeLinks = () => {
+    const links = JSON.parse(localStorage.getItem(McSplashLink.HOME_KEY)) || [];
+    if (links.find(link => link == location.pathname)) {
+      localStorage.setItem(McSplashLink.STORAGE_KEY, location.pathname);
+    }
+  }
+
+  // sostituisce tutti i link alla home con il link salvato
+  checkLinks = () => {
+    const savedLink = localStorage.getItem(McSplashLink.STORAGE_KEY);
+    if (!savedLink) return;
+    document.querySelectorAll(`a[href="${this.dataset.homeLink}"]`).forEach(link => {
+      link.href = savedLink || this.dataset.homeLink;
+    });
+  }
+}
+
+customElements.define("mc-splash-controller", McSplashController);
+window.McSplashController = McSplashController;

package/components/mc-splash-link.js

@@ -0,0 +1,65 @@
+await loadComponent('./components/mc-loader.js', false);
+class McSplashLink extends HTMLElement {
+
+  static STORAGE_KEY = "splash-visited-link";
+  static HOME_KEY = "splash-home-link";
+
+  connectedCallback() {
+    if (!this.dataset.link) {
+      console.warn("McSplashLink: 'data-link' attribute is required.");
+      return;
+    }
+    this.setHomeLinks();
+    this.addEventListener("click", this.handleClick.bind(this));
+    this.checkAndRedirect();
+  }
+
+  setHomeLinks = () => {
+    const links = JSON.parse(localStorage.getItem(McSplashLink.HOME_KEY)) || [];
+    if (!links.find(link => link == this.dataset.link)) {
+      links.push(this.dataset.link);
+      localStorage.setItem(McSplashLink.HOME_KEY, JSON.stringify(links));
+    }
+  }
+
+  checkAndRedirect = () => {
+    const savedLink = localStorage.getItem(McSplashLink.STORAGE_KEY);
+    if (savedLink) {
+      window.location.href = savedLink;
+    } else {
+      this.callExternal(this.hideLoader);
+    }
+  }
+
+  hideLoader = () => {
+    const loader = document.querySelector(this.dataset.loader);
+    if (loader) {
+      loader.deactivate();
+    }
+  }
+
+  callExternal = (callback) => {
+    setTimeout(() => {
+      if(customElements.get('mc-loader')){
+        callback(); return;
+      } 
+      
+      customElements.whenDefined('mc-loader').then(() => {
+        callback();
+      });
+    });
+  }
+  
+  handleClick = (event) => {
+    if (!this.dataset.link) {
+      console.warn("McSplashLink: 'data-link' attribute is required on column.");
+      return;
+    }
+    event.preventDefault();
+    localStorage.setItem(McSplashLink.STORAGE_KEY, this.dataset.link);
+    window.location.href = this.dataset.link;
+  }
+}
+
+customElements.define("mc-splash-link", McSplashLink);
+window.McSplashLink = McSplashLink;

package/components/mc-stoq.js

@@ -0,0 +1,30 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McStoq extends McElement {
+  
+  connectedCallback() {
+    this.addEventListener('click', this.showModal.bind(this));
+  }
+
+  showModal = () => {
+    if(!this.dataset.productId || !this.dataset.variant) {
+      console.error('McStoq: Product ID or Variant not set on mc-stoq');
+      return;
+    }
+    if(!window._RestockRocket) {
+      console.error('McStoq: RestockRocket is not loaded');
+      return;
+    }
+    const productData = {
+      id: this.dataset.productId,
+      variants: [{ id: this.dataset.variant, available: false }],
+    };
+    window._RestockRocket.openModal(productData, this.dataset.variant);
+  }
+
+}
+if(!customElements.get('mc-stoq')){
+  customElements.define('mc-stoq', McStoq);
+}
+window.McStoq = McStoq;
+export default McStoq;

package/components/mc-swiper.js

@@ -0,0 +1,333 @@
+import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
+await loadComponent('./components/mc-element.js', false);
+
+class McSwiper extends McElement {
+  options; swiper;
+  paginationSelector = '.swiper-pagination';
+  navigationPrev = '.swiper-button-prev';
+  navigationNext = '.swiper-button-next';
+  scrollbarSelector = '.swiper-scrollbar';
+  
+  connectedCallback() {
+    if(this.find != undefined){
+      this.swiper.destroy();
+    }
+    const breakpoints = this.querySelectorAll('mc-swiper-breakpoint');
+    if(breakpoints.length <= 0){
+      if(this.dataset.noinit === undefined || this.dataset.noinit === 'false')
+        this.init();
+    }
+  }
+
+  init = () => {
+    this.options = { };
+    this.paginationSelector = this.dataset.paginationSelector || this.paginationSelector;
+    this.navigationPrev = this.dataset.navigationPrev || this.navigationPrev;
+    this.navigationNext = this.dataset.navigationNext || this.navigationNext;
+    this.scrollbarSelector = this.dataset.scrollbarSelector || this.scrollbarSelector;
+
+    this.setNavigation(this.dataset.navigation !== undefined && this.dataset.navigation !== 'false');
+    this.setPagination(this.dataset.pagination !== undefined && this.dataset.pagination !== 'false');
+    this.setDynamicBullets(this.dataset.dynamicBullets !== undefined && this.dataset.dynamicBullets !== 'false');
+    this.setPaginationType(this.dataset.paginationType);
+    this.setPaginationCustom(this.dataset.paginationCustom);
+    this.setScrollbar(this.dataset.scrollbar !== undefined && this.dataset.scrollbar !== 'false');
+    this.setMousewheel(this.dataset.mousewheel !== undefined && this.dataset.mousewheel !== 'false');
+    this.setScrollbarHide(this.dataset.scrollbarHide !== undefined && this.dataset.scrollbarHide !== 'false');
+    this.setDirection(this.dataset.direction);
+    this.setSpaceBetween(this.dataset.spaceBetween);
+    this.setSlides(this.dataset.slides);
+    this.setCentered(this.dataset.centered !== undefined && this.dataset.centered !== 'false');
+    this.setFree(this.dataset.free !== undefined && this.dataset.free !== 'false');
+    this.setLoop(this.dataset.loop !== undefined && this.dataset.loop !== 'false');
+    this.setAutoplay(this.dataset.autoplay);
+    this.setAutoplayDisableInteraction(this.dataset.autoplayDisableInteraction !== undefined && this.dataset.autoplayDisableInteraction !== 'false');
+    this.setWatchProgress(this.dataset.watchProgress !== undefined && this.dataset.watchProgress !== 'false');
+    this.setThumbs(this.dataset.thumbs);
+    this.setInitialSlide(this.dataset.initialSlide);
+    this.setSlideGroups(this.dataset.slideGroups);
+    this.setAutoplayProgress(this.dataset.autoplayProgress);
+    this.setLoopAddBlankSlides(this.dataset.loopAddBlankSlides !== undefined && this.dataset.loopAddBlankSlides !== 'false');
+    this.setCssMode(this.dataset.cssMode !== undefined && this.dataset.cssMode !== 'false');
+    this.setLoopAdditionalSlides(this.dataset.loopAdditionalSlides);
+    this.setSpeed(this.dataset.speed);
+    this.setAllowTouchMove(this.dataset.allowTouchMove);
+    this.setBreakpoints();
+    if(this.dataset.log)
+      console.log('McSwiper options:', this.options);
+    this.swiper = new Swiper(this, this.options);  
+  }
+
+  setOptions = (options) => {
+    this.options = options;
+    this.swiper = new Swiper(this, this.options);
+  }
+
+  setInitialSlide = (initialSlide) => {
+    const s = parseInt(initialSlide);
+    if(!isNaN(s)){
+      this.options.initialSlide = s;
+    }
+  }
+
+  setAutoplayProgress = (autoplayProgress) => {
+    if(autoplayProgress) {
+      const progressCircle = document.querySelector(autoplayProgress);
+      if(progressCircle) {
+        this.options.on = {
+          autoplayTimeLeft(s, time, progress) {
+            progressCircle.style.setProperty("--progress", 1 - progress);
+          }
+        }
+      }
+    } 
+  }
+  
+  setSpeed = (speed) => {
+    const s = parseInt(speed);
+    if(!isNaN(s)){
+      this.options.speed = s;
+    }
+  }
+
+  setCssMode = (cssMode) => {
+    if(cssMode) {
+      this.options.cssMode = true;
+    }
+  }
+
+  setSlideGroups = (slideGroups) => {
+    const s = parseInt(slideGroups);
+    if(!isNaN(s)){
+      this.options.slidesPerGroup = s;
+    }
+  }  
+
+  setNavigation = (navigation) => {
+    if(navigation) {
+      this.options.navigation = {
+        nextEl: this.navigationNext,
+        prevEl: this.navigationPrev
+      }
+    } 
+  }
+
+  setPagination = (pagination) => {
+    if(pagination) {
+      this.options.pagination = {
+        el: this.paginationSelector,
+        clickable: true
+      }
+    } 
+  }
+
+  setDynamicBullets = (dynamicBullets) => {
+    if(dynamicBullets) {
+      this.options.pagination = this.options.pagination || {};
+      this.options.pagination.dynamicBullets = true;
+    } 
+  }
+
+  setPaginationType = (type) => {
+    if(type != undefined){
+      this.options.pagination = this.options.pagination || {};
+      this.options.pagination.type = type;
+    }
+  }  
+
+  setPaginationCustom = (custom) => {
+    if(custom != undefined){
+      this.options.pagination = this.options.pagination || {};
+      const parts = custom.split(',');
+      this.options.pagination.renderBullet = (i, c) => {
+        return `<span class="${c}">${parts[i]}</span>`;
+      } ;
+    }
+  }
+
+  setScrollbar = (scrollbar) => {
+    if(scrollbar) {
+      this.options.scrollbar = {
+        el: this.scrollbarSelector,
+        draggable: true
+      }
+    } 
+  }
+
+  setScrollbarHide = (hide) => {
+    if(hide) {
+      this.options.scrollbar = this.options.scrollbar || {};
+      this.options.scrollbar.hide = true;
+    } 
+  }
+
+  setDirection = (direction) => {
+    if(direction != undefined){
+      this.options.direction = direction;
+    }
+  }  
+
+  setSpaceBetween = (spaceBetween) => {
+    const s = parseInt(spaceBetween);
+    if(!isNaN(s)){
+      this.options.spaceBetween = s;
+    }
+  }  
+
+  setSlides = (slides) => {
+    if(slides != undefined){
+      this.options.slidesPerView = slides;
+    }
+  } 
+
+  setCentered = (centered) => {
+    if(centered) {
+      this.options.centeredSlides = true;
+    } 
+  }
+
+  setMousewheel = (mousewheel) => {
+    if(mousewheel) {
+      this.options.mousewheel = true;
+    } 
+  }
+
+  setFree = (free) => {
+    if(free) {
+      this.options.freeMode = true;
+    } 
+  }
+
+  setLoop = (loop) => {
+    if(loop) {
+      this.options.loop = true;
+    } 
+  }
+
+  setAutoplay = (autoplay) => {
+    const s = parseInt(autoplay);
+    if(!isNaN(s)){
+      this.options.autoplay = {
+        delay: s
+      };
+    }
+  }  
+
+  setAutoplayDisableInteraction = (autoplayDisableInteraction) => {
+    if(autoplayDisableInteraction){
+      this.options.autoplay = this.options.autoplay || {};
+      this.options.autoplay.disableOnInteraction = autoplayDisableInteraction;
+    }
+  }
+
+  setLoopAddBlankSlides = (loopAddBlankSlides) => {
+    if(this.options.loop)
+      this.options.loopAddBlankSlides = loopAddBlankSlides;
+  }
+
+  setAllowTouchMove = (allowTouchMove) => {
+    if(allowTouchMove == 'false')
+      this.options.allowTouchMove = false;
+  }
+
+  setWatchProgress = (watchProgress) => {
+    if(watchProgress) {
+      this.options.watchSlidesProgress = true;
+    } 
+  }
+  
+  setLoopAdditionalSlides = (loopAdditionalSlides) => {
+    const s = parseInt(loopAdditionalSlides);
+    if(!isNaN(s)){
+      this.options.loopAdditionalSlides = s;
+    }
+  }
+
+  setThumbs = (selector) => {
+    const thumbs = document.querySelector(selector);
+    if(thumbs != undefined && thumbs != null){
+      this.options.thumbs = {
+        swiper: thumbs
+      };
+    }
+  } 
+
+  setBreakpoints = () => {
+    const breakpoints = this.querySelectorAll('mc-swiper-breakpoint');
+    if(breakpoints.length > 0){
+      let notFound = false;
+      this.options.breakpoints = {};
+      breakpoints.forEach(breakpoint => {
+        if (typeof breakpoint.getPointOptions === 'function') {
+          this.options.breakpoints[breakpoint.width] = breakpoint.getPointOptions();
+        } else {
+          notFound = true;
+        }
+      });
+    }
+  }
+
+  slideTo = (index, speed) => {
+    const s = this.swiper.slideTo(index, speed);
+  }
+
+}
+window.McSwiper = McSwiper;
+export default McSwiper;
+
+class McSwiperBreakpoint extends McElement {
+  options = {}; width; swiper; isConnected = false;
+
+  init = () => {
+    this.options = {};
+    this.width = parseInt(this.dataset.breakpoint);
+    this.setSlides(this.dataset.slides);
+    this.setSpaceBetween(this.dataset.spaceBetween);
+    this.setSlideGroups(this.dataset.slideGroups);
+    this.swiper = this.closest('mc-swiper');
+  
+    const breakpoints = Array.from(this.swiper.querySelectorAll('mc-swiper-breakpoint'));
+    const allConnected = breakpoints.every(breakpoint => breakpoint.isConnected);
+  
+    if (allConnected) {
+      this.swiper.init();
+    }
+  }
+
+  connectedCallback() {
+    this.isConnected = true;
+    this.init();
+  }
+
+  getPointOptions = () => {
+    return this.options;
+  }
+
+  setSpaceBetween = (spaceBetween) => {
+    const s = parseInt(spaceBetween);
+    if(!isNaN(s)){
+      this.options.spaceBetween = s;
+    }
+  }  
+
+  setSlideGroups = (slideGroups) => {
+    const s = parseInt(slideGroups);
+    if(!isNaN(s)){
+      this.options.slidesPerGroup = s;
+    }
+  }  
+
+  setSlides = (slides) => {
+    if(slides != undefined){
+      this.options.slidesPerView = slides;
+    }
+  } 
+}
+window.McSwiperBreakpoint = McSwiperBreakpoint;
+if (!window.customElements.get("mc-swiper")) {
+  window.customElements.define("mc-swiper", McSwiper);
+  McUtils.addCss('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
+}
+if (!window.customElements.get("mc-swiper-breakpoint")) {
+  window.customElements.define("mc-swiper-breakpoint", McSwiperBreakpoint);
+}

package/components/mc-video.js

@@ -0,0 +1,61 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McVideo extends McElement {
+  video; icon; image;
+
+  connectedCallback() {
+    setTimeout(() => {
+      
+      this.video = this.querySelector('video');
+      if(!this.video) return;
+
+      // iOS: lascia passare i tap all’overlay
+      this.video.style.pointerEvents = 'none';
+
+      this.icon  = this.querySelector('[data-icon]');
+      this.image = this.querySelector('[data-image]');
+
+      // usa anche touch/pointer, non solo click
+      const bind = (el) => {
+        if(!el) return;
+        el.addEventListener('pointerup', this.play, { passive: true });
+        el.addEventListener('touchend', this.play, { passive: true });
+        el.addEventListener('click', this.play);
+      };
+      bind(this.image);
+      bind(this.icon);
+
+      this.video.addEventListener('playing', () => {
+        // ora il video può ricevere interazioni
+        this.video.style.pointerEvents = 'auto';
+        this.activate(); // eredita: aggiunge la classe che nasconde l'immagine
+      });
+
+      this.video.addEventListener('pause', () => {
+        // se vuoi che torni cliccabile l’overlay quando metti in pausa:
+        this.video.style.pointerEvents = 'none';
+        this.deactivate();
+      });
+
+      // opzionale: rimuovi i controls finché non parte (intercettano tap)
+      this.video.removeAttribute('controls');
+    });
+  }
+
+  _onFirstVisual = () => {
+    this.activate();
+    // non serve più ascoltare
+    this.video.removeEventListener('playing', this._onFirstVisual);
+    this.video.removeEventListener('loadeddata', this._onFirstVisual);
+  }
+
+  play  = () => this.video.play();
+  pause = () => this.video.pause();
+}
+
+if (!window.customElements.get("mc-video")) {
+  window.customElements.define("mc-video", McVideo);
+  McUtils.addCss(`https://cdn.jsdelivr.net/npm/teddy-frontend@${theme.version}/css/mc-video.css`);
+}
+window.McVideo = McVideo;
+export default McVideo;