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

Zabezpieczenie kodu tooltipa

Browse Source
This commit is contained in:
pawel.gaca
2025-11-21 08:55:52 +01:00
parent 1c3c5e8334
commit 49ff211062
2 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
klasa.js
View File

@@ -191,6 +191,7 @@ const IDM_PRODUCT_QUERY = `id
iconSecond iconSecond
iconSmall iconSmall
iconSmallSecond iconSmallSecond
link
} }
} }
opinion{ opinion{
@@ -591,18 +592,19 @@ class IdmHotspot{
${this.markupAdditional(prod)} ${this.markupAdditional(prod)}
</div> </div>
<a class="product__icon d-flex justify-content-center align-items-center" tabindex="-1" href="${prod.link}"> <a class="product__icon d-flex justify-content-center align-items-center" tabindex="-1" href="${prod.link}">
${this.markupImage(prod)} ${this.markupImage(prod)}
<strong class="label_icons"> <strong class="label_icons">
${this.markupLabel(prod)} ${this.markupLabel(prod)}
</strong> </strong>
</a> </a>
<div class="product__content_wrapper"> <div class="product__content_wrapper">
${this.markupOpinions(prod)} ${this.markupVersions(prod)}
<a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a> ${this.markupOpinions(prod)}
<div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}"> <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
${this.markupPrice(prod, prodExchangedData)} <div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}">
</div> ${this.markupPrice(prod, prodExchangedData)}
${this.markupAddToBasket(prod)} </div>
${this.markupAddToBasket(prod)}
</div> </div>
</div>`; </div>`;
@@ -634,6 +636,16 @@ class IdmHotspot{
</span>`; </span>`;
} }
markupVersions(prod){
if(!this.options?.selectVersion || !prod.group?.versions || prod.group?.versions?.length === 1 ) return "";
return `<div class="product__versions">
${prod.group.versions.reduce((acc, val)=>{
return acc + `<a class="product__version_single" href="${val.link}"><img class="product__version_img" src="${val.icon}" alt="${val.name}"/></a>`;
},"")}
</div>`
}
markupImage(prod){ markupImage(prod){
let markup = ""; let markup = "";
if(prod.iconSmallSecond && prod.iconSecond) markup +=`<picture> if(prod.iconSmallSecond && prod.iconSecond) markup +=`<picture>
@@ -1407,7 +1419,7 @@ function idmHideTooltip(tooltipEl){
} }
// document.addEventListener("DOMContentLoaded", ()=>{ document.addEventListener("DOMContentLoaded", ()=>{
document.body.addEventListener("click", e=>{ document.body.addEventListener("click", e=>{
const tooltipEl = e.target.closest(".idm_tooltip"); const tooltipEl = e.target.closest(".idm_tooltip");
if(!e.target.closest(".idm_tooltip__info_icon") || !tooltipEl) return; if(!e.target.closest(".idm_tooltip__info_icon") || !tooltipEl) return;
@@ -1415,7 +1427,7 @@ function idmHideTooltip(tooltipEl){
e.preventDefault(); e.preventDefault();
idmShowTooltip(tooltipEl); idmShowTooltip(tooltipEl);
}); });
// }); });
// new IdmHotspot({ // new IdmHotspot({
// id: "idmTestHotspot1", // id: "idmTestHotspot1",
// title: "tescik", // title: "tescik",

30
style.less
View File

@@ -227,3 +227,33 @@
} }
} }
} }
// WERSJE
.idm__hotspot:has(.product__versions){
.product__versions{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
z-index: 1;
background: #fff;
clip-path: inset(0% 0 100% 0);
padding: 0.3rem 1rem;
position: absolute;
top: 0;
}
.product__content_wrapper{
position: relative;
}
.label_icons, .product__versions{
transition: all 0.2s;
}
.product:hover{
.product__versions, .label_icons{
transform: translateY(-100%);
}
.product__versions{
clip-path: inset(0 0 0 0);
}
}
}