Wrzucenie kodu do miejmy nadzieje dobrego folderu

2025-08-29 14:09:11 +02:00
parent 8f780d3ed1
commit e7636c66ac
10 changed files with 2378 additions and 0 deletions
--- a/sklad/5ainsertHotspotHTML.js
+++ b/sklad/5ainsertHotspotHTML.js
@@ -0,0 +1,109 @@
+
+////////////////////////////////////////////////////
+// Funkcja init ELEMENT HTML
+async function idmInsertHotspotElement(selectedContainerEl){
+  
+  selectedContainerEl.classList.add("--init");
+  const {graphFn, query} = idmGetQueryData({
+    productsID: selectedContainerEl?.dataset?.productsId,
+    productsMenu: selectedContainerEl?.dataset?.productsMenu,
+    hotspotsType: selectedContainerEl.dataset.hotspotsType
+  });
+
+  if(!graphFn || !query){
+    console.log(idmHotspotTextObject["Nie znaleziono metody graphql"], selectedContainerEl)
+    return selectedContainerEl.remove();
+  } 
+
+  // Funkcja od uzupełniania danych
+  const idmFill = async ()=>{
+    try{
+      // pobranie danych o produktach
+      const products = await idmGetHotspotData(query, graphFn);
+      if(!products) throw new Error(idmHotspotTextObject["Nie znaleziono produktów"]);
+
+
+      // wstawienie produktów zależnie czy w section jest .hotspot czy nie
+      const hotspotInsideEl = selectedContainerEl.querySelector(".hotspot");
+      if(hotspotInsideEl) hotspotInsideEl.innerHTML += `<div class="products__wrapper swiper">
+          <div class="products hotspot__products swiper-wrapper">
+              ${idmPrepareProductsMarkup(products, true)}
+          </div>
+          </div>
+          <div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
+          <div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
+          <div class="swiper-pagination"></div>`;
+      else selectedContainerEl.innerHTML = `<div class="hotspot --initialized"><div class="products__wrapper swiper">
+          <div class="products hotspot__products swiper-wrapper">
+              ${idmPrepareProductsMarkup(products, true)}
+          </div>
+          </div>
+          <div class="swiper-button-prev --rounded --edge idm-button-prev"><i class="icon-angle-left"></i></div>
+          <div class="swiper-button-next --rounded --edge idm-button-next"><i class="icon-angle-right"></i></div>
+          <div class="swiper-pagination"></div></div>`;
+      
+      selectedContainerEl.classList.remove("idm-loading")
+      // init swipera
+      idmHotspotInit(selectedContainerEl.id)
+    }catch(err){
+      console.error(idmHotspotTextObject["Wystąpił błąd"], err);
+      selectedContainerEl.remove();
+    }
+  }
+
+
+  if(selectedContainerEl.dataset?.lazy || 
+    !selectedContainerEl.dataset?.lazy && typeof idmGeneralHotspotObjData === "object" && idmGeneralHotspotObjData?.options?.lazy) idmObserveOnce(selectedContainerEl, idmFill);
+  else idmFill();
+}
+
+
+
+
+
+// Zebranie wszystkich ramek HTML i wstawienie ich.
+async function idmInsertAllHTMLHotspots(){
+    try{
+        const reqArr = [] 
+        document.querySelectorAll(".idm__hotspot:not(.--init):not(.--lazy-hotspot)").forEach(hotspot=>{
+          reqArr.push(idmInsertHotspotElement(hotspot));
+        });
+        await Promise.all(reqArr);
+    }catch(err){
+        console.error(err)
+    }
+}
+
+idmInsertAllHTMLHotspots();
+
+/////////////////////////////////////////////////////////////////////
+// wdrożenie dla elementu HTML
+/**
+ * Struktura sekcji hotspotu w HTML.
+ *
+ * @typedef {HTMLElement} HotspotSection
+ * @property {string} id - Identyfikator elementu (np. "idmBlogHotspot1").
+ * @property {string} class - Klasy CSS używane do stylowania.
+ *
+ * @attribute {string} data-products-id - Lista ID produktów (rozdzielona przecinkami).
+ * @attribute {number} data-products-menu - Identyfikator menu produktów.
+ * @attribute {string} data-hotspots-type - Typ hotspotu (np. "promotion").
+ * @attribute {boolean} data-lazy - Czy sekcja ma być ładowana w trybie lazy.
+ *
+ * @example
+ <section id="idmBlogHotspot1"
+ class="hotspot__wrapper idm__hotspot idm-loading"
+  data-products-id="589,180,181590"
+   data-products-menu="122"
+ data-hotspots-type="promotion"
+ data-lazy="true"
+ >
+ <div class="hotspot --initialized">
+  <h3 class="hotspot__name headline__wrapper">
+     <span class="headline">
+     <span class="headline__name" aria-label="aaa">aaa</span>
+    </span>
+  </h3>
+  </div>
+ </section>
+ */