This commit is contained in:
2026-01-20 13:16:32 +01:00
parent e6a9465195
commit 70d32c7d56
14 changed files with 439 additions and 63 deletions

View File

@@ -133,7 +133,7 @@ async function idmPictureModuleProducts(containerEL) {
},
body: JSON.stringify({
query: `{${productsId.reduce(
(acc, val, index) => acc + `${idmGetSingleProdGraphQL(val)}`,
(acc, val) => acc + `${idmGetSingleProdGraphQL(val)}`,
""
)}}`,
}),
@@ -143,8 +143,8 @@ async function idmPictureModuleProducts(containerEL) {
const products = Object.values(data?.data)?.map((prod) => prod.product);
allProdEl.forEach((prodEl) => {
const prodData = products.find((p) => p.id === +prodEl.dataset.id);
if (!prodData) return;
const prodData = products.find((p) => p?.id === +prodEl?.dataset?.id);
if (!prodData) return prodEl.closest(".idm_picture__product")?.remove();
prodEl.classList.add("--mod-init");
prodEl.innerHTML = `

View File

@@ -120,8 +120,8 @@ PULSE ANIMATION
max-width: var(--photo-prod-box-width);
position: absolute;
width: max-content;
box-shadow: 0px 0px 10px 1px #000;
box-shadow: 0px 0px 10px 1px #000;
}
.product_info::before{
content: "";
@@ -132,7 +132,6 @@ PULSE ANIMATION
z-index: -1;
}
.product_info{
bottom: var(--photo-prod-box-dir-t, auto);
top: var(--photo-prod-box-dir-b, auto);
@@ -148,6 +147,115 @@ PULSE ANIMATION
left: var(--photo-prod-box-dir-l-before, auto);
}
.product_info[data-dir-single-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-single-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-single-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-single-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
}
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tr);
}
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
}
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
@media (max-width: 756px) {
.product_info[data-dir-mobile-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-mobile-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-mobile-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-mobile-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-mobile-x="l"][data-dir-mobile-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl);
}
}
@media (min-width: 757px) and (max-width: 978px) {
.product_info[data-dir-tablet-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-tablet-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-tablet-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-tablet-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br);
}
}
@media (min-width: 979px) {
.product_info[data-dir-desktop-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0;
}
.product_info[data-dir-desktop-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0;
}
.product_info[data-dir-desktop-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0;
}
.product_info[data-dir-desktop-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0;
}
.product_info[data-dir-desktop-x="l"][data-dir-desktop-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl);
}
}
.idm_picture__product .product_info .product_name{
font-size: 1.6rem;
color: var(--photo-prod-box-text);
@@ -162,17 +270,15 @@ PULSE ANIMATION
}
@media(min-width: 979px){
.idm_picture__product:hover .product_info{
:is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
display: flex;
animation: idmShowUp 0.3s ease-in-out;
/* opacity: 1; */
}
}
@media(max-width: 978px){
.idm_picture__product.--show .product_info{
display: flex;
animation: idmShowUp 0.3s ease-in-out;
/* opacity: 1; */
}
}