hotline full screen mode for product card

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;
 
-													const _open = (event) => {
+													// блокировка закрытия изображений
-														if (event.target === from) {
+													let images_from;
-															if (typeof images.hotline === "object") {
+													const _images_from = (event) => images_from = event;
-																if (images.hotline.moving) return;
+													images.addEventListener("mousedown", _images_from);
-																images.hotline.stop();
+													images.addEventListener("touchstart", _images_from);
-															}
 
+													const _open = (event) => {
+														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();
+																	if (button) {
+																		core.telegram.api.MainButton.hide();
+																	}
 
 																	setTimeout(() => {
-																images.addEventListener("click", _close);
+																		images.hotline.step = 0;
-																images.addEventListener("touch", _close);
+																		images.hotline.wheel = false;
+																		images.hotline.start();
+																		images.addEventListener("mouseup", _close);
+																		images.addEventListener("touchend", _close);
 																	}, 300);
 																	images.removeEventListener("mouseup", _open);
 																	images.removeEventListener("touchend", _open);
 																}
+															}
+														}
 													};
 
-													const _close = () => {
+													const _close = (event) => {
-														if (typeof images.hotline === "object") {
+														let x = event.pageX || event.touches[0].pageX;
-															images.hotline.start();
+														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("click", _close);
+																images.removeEventListener("mouseup", _close);
-														images.removeEventListener("touch", _close);
+																images.removeEventListener("touchend", _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 (x !== "") formatted = x;
-													if (y !== '') {
+													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,7 +691,6 @@ import("/js/core.js").then(() =>
 													document.addEventListener("touch", close);
 													window.addEventListener("popstate", remove);
 
-													if (width > card.offsetWidth) {
 													images.hotline = new core.hotline(
 														json.product.identfier,
 														images,
@@ -647,6 +698,8 @@ import("/js/core.js").then(() =>
 													images.hotline.step = -0.3;
 													images.hotline.wheel = true;
 													images.hotline.touch = true;
+
+													if (width > card.offsetWidth) {
 														images.hotline.start();
 													}
 												}

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;
+	align-items: center;
-	border-radius: unset;
+	cursor: normal;
 	transition: 0s;
-	cursor: zoom-out;
 }
 
 section#window>div.card>div.images>img {
 	margin-right: 0.5rem;
-	width: 10rem;
+	width: var(--image-width);
-	max-width: 10rem;
+	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 {