@teddy-dev/frontend 1.0.1

package/components/mc-input-quantity.js

@@ -0,0 +1,43 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-input.js', false); 
+
+class McInputQuantity extends McInput {
+  
+  connectedCallback() {
+    this.init();
+    this.querySelector('[data-plus]')?.addEventListener('click', this.plus.bind(this));
+    this.querySelector('[data-minus]')?.addEventListener('click', this.minus.bind(this));
+    this.input.addEventListener('keyup', this.change.bind(this));
+  }
+
+  plus = () => {
+    const step = parseInt(this.input.step) || 1;
+    this.setValue(parseInt(this.input.value) + step);
+  }
+
+  change = (e) => {
+    if(this.input.value === '') return;
+    const newValue = parseInt(this.input.value);
+    this.setValue(newValue);
+  }
+
+  setValue = (value) => {
+    const max = parseInt(this.input.max);
+    const min = parseInt(this.input.min);
+    if((isNaN(max) || value <= max) && (isNaN(min) || value >= min)){
+      this.input.value = value;
+      McShopify.customEvent(MCEVENTS.QUANTITY_CHANGED, {value:value}, this);
+    }
+  }
+
+  minus = () => {
+    const step = parseInt(this.input.step) || 1;
+    this.setValue(parseInt(this.input.value) - step);
+  }
+
+}
+if(!customElements.get('mc-input-quantity')) {
+  customElements.define('mc-input-quantity', McInputQuantity);
+}
+window.McInputQuantity = McInputQuantity;
+export default McInputQuantity;

package/components/mc-input-select.js

@@ -0,0 +1,14 @@
+await loadComponent('./components/mc-input.js', false); // Carica il componente Input
+await loadComponent('./res/mc-shopify.js', false);
+
+class McInputSelect extends McInput {
+  connectedCallback() {
+    this.input = this.querySelector('select');
+    this.init();
+  }
+}
+if(!customElements.get('mc-input-select')) {
+  customElements.define('mc-input-select', McInputSelect);
+}
+window.McInputSelect = McInputSelect;
+export default McInputSelect;

package/components/mc-input-text.js

@@ -0,0 +1,12 @@
+await loadComponent('./components/mc-input.js', false);
+
+class McInputText extends McInput {
+  connectedCallback() {
+    this.init();
+  }
+}
+if(!customElements.get('mc-input-text')) {
+  customElements.define('mc-input-text', McInputText);
+}
+window.McInputText = McInputText;
+export default McInputText;

package/components/mc-input.js

