diff --git a/IdoSellAddOn/script.js b/IdoSellAddOn/script.js new file mode 100644 index 0000000..0a42b9f --- /dev/null +++ b/IdoSellAddOn/script.js @@ -0,0 +1,178 @@ +function idmObserveEachOnce(elements, callback, options = {}) { + const observer = new IntersectionObserver( + (entries, obs) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + + callback(entry); + obs.unobserve(entry.target); + }); + }, + { + threshold: 0.1, + ...options, + } + ); + + elements.forEach((el) => observer.observe(el)); + return observer; +} + +idmObserveEachOnce( + document.querySelectorAll(".idm_picture__module"), + (entry) => { + idmPictureModuleProducts(entry.target); + } +); + +function idmGetSingleProdGraphQL(prodId) { + const IDM_PRICE_QUERY = (priceType) => `price { + rebateCodeActive + price { + ${priceType} { + value + formatted + } + } + omnibusPrice { + ${priceType} { + value + formatted + } + } + omnibusPriceDetails { + unit { + ${priceType} { + value + formatted + } + } + youSavePercent + omnibusPriceIsHigherThanSellingPrice + newPriceEffectiveUntil { + formatted + } + } + max { + ${priceType} { + value + formatted + } + } + unit { + ${priceType} { + value + formatted + } + } + unitConvertedPrice { + ${priceType} { + value + formatted + } + } + youSavePercent + beforeRebate { + ${priceType} { + value + formatted + } + } + beforeRebateDetails { + youSavePercent + unit { + ${priceType} { + value + formatted + } + } + } + advancePrice { + ${priceType} { + value + formatted + } + } + suggested { + ${priceType} { + value + formatted + } + } + rebateNumber { + number + ${priceType} { + value + formatted + } + } + }`; + + return ` + prod${prodId}: product(productId: ${prodId}) { + product { + id + name + link + ${IDM_PRICE_QUERY(app_shop.vars.priceType)} + } + }`; +} +async function idmPictureModuleProducts(containerEL) { + try { + const allProdEl = containerEL.querySelectorAll(".product_info[data-id]"); + const productsId = []; + allProdEl.forEach((prodEl) => { + if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id); + }); + + const res = await fetch("/graphql/v1/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: `{${productsId.reduce( + (acc, val, index) => acc + `${idmGetSingleProdGraphQL(val)}`, + "" + )}}`, + }), + }); + + const data = await res.json(); + 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; + + prodEl.classList.add("--mod-init"); + prodEl.innerHTML = ` + ${prodData.name} + ${ + prodData.price?.price?.[app_shop.vars.priceType]?.formatted + } + `; + }); + + containerEL.querySelectorAll(".product_info:not(.--mod-init)"); + } catch (err) { + console.error(err); + } +} + +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"); + if (!prodContainerEl) return; + if (prodContainerEl.classList.contains("--show")) + return prodContainerEl.classList.remove("--show"); + + 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"); +}); diff --git a/IdoSellAddOn/style.html b/IdoSellAddOn/style.html new file mode 100644 index 0000000..d727436 --- /dev/null +++ b/IdoSellAddOn/style.html @@ -0,0 +1,208 @@ + diff --git a/README.md b/README.md index 84da4b4..264ebae 100644 --- a/README.md +++ b/README.md @@ -35,3 +35,7 @@ xd przez shadow roota stylowanie komponentów z MUI nie działa w preview poprawić rerenderowanie szczególnie inputow problem rem em w shadow root + + + +Zmiana szerokości kod|preview diff --git a/public/kotek-2.jpg b/public/kotek-2.jpg deleted file mode 100644 index 7c3fc70..0000000 Binary files a/public/kotek-2.jpg and /dev/null differ diff --git a/src/App.jsx b/src/App.jsx index 3d017fa..9ce5c2e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,9 @@ import { Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; -import "./styles/index.css"; import AppLayout from "./ui/AppLayout"; import Instruction from "./pages/Instruction"; import { Toaster } from "react-hot-toast"; +import { Alert } from "@mui/material"; function App() { return ( diff --git a/src/constants/photo.js b/src/constants/photo.js index 7fd733a..4375c5d 100644 --- a/src/constants/photo.js +++ b/src/constants/photo.js @@ -1,7 +1,4 @@ -import { BREAKPOINTS } from "./rwd"; - // Constants for PhotoModule - // top-left, top-right, bottom-left, bottom-right export const DIRECTIONS = { "t-l": "Góra Lewo", @@ -15,11 +12,11 @@ export const DEFAULT_POINT = { y: 0, positions: { - single: { x: 0, y: 0 }, + single: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] }, // ...Object.BREAKPOINTS - desktop: { x: 0, y: 0 }, - tablet: { x: 0, y: 0 }, - mobile: { x: 0, y: 0 }, + desktop: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] }, + tablet: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] }, + mobile: { x: 0, y: 0, hide: false, direction: Object.keys(DIRECTIONS)[0] }, }, id: 0, diff --git a/src/features/htmlBuilder/components/CodeBox.jsx b/src/features/htmlBuilder/components/CodeBox.jsx index 1cf23c2..b879671 100644 --- a/src/features/htmlBuilder/components/CodeBox.jsx +++ b/src/features/htmlBuilder/components/CodeBox.jsx @@ -15,10 +15,10 @@ export default function CodeBox() { if (hiddenRef.current) { setCode(hiddenRef.current.innerHTML); } - }, [state.urls, state.urlRadioPoint, state.points, state.photoAlt]); // reactive slices + }, [state.urls, state.points, state.photoAlt, state.previewMode]); // reactive slices const copyCode = () => { - navigator.clipboard.writeText("code"); + navigator.clipboard.writeText(code); toast.success("Skopiowano tekst!"); }; @@ -31,13 +31,7 @@ export default function CodeBox() { {/* Hidden live component */}
- +
@@ -47,7 +41,7 @@ export default function CodeBox() { - + {/* */}
{/* Textarea showing the HTML */} diff --git a/src/features/htmlBuilder/components/PreviewRWDTabs.jsx b/src/features/htmlBuilder/components/PreviewRWDTabs.jsx index 997a375..a706008 100644 --- a/src/features/htmlBuilder/components/PreviewRWDTabs.jsx +++ b/src/features/htmlBuilder/components/PreviewRWDTabs.jsx @@ -1,5 +1,5 @@ import styled from "@emotion/styled"; -import { Button } from "@mui/material"; +import { Button, Tab, Tabs } from "@mui/material"; import { BREAKPOINTS } from "../../../constants/rwd"; import { useSharedState } from "../../../store/useSharedState"; import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter"; @@ -15,21 +15,43 @@ function PreviewRWDTabs() { const currentPreviewMode = useSharedState((state) => state.previewMode); const setPreviewMode = useSharedState((state) => state.setPreviewMode); + if (currentPreviewMode === "single") return null; + return ( - - {currentPreviewMode === "single" - ? null - : Object.keys(BREAKPOINTS).map((key) => ( - - ))} - + // + // {currentPreviewMode === "single" + // ? null + // : Object.keys(BREAKPOINTS).map((key) => ( + // + // ))} + // + setPreviewMode(newVal)} + variant="fullWidth" + sx={(theme) => ({ + backgroundColor: theme.palette.background.header, + // borderRadius: "16px 16px 0 0", + })} + > + {Object.keys(BREAKPOINTS).map((key) => ( + theme.palette.secondary.light, // inactive color + }} + /> + ))} + ); } diff --git a/src/features/htmlBuilder/generated/GeneratePreview.jsx b/src/features/htmlBuilder/generated/GeneratePreview.jsx index 8949e39..3d4160a 100644 --- a/src/features/htmlBuilder/generated/GeneratePreview.jsx +++ b/src/features/htmlBuilder/generated/GeneratePreview.jsx @@ -5,13 +5,14 @@ import GeneratePreviewPoints from "./GeneratePreviewPoints"; function GeneratePreview({ preview = true }) { const previewMode = useSharedState((state) => state.previewMode); // const urls = useSharedState((state) => state.urls); + const uniqueId = Math.ceil(Math.random() * 100000 + 1); if (preview && urls[previewMode] === "") return null; return ( -
+
{} - {} + {}
); } diff --git a/src/features/htmlBuilder/generated/GeneratePreviewImage.jsx b/src/features/htmlBuilder/generated/GeneratePreviewImage.jsx index 4a40701..0aa687d 100644 --- a/src/features/htmlBuilder/generated/GeneratePreviewImage.jsx +++ b/src/features/htmlBuilder/generated/GeneratePreviewImage.jsx @@ -3,16 +3,15 @@ import { useSharedState } from "../../../store/useSharedState"; function GeneratePreviewImage({ preview, urls }) { const imagePrefix = import.meta.env.MODE === "development" - ? import.meta.env.VITE_PUBLIC_URL + ? `${import.meta.env.VITE_PUBLIC_URL}/` : ""; const previewMode = useSharedState((state) => state.previewMode); - const urlRadioPoint = useSharedState((state) => state.urlRadioPoint); const photoAlt = useSharedState((state) => state.photoAlt); if (preview) return ( {photoAlt - {urlRadioPoint === "rwd" ? ( + {previewMode !== "single" ? ( {photoAlt ) : ( {photoAlt state.points.length); const containerRef = useRef(); @@ -14,6 +14,7 @@ function GeneratePreviewPoints({ preview }) { index={index} preview={preview} containerRef={containerRef} + uniqueId={uniqueId} /> ))}
diff --git a/src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx b/src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx index ae76234..5acb859 100644 --- a/src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx +++ b/src/features/htmlBuilder/generated/GeneratePreviewSinglePoint.jsx @@ -1,49 +1,45 @@ +import { BREAKPOINTS } from "../../../constants/rwd"; +import { useDragMove } from "../../../hooks/useDragMove"; +import { usePrepareRWDStyle } from "../../../hooks/usePrepareRWDStyle"; import { useSharedState } from "../../../store/useSharedState"; // Problemy - unikalne id elementu pod SEO -// -function GeneratePreviewSinglePoint({ index, preview, containerRef }) { - const { positions, id, direction } = useSharedState( - (state) => state.points[index] - ); +function GeneratePreviewSinglePoint({ + index, + preview, + containerRef, + uniqueId, +}) { + const { positions, id } = useSharedState((state) => state.points[index]); const previewMode = useSharedState((state) => state.previewMode); const setSinglePointPosition = useSharedState( (state) => state.setSinglePointPosition ); // you need a setter in your store - const [directionY, directionX] = direction.split("-"); + const onPointerDown = useDragMove({ + ref: containerRef, + x: positions[previewMode].x, + y: positions[previewMode].y, + changeXFn: (newX) => setSinglePointPosition(index, previewMode, "x", newX), + changeYFn: (newY) => setSinglePointPosition(index, previewMode, "y", newY), + }); - const onPointerDown = (e) => { - e.preventDefault(); - const container = containerRef.current; - if (!container) return; + const prodBoxUniqueId = `prod-id-${id}-${uniqueId}`; - const rect = container.getBoundingClientRect(); - const startX = e.clientX; - const startY = e.clientY; - const initialX = positions[previewMode].x; - const initialY = positions[previewMode].y; - - const onPointerMove = (moveEvent) => { - const deltaX = ((moveEvent.clientX - startX) / rect.width) * 100; - const deltaY = ((moveEvent.clientY - startY) / rect.height) * 100; - - // clamp between 0% and 100% - const newX = Math.min(100, Math.max(0, initialX + deltaX)); - const newY = Math.min(100, Math.max(0, initialY + deltaY)); - - setSinglePointPosition(index, previewMode, "x", newX); - setSinglePointPosition(index, previewMode, "y", newY); - }; - - const onPointerUp = () => { - window.removeEventListener("pointermove", onPointerMove); - window.removeEventListener("pointerup", onPointerUp); - }; - - window.addEventListener("pointermove", onPointerMove); - window.addEventListener("pointerup", onPointerUp); + const generatePointStyles = (mode) => { + const [dirY, dirX] = positions[mode].direction.split("-"); + return `#${prodBoxUniqueId}{ + --photo-prod-box-dir-${dirY}: calc(100% + var(--photo-box-offset)); + --photo-prod-box-dir-${dirX}: calc(100% + var(--photo-box-offset)); + + --photo-prod-box-dir-${dirY}-before: 0; + --photo-prod-box-dir-${dirX}-before: 0; + + --photo-prod-box-radius: var(--photo-prod-box-radius-${ + dirY + dirX + }); + }`; }; if (preview) @@ -51,35 +47,27 @@ function GeneratePreviewSinglePoint({ index, preview, containerRef }) {
-
- {preview && ( - <> - - Produkt {index + 1} - - XX,XX zł - - )} + +
); @@ -88,42 +76,37 @@ function GeneratePreviewSinglePoint({ index, preview, containerRef }) { className="idm_picture__product" style={ previewMode === "single" - ? { top: positions.single.y, left: positions.single.y } - : { - "--photo-prod-point-desktop-top": `${positions.desktop.y}%`, - "--photo-prod-point-desktop-left": `${positions.desktop.x}%`, - "--photo-prod-point-tablet-top": `${positions.tablet.y}%`, - "--photo-prod-point-tablet-left": `${positions.tablet.x}%`, - "--photo-prod-point-mobile-top": `${positions.mobile.y}%`, - "--photo-prod-point-mobile-left": `${positions.mobile.x}%`, - } + ? { top: `${positions.single.y}%`, left: `${positions.single.x}%` } + : Object.keys(BREAKPOINTS).reduce((acc, key) => { + acc[`--photo-prod-point-${key}-top`] = `${positions[key].y}%`; + acc[`--photo-prod-point-${key}-left`] = `${positions[key].x}%`; + acc[`--photo-prod-point-${key}-display`] = positions[key].hide + ? "none" + : "block"; + return acc; + }, {}) } > -
- {preview && ( - <> - - Produkt {index + 1} - - XX,XX zł - +
+ + ) : ( + usePrepareRWDStyle({ + desktopStyle: generatePointStyles("desktop"), + mobileStyle: generatePointStyles("mobile"), + tabletStyle: generatePointStyles("tablet"), + }) )} -
+
); } diff --git a/src/features/htmlBuilder/generated/GenerateStyle.jsx b/src/features/htmlBuilder/generated/GenerateStyle.jsx index 78aeba9..607e648 100644 --- a/src/features/htmlBuilder/generated/GenerateStyle.jsx +++ b/src/features/htmlBuilder/generated/GenerateStyle.jsx @@ -13,7 +13,6 @@ function GenerateStyle() { --photo-prod-box-width: 30em; --photo-prod-point-size: 24px; - --photo-prod-box-radius: 20px; --photo-prod-box-radius-br: 0px 20px 20px 20px; --photo-prod-box-radius-bl: 20px 0px 20px 20px; --photo-prod-box-radius-tl: 20px 20px 0px 20px; @@ -29,11 +28,6 @@ function GenerateStyle() { --photo-box-offset: 1em; - // --photo-box-offset-t: calc(-1 * var(--photo-box-offset)); - // --photo-box-offset-b: calc(var(--photo-prod-point-size) + var(--photo-box-offset)); - - // --photo-box-offset-l: calc(var(--photo-prod-point-size) + var(--photo-box-offset)); - // --photo-box-offset-r: calc(-1 * var(--photo-box-offset)); } .idm_picture__module{ @@ -129,6 +123,8 @@ PULSE ANIMATION max-width: var(--photo-prod-box-width); position: absolute; width: max-content; + + box-shadow: 0px 0px 10px 1px #000; } .product_info::before{ content: ""; @@ -136,61 +132,51 @@ PULSE ANIMATION display: block; width: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size)); height: calc(100% + var(--photo-box-offset) + var(--photo-prod-point-size)); -} -.product_info[data-direction-y="t"]{ - bottom: calc(100% + var(--photo-box-offset)); -} -.product_info[data-direction-y="b"]{ - top: calc(100% + var(--photo-box-offset)); -} -.product_info[data-direction-x="l"]{ - right: calc(100% + var(--photo-box-offset)); -} -.product_info[data-direction-x="r"]{ - left: calc(100% + var(--photo-box-offset)); + z-index: -1; } -.product_info[data-direction-y="t"]::before{ - top: 0; +.product_info{ + bottom: var(--photo-prod-box-dir-t, auto); + top: var(--photo-prod-box-dir-b, auto); + right: var(--photo-prod-box-dir-l, auto); + left: var(--photo-prod-box-dir-r, auto); + + border-radius: var(--photo-prod-box-radius); } -.product_info[data-direction-y="b"]::before{ - bottom: 0; -} -.product_info[data-direction-x="l"]::before{ - left: 0; -} -.product_info[data-direction-x="r"]::before{ - right: 0; +.product_info::before{ + top: var(--photo-prod-box-dir-t-before, auto); + bottom: var(--photo-prod-box-dir-b-before, auto); + right: var(--photo-prod-box-dir-r-before, auto); + left: var(--photo-prod-box-dir-l-before, auto); } -.product_info[data-direction-y="t"][data-direction-x="l"]{ - border-radius: var(--photo-prod-box-radius-tl); +.idm_picture__product .product_info .product_name{ + font-size: 1.6em; + color: var(--photo-prod-box-text); } -.product_info[data-direction-y="t"][data-direction-x="r"]{ - border-radius: var(--photo-prod-box-radius-tr); -} -.product_info[data-direction-y="b"][data-direction-x="l"]{ - border-radius: var(--photo-prod-box-radius-bl); -} -.product_info[data-direction-y="b"][data-direction-x="r"]{ - border-radius: var(--photo-prod-box-radius-br); +.idm_picture__product .product_info .product_name:hover{ + color: var(--primary-color, #000)!important; } -.product_name{ +.idm_picture__product .product_info .product_price{ font-size: 1.6em; color: var(--photo-prod-box-text); } -.product_price{ - font-size: 1.6em; - color: var(--photo-prod-box-text); +@media(min-width: 979px){ + .idm_picture__product:hover .product_info{ + display: flex; + animation: idmShowUp 0.3s ease-in-out; + /* opacity: 1; */ + } } - -.idm_picture__product:hover .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; */ + } } @keyframes idmShowUp{ @@ -206,23 +192,24 @@ PULSE ANIMATION .idm_picture__product{ top: var(--photo-prod-point-mobile-top); left: var(--photo-prod-point-mobile-left); + display: var(--photo-prod-point-mobile-display, block); } @media(min-width: 757px){ .idm_picture__product{ top: var(--photo-prod-point-tablet-top); left: var(--photo-prod-point-tablet-left); + display: var(--photo-prod-point-tablet-display, block); } } @media(min-width: 979px){ .idm_picture__product{ top: var(--photo-prod-point-desktop-top); left: var(--photo-prod-point-desktop-left); + display: var(--photo-prod-point-desktop-display, block); } } - - .idm_picture__product_point{ cursor: grab; } diff --git a/src/features/htmlBuilder/generated/useRecoverCode.js b/src/features/htmlBuilder/generated/useRecoverCode.js deleted file mode 100644 index 5f44ac2..0000000 --- a/src/features/htmlBuilder/generated/useRecoverCode.js +++ /dev/null @@ -1,5 +0,0 @@ -import { useSharedState } from "../../../store/useSharedState"; - -export default function useRecoverCode(code) { - const state = useSharedState(); -} diff --git a/src/features/photoModule/PhotoPointCheckbox.jsx b/src/features/photoModule/PhotoPointCheckbox.jsx new file mode 100644 index 0000000..09d1ad6 --- /dev/null +++ b/src/features/photoModule/PhotoPointCheckbox.jsx @@ -0,0 +1,29 @@ +import { Checkbox, FormControl, FormControlLabel } from "@mui/material"; +import { useSharedState } from "../../store/useSharedState"; + +function PhotoPointCheckbox({ index }) { + const setSinglePointPosition = useSharedState( + (state) => state.setSinglePointPosition + ); + const previewMode = useSharedState((state) => state.previewMode); + const hide = useSharedState( + (state) => state.points[index].positions[previewMode].hide + ); + + if (previewMode === "single") return null; + + const handleChange = () => { + setSinglePointPosition(index, previewMode, "hide", !hide); + }; + + return ( + + } + label="Schowaj punkt dla tego widoku" + /> + + ); +} + +export default PhotoPointCheckbox; diff --git a/src/features/photoModule/PhotoPointDirection.jsx b/src/features/photoModule/PhotoPointDirection.jsx new file mode 100644 index 0000000..6d79e25 --- /dev/null +++ b/src/features/photoModule/PhotoPointDirection.jsx @@ -0,0 +1,35 @@ +import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"; +import { DIRECTIONS } from "../../constants/photo"; +import { useSharedState } from "../../store/useSharedState"; + +export default function PhotoPointDirection({ index }) { + const setSinglePointPosition = useSharedState( + (state) => state.setSinglePointPosition + ); + const previewMode = useSharedState((state) => state.previewMode); + const direction = useSharedState( + (state) => state.points[index].positions[previewMode].direction + ); + + const handleChange = (value) => { + setSinglePointPosition(index, previewMode, "direction", value); + }; + + return ( + + Kierunek + + + ); +} diff --git a/src/features/photoModule/PhotoPointPosition.jsx b/src/features/photoModule/PhotoPointPosition.jsx index b853a17..8bb4c48 100644 --- a/src/features/photoModule/PhotoPointPosition.jsx +++ b/src/features/photoModule/PhotoPointPosition.jsx @@ -1,5 +1,4 @@ import styled from "@emotion/styled"; -import { BREAKPOINTS } from "../../constants/rwd"; import { useSharedState } from "../../store/useSharedState"; import InputField from "../../ui/InputField"; import { capitalizeFirstLetter } from "../../utils/capitalizeFirstLetter"; @@ -15,8 +14,14 @@ function PhotoPointPosition({ index }) { const setSinglePointPosition = useSharedState( (state) => state.setSinglePointPosition ); - const urlRadioPoint = useSharedState((state) => state.urlRadioPoint); - const positions = useSharedState((state) => state.points[index].positions); + const previewMode = useSharedState((state) => state.previewMode); + + const posX = useSharedState( + (state) => state.points[index].positions[previewMode].x + ); + const posY = useSharedState( + (state) => state.points[index].positions[previewMode].y + ); const handleChangeNumber = ({ e, @@ -35,79 +40,44 @@ function PhotoPointPosition({ index }) { return (
- {urlRadioPoint === "single" ? ( - - Położenie: - - handleChangeNumber({ - e, - brName: "single", - positionName: "x", - min: 0, - max: 100, - }) - } - /> - - handleChangeNumber({ - e, - brName: "single", - positionName: "y", - min: 0, - max: 100, - }) - } - /> - - ) : ( - <> - {Object.keys(BREAKPOINTS).map((brPoint) => ( - - {capitalizeFirstLetter(brPoint)}: - - handleChangeNumber({ - e, - brName: brPoint, - positionName: "x", - min: 0, - max: 100, - }) - } - /> - - handleChangeNumber({ - e, - brName: brPoint, - positionName: "y", - min: 0, - max: 100, - }) - } - /> - - ))} - - )} + + + {previewMode === "single" + ? "Położenie" + : capitalizeFirstLetter(previewMode)} + : + + + handleChangeNumber({ + e, + brName: previewMode, + positionName: "x", + min: 0, + max: 100, + }) + } + /> + + handleChangeNumber({ + e, + brName: previewMode, + positionName: "y", + min: 0, + max: 100, + }) + } + /> +
); } diff --git a/src/features/photoModule/PhotoSinglePoint.jsx b/src/features/photoModule/PhotoSinglePoint.jsx index 8c84740..31c6282 100644 --- a/src/features/photoModule/PhotoSinglePoint.jsx +++ b/src/features/photoModule/PhotoSinglePoint.jsx @@ -1,14 +1,13 @@ -import { MenuItem, Select, FormControl, InputLabel } from "@mui/material"; import InputField from "../../ui/InputField"; -import { DIRECTIONS } from "./../../constants/photo"; import GenericBox from "../../ui/GenericBox"; import { useSharedState } from "../../store/useSharedState"; import PhotoPointPosition from "./PhotoPointPosition"; +import PhotoPointCheckbox from "./PhotoPointCheckbox"; +import PhotoPointDirection from "./PhotoPointDirection"; function PhotoSinglePoint({ index }) { const setSinglePoint = useSharedState((state) => state.setSinglePoint); const removeSinglePoint = useSharedState((state) => state.removeSinglePoint); - const direction = useSharedState((state) => state.points[index].direction); const id = useSharedState((state) => state.points[index].id); return ( @@ -25,21 +24,8 @@ function PhotoSinglePoint({ index }) { onChange={(e) => setSinglePoint(index, { id: e.target.value })} /> - - Kierunek - - + + ); } diff --git a/src/features/photoModule/PhotoUrl.jsx b/src/features/photoModule/PhotoUrl.jsx index 8cc855b..3f2890d 100644 --- a/src/features/photoModule/PhotoUrl.jsx +++ b/src/features/photoModule/PhotoUrl.jsx @@ -4,24 +4,22 @@ import GenericBox from "../../ui/GenericBox"; import GenericRadioGroup from "../../ui/GenericRadioGroup"; import InputField from "../../ui/InputField"; import { URL_RADIO_DATA } from "./../../constants/photo"; +import { useState } from "react"; function PhotoUrl() { - const urlRadioPoint = useSharedState((state) => state.urlRadioPoint); - const setUrlRadioPoint = useSharedState((state) => state.setUrlRadioPoint); + const previewMode = useSharedState((state) => state.previewMode); + const setPreviewMode = useSharedState((state) => state.setPreviewMode); - const urlSingle = useSharedState((state) => state.urls.single); - const urlDesktop = useSharedState((state) => state.urls.desktop); - const urlTablet = useSharedState((state) => state.urls.tablet); - const urlMobile = useSharedState((state) => state.urls.mobile); + const [urlPoint, setUrlPoint] = useState("single"); + + const url = useSharedState((state) => state.urls[previewMode]); const setUrl = useSharedState((state) => state.setUrl); const photoAlt = useSharedState((state) => state.photoAlt); const setPhotoAlt = useSharedState((state) => state.setPhotoAlt); - const setPreviewMode = useSharedState((state) => state.setPreviewMode); - const handleUrlRadioChange = (event) => { - setUrlRadioPoint(event.target.value); + setUrlPoint(event.target.value); setPreviewMode(event.target.value === "rwd" ? "desktop" : "single"); }; const handleChangeURL = ({ event, type }) => { @@ -33,35 +31,17 @@ function PhotoUrl() { - {urlRadioPoint === "rwd" ? ( - <> - handleChangeURL({ event: e, type: "desktop" })} - value={urlDesktop} - /> - handleChangeURL({ event: e, type: "tablet" })} - value={urlTablet} - /> - handleChangeURL({ event: e, type: "mobile" })} - value={urlMobile} - /> - - ) : ( - handleChangeURL({ event: e, type: "single" })} - value={urlSingle} - /> - )} + handleChangeURL({ event: e, type: previewMode })} + value={url} + /> { + const deltaX = ((moveEvent.clientX - startX) / rect.width) * 100; + const deltaY = ((moveEvent.clientY - startY) / rect.height) * 100; + + // clamp between 0% and 100% + const newX = Math.min(100, Math.max(0, initialX + deltaX)); + const newY = Math.min(100, Math.max(0, initialY + deltaY)); + + changeXFn(newX); + changeYFn(newY); + }; + + const onPointerUp = () => { + window.removeEventListener("pointermove", onPointerMove); + window.removeEventListener("pointerup", onPointerUp); + }; + + window.addEventListener("pointermove", onPointerMove); + window.addEventListener("pointerup", onPointerUp); + }; +} diff --git a/src/hooks/usePrepareRWDStyle.js b/src/hooks/usePrepareRWDStyle.js new file mode 100644 index 0000000..8660e5c --- /dev/null +++ b/src/hooks/usePrepareRWDStyle.js @@ -0,0 +1,17 @@ +import { BREAKPOINTS } from "../constants/rwd"; + +export function usePrepareRWDStyle({ mobileStyle, desktopStyle, tabletStyle }) { + return ` + @media(max-width: ${BREAKPOINTS.tablet - 1}px){ + ${mobileStyle} + } + @media(min-width: ${BREAKPOINTS.tablet}px) and (max-width: ${ + BREAKPOINTS.desktop - 1 + }px){ + ${tabletStyle} + } + @media(min-width: ${BREAKPOINTS.desktop}px){ + ${desktopStyle} + } + `; +} diff --git a/src/pages/Instruction.jsx b/src/pages/Instruction.jsx index 65bf0b8..9be1638 100644 --- a/src/pages/Instruction.jsx +++ b/src/pages/Instruction.jsx @@ -1,7 +1,7 @@ function Instruction() { return (
- Tu jest instrukcja + Tu miała być instrukcja
) } diff --git a/src/store/useSharedState.js b/src/store/useSharedState.js index fd75068..ef348ee 100644 --- a/src/store/useSharedState.js +++ b/src/store/useSharedState.js @@ -1,10 +1,9 @@ import { create } from "zustand"; -import { DEFAULT_POINT, URL_RADIO_DATA } from "./../constants/photo"; +import { DEFAULT_POINT } from "./../constants/photo"; // export const createBox = () => ({}); const defaultState = { urls: { desktop: "", tablet: "", mobile: "", single: "" }, - urlRadioPoint: URL_RADIO_DATA[0].value, points: [{ ...DEFAULT_POINT }], photoAlt: "Zdjęcie pokazowe", previewMode: "single", // desktop, tablet, mobile @@ -19,7 +18,6 @@ export const useSharedState = create((set, get) => ({ set((state) => ({ urls: { ...state.urls, [type]: url } })), setPhotoAlt: (alt) => set({ photoAlt: alt }), - setUrlRadioPoint: (value) => set({ urlRadioPoint: value }), setPoints: (points) => set({ points }), setPointsLength: (length) => set({ pointsLength: length }), setPreviewMode: (mode) => set({ previewMode: mode }), diff --git a/src/styles/index.css b/src/styles/index.css deleted file mode 100644 index 8b13789..0000000 --- a/src/styles/index.css +++ /dev/null @@ -1 +0,0 @@ -