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

17
README.md
View File

@@ -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>

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();

90
style.less
View File

@@ -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 {
to {
background-position-x: -200%;
}
/* SKELETON */
@keyframes idm-skeleton-loading {
to {
background-position-x: -200%;
}
.idm__hotspot.idm-loading{
}
.skeleton(@width, @height, @mobileWidth, @mobileHeight, @borderRadius) {
position: relative;
overflow: hidden;
transition: none;
border-radius: 8px;
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%;
&.idm-loading {
transition: none;
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: @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%;
@@ -335,4 +383,14 @@
clip-path: inset(0 0 0 0);
}
}
}
}
/* Ogolne */
.idm__hotspot{
.product__name{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--hotspot-name-clamp, 999);
overflow: hidden;
}
}