FrontendComponents/hotspots
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

skeleton

Browse Source
This commit is contained in:
pawel.gaca
2025-12-08 14:29:54 +01:00
parent 5f194e862f
commit 03a0ab0029
3 changed files with 216 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
klasa.js
View File

@@ -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}">
<div class="hotspot --initialized">
return `<section id="${this.id}" class="hotspot__wrapper idm__hotspot --init --hotspot-loading ${this?.classes}">
${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>
</section>`;
</div>`
}
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();
// css <style/>
this.cssVariableNameClamp();
}
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){
@@ -1673,33 +1750,32 @@ class IdmHotspot{
// Zdefiniowanie funkcji do dodawania do ulubionych
this.initExternalFunctions();
try{
if(!this.products){
if((!this?.query?.graphFn || !this?.query?.string) && !this.source?.link) this.setQueryData();
// pobranie danych o produktach
await this.getHotspotData();
if(!this.products) throw new Error(idmHotspotTextObject["Nie znaleziono produktów"]);
}
// Wstawienie markupa na strone
if(this.hotspotEl.querySelector(".products.hotspot__products")) this.hotspotEl.querySelector(".products.hotspot__products").insertAdjacentHTML("beforeend", this.markup());
else if(this.hotspotEl.querySelector(".hotspot")){
this.hotspotEl.querySelector(".hotspot")?.insertAdjacentHTML("beforeend", this.markupHotspotSwiperContainer(this.markup()));
}
else{
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){
console.error(idmHotspotTextObject["Wystąpił błąd"], err);
this.hotspotEl.remove();
if(!this.products){
if((!this?.query?.graphFn || !this?.query?.string) && !this.source?.link) this.setQueryData();
// pobranie danych o produktach
await this.getHotspotData();
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());
else if(this.hotspotEl.querySelector(".hotspot")){
this.hotspotEl.querySelector(".hotspot")?.insertAdjacentHTML("beforeend", this.markupHotspotSwiperContainer(this.markup()));
}
else{
throw new Error("Nie udało się wstawić produktów! Zła struktura HTML")
}
// init swiper + add to basket
this.afterInit();
}catch(err){
console.error(idmHotspotTextObject["Wystąpił błąd"], err);
this.hotspotEl.remove();
}
}
/**
@@ -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();