diff --git a/lib/components/QuizAnswerer.tsx b/lib/components/QuizAnswerer.tsx index 653f511..ecee814 100644 --- a/lib/components/QuizAnswerer.tsx +++ b/lib/components/QuizAnswerer.tsx @@ -21,12 +21,10 @@ import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage"; import { HelmetProvider } from "react-helmet-async"; import "moment/dist/locale/ru"; +import unscreen from "@/ui_kit/unscreen"; moment.locale("ru"); const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText; -console.log(localeText); -console.log(moment); - type Props = { quizSettings?: QuizSettings; quizId: string; @@ -128,8 +126,17 @@ function QuizAnswererInner({ ); } - export default function QuizAnswerer(props: Props) { + useEffect(() => { + const root = document.getElementById("root"); + const overlay = document.getElementById("hideoverlay"); + + if (root !== null && overlay !== null && props.quizSettings?.settings.cfg?.isUnSc) { + overlay.style.cssText = + "position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index:999; opacity: 0;"; + unscreen(overlay, root); + } + }, []); return ( +
diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx index 899b06c..2a55429 100644 --- a/lib/components/ViewPublicationPage/ResultForm.tsx +++ b/lib/components/ViewPublicationPage/ResultForm.tsx @@ -183,6 +183,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => { display: "flex", justifyContent: "center", }} + onClick={(event) => event.preventDefault()} > resultImage img": { width: "100%", borderRadius: "12px" }, }} + onClick={(event) => event.preventDefault()} > {backgroundBlock} @@ -204,6 +205,7 @@ const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: Lay justifyContent: "center", "& > img": { width: "100%", borderRadius: "12px" }, }} + onClick={(event) => event.preventDefault()} > {backgroundBlock} diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx index 34444c5..699aa44 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx @@ -73,6 +73,7 @@ const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock borderRadius: "12px", }, }} + onClick={(event) => event.preventDefault()} > {backgroundBlock} @@ -154,6 +155,7 @@ const ExpandedMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock minHeight: "100%", }, }} + onClick={(event) => event.preventDefault()} > {backgroundBlock} @@ -205,6 +207,7 @@ const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock overflow: "hidden", "& > img": { width: "100%", borderRadius: "12px" }, }} + onClick={(event) => event.preventDefault()} > {backgroundBlock} diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx index 916aa0d..c3ad205 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx @@ -105,6 +105,7 @@ export const StartPageViewPublication = () => { ? "center" : undefined, }} + onClick={(event) => event.preventDefault()} > {settings.cfg.startpage.logo && ( { color: settings.cfg.startpageType === "expanded" ? "white" : "black", }} + onClick={(event) => event.preventDefault()} > { return ( - + {currentQuestion.title} { marginTop: "20px", maxWidth: answer?.split("|")[0] ? "640px" : "600px", }} + onClick={(event) => event.preventDefault()} > {answer?.split("|")[0] ? ( - + ) : ( { /> )} {answer && currentQuestion.content.type === "picture" && ( - + )} {answer && currentQuestion.content.type === "video" && ( - setModalWarningType(null)}> + setModalWarningType(null)} + > (null); + const containerCanvasRef = useRef(null); + const onVariantClick = async (event: MouseEvent) => { event.preventDefault(); @@ -130,6 +133,23 @@ export const ImageVariant = ({ } }, []); + useEffect(() => { + if (canvasRef.current !== null) { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + if (ctx !== null) { + const img = new Image(); + img.src = choiceImgUrl; + + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + }; + } + } + }, []); + return ( {variant.extendedText && ( - + + // )} diff --git a/lib/components/ViewPublicationPage/questions/Page/index.tsx b/lib/components/ViewPublicationPage/questions/Page/index.tsx index 333ee41..619f6fc 100644 --- a/lib/components/ViewPublicationPage/questions/Page/index.tsx +++ b/lib/components/ViewPublicationPage/questions/Page/index.tsx @@ -21,7 +21,10 @@ export const Page = ({ currentQuestion }: PageProps) => { > {currentQuestion.title} - + {currentQuestion.content.text} { border: "1px solid #9A9AAF", overflow: "hidden", }} + onClick={(event) => event.preventDefault()} > { height: "300px", margin: "15px", }} + onClick={(event) => event.preventDefault()} > {isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && ( - + event.preventDefault()} + > {!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && ( - + event.preventDefault()} + > { {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && ( - + event.preventDefault()} + > { color: theme.palette.text.primary, textAlign: "center", }} + onClick={(event) => event.preventDefault()} > {answer ? ( choiceImgUrlAnswer ? ( diff --git a/lib/model/settingsData.ts b/lib/model/settingsData.ts index ca55e80..0b11d23 100644 --- a/lib/model/settingsData.ts +++ b/lib/model/settingsData.ts @@ -61,6 +61,7 @@ export type QuizSettings = { }; export interface QuizConfig { + isUnSc?: boolean; spec: undefined | true; type: QuizType; noStartPage: boolean; diff --git a/lib/ui_kit/unscreen.ts b/lib/ui_kit/unscreen.ts new file mode 100644 index 0000000..c0aa553 --- /dev/null +++ b/lib/ui_kit/unscreen.ts @@ -0,0 +1,78 @@ +function addOverlay(overlay: HTMLElement) { + // const overlay = document.getElementById('overlay'); + overlay.style.opacity = "1"; // Затемнено + overlay.style.pointerEvents = "auto"; // Включить клики +} +function removeOverlay(overlay: HTMLElement) { + overlay.style.opacity = "0"; // Вернуть в исходное состояние + overlay.style.pointerEvents = "none"; // Игнорировать клики +} +function addRemoveOverlayTimer(overlay: HTMLElement, time = 1000) { + addOverlay(overlay); + setTimeout(() => { + removeOverlay(overlay); + }, time); // 1 секунда затемнения +} + +// Флаги для отслеживания состояния +let isMouseInside = true; +let isWindowFocused = true; + +export default function unscreen(overlay: HTMLElement, root: HTMLElement) { + let focusTimeout: NodeJS.Timeout | undefined; + // Проверка состояния и выполнение нужного действия + function checkFocusAndMouse() { + if (!isWindowFocused || !isMouseInside) { + // ИЛИ + addOverlay(overlay); + } else if (isWindowFocused && isMouseInside) { + // И + removeOverlay(overlay); + } + } + + // Добавляем обработчики событий + window.addEventListener("blur", () => { + console.log("blur"); + isWindowFocused = false; + checkFocusAndMouse(); // Проверяем состояние + }); // Когда окно теряет фокус + + window.addEventListener("focus", () => { + isWindowFocused = true; + checkFocusAndMouse(); // Проверяем состояние + }); // Когда окно получает фокус + + window.addEventListener("mouseleave", () => { + console.log("mouseleave"); + isMouseInside = false; + checkFocusAndMouse(); // Проверяем состояние + }); // Когда мышка покидает окно + + window.addEventListener("mouseenter", () => { + console.log("mouseenter"); + isMouseInside = true; + checkFocusAndMouse(); // Проверяем состояние + }); // Когда мышка возвращается в окно + + root.addEventListener("contextmenu", (event) => event.preventDefault()); + + window.addEventListener("keydown", function (event) { + event.preventDefault(); + if (event.key === "PrintScreen" || (event.ctrlKey && event.key === "p")) { + addRemoveOverlayTimer(overlay); + } + }); + + // Проверка для мобильных устройств + root.addEventListener("touchstart", function (event) { + // Пример: если есть более чем один жест + if (event.touches.length > 1) { + addRemoveOverlayTimer(overlay); + } + }); + + window.addEventListener("beforeprint", function () { + addRemoveOverlayTimer(overlay); + }); +}