110 lines
4.0 KiB
JavaScript
110 lines
4.0 KiB
JavaScript
|
|
////////////////////////////////////////////////////
|
|
// 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>
|
|
*/
|