skeleton

README.md

@@ -93,7 +93,7 @@ new IdmHotspot({
 
 
  * @property {object} source - Dane źródłowe dla hotspotu.
- * @property {string} [source.link] - link do listingu z którego mają być pobierane produkty (NIEZALECANE)
+ * @property {string} [source.link] - link do listingu z którego mają być pobierane produkty (NIEZALECANE)(Reszta opcji source nie zadziała!!)
  * @property {string} [source.hotspotType] - Typ hotspotu (np. "promotion").
  * @property {number[]} [source.productsId] - Tablica ID produktów.
  * @property {number} [source.productsMenu] - Identyfikator menu produktów.
@@ -119,6 +119,7 @@ new IdmHotspot({
 
  * @property {boolean} [options.addToFavorites] - Czy włączać dodawanie do ulubionych(DZIAŁA TYLKO PO ZMIANACH SZABLONOWYCH)
  * @property {boolean} [options.addToCompare] - Czy włączać dodawanie do porównywania
+
  * @property {boolean|string} [options.addToBasket] - Obsługa koszyka:
  *    - true = włącz
  *    - false = wyłącz
@@ -129,14 +130,24 @@ new IdmHotspot({
  *    - false = nieaktywny
  *    - object = konfiguracja Swiper
  * @property {boolean} [options.swiperScrollbar] - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
+
  * @property {boolean} [options.showOpinions] - Czy wyświetlać opinie o produkcie w formie gwiazdek nad nazwą
  * @property {boolean} [options.showSecondImage] - Czy wyświetlać drugie zdjęcie na hover
+
+ * @property {boolean} [options.selectVersion] - Pokazywanie multiwersji
  * 
+ * @property {object} cssVariables - Obiekt z opcjami zmiennych CSS wgrywanymi do danej ramki rekomendacji
+ * @property {object} [cssVariables.version] - Obiekt ze zmiennymi css dla wersji
+ * @property {number} [cssVariables.version.columnDesktop] - liczba kolumn wersji na desktop
+ * @property {number} [cssVariables.version.columnTablet] - liczba kolumn wersji na tablecie
+ * @property {number} [cssVariables.version.columnMobile] - liczba kolumn wersji na mobile
+ * @property {number} [cssVariables.nameClamp] - liczba wyświetlanych linijek tekstu nazwy produktu 
+
+
  * @type {Hotspot[]}
  */
 ```
 
-
 ###### Jedna ramka - HTML ######
 ```
  <section id="idmBlogHotspot1"
@@ -144,7 +155,7 @@ new IdmHotspot({
   data-products-id="589,180,181590"
  data-lazy="true"
  >
- <div class="hotspot --initialized">
+ <div class="hotspot">
   <h3 class="hotspot__name headline__wrapper">
      <span class="headline">
      <span class="headline__name" aria-label="aaa">aaa</span>

klasa.js

@@ -443,7 +443,8 @@ class IdmHotspot{
           columnDesktop: 5,
           columnTablet: 3,
           columnMobile: 4,
-        }
+        },
+        nameClamp: null// 2,
       },
       options: {
         limit: 8,
@@ -464,7 +465,7 @@ class IdmHotspot{
 
         // WYBÓR
         // selectSize: false,
-        // selectVersion: false,
+        selectVersion: false,
 
         // SWIPER
         swiper: true,
@@ -637,6 +638,7 @@ class IdmHotspot{
       
       return singleMarkup;
   }
+
   markupProductInnerHTML(prod){
     // IDM DO POPRAWKI
     const prodExchangedData = app_shop?.fn?.getOmnibusDetails?.({productData: prod}) || app_shop.fn?.idmGetOmnibusDetails({productData: prod});
@@ -921,21 +923,26 @@ class IdmHotspot{
   }
 
   markupHotspotContainer(){ 
-    return `<section id="${this.id}" class="hotspot__wrapper idm__hotspot --init idm-loading ${this?.classes}">
+    return `<section id="${this.id}" class="hotspot__wrapper idm__hotspot --init --hotspot-loading ${this?.classes}">
-      <div class="hotspot --initialized">
+        ${this.markupHotspotInnerDiv()}
+      </section>`;
+  }
+
+  markupHotspotInnerDiv(){
+    return `<div class="hotspot --initialized">
       ${this?.title ? `
         <h3 class="hotspot__name headline__wrapper">
         <span class="headline"><span class="headline__name" aria-label="${this.title}">${this.title}</span></span>
         </h3>
         ` : ""}
         ${this.markupHotspotSwiperContainer()}
-                    </div>
+      </div>`
-                    </section>`;
   }
+
   markupHotspotSwiperContainer(productsHTML=""){
     return `<div class="products__wrapper swiper">
           <div class="products hotspot__products swiper-wrapper">
-            ${productsHTML}
+            ${productsHTML || this.markupSkeleton()}
           </div>
         </div>
         <div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
@@ -943,6 +950,36 @@ class IdmHotspot{
         <div class="swiper-pagination"></div>`;
   }
 
+
+
+
+  // SKELETONS MARKUPS
+
+  markupSkeleton(){
+    let skeletonMarkup = "";
+
+    // Tworzenie skeletonow
+    for(let i = 0; i <= this.options.limit; i++){
+      skeletonMarkup += this.markupSingleSkeleton();
+    }
+
+    return `
+    <div class="idm_hotspot__skeleton">
+      ${skeletonMarkup}
+    </div>
+    `;
+  }
+  markupSingleSkeleton(){
+    return `
+      <div class="idm_hotspot__skeleton_product">
+        <div class="idm_hotspot__skeleton_img idm-loading"></div>
+        <div class="idm_hotspot__skeleton_name idm-loading"></div>
+        <div class="idm_hotspot__skeleton_price idm-loading"></div>
+        ${this.options.addToBasket ? `<div class="idm_hotspot__skeleton_btn idm-loading"></div>` : ""}
+      </div>
+    `
+  }
+
   // ========================================================
   // HANDLERY ZDARZEŃ
   // ========================================================
@@ -1159,26 +1196,28 @@ class IdmHotspot{
   // USTAWIANIE ZMIENNYCH CSS DLA RAMKI
   // ========================================================
   // Ustawia się je w dwa sposoby - jako zmienne css przypisywane do ramki + jako dodaktowy tag style
-
   cssSetAllVariables(){
     this.cssVariableVersionColumnCount();
-    
+    this.cssVariableNameClamp();
-    // css <style/>
+  }
+  cssSetAllTags(){
     this.cssInsertStyleTag();
   }
 
+  cssVariableNameClamp(){
+    if(this.cssVariables?.nameClamp) this.cssSetVariable("--hotspot-name-clamp", this.cssVariables.nameClamp);
+  }
+
   cssVariableVersionColumnCount(){
     this.cssSetVariable("--version-desktop-columns", this.cssVariables?.version?.columnDesktop || 5)
     this.cssSetVariable("--version-tablet-columns", this.cssVariables?.version?.columnTablet || 3)
     this.cssSetVariable("--version-mobile-columns", this.cssVariables?.version?.columnMobile || 4)
   }
 
-
   cssSetVariable(name, value){
     this.hotspotEl.style.setProperty(name, value);
   }
 
-
   cssVersionColumnStyle(){
     return `
       @media (max-width: 756px){
@@ -1199,13 +1238,53 @@ class IdmHotspot{
     `
   }
 
+  cssSkeletonStyle(){
+    let skeletonStyles = "";
+    const skeletonStylesObj = {};
+
+    // Budowanie skeletona w zależności od ustawień hotspota
+    if(this.options.swiper){
+      skeletonStylesObj[0] = this.options.swiper?.slidesPerView;
+      for (const [key, value] of Object.entries(this.options.swiper.breakpoints)) {
+        if(value.slidesPerView) skeletonStylesObj[key] = value.slidesPerView
+      }
+    }else{
+      // mobile 2
+      skeletonStylesObj[0] = 2;
+      // desktop + tablet 4
+      skeletonStylesObj[757] = 4;
+    }
+
+
+    for (const [key, value] of Object.entries(skeletonStylesObj)) {
+      let style = `
+        #${this.hotspotEl.id}.hotspot__wrapper.idm__hotspot.--hotspot-loading .idm_hotspot__skeleton_product{
+          width: ${(1 / value) * 100}%
+        }
+      `
+      skeletonStyles += key === 0 ? style : `
+      @media (min-width: ${key}px){
+        ${style}
+      }
+      `
+    }
+
+    return skeletonStyles;
+  }
+
   cssInsertStyleTag(){
     this.hotspotEl.insertAdjacentHTML("beforeend", `
       <style>
         ${this.cssVersionColumnStyle()}
+        ${this.cssSkeletonStyle()}
       </style>`)
   }
 
+
+  cssSetAll(){
+    this.cssSetAllVariables();
+    this.cssSetAllTags();
+  }
   // ========================================================
   // FUNKCJE POMOCNICZE
   // ========================================================
@@ -1641,6 +1720,7 @@ class IdmHotspot{
       }
 
       await this.initSwiper();
+
       // IDM setHeight
       this.setHeight({
         selectors: [
@@ -1650,11 +1730,8 @@ class IdmHotspot{
         container: `#${this.id} .products__wrapper`,
       });
       this.initEvents();
+
       console.log(`Initialized hotspot #${this.id}`);
-
-      // Ustawienie wszystkich zmiennych CSS
-      this.cssSetAllVariables();
-
       // funkcja wykonująca się po ramce rekomendacji
       if(typeof this.options?.callbackFn === "function") this.options?.callbackFn();
     }catch(err){
@@ -1681,6 +1758,8 @@ class IdmHotspot{
         if(!this.products) throw new Error(idmHotspotTextObject["Nie znaleziono produktów"]);
       }
 
+      this.hotspotEl.querySelector(".idm_hotspot__skeleton")?.remove();
+      this.hotspotEl.classList.remove("--hotspot-loading");
       
       // Wstawienie markupa na strone
       if(this.hotspotEl.querySelector(".products.hotspot__products")) this.hotspotEl.querySelector(".products.hotspot__products").insertAdjacentHTML("beforeend", this.markup());
@@ -1691,9 +1770,6 @@ class IdmHotspot{
         throw new Error("Nie udało się wstawić produktów! Zła struktura HTML")
       }
 
-
-          this.hotspotEl.classList.remove("idm-loading");
-          
       // init swiper + add to basket
       this.afterInit();
     }catch(err){
@@ -1709,9 +1785,6 @@ class IdmHotspot{
     try{
       // swiper || slick
       if(this.options?.swiper){
-        // Opcje swipera
-        if(typeof this?.options?.swiper === "boolean") this.options.swiper = IdmHotspot.idmDefaultSwiperConfig;
-
         // Wywołanie swipera
         const selectedSwiper = new HotspotSlider({
           selector: `#${this.id} .swiper`,
@@ -1788,7 +1861,17 @@ class IdmHotspot{
 
     if(this.options?.devMode && dev !== "true") return console.error(`Brak włączonego devMode. Ramka ${this.id} nie mogła zostać utworzona!`);
 
+    // Opcje swipera
+    if(typeof this?.options?.swiper === "boolean") this.options.swiper = IdmHotspot.idmDefaultSwiperConfig;
+
+    // Wstawienie kontenera
     if(!this.hotspotEl || !document.contains(this.hotspotEl)) this.initHotspotContainer();
+    else if(!this.hotspotEl.querySelector(".hotspot")) this.hotspotEl.innerHTML = this.markupHotspotInnerDiv();
+    else if(!this.hotspotEl.querySelector(".products__wrapper")) this.hotspotEl.querySelector(".hotspot").insertAdjacentHTML("beforeend", this.markupHotspotSwiperContainer())
+
+      
+    // Ustawienie wszystkich zmiennych CSS
+    this.cssSetAll();
 
     if(this.options?.lazy) this.handleObserveHotspotOnce();
     else this.fillHotspot();

style.less

@@ -1,7 +1,14 @@
+/* add to basket*/
 .idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{
   display: flex;
   justify-content: center;
 }
+@media (max-width: 978px){
+  .idm__hotspot .add_to_basket__button.btn:not(.--error):not(.--success)::before{
+    position: static;
+  }
+}
+
 .idm__hotspot .add_to_basket.--range{
   flex-direction: column;
 }
@@ -28,27 +35,68 @@
   border-radius: 0.5rem;
   min-width: 3rem;
 }
-  @keyframes idm-skeleton-loading {
+
+/* SKELETON */
+@keyframes idm-skeleton-loading {
   to {
     background-position-x: -200%;
   }
-  }
+}
-.idm__hotspot.idm-loading{
+
+.skeleton(@width, @height, @mobileWidth, @mobileHeight, @borderRadius) {
   position: relative;
   overflow: hidden;
 
+  &.idm-loading {
     transition: none;
-  border-radius: 8px;
+    border-radius: @borderRadius;
     background: #eee;
     background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
     background-size: 200% 100%;
     animation: 1.5s idm-skeleton-loading linear infinite;
-  width: 100%;
+    width: @width;
+    height: @height;
+    
+    @media (max-width: 756px) {
+      width: @mobileWidth;
+      height: @mobileHeight;
+    }
+  }
+}
+
+.--hotspot-loading .products.hotspot__products.swiper-wrapper{
+  display: block!important;
+}
+
+.idm_hotspot__skeleton{
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
   height: 50rem;
+  &_product{
+    flex-shrink: 0;
+    padding-right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  &_img{
+    aspect-ratio: ~"1 / 1";
+    .skeleton(100%, auto, 100%, auto, 8px);
+  }
+  &_name{
+    .skeleton(100%, 4.2rem, 100%, 4.2rem, 0)
+  }
+  &_price{
+    .skeleton(50%, 2rem, 50%, 2rem, 0)
+  }
+  &_btn{
+    .skeleton(100%, 4.6rem, 100%, 4.6rem, 8px)
+  }
 }
-.idm__hotspot.idm-loading .hotspot{
+
-  opacity: 0;
+
-}
+
 @media (max-width: 756px) {
   .idm__hotspot.idm-loading{
     width: 100%;
@@ -336,3 +384,13 @@
     }
   }
 }
+
+/* Ogolne */
+.idm__hotspot{
+  .product__name{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--hotspot-name-clamp, 999);
+    overflow: hidden;
+  }
+}