FrontendAplikacje/PhotoModule
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kolorki

Browse Source
This commit is contained in:
pawel.gaca
2026-01-28 15:03:41 +01:00
parent 09c14785e7
commit 85b18161fd
15 changed files with 720 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
IdoSellAddOn/script.js
View File

@@ -144,6 +144,7 @@ function idmGetSingleProdGraphQLPM({
name
link
type
icon
${labels ? "zones" : ""}
${
opinions
@@ -406,25 +407,32 @@ async function idmPictureModuleProductsPM(containerEL) {
// OPINIE
let opinionsHTML = "";
if (isOpinions) {
if (
isOpinions &&
typeof prodData.opinion?.rating === "number" &&
typeof prodData.opinion?.count === "number"
) {
opinionsHTML = `
<div class="product_opinions__stars">
<i class="icon-star ${prodData.opinion?.rating > 0.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 0.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 2.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion.rating > 4.5 ? "--active" : ""}"></i>
</div>
<span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
<span class="product_opinions__count">${prodData.opinion.count}</span>
`;
}
prodEl.innerHTML = `
${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
<a href="${prodData.link}" class="product_icon --mobile"><img src="${prodData.icon}" alt="${prodData.name}" tabindex="-1"/></a>
<div class="product_info__container">
${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
<a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
</div>
`;
idmInitEventsPM({
@@ -444,21 +452,31 @@ async function idmPictureModuleProductsPM(containerEL) {
document.body.addEventListener("click", (e) => {
if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
const prodContainerEl = e.target.closest(".idm_picture__product");
const moduleCotnainer = e.target.closest(".idm_picture__module");
const prodContainerEl = e.target
.closest(".idm_picture__product")
?.querySelector(".product_info");
if (!prodContainerEl || !moduleCotnainer) return;
// ClearShow
if (!prodContainerEl)
return document
.querySelector(".idm_picture__product.--show")
?.classList?.remove("--show");
if (prodContainerEl.classList.contains("--show"))
return prodContainerEl.classList.remove("--show");
// if(!prodContainerEl) return document.querySelector(".idm_picture__product.--show")?.classList?.remove("--show");
// if(prodContainerEl.classList.contains("--show")) return prodContainerEl.classList.remove("--show");
const moduleContainer = prodContainerEl.closest(".idm_picture__module");
if (!moduleContainer) return;
// const moduleContainer = prodContainerEl.closest(".idm_picture__module");
// if(!moduleContainer) return;
moduleContainer
.querySelectorAll(".idm_picture__product.--show")
.forEach((prodConEl) => prodConEl.classList.remove("--show"));
prodContainerEl.classList.add("--show");
// moduleContainer.querySelectorAll(".idm_picture__product.--show").forEach(prodConEl=>prodConEl.classList.remove("--show"));
// prodContainerEl.classList.add("--show");
const computedStyles = window.getComputedStyle(moduleCotnainer);
const backgroundColor = computedStyles.getPropertyValue("--photo-mod-col-bg");
const textColor = computedStyles.getPropertyValue("--photo-mod-col-text");
new Modal({
element: prodContainerEl,
classList: "--mobile --photo-prod-mobile",
afterShow: (modal) => {
modal.style.setProperty("--photo-prod-box-bg", backgroundColor || "#fff");
modal.style.setProperty("--photo-prod-box-text", textColor || "#111");
},
});
});

116
IdoSellAddOn/style.html
View File

@@ -1,7 +1,8 @@
<style>
.idm_picture__module {
--photo-prod-box-bg: #fff;
--photo-prod-box-text: #111;
--photo-prod-box-bg: var(--photo-mod-col-bg, #fff);
--photo-prod-box-text: var(--photo-mod-col-text, #111);
--photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
--photo-prod-box-pad-top: 1rem;
@@ -32,8 +33,7 @@
position: absolute;
z-index: 10;
}
.idm_picture__product:hover,
.idm_picture__product.--show {
.idm_picture__product:hover {
z-index: 20;
}
.idm_picture__img {
@@ -114,15 +114,18 @@ PULSE ANIMATION
.product_info {
background: var(--photo-prod-box-bg);
flex-direction: column;
padding: 1rem;
gap: 1rem;
display: none;
max-width: var(--photo-prod-box-width);
position: absolute;
width: max-content;
box-shadow: 0px 0px 10px 1px #000;
}
.product_info__container {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 757px) {
.product_info {
padding: 1.5rem;
@@ -294,19 +297,27 @@ PULSE ANIMATION
}
}
.idm_picture__product .product_info .product_name {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.product_name {
font-size: 1.6rem;
color: var(--photo-prod-box-text);
}
.idm_picture__product .product_info .product_name:hover {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.product_name:hover {
color: var(--primary-color, #000) !important;
}
.idm_picture__product .product_info .product_prices {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.product_prices {
font-size: 1.6rem;
color: var(--photo-prod-box-text);
}
.idm_picture__product .product_info .price.--main {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_info
.price.--main {
margin-bottom: 0;
}
@@ -320,12 +331,6 @@ PULSE ANIMATION
animation: idmShowUp 0.3s ease-in-out;
}
}
@media (max-width: 978px) {
.idm_picture__product.--show .product_info {
display: flex;
animation: idmShowUp 0.3s ease-in-out;
}
}
@keyframes idmShowUp {
from {
@@ -356,38 +361,101 @@ PULSE ANIMATION
}
}
.idm_picture__module .label_icons {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .label_icons {
display: flex;
gap: 0.5rem;
position: static;
}
.idm_picture__module .product_opinions {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions {
display: flex;
color: var(--photo-prod-box-text);
}
.idm_picture__module .icon-star:not(.--active)::before {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.icon-star:not(.--active)::before {
content: "\f006";
}
.idm_picture__module .icon-star.--active {
:is(.idm_picture__module, .modal.--photo-prod-mobile) .icon-star.--active {
color: var(--opinions-star-active-color, #fac917);
}
.idm_picture__module .product_opinions__score {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__score {
margin-left: 1rem;
margin-right: 0.5rem;
}
.idm_picture__module .product_opinions__count::before {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__count::before {
content: "(";
}
.idm_picture__module .product_opinions__count::after {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__count::after {
content: ")";
}
.idm_picture__module :is(.add_to_basket, .add_to_basket__link) {
:is(.idm_picture__module, .modal.--photo-prod-mobile)
:is(.add_to_basket, .add_to_basket__link) {
display: flex;
justify-content: center;
margin-top: 0;
}
:is(.idm_picture__module, .modal.--photo-prod-mobile)
:is(.price.--omnibus.omnibus_price, .price.--max) {
color: var(--photo-prod-box-text);
}
:is(.idm_picture__module, .modal.--photo-prod-mobile)
.--omnibus-higher
:is(.price.--normal.--main, .price_percent) {
color: var(--color-promo-price, #cd2323);
}
.idm_picture__module .product_icon {
display: none !important;
}
@media (max-width: 978px) {
.modal.--photo-prod-mobile .product_info.--mod-init {
position: static;
display: flex;
width: 100%;
box-shadow: none;
flex-direction: column;
}
.modal.--photo-prod-mobile .modal__wrapper {
border-radius: 10px 10px 0 0;
background-color: var(--photo-prod-box-bg);
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .modal__close {
position: absolute;
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile
.modal__close
:is(.product_name, .omnibus_price, .price.--max) {
color: var(--photo-prod-box-text);
}
.modal.--photo-prod-mobile .product_icon {
display: flex;
justify-content: center;
align-items: center;
}
}
@media (min-width: 420px) and (max-width: 978px) {
.modal.--photo-prod-mobile .product_info.--mod-init {
display: grid;
grid-template-columns: 1fr 2fr;
}
.modal.--photo-prod-mobile .product_info.--mod-init > *:not(.product_icon) {
grid-column: "2/3";
}
.modal.--photo-prod-mobile .product_info.--mod-init > .product_icon {
grid-row: "1/-1";
}
}
</style>