@@ -0,0 +1,137 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-utils.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+// Definizione della classe custom element McInput
+class McInput extends McElement {
+  input;      // Riferimento all'elemento input
+  error;      // Container per il messaggio di errore
+  errorText;  // Testo del messaggio di errore
+  isValid;    // Stato di validità dell'input
+  static ERROR_CLASS = 'is-invalid'; // Classe CSS per indicare un errore
+
+  // Metodo di inizializzazione: collega input, error e listener
+  init = () => {
+    this.error = this.querySelector('[data-error]'); // Seleziona il container per l'errore
+    this.input = this.input ? this.input : this.querySelector('input'); // Seleziona l'elemento input
+
+    // Controlli di presenza elementi e traduzioni
+    if (!this.input) { console.error('McInput: No input element found'); return; }
+    if(!this.error){ console.error('McInput: No error container found'); return; }
+    if(!window.theme?.t) { console.error('McInput: Translations not available'); return; }
+    if(!window.theme.t.errors) { console.error('McInput: Translations for errors not available'); return; }
+
+    // Listener per validazione su keyup, blur e change
+    this.setEvents();
+    this.autosubmit(); // Configura autosubmit se richiesto
+  }
+
+  setEvents = () => {
+    const triggers = this.dataset.triggers ? this.dataset.triggers.split(',').map(t => t.trim()) : ['keyup', 'change', 'blur'];
+    triggers.forEach(trigger => {
+      this.input.addEventListener(trigger, this.validate.bind(this));
+    });
+  }
+
+  // Valida l'input utilizzando la proprietà `validity` e aggiorna errorText
+  validate = (e) => {
+    this.isValid = this.input.checkValidity(); // Controlla la validità dell'input
+    if (!this.isValid) {
+      // Gestione dei vari tipi di errori di validazione HTML5
+      if (this.input.validity.badMcInput) {
+        this.validateType();
+      } else if (this.input.validity.valueMissing) {
+        this.errorText = theme.t.errors.required;
+      } else if (this.input.validity.typeMismatch) {
+        this.validateType();
+      } else if (this.input.validity.tooShort) {
+        this.errorText = theme.t.errors.minLength.replace('{{ minlength }}', this.input.minLength);
+      } else if (this.input.validity.tooLong) {
+        this.errorText = theme.t.errors.maxLength.replace('{{ maxlength }}', this.input.maxLength);
+      } else if (this.input.validity.rangeUnderflow) {
+        this.errorText = theme.t.errors.min.replace('{{ min }}', this.input.min);
+      } else if (this.input.validity.rangeOverflow) {
+        this.errorText = theme.t.errors.max.replace('{{ max }}', this.input.max);
+      } else if (this.input.validity.stepMismatch) {
+        this.errorText = theme.t.errors.step;
+      } else if (this.input.validity.patternMismatch) {
+        this.errorText = this.dataset.patternMsg || theme.t.errors.pattern;
+      } else if (this.input.validity.customError) {
+        this.errorText = this.input.validationMessage;
+      }
+    }
+
+    // Validazione "equals": confronta con altro campo se richiesto
+    if (this.isValid && this.dataset.equals != undefined) {
+      const equalsInput = document.getElementById(this.dataset.equals);
+      if (!equalsInput) {
+        console.warn(`McInput: Element with ID ${this.dataset.equals} not found for equals validation`);
+        return;
+      }
+      if (this.input.value != equalsInput.value) {
+        this.isValid = false;
+        this.errorText = theme.t.errors.equals;
+      }
+    }
+
+    // Emette eventi custom in base alla validità
+    if (this.isValid) {
+      McShopify.customEvent(MCEVENTS.INPUT_VALID, {value: this.input.value}, this);
+    } else {
+      McShopify.customEvent(MCEVENTS.INPUT_ERROR, {message: this.errorText}, this);
+    }
+    this.showError(); // Mostra o nasconde il messaggio di errore
+  }
+
+  // Imposta errorText in base al tipo di input (email, url, ecc.)
+  validateType = () => {
+    switch (this.input.type) {
+      case 'email':
+        this.errorText = theme.t.errors.email;
+        break;
+      case 'url':
+        this.errorText = theme.t.errors.url;
+        break;
+      case 'number':
+        this.errorText = theme.t.errors.number;
+        break;
+      case 'integer':
+        this.errorText = theme.t.errors.integer;
+        break;
+      case 'date':
+        this.errorText = theme.t.errors.date;
+        break;
+      case 'time':
+        this.errorText = theme.t.errors.time;
+        break;
+      case 'datetime':
+        this.errorText = theme.t.errors.datetime;
+        break;
+      default:
+        this.errorText = theme.t.errors.pattern;
+        break;
+    }
+  }
+
+  // Mostra o nasconde il messaggio di errore nell'elemento error
+  showError = () => {
+    this.isValid ? this.error.innerText = '' : this.error.innerText = this.errorText;
+    this.isValid ? this.classList.remove(McInput.ERROR_CLASS) : this.classList.add(McInput.ERROR_CLASS);
+  }
+
+  // Se abilitato, invia automaticamente il form al change
+  autosubmit = () => {
+    if (this.dataset.autosubmit != undefined) {
+      this.input.addEventListener('change', () => {
+        const form = this.input.form;
+        if(!form) return;
+        McShopify.customEvent(MCEVENTS.FORM_AUTOSUBMIT, null, form);
+      });
+    }
+  }
+}
+
+// Esporta la classe McInput nel contesto globale e come modulo
+window.McInput = McInput;
+export default McInput;

