////////////////////////////////////////////////////
// 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 += `
${idmPrepareProductsMarkup(products, true)}
`;
else selectedContainerEl.innerHTML = `
${idmPrepareProductsMarkup(products, true)}
`;
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