diff --git a/static/js/shop.jsx b/static/js/shop.jsx index 8c09912..72e9901 100644 --- a/static/js/shop.jsx +++ b/static/js/shop.jsx @@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client"; import PropTypes from "prop-types"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { v4 as uuidv4 } from 'uuid'; -import { CustomizeButton, CustomizeData } from "./shop_components.jsx";import { OverlayTrigger } from "react-bootstrap"; +import { OptionsDialogPopup, OptionsSummaryPopup } from "./shop_components.jsx";import { OverlayTrigger } from "react-bootstrap"; const data = window.shop_data; const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat()); @@ -697,7 +697,7 @@ class ProductCartItem extends React.PureComponent { {warning ? ( - ) : (options ? ( ) : ( (options && options_data) ? - ( ) : null + ( ) : null )} {(!warning && !options) && ( diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx index 7d6f52c..0e2ae15 100644 --- a/static/js/shop_components.jsx +++ b/static/js/shop_components.jsx @@ -2,7 +2,7 @@ import React, {Component} from "react"; import jsonLogic from 'json-logic-js'; -import {useState} from 'react'; +import {useState, useEffect} from 'react'; import {useClickAway} from "@uidotdev/usehooks"; // https://stackoverflow.com/a/70511311 @@ -268,7 +268,7 @@ export function ProcessOptions({options, data, target, id}) { } } -export function CustomizeButton({options, data, target, id, big}) { +export function OptionsDialogPopup({options, data, target, id, big}) { const [show, setShow] = useState(false); const ref = useClickAway(() => setShow(false)); @@ -294,14 +294,51 @@ export function CustomizeButton({options, data, target, id, big}) { ); } -export function CustomizeData({id, data}) { +export function OptionsSummaryPopup({id, data}) { const [show, setShow] = useState(false); const [position, setPosition] = useState({x: 0, y: 0}); - const ref = useClickAway(() => setShow(false)); + const [size, setSize] = useState({w: 0, h: 0}); + const close = () => { + setShow(false); + document.removeEventListener("scroll", close, true); + } + + const ref = useClickAway(close); + + const reposition = () => { + let popup_button = document.getElementById(id + "img"); + let rect = popup_button.getBoundingClientRect() + let pos_x = (rect.left + rect.right) / 2; + let pos_y = (rect.top + rect.bottom) / 2; + if (pos_x + size.w > window.innerWidth) { + setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2}); + } else { + setPosition({x: pos_x - size.w / 2, y: pos_y - size.h - 20}); + } + } + + useEffect(() => { + if (show) { + let popup = document.getElementById(id); + let width = popup.offsetWidth; + let height = popup.offsetHeight; + setSize({w: width, h: height}); + reposition() + } + }, [show]) + + + useEffect(() => { + if (show) { + reposition(); + } + }, [show, size]) const handleClick = (event) => { - setPosition({x: event.clientX, y: event.clientY}); setShow(!show); + if (!show) { + document.addEventListener("scroll", close, true); + } }; const stringify = (value) => { @@ -322,9 +359,11 @@ export function CustomizeData({id, data}) {
-
+
{Array.from(Object.entries(data).map(([key, value], _) => { return (

{key}: {stringify(value)}

);