package/components/mc-loader.js

@@ -0,0 +1,21 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McLoader extends McElement {
+  
+  connectedCallback() {
+    if(this.dataset.global) {
+      window.onpageshow = () => {
+        this.deactivate();
+      }
+      window.onpagehide = () => {
+        this.activate();
+      }
+    }
+  }
+}
+if (!window.customElements.get("mc-loader")) {
+  window.customElements.define("mc-loader", McLoader);
+  McUtils.addCss(`https://cdn.jsdelivr.net/npm/teddy-frontend@${theme.version}/css/mc-loader.css`);
+}
+window.McLoader = McLoader;
+export default McLoader;

package/components/mc-modal.js

@@ -0,0 +1,69 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McModal extends McElement {
+  delay; modal; scroll; scrollHandler; cansShow; days;
+
+  connectedCallback(){
+    this.init();
+  } 
+
+  init = () => {
+    this.delay = isNaN(parseInt(this.dataset.delay)) ? 0 : parseInt(this.dataset.delay);
+    this.scroll = isNaN(parseInt(this.dataset.scroll)) ? 0 : parseInt(this.dataset.scroll);
+    this.days = isNaN(parseInt(this.dataset.remember)) ? 0 : parseInt(this.dataset.remember);
+    this.modal = bootstrap.Modal.getOrCreateInstance(this);
+    this.checkCanShow();
+
+    if(this.cansShow){
+      if(this.dataset.delay != undefined){
+        this.handleDelay();
+      }
+  
+      if(this.dataset.scroll != undefined){
+        this.scrollHandler = this.handleScroll.bind(this);
+        window.addEventListener('scroll', this.scrollHandler, false);
+      }
+
+      if(this.dataset.remember != undefined && this.days > 0){
+        this.addEventListener('hidden.bs.modal', () => this.remember());
+      }
+    }
+  }
+
+  remember = () => {
+    localStorage.setItem(this.id, Date.now() + this.days * 24 * 60 * 60 * 1000);
+  } 
+
+  checkCanShow = () => {
+    const stamp = parseInt(localStorage.getItem(this.id));
+    this.cansShow = false;
+    if(isNaN(stamp) || stamp < Date.now()){
+      this.cansShow = true;
+    }
+  }
+
+  handleScroll = () => {
+    const scrollPosition = window.scrollY + window.innerHeight;
+    const pageHeight = document.documentElement.scrollHeight;
+    const scrollPercentage = this.scroll / 100;
+    if(scrollPosition / pageHeight > scrollPercentage){
+      this.show();
+      window.removeEventListener('scroll', this.scrollHandler, false);
+    }
+  }
+
+  handleDelay = () => {
+    setTimeout(() => {
+      this.show();
+    }, this.delay);
+  }
+
+  show = () => {
+    this.modal.show();
+  }
+}
+if (!window.customElements.get("mc-modal")) {
+  window.customElements.define("mc-modal", McModal);
+}
+window.McModal = McModal;
+export default McModal;

package/components/mc-password-eye.js

@@ -0,0 +1,24 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./components/mc-btn.js', false);
+await loadComponent('./res/mc-utils.js', false);
+
+class McPasswordEye extends McBtn {
+
+  connectedCallback() {
+
+    if(!this.querySelector('.active')) { console.error('McPasswordEye: No active element found'); return; }
+    if(!this.querySelector('.inactive')) { console.error('McPasswordEye: No inactive element found'); return; }
+
+    this.target = this.closest('mc-input-password') || document.querySelector(this.dataset.inputPassword);
+    if (!this.target) { console.error('McPasswordEye: No McInputPassword found'); return; }
+
+    this.init();
+  }
+
+}
+if (!window.customElements.get("mc-password-eye")) {
+  window.customElements.define("mc-password-eye", McPasswordEye);
+  McUtils.addCss(`https://cdn.jsdelivr.net/npm/teddy-frontend@${theme.version}/css/mc-password-eye.css`);
+}
+window.McPasswordEye = McPasswordEye;
+export default McPasswordEye;

