mirzaev
/
huesos
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

hotline full screen mode for product card

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2024-10-13 17:27:36 +03:00
parent 5fa4abba5f
commit 32cc78da1c
2 changed files with 112 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
mirzaev/arming_bot/system/public/js/catalog.js
View File

@ -6,12 +6,6 @@ import("/js/core.js").then(() =>
import("/js/telegram.js").then(() => { import("/js/telegram.js").then(() => {
import("/js/hotline.js").then(() => { import("/js/hotline.js").then(() => {
const dependencies = setInterval(() => { const dependencies = setInterval(() => {
console.log(
typeof core,
typeof core.damper,
typeof core.telegram,
typeof core.hotline,
);
if ( if (
typeof core === "function" && typeof core === "function" &&
typeof core.damper === "function" && typeof core.damper === "function" &&
@ -462,39 +456,89 @@ import("/js/core.js").then(() =>
const button = core.telegram.api.isVisible; 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) => { const _open = (event) => {
if (event.target === from) { if (
if (typeof images.hotline === "object") { event.type === "touchstart" ||
if (images.hotline.moving) return; event.button === 0
images.hotline.stop(); ) {
{
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 = () => { 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("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) => { const _start = (event) => {
@ -521,7 +565,7 @@ import("/js/core.js").then(() =>
} }
const header = document.createElement("p"); const header = document.createElement("p");
header.classList.add('header'); header.classList.add("header");
const brand = document.createElement("small"); const brand = document.createElement("small");
brand.classList.add("brand"); brand.classList.add("brand");
@ -548,12 +592,12 @@ import("/js/core.js").then(() =>
let formatted = ""; let formatted = "";
if (x !== '' ) formatted = x; if (x !== "") formatted = x;
if (y !== '') { if (y !== "") {
if (formatted.length === 0) formatted = y; if (formatted.length === 0) formatted = y;
else formatted += "x" + y; else formatted += "x" + y;
} }
if (z !== '') { if (z !== "") {
if (formatted.length === 0) formatted = z; if (formatted.length === 0) formatted = z;
else formatted += "x" + z; else formatted += "x" + z;
} }
@ -609,6 +653,14 @@ import("/js/core.js").then(() =>
const remove = () => { const remove = () => {
wrap.remove(); wrap.remove();
images.removeEventListener(
"mousedown",
_images_from,
);
images.removeEventListener(
"touchstart",
_images_from,
);
wrap.removeEventListener("mousedown", _from); wrap.removeEventListener("mousedown", _from);
wrap.removeEventListener("touchstart", _from); wrap.removeEventListener("touchstart", _from);
exit.removeEventListener("click", remove); exit.removeEventListener("click", remove);
@ -639,14 +691,15 @@ import("/js/core.js").then(() =>
document.addEventListener("touch", close); document.addEventListener("touch", close);
window.addEventListener("popstate", remove); 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) { 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(); images.hotline.start();
} }
} }

21
mirzaev/arming_bot/system/public/themes/default/css/window.css
View File

@ -58,12 +58,16 @@ section#window>div.card>h3>a.exit[type="button"] {
} }
section#window>div.card>div.images { section#window>div.card>div.images {
--image-width: 10rem;
height: 10rem; height: 10rem;
display: flex; display: flex;
overflow: clip; overflow: clip;
cursor: zoom-in;
transition: 0s;
} }
section#window>div.card>div.images.extend { section#window>div.card>div.images.extend {
--image-width: max(30rem, 40vw);
z-index: 9999999; z-index: 9999999;
left: 0; left: 0;
top: 0; top: 0;
@ -72,23 +76,28 @@ section#window>div.card>div.images.extend {
width: 100vw; width: 100vw;
max-width: unset; max-width: unset;
height: 100vh; height: 100vh;
object-fit: contain; align-items: center;
border-radius: unset; cursor: normal;
transition: 0s; transition: 0s;
cursor: zoom-out;
} }
section#window>div.card>div.images>img { section#window>div.card>div.images>img {
margin-right: 0.5rem; margin-right: 0.5rem;
width: 10rem; width: var(--image-width);
max-width: 10rem; max-width: var(--image-width);
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
object-fit: cover; object-fit: cover;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: 0s; 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 { section#window>div.card>div.images>img:last-child {