From 32cc78da1cad22e1807d66f06833e71b4db4d1b4 Mon Sep 17 00:00:00 2001 From: Arsen Mirzaev Tatyano-Muradovich Date: Sun, 13 Oct 2024 17:27:36 +0300 Subject: [PATCH] hotline full screen mode for product card --- .../arming_bot/system/public/js/catalog.js | 141 ++++++++++++------ .../public/themes/default/css/window.css | 21 ++- 2 files changed, 112 insertions(+), 50 deletions(-) diff --git a/mirzaev/arming_bot/system/public/js/catalog.js b/mirzaev/arming_bot/system/public/js/catalog.js index d9900f3..bc67a1c 100755 --- a/mirzaev/arming_bot/system/public/js/catalog.js +++ b/mirzaev/arming_bot/system/public/js/catalog.js @@ -6,12 +6,6 @@ import("/js/core.js").then(() => import("/js/telegram.js").then(() => { import("/js/hotline.js").then(() => { const dependencies = setInterval(() => { - console.log( - typeof core, - typeof core.damper, - typeof core.telegram, - typeof core.hotline, - ); if ( typeof core === "function" && typeof core.damper === "function" && @@ -462,39 +456,89 @@ import("/js/core.js").then(() => const button = core.telegram.api.isVisible; + // блокировка закрытия изображений + let images_from; + const _images_from = (event) => images_from = event; + images.addEventListener("mousedown", _images_from); + images.addEventListener("touchstart", _images_from); + const _open = (event) => { - if (event.target === from) { - if (typeof images.hotline === "object") { - if (images.hotline.moving) return; - images.hotline.stop(); + if ( + event.type === "touchstart" || + event.button === 0 + ) { + { + let x = event.pageX || event.touches[0].pageX; + let y = event.pageY || event.touches[0].pageY; + let _x = images_from.pageX || + images_from.touches[0].pageX; + let _y = images_from.pageY || + images_from.touches[0].pageY; + + if ( + _x - x < 10 && + _x - x > -10 && + _y - y < 10 && + _y - y > -10 + ) { + images.classList.add("extend"); + + if (button) { + core.telegram.api.MainButton.hide(); + } + + setTimeout(() => { + images.hotline.step = 0; + images.hotline.wheel = false; + images.hotline.start(); + images.addEventListener("mouseup", _close); + images.addEventListener("touchend", _close); + }, 300); + images.removeEventListener("mouseup", _open); + images.removeEventListener("touchend", _open); + } } - - images.classList.add("extend"); - - if (button) core.telegram.api.MainButton.hide(); - - setTimeout(() => { - images.addEventListener("click", _close); - images.addEventListener("touch", _close); - }, 300); - images.removeEventListener("mouseup", _open); - images.removeEventListener("touchend", _open); } }; - const _close = () => { - if (typeof images.hotline === "object") { - images.hotline.start(); + const _close = (event) => { + let x = event.pageX || event.touches[0].pageX; + let y = event.pageY || event.touches[0].pageY; + let _x = images_from.pageX || + images_from.touches[0].pageX; + let _y = images_from.pageY || + images_from.touches[0].pageY; + + if ( + event.type === "touchstart" || + event.button === 0 + ) { + if ( + _x - x < 10 && + _x - x > -10 && + _y - y < 10 && + _y - y > -10 + ) { + // Курсор не был сдвинут на 10 квардратных пикселей + // (в идеале надо переделать на таймер 2 секунды есди зажата кнопка то ничего не делать а просто двигать) + // пох абсолютно сейчас заказчик слишком охуевший для этого + + images.hotline.step = -0.3; + images.hotline.wheel = true; + + if (width < card.offsetWidth) { + images.hotline.stop(); + } + images.classList.remove("extend"); + + if (button) core.telegram.api.MainButton.show(); + + images.removeEventListener("mouseup", _close); + images.removeEventListener("touchend", _close); + images.addEventListener("mousedown", _start); + images.addEventListener("touchstart", _start); + } } - - images.classList.remove("extend"); - - if (button) core.telegram.api.MainButton.show(); - - images.removeEventListener("click", _close); - images.removeEventListener("touch", _close); - images.addEventListener("mousedown", _start); - images.addEventListener("touchstart", _start); }; const _start = (event) => { @@ -521,7 +565,7 @@ import("/js/core.js").then(() => } const header = document.createElement("p"); - header.classList.add('header'); + header.classList.add("header"); const brand = document.createElement("small"); brand.classList.add("brand"); @@ -548,12 +592,12 @@ import("/js/core.js").then(() => let formatted = ""; - if (x !== '' ) formatted = x; - if (y !== '') { + if (x !== "") formatted = x; + if (y !== "") { if (formatted.length === 0) formatted = y; else formatted += "x" + y; } - if (z !== '') { + if (z !== "") { if (formatted.length === 0) formatted = z; else formatted += "x" + z; } @@ -609,6 +653,14 @@ import("/js/core.js").then(() => const remove = () => { wrap.remove(); + images.removeEventListener( + "mousedown", + _images_from, + ); + images.removeEventListener( + "touchstart", + _images_from, + ); wrap.removeEventListener("mousedown", _from); wrap.removeEventListener("touchstart", _from); exit.removeEventListener("click", remove); @@ -639,14 +691,15 @@ import("/js/core.js").then(() => document.addEventListener("touch", close); window.addEventListener("popstate", remove); + images.hotline = new core.hotline( + json.product.identfier, + images, + ); + images.hotline.step = -0.3; + images.hotline.wheel = true; + images.hotline.touch = true; + if (width > card.offsetWidth) { - images.hotline = new core.hotline( - json.product.identfier, - images, - ); - images.hotline.step = -0.3; - images.hotline.wheel = true; - images.hotline.touch = true; images.hotline.start(); } } diff --git a/mirzaev/arming_bot/system/public/themes/default/css/window.css b/mirzaev/arming_bot/system/public/themes/default/css/window.css index 519086a..71f66fd 100755 --- a/mirzaev/arming_bot/system/public/themes/default/css/window.css +++ b/mirzaev/arming_bot/system/public/themes/default/css/window.css @@ -58,12 +58,16 @@ section#window>div.card>h3>a.exit[type="button"] { } section#window>div.card>div.images { + --image-width: 10rem; height: 10rem; display: flex; overflow: clip; + cursor: zoom-in; + transition: 0s; } section#window>div.card>div.images.extend { + --image-width: max(30rem, 40vw); z-index: 9999999; left: 0; top: 0; @@ -72,23 +76,28 @@ section#window>div.card>div.images.extend { width: 100vw; max-width: unset; height: 100vh; - object-fit: contain; - border-radius: unset; + align-items: center; + cursor: normal; transition: 0s; - cursor: zoom-out; } section#window>div.card>div.images>img { margin-right: 0.5rem; - width: 10rem; - max-width: 10rem; + width: var(--image-width); + max-width: var(--image-width); height: 100%; flex-shrink: 0; flex-grow: 0; object-fit: cover; border-radius: 0.5rem; transition: 0s; - cursor: zoom-in; +} + +section#window>div.card>div.images.extend>img { + margin-right: 2vw; + height: max-content; + object-fit: unset; + border-radius: unset; } section#window>div.card>div.images>img:last-child {