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

56
IdoSellAddOn/script.js
View File

@@ -144,6 +144,7 @@ function idmGetSingleProdGraphQLPM({
name name
link link
type type
icon
${labels ? "zones" : ""} ${labels ? "zones" : ""}
${ ${
opinions opinions
@@ -406,25 +407,32 @@ async function idmPictureModuleProductsPM(containerEL) {
// OPINIE // OPINIE
let opinionsHTML = ""; let opinionsHTML = "";
if (isOpinions) { if (
isOpinions &&
typeof prodData.opinion?.rating === "number" &&
typeof prodData.opinion?.count === "number"
) {
opinionsHTML = ` opinionsHTML = `
<div class="product_opinions__stars"> <div class="product_opinions__stars">
<i class="icon-star ${prodData.opinion?.rating > 0.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 > 1.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 2.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 > 3.5 ? "--active" : ""}"></i>
<i class="icon-star ${prodData.opinion?.rating > 4.5 ? "--active" : ""}"></i> <i class="icon-star ${prodData.opinion.rating > 4.5 ? "--active" : ""}"></i>
</div> </div>
<span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span> <span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
<span class="product_opinions__count">${prodData.opinion.count}</span> <span class="product_opinions__count">${prodData.opinion.count}</span>
`; `;
} }
prodEl.innerHTML = ` prodEl.innerHTML = `
<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>` : ""} ${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""} ${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
<a class="product_name" href="${prodData.link}">${prodData.name}</a> <a class="product_name" href="${prodData.link}">${prodData.name}</a>
${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })} ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""} ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
</div>
`; `;
idmInitEventsPM({ idmInitEventsPM({
@@ -444,21 +452,31 @@ async function idmPictureModuleProductsPM(containerEL) {
document.body.addEventListener("click", (e) => { document.body.addEventListener("click", (e) => {
if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return; 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 // ClearShow
if (!prodContainerEl) // if(!prodContainerEl) return document.querySelector(".idm_picture__product.--show")?.classList?.remove("--show");
return document // if(prodContainerEl.classList.contains("--show")) return prodContainerEl.classList.remove("--show");
.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"); // const moduleContainer = prodContainerEl.closest(".idm_picture__module");
if (!moduleContainer) return; // if(!moduleContainer) return;
moduleContainer // moduleContainer.querySelectorAll(".idm_picture__product.--show").forEach(prodConEl=>prodConEl.classList.remove("--show"));
.querySelectorAll(".idm_picture__product.--show") // prodContainerEl.classList.add("--show");
.forEach((prodConEl) => prodConEl.classList.remove("--show")); const computedStyles = window.getComputedStyle(moduleCotnainer);
prodContainerEl.classList.add("--show"); 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> <style>
.idm_picture__module { .idm_picture__module {
--photo-prod-box-bg: #fff; --photo-prod-box-bg: var(--photo-mod-col-bg, #fff);
--photo-prod-box-text: #111; --photo-prod-box-text: var(--photo-mod-col-text, #111);
--photo-prod-point-shadow: rgba(255, 255, 255, 0.5); --photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
--photo-prod-box-pad-top: 1rem; --photo-prod-box-pad-top: 1rem;
@@ -32,8 +33,7 @@
position: absolute; position: absolute;
z-index: 10; z-index: 10;
} }
.idm_picture__product:hover, .idm_picture__product:hover {
.idm_picture__product.--show {
z-index: 20; z-index: 20;
} }
.idm_picture__img { .idm_picture__img {
@@ -114,15 +114,18 @@ PULSE ANIMATION
.product_info { .product_info {
background: var(--photo-prod-box-bg); background: var(--photo-prod-box-bg);
flex-direction: column;
padding: 1rem; padding: 1rem;
gap: 1rem;
display: none; display: none;
max-width: var(--photo-prod-box-width); max-width: var(--photo-prod-box-width);
position: absolute; position: absolute;
width: max-content; width: max-content;
box-shadow: 0px 0px 10px 1px #000; box-shadow: 0px 0px 10px 1px #000;
} }
.product_info__container {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 757px) { @media (min-width: 757px) {
.product_info { .product_info {
padding: 1.5rem; 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; font-size: 1.6rem;
color: var(--photo-prod-box-text); 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; 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; font-size: 1.6rem;
color: var(--photo-prod-box-text); 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; margin-bottom: 0;
} }
@@ -320,12 +331,6 @@ PULSE ANIMATION
animation: idmShowUp 0.3s ease-in-out; 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 { @keyframes idmShowUp {
from { from {
@@ -356,38 +361,101 @@ PULSE ANIMATION
} }
} }
.idm_picture__module .label_icons { :is(.idm_picture__module, .modal.--photo-prod-mobile) .label_icons {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
position: static; position: static;
} }
.idm_picture__module .product_opinions { :is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions {
display: flex; 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"; 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); 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-left: 1rem;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.idm_picture__module .product_opinions__count::before { :is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__count::before {
content: "("; content: "(";
} }
.idm_picture__module .product_opinions__count::after { :is(.idm_picture__module, .modal.--photo-prod-mobile)
.product_opinions__count::after {
content: ")"; 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; display: flex;
justify-content: center; justify-content: center;
margin-top: 0; 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> </style>

62
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@mui/icons-material": "^7.3.6", "@mui/icons-material": "^7.3.6",
"@mui/material": "^7.3.6", "@mui/material": "^7.3.6",
"react": "^19.2.0", "react": "^19.2.0",
"react-color": "^2.19.3",
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"react-hot-toast": "^2.6.0", "react-hot-toast": "^2.6.0",
"react-router-dom": "^7.11.0", "react-router-dom": "^7.11.0",
@@ -1076,6 +1077,15 @@
"url": "https://github.com/sponsors/nzakas" "url": "https://github.com/sponsors/nzakas"
} }
}, },
"node_modules/@icons/material": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13", "version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2999,6 +3009,18 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/lodash": {
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
"license": "MIT"
},
"node_modules/lodash-es": {
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
"license": "MIT"
},
"node_modules/lodash.merge": { "node_modules/lodash.merge": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3028,6 +3050,12 @@
"yallist": "^3.0.2" "yallist": "^3.0.2"
} }
}, },
"node_modules/material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
"license": "ISC"
},
"node_modules/minimatch": { "node_modules/minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3268,6 +3296,7 @@
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
@@ -3300,6 +3329,24 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-color": {
"version": "2.19.3",
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
"integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
"license": "MIT",
"dependencies": {
"@icons/material": "^0.2.4",
"lodash": "^4.17.15",
"lodash-es": "^4.17.15",
"material-colors": "^1.2.1",
"prop-types": "^15.5.10",
"reactcss": "^1.2.0",
"tinycolor2": "^1.4.1"
},
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "19.2.3", "version": "19.2.3",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
@@ -3404,6 +3451,15 @@
"react-dom": ">=16.6.0" "react-dom": ">=16.6.0"
} }
}, },
"node_modules/reactcss": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
"license": "MIT",
"dependencies": {
"lodash": "^4.0.1"
}
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.11", "version": "1.22.11",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -3583,6 +3639,12 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/tinycolor2": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
"license": "MIT"
},
"node_modules/tinyglobby": { "node_modules/tinyglobby": {
"version": "0.2.15", "version": "0.2.15",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

1
package.json
View File

@@ -15,6 +15,7 @@
"@mui/icons-material": "^7.3.6", "@mui/icons-material": "^7.3.6",
"@mui/material": "^7.3.6", "@mui/material": "^7.3.6",
"react": "^19.2.0", "react": "^19.2.0",
"react-color": "^2.19.3",
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"react-hot-toast": "^2.6.0", "react-hot-toast": "^2.6.0",
"react-router-dom": "^7.11.0", "react-router-dom": "^7.11.0",

1
src/App.jsx
View File

@@ -3,7 +3,6 @@ import Home from "./pages/Home";
import AppLayout from "./ui/AppLayout"; import AppLayout from "./ui/AppLayout";
import Instruction from "./pages/Instruction"; import Instruction from "./pages/Instruction";
import { Toaster } from "react-hot-toast"; import { Toaster } from "react-hot-toast";
import { Alert } from "@mui/material";
function App() { function App() {
return ( return (

14
src/constants/photo.js
View File

@@ -22,3 +22,17 @@ export const DEFAULT_POINT = {
id: 0, id: 0,
direction: Object.keys(DIRECTIONS)[0], direction: Object.keys(DIRECTIONS)[0],
}; // Default point structure }; // Default point structure
export const DEFAULT_COLOR_PALLETE = [
"#D9E3F0",
"#F47373",
"#697689",
"#37D67A",
"#2CCCE4",
"#555555",
"#dce775",
"#ff8a65",
"#ba68c8",
"#111111",
"#f2f2f2",
];

7
src/features/htmlBuilder/components/CodeBox.jsx
View File

@@ -17,6 +17,13 @@ export default function CodeBox() {
} }
}, [state.urls, state.points, state.photoAlt, state.previewMode]); // reactive slices }, [state.urls, state.points, state.photoAlt, state.previewMode]); // reactive slices
if (
import.meta.env.MODE === "production" &&
window.location.href.includes("https://zooart6.yourtechnicaldomain.com/") &&
!window.location.search.includes("dev=test")
)
return null;
const copyCode = () => { const copyCode = () => {
navigator.clipboard.writeText(code); navigator.clipboard.writeText(code);
toast.success("Skopiowano tekst!"); toast.success("Skopiowano tekst!");

7
src/features/htmlBuilder/generated/GeneratePreview.jsx
View File

@@ -11,6 +11,9 @@ function GeneratePreview({ preview = true }) {
const opinions = useSharedState((state) => state.opinions); const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket); const addToBasket = useSharedState((state) => state.addToBasket);
const bgColor = useSharedState((state) => state.bgColor);
const textColor = useSharedState((state) => state.textColor);
if (preview && urls[previewMode] === "") return null; if (preview && urls[previewMode] === "") return null;
return ( return (
@@ -20,6 +23,10 @@ function GeneratePreview({ preview = true }) {
data-labels={labels && true} data-labels={labels && true}
data-opinions={opinions && true} data-opinions={opinions && true}
data-add-to-basket={addToBasket && true} data-add-to-basket={addToBasket && true}
style={{
"--photo-mod-col-bg": bgColor,
"--photo-mod-col-text": textColor,
}}
> >
{<GeneratePreviewImage preview={preview} urls={urls} />} {<GeneratePreviewImage preview={preview} urls={urls} />}
{<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />} {<GeneratePreviewPoints preview={preview} uniqueId={uniqueId} />}

10
src/features/htmlBuilder/generated/GeneratePreviewImage.jsx
View File

@@ -1,13 +1,15 @@
import { useSharedState } from "../../../store/useSharedState"; import { useSharedState } from "../../../store/useSharedState";
function GeneratePreviewImage({ preview, urls }) { function GeneratePreviewImage({ preview, urls }) {
const imagePrefix =
import.meta.env.MODE === "development"
? `${import.meta.env.VITE_PUBLIC_URL}/`
: "";
const previewMode = useSharedState((state) => state.previewMode); const previewMode = useSharedState((state) => state.previewMode);
const photoAlt = useSharedState((state) => state.photoAlt); const photoAlt = useSharedState((state) => state.photoAlt);
const imagePrefix =
import.meta.env.MODE === "development" &&
!urls[previewMode]?.includes("https://")
? `${import.meta.env.VITE_PUBLIC_URL}/`
: "";
if (preview) if (preview)
return ( return (
<img <img

4
src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx
View File

@@ -90,7 +90,7 @@ function GeneratePreviewSinglePoint({
{...productInfoDataAttributes()} {...productInfoDataAttributes()}
> >
{preview && ( {preview && (
<> <div class="product_info__container">
{labels && ( {labels && (
<strong class="label_icons"> <strong class="label_icons">
<span class="label --new">Nowość</span> <span class="label --new">Nowość</span>
@@ -130,7 +130,7 @@ function GeneratePreviewSinglePoint({
<span>Do koszyka</span> <span>Do koszyka</span>
</button> </button>
)} )}
</> </div>
)} )}
</div> </div>
</div> </div>

290
src/features/htmlBuilder/generated/GenerateStyle.jsx
View File

@@ -3,10 +3,11 @@ function GenerateStyle() {
<> <>
<style> <style>
{` {`
.idm_picture__module { .idm_picture__module{
--photo-prod-box-bg: #fff; --photo-prod-box-bg: var(--photo-mod-col-bg, #fff);
--photo-prod-box-text: #111; --photo-prod-box-text: var(--photo-mod-col-text, #111);
--photo-prod-point-shadow: rgba(255, 255, 255, 0.5);
--photo-prod-point-shadow: rgba(255,255,255,.5);
--photo-prod-box-pad-top: 1em; --photo-prod-box-pad-top: 1em;
--photo-prod-box-pad-left: 2em; --photo-prod-box-pad-left: 2em;
@@ -27,33 +28,32 @@ function GenerateStyle() {
--photo-prod-point-mobile-left: 0%; --photo-prod-point-mobile-left: 0%;
--photo-box-offset: 1em; --photo-box-offset: 1em;
} }
.idm_picture__module { .idm_picture__module{
position: relative; position: relative;
} }
.idm_picture__product { .idm_picture__product{
position: absolute; position: absolute;
z-index: 10; z-index: 10;
} }
.idm_picture__product:hover, .idm_picture__product:hover{
.idm_picture__product.--show {
z-index: 20; z-index: 20;
} }
.idm_picture__img { .idm_picture__img{
width: 100%; width: 100%;
} }
.idm_picture__overlay { .idm_picture__overlay{
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
} }
/* ========================= /* =========================
PRODUCT POINT ( + ) PRODUCT POINT ( + )
========================= */ ========================= */
.idm_picture__product_point { .idm_picture__product_point{
position: relative; position: relative;
width: var(--photo-prod-point-size); width: var(--photo-prod-point-size);
height: var(--photo-prod-point-size); height: var(--photo-prod-point-size);
@@ -73,10 +73,10 @@ PRODUCT POINT ( + )
line-height: 1; line-height: 1;
z-index: 1; z-index: 1;
} }
/* Pulsating halo */ /* Pulsating halo */
.idm_picture__product_point::before { .idm_picture__product_point::before{
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
@@ -85,117 +85,120 @@ PRODUCT POINT ( + )
animation: idmPulse 1.5s ease-in-out infinite; animation: idmPulse 1.5s ease-in-out infinite;
z-index: -1; z-index: -1;
} }
/* Optional: stop pulse on hover */ /* Optional: stop pulse on hover */
.idm_picture__product:hover .idm_picture__product_point:before { .idm_picture__product:hover .idm_picture__product_point:before{
animation-play-state: paused; animation-play-state: paused;
} }
/* Focus accessibility */ /* Focus accessibility */
.idm_picture__product_point:focus-visible { .idm_picture__product_point:focus-visible{
outline: 2px solid #000; outline: 2px solid #000;
outline-offset: 4px; outline-offset: 4px;
} }
/* ========================= /* =========================
PULSE ANIMATION PULSE ANIMATION
========================= */ ========================= */
@keyframes idmPulse { @keyframes idmPulse{
0% { 0%{
opacity: 1; opacity: 1;
box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow); box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
} }
70% { 70%{
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow); box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
opacity: 0.8; opacity: 0.8;
} }
100% { 100%{
box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow); box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
opacity: 0; opacity: 0;
} }
} }
.product_info { .product_info{
background: var(--photo-prod-box-bg); background: var(--photo-prod-box-bg);
flex-direction: column;
padding: 1em; padding: 1em;
gap: 1em;
display: none; display: none;
max-width: var(--photo-prod-box-width); max-width: var(--photo-prod-box-width);
position: absolute; position: absolute;
width: max-content; width: max-content;
box-shadow: 0px 0px 10px 1px #000; box-shadow: 0px 0px 10px 1px #000;
} }
@media (min-width: 757px) { .product_info__container{
.product_info { display: flex;
flex-direction: column;
gap: 1em;
}
@media (min-width: 757px){
.product_info{
padding: 1.5em; padding: 1.5em;
} }
} }
@media (min-width: 979px) { @media (min-width: 979px){
.product_info { .product_info{
padding: 2em; padding: 2em;
} }
} }
.product_info::before { .product_info::before{
content: ""; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size)); width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size)); height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size));
z-index: -1; z-index: -1;
} }
/*Ulozenie okna produktowego*/ /*Ulozenie okna produktowego*/
.product_info { .product_info{
bottom: var(--photo-prod-box-dir-t, auto); bottom: var(--photo-prod-box-dir-t, auto);
top: var(--photo-prod-box-dir-b, auto); top: var(--photo-prod-box-dir-b, auto);
right: var(--photo-prod-box-dir-l, auto); right: var(--photo-prod-box-dir-l, auto);
left: var(--photo-prod-box-dir-r, auto); left: var(--photo-prod-box-dir-r, auto);
border-radius: var(--photo-prod-box-radius); border-radius: var(--photo-prod-box-radius);
} }
.product_info::before { .product_info::before{
top: var(--photo-prod-box-dir-t-before, auto); top: var(--photo-prod-box-dir-t-before, auto);
bottom: var(--photo-prod-box-dir-b-before, auto); bottom: var(--photo-prod-box-dir-b-before, auto);
right: var(--photo-prod-box-dir-r-before, auto); right: var(--photo-prod-box-dir-r-before, auto);
left: var(--photo-prod-box-dir-l-before, auto); left: var(--photo-prod-box-dir-l-before, auto);
} }
.product_info[data-dir-single-x="l"] { .product_info[data-dir-single-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
} }
.product_info[data-dir-single-x="r"] { .product_info[data-dir-single-x="r"] {
--photo-prod-box-dir-r: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-r: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-r-before: 0; --photo-prod-box-dir-r-before: 0;
} }
.product_info[data-dir-single-y="t"] { .product_info[data-dir-single-y="t"] {
--photo-prod-box-dir-t: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-t: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-t-before: 0; --photo-prod-box-dir-t-before: 0;
} }
.product_info[data-dir-single-y="b"] { .product_info[data-dir-single-y="b"] {
--photo-prod-box-dir-b: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-b: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-b-before: 0; --photo-prod-box-dir-b-before: 0;
} }
.product_info[data-dir-single-x="l"][data-dir-single-y="t"] { .product_info[data-dir-single-x="l"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tl); --photo-prod-box-radius: var(--photo-prod-box-radius-tl);
} }
.product_info[data-dir-single-x="r"][data-dir-single-y="t"] { .product_info[data-dir-single-x="r"][data-dir-single-y="t"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-tr); --photo-prod-box-radius: var(--photo-prod-box-radius-tr);
} }
.product_info[data-dir-single-x="l"][data-dir-single-y="b"] { .product_info[data-dir-single-x="l"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-bl); --photo-prod-box-radius: var(--photo-prod-box-radius-bl);
} }
.product_info[data-dir-single-x="r"][data-dir-single-y="b"] { .product_info[data-dir-single-x="r"][data-dir-single-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
@media (max-width: 756px) { @media (max-width: 756px) {
.product_info[data-dir-mobile-x="l"] { .product_info[data-dir-mobile-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
@@ -228,8 +231,8 @@ PULSE ANIMATION
.product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] { .product_info[data-dir-mobile-x="r"][data-dir-mobile-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
} }
@media (min-width: 757px) and (max-width: 978px) { @media (min-width: 757px) and (max-width: 978px) {
.product_info[data-dir-tablet-x="l"] { .product_info[data-dir-tablet-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
@@ -262,8 +265,8 @@ PULSE ANIMATION
.product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] { .product_info[data-dir-tablet-x="r"][data-dir-tablet-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
} }
@media (min-width: 979px) { @media (min-width: 979px) {
.product_info[data-dir-desktop-x="l"] { .product_info[data-dir-desktop-x="l"] {
--photo-prod-box-dir-l: calc(100% + var(--photo-box-offset)); --photo-prod-box-dir-l: calc(100% + var(--photo-box-offset));
--photo-prod-box-dir-l-before: 0; --photo-prod-box-dir-l-before: 0;
@@ -296,104 +299,147 @@ PULSE ANIMATION
.product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] { .product_info[data-dir-desktop-x="r"][data-dir-desktop-y="b"] {
--photo-prod-box-radius: var(--photo-prod-box-radius-br); --photo-prod-box-radius: var(--photo-prod-box-radius-br);
} }
} }
.idm_picture__product .product_info .product_name { :is(.idm_picture__module, .modal.--photo-prod-mobile) .product_info .product_name{
font-size: 1.6em; font-size: 1.6em;
color: var(--photo-prod-box-text); 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; 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.6em; font-size: 1.6em;
color: var(--photo-prod-box-text); 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; margin-bottom: 0;
} }
@media (min-width: 979px) { @media(min-width: 979px){
:is( :is(.idm_picture__product:hover, .idm_picture__product:has(.idm_picture__product_point:focus-within)) .product_info{
.idm_picture__product:hover,
.idm_picture__product:has(.idm_picture__product_point:focus-within)
)
.product_info {
display: flex; display: flex;
animation: idmShowUp 0.3s ease-in-out; 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 { @keyframes idmShowUp{
from { from{
opacity: 0; opacity: 0;
} }
to { to{
opacity: 1; opacity: 1;
} }
} }
.idm_picture__product { .idm_picture__product{
top: var(--photo-prod-point-mobile-top); top: var(--photo-prod-point-mobile-top);
left: var(--photo-prod-point-mobile-left); left: var(--photo-prod-point-mobile-left);
display: var(--photo-prod-point-mobile-display, block); display: var(--photo-prod-point-mobile-display, block);
} }
@media (min-width: 757px) { @media(min-width: 757px){
.idm_picture__product { .idm_picture__product{
top: var(--photo-prod-point-tablet-top); top: var(--photo-prod-point-tablet-top);
left: var(--photo-prod-point-tablet-left); left: var(--photo-prod-point-tablet-left);
display: var(--photo-prod-point-tablet-display, block); display: var(--photo-prod-point-tablet-display, block);
} }
} }
@media (min-width: 979px) { @media(min-width: 979px){
.idm_picture__product { .idm_picture__product{
top: var(--photo-prod-point-desktop-top); top: var(--photo-prod-point-desktop-top);
left: var(--photo-prod-point-desktop-left); left: var(--photo-prod-point-desktop-left);
display: var(--photo-prod-point-desktop-display, block); display: var(--photo-prod-point-desktop-display, block);
} }
} }
.idm_picture__module .label_icons { :is(.idm_picture__module, .modal.--photo-prod-mobile) .label_icons{
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
position: static; position: static;
} }
.idm_picture__module .product_opinions { :is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions{
display: flex; 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"; 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); 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: 1em; margin-left: 1em;
margin-right: 0.5em; margin-right: 0.5em;
} }
.idm_picture__module .product_opinions__count::before { :is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions__count::before{
content: "("; content: "(";
} }
.idm_picture__module .product_opinions__count::after { :is(.idm_picture__module, .modal.--photo-prod-mobile) .product_opinions__count::after{
content: ")"; 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; display: flex;
justify-content: center; justify-content: center;
margin-top: 0; 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;
}
// MOBILE
@media (max-width: 978px){
.modal.--photo-prod-mobile .product_info.--mod-init{
position: static;
display: flex;
width: 100%;
box-shadow: none;
} }
.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: 400px) 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> </style>

23
src/features/photoModule/PhotoGenericOptions.jsx
View File

@@ -6,6 +6,8 @@ import {
FormGroup, FormGroup,
Switch, Switch,
} from "@mui/material"; } from "@mui/material";
import ColorPickerInput from "../../ui/ColorPickerInput";
import { DEFAULT_COLOR_PALLETE } from "../../constants/photo";
function PhotoGenericOptions() { function PhotoGenericOptions() {
const setField = useSharedState((state) => state.setField); const setField = useSharedState((state) => state.setField);
@@ -15,6 +17,8 @@ function PhotoGenericOptions() {
const labels = useSharedState((state) => state.labels); const labels = useSharedState((state) => state.labels);
const opinions = useSharedState((state) => state.opinions); const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket); const addToBasket = useSharedState((state) => state.addToBasket);
const bgColor = useSharedState((state) => state.bgColor);
const textColor = useSharedState((state) => state.textColor);
const handleUrlRadioChange = (e) => { const handleUrlRadioChange = (e) => {
toggleField("isRWD"); toggleField("isRWD");
@@ -67,6 +71,25 @@ function PhotoGenericOptions() {
<Divider sx={{ borderColor: "#ccc" }} /> <Divider sx={{ borderColor: "#ccc" }} />
<div
style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}
>
<ColorPickerInput
color={bgColor}
onChange={(newColor) => setField("bgColor", newColor)}
label="Kolor Tła"
palette={DEFAULT_COLOR_PALLETE}
/>
<ColorPickerInput
color={textColor}
onChange={(newColor) => setField("textColor", newColor)}
label="Kolor Tekstu"
palette={DEFAULT_COLOR_PALLETE}
/>
</div>
<Divider sx={{ borderColor: "#ccc" }} />
<Alert severity="warning"> <Alert severity="warning">
Uwaga! Uwaga!
<br /> <br />

24
src/main.jsx
View File

@@ -1,28 +1,26 @@
import React from 'react' import React from "react";
import ReactDOM from 'react-dom/client' import ReactDOM from "react-dom/client";
import App from './App' import App from "./App";
import { ThemeProvider, CssBaseline } from '@mui/material'; import { ThemeProvider, CssBaseline } from "@mui/material";
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from "react-router-dom";
import theme from './styles/theme'; import theme from "./styles/theme";
// import ThemeCssVars from './styles/ThemeCssVars'; // import ThemeCssVars from './styles/ThemeCssVars';
const BASENAME = import.meta.env.VITE_PUBLIC_URL || "/"; const BASENAME = import.meta.env.VITE_PUBLIC_URL || "/";
const path = window.location.pathname; const path = window.location.pathname;
if (path.endsWith('index.html')) { if (path.endsWith("index.html")) {
window.location.replace(BASENAME); window.location.replace(BASENAME);
} }
ReactDOM.createRoot(document.getElementById("root")).render(
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode> <React.StrictMode>
<BrowserRouter basename={BASENAME}> <BrowserRouter basename={BASENAME}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline/> <CssBaseline />
{/* <ThemeCssVars/> */} {/* <ThemeCssVars/> */}
<App /> <App />
</ThemeProvider> </ThemeProvider>
</BrowserRouter> </BrowserRouter>
</React.StrictMode> </React.StrictMode>,
) );

7
src/store/useSharedState.js
View File

@@ -13,6 +13,10 @@ const defaultState = {
labels: false, labels: false,
opinions: false, opinions: false,
addToBasket: false, addToBasket: false,
//colros
bgColor: "#fff",
textColor: "#060606",
}; };
export const useSharedState = create( export const useSharedState = create(
@@ -110,6 +114,9 @@ export const useSharedState = create(
addToBasket: state.addToBasket, addToBasket: state.addToBasket,
previewMode: state.previewMode, previewMode: state.previewMode,
isRWD: state.isRWD, isRWD: state.isRWD,
bgColor: state.bgColor,
textColor: state.textColor,
}), }),
}, },
), ),

71
src/ui/ColorPickerInput.jsx Normal file
View File

@@ -0,0 +1,71 @@
import { useEffect, useRef, useState } from "react";
import { BlockPicker } from "react-color";
import { Box, ButtonBase, Typography } from "@mui/material";
function ColorPickerButton({ color, onChange, label = "Color", palette = [] }) {
const [open, setOpen] = useState(false);
const wrapperRef = useRef(null);
useEffect(() => {
function handleClickOutside(e) {
if (!wrapperRef.current?.contains(e.target)) {
setOpen(false);
}
}
if (open) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [open]);
return (
<Box
ref={wrapperRef}
sx={{ position: "relative", display: "inline-block" }}
>
{label && (
<Typography variant="caption" sx={{ display: "block", mb: 0.5 }}>
{label}
</Typography>
)}
<ButtonBase
onClick={() => setOpen((v) => !v)}
sx={{
width: "100%",
height: 32,
borderRadius: 1,
border: "1px solid",
borderColor: "divider",
backgroundColor: color,
}}
/>
{open && (
<Box
className="color-picker block-picker"
sx={{
position: "absolute",
top: "100%",
left: "50%",
mt: 1,
zIndex: 1300,
transform: "translateX(-50%)",
}}
>
<BlockPicker
color={color}
colors={palette}
onChange={(c) => onChange(c.hex)}
/>
</Box>
)}
</Box>
);
}
export default ColorPickerButton;