package/components/mc-password-tips.js

@@ -0,0 +1,60 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./components/mc-input-password.js', false);
+
+class McPasswordTips extends McElement {
+  static classes = {
+    valid: 'valid',
+    allValid: 'alert-success',
+    someInvalid: 'alert-warning'
+  };
+  points;
+  
+  connectedCallback() {
+    this.points = this.querySelectorAll("[data-pattern]");
+    if (this.points.length === 0) { console.error("McPasswordTips: No points found with data-pattern attribute."); return; }
+
+    this.inputPassword = this.closest("mc-input-password") || document.querySelector(this.dataset.inputPassword);
+    if (!this.inputPassword) { console.error("McPasswordTips: No McInputPassword found"); return; }
+
+    this.inputPassword.input.addEventListener("focus", this.activate.bind(this));
+    this.inputPassword.input.addEventListener("blur", this.deactivate.bind(this));
+    this.inputPassword.input.addEventListener("input", () => {
+      this.checkPoints(this.inputPassword.input.value);
+    });
+  }
+
+  checkPoints = (value) => {
+    const validClass = this.dataset.validClass || McPasswordTips.classes.valid;
+    this.points.forEach(point => {
+      let pattern = new RegExp(point.dataset.pattern);
+      if (pattern.test(value)) {
+        point.classList.add(validClass);
+      } else {
+        point.classList.remove(validClass);
+      }
+    });
+    this.setValid();
+  }
+
+  setValid = () => {
+    const allValidClasses = this.dataset.allValidClasses?.split(' ') || McPasswordTips.classes.allValid?.split(' ') || [];
+    const validClass = this.dataset.validClass || McPasswordTips.classes.valid;
+    const someInvalidClasses = this.dataset.someInvalidClasses?.split(' ') || McPasswordTips.classes.someInvalid?.split(' ') || [];
+
+    const valid = this.querySelectorAll(`[data-pattern].${validClass}`).length;
+    const total = this.points.length;
+    if(valid === total){
+      this.classList.add(...allValidClasses);
+      this.classList.remove(...someInvalidClasses);
+    } else {
+      this.classList.add(...someInvalidClasses);
+      this.classList.remove(...allValidClasses);
+    }
+  }
+}
+if (!window.customElements.get("mc-password-tips")) {
+  window.customElements.define("mc-password-tips", McPasswordTips);
+  McUtils.addCss(`https://cdn.jsdelivr.net/npm/teddy-frontend@${theme.version}/css/mc-password-tips.css`);
+}
+window.McPasswordTips = McPasswordTips;
+export default McPasswordTips;

package/components/mc-qrcode.js

@@ -0,0 +1,41 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McQrcode extends McElement {
+  
+  connectedCallback() {
+    const observer = new IntersectionObserver(
+      (entries, obs) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // L'elemento è nella viewport
+            this.init();
+            obs.unobserve(this); // Osserva solo la prima volta
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(this);
+  }
+
+  init = async () => {
+    //await import(theme.qrcode);
+    if(!QRCode) {
+      console.error('QRCode library not loaded');
+      return;
+    }
+    new QRCode(this, {
+      text: this.dataset.text,
+      width: parseInt(this.dataset.width) || 128,
+      height: parseInt(this.dataset.height) || 128,
+      colorDark : this.dataset.colorDark || "#000000",
+      colorLight : this.dataset.colorLight || "#ffffff",
+      correctLevel : QRCode.CorrectLevel.H
+    });
+  }
+}
+
+if (!customElements.get('mc-qrcode')) {
+    customElements.define('mc-qrcode', McQrcode);
+}
+window.McQrcode = McQrcode;

package/components/mc-range.js

@@ -0,0 +1,108 @@
+import 'https://cdn.jsdelivr.net/npm/nouislider@15.8.1';
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-utils.js', false);
+
+class McRange extends McElement {
+  values;
+
+  connectedCallback() {
+    this.getValues();
+    this.render();
+  }
+
+  // renderizzo lo slider
+  render = () => {
+    if(this.values?.length){
+      noUiSlider.create(this, {
+        start: this.values,
+        connect: true,
+        range: {
+          'min': parseInt(this.dataset.min),
+          'max': parseInt(this.dataset.max)
+        },
+        step: parseInt(this.dataset.step) || 1
+      });
+  
+      this.noUiSlider.on('update', (values) => {
+        this.setValues(values);
+      });
+  
+      this.noUiSlider.on('change', (values) => {
+        this.setValues(values);
+        McShopify.customEvent('change', this.getPairs(), this);
+      });
+  
+      this.inputEvents();
+    }
+  }
+
+  // ottiene un oggetto name:value
+  getPairs = () => {
+    return {
+      items: this.dataset.inputSelectors?.split(',').map(selector => {
+        const input = document.querySelector(selector);
+        return { name: input.name, value: input.value };
+      })
+    };
+  }
+
+  // fa controllare lo slider dalle sue input
+  inputEvents = () => {
+    const inputs = this.dataset.inputSelectors?.split(',').map(selector => document.querySelector(selector));
+    if(inputs !== undefined){
+      inputs.forEach((input, index) => {
+        input.addEventListener('input', (e) => {
+          this.values[index] = parseInt(e.target.value);
+          this.noUiSlider.set(this.values);
+        });
+      });
+    }
+  }
+
+  // ottengo i valori
+  getValues = () => {
+    this.values = this.dataset.values?.split(',').map(value => parseInt(value));
+  }
+
+  // setto i valori
+  setValues = (values) => {
+    this.values = values;
+    this.renderValues();
+  }
+
+  // renderizzo i valori
+  renderValues = () => {
+    const labels = this.dataset.labels?.split(',').map(label => document.querySelector(label));
+    const inputs = this.dataset.inputSelectors?.split(',').map(selector => document.querySelector(selector));
+    if(labels !== undefined){
+      labels.forEach((label, index) => {
+        label.innerHTML = this.formatLabel(this.values[index]);
+      });
+    }
+    if(inputs !== undefined){
+      inputs.forEach((input, index) => {
+        input.value = this.formatInput(this.values[index]);
+      });
+    }
+  }
+
+  // formatto i valori in base al formato, se è money uso utils.money
+  formatLabel = (value) => {
+    const format = this.dataset.format || '{label}';
+    if(format == 'money')
+      return McUtils.money(value*100);
+    else
+      return format.replaceAll('{label}', value);
+  }
+
+  // formatta i valori per le input
+  formatInput = (value) => {
+    return parseInt(value);
+  }
+}
+if (!window.customElements.get("mc-range")) {
+  window.customElements.define("mc-range", McRange);
+  McUtils.addCss(`/cdn/shop/t/32/assets/nouislider.min.css`);
+}
+window.McRange = McRange;
+export default McRange;

package/components/mc-read-more.js

@@ -0,0 +1,56 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+
+class McReadMore extends McElement {
+  expanded; expandible; link; text; observer;
+
+  connectedCallback(){
+    this.text = this.querySelector(':scope > div');
+    if(!this.text){ console.error('McReadMore: You need to provide a div element'); return; }
+    if(!this.dataset.moreText){ console.error('McReadMore: You need to provide a data-more-text attribute'); return; }
+    if(!this.dataset.lessText) { console.error('McReadMore: You need to provide a data-less-text attribute'); return; }
+
+    this.checkExpandible();
+    this.observer = new ResizeObserver(() => this.checkExpandible());
+    this.observer.observe(this);
+
+    this.addEventListener(MCEVENTS.EL_ACTIVATED, this.setText.bind(this));
+    this.addEventListener(MCEVENTS.EL_DEACTIVATED, this.setText.bind(this));
+  }
+
+  checkExpandible = () => {
+    if(this.offsetParent !== null){
+      this.expanded = false;
+      this.expandible = this.text.scrollHeight > this.text.clientHeight;
+      if(this.expandible){
+        this.addLink();
+      }
+      this.observer.disconnect();
+    }
+  }
+
+  addLink = () => {
+    const classes = this.dataset.classes?.split(' ') || ["read-more-link"];
+    this.link = document.createElement('mc-btn');
+    this.link.setAttribute('data-target', this.getSelector());
+    this.link.innerText = this.dataset.moreText;
+    this.link.classList.add(...classes);
+    this.appendChild(this.link);
+  }
+
+  setText = () => {
+    if(this.expandible && this.link){
+      if(this.isActive()){
+        this.link.innerText = this.dataset.lessText;
+      } else {
+        this.link.innerText = this.dataset.moreText;
+      }
+    }
+  }
+}
+if (!window.customElements.get("mc-read-more")) {
+  window.customElements.define("mc-read-more", McReadMore);
+  McUtils.addCss(`https://cdn.jsdelivr.net/npm/teddy-frontend@${theme.version}/css/mc-read-more.css`);
+}
+window.McReadMore = McReadMore;
+export default McReadMore;

package/components/mc-recommended.js

@@ -0,0 +1,50 @@
+// Questo componente `McRecommended` estende la classe base `McElement` e serve per mostrare una lista di prodotti raccomandati (ad esempio prodotti correlati o complementari) in una pagina prodotto.
+// Utilizza le API di Shopify per recuperare i prodotti consigliati in base al prodotto corrente.
+// Richiede che vengano specificati alcuni data attributes sull'elemento HTML:
+// - data-product-id: ID del prodotto di riferimento (obbligatorio)
+// - data-section-id: ID della sezione Shopify da aggiornare (obbligatorio)
+// - data-limit: numero massimo di prodotti da mostrare (opzionale, default 10)
+// - data-intent: tipo di raccomandazione (opzionale, valori possibili: 'related' o 'complementary')
+
+// Non sono richiesti elementi HTML interni specifici: il componente aggiorna se stesso con i prodotti raccomandati ricevuti dalla chiamata API.
+
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-utils.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+class McRecommended extends McElement {
+
+  // Metodo chiamato automaticamente quando l'elemento viene aggiunto al DOM
+  connectedCallback() {
+    this.loadProducts(); // Carica i prodotti raccomandati
+  }
+
+  // Recupera i prodotti raccomandati tramite l'API Shopify e aggiorna il contenuto del componente
+  loadProducts = () => {
+    if(!this.dataset.productId || !this.dataset.sectionId) { console.error('ID del prodotto o ID della sezione non forniti.'); return;}
+
+    McShopify.getRecommendations({
+      product_id: this.dataset.productId, // ID del prodotto corrente
+      section_id: this.dataset.sectionId, // ID della sezione corrente
+      limit: parseInt(this.dataset.limit) || 10, // Numero massimo di prodotti da restituire
+      intent: this.dataset.intent || 'related', // Intento della raccomandazione (related | complementary)
+      onSuccess: (response) => {
+        McUtils.reloadElement(response, this, this.getSelector()); // Renderizza i prodotti raccomandati
+      },
+      onError: (error) => {
+        console.error('Errore nel caricamento dei prodotti raccomandati:', error);
+        this.remove(); // Rimuove l'elemento in caso di errore
+      }
+    });
+  }
+
+}
+
+// Registra il componente custom se non già presente
+if(!customElements.get('mc-recommended')) {
+  customElements.define('mc-recommended', McRecommended);
+}
+
+// Espone la classe globalmente e come modulo
+window.McRecommended = McRecommended;
+export default McRecommended;

package/components/mc-referrer.js

@@ -0,0 +1,20 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McReferrer extends McElement {
+
+  // al click va su document.referrer
+  connectedCallback() {
+    if(window.location.href != document.referrer){
+      this.addEventListener('click', () => {
+        window.location.href = document.referrer;
+      });
+    } else {
+      this.remove();
+    }
+  }
+}
+if (!window.customElements.get("mc-referrer")) {
+  window.customElements.define("mc-referrer", McReferrer);
+}
+window.McReferrer = McReferrer;
+export default McReferrer;