hotline full screen mode for product card
This commit is contained in:
parent
5fa4abba5f
commit
32cc78da1c
|
|
@ -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) {
|
||||
if (typeof images.hotline === "object") {
|
||||
if (images.hotline.moving) return;
|
||||
images.hotline.stop();
|
||||
}
|
||||
// блокировка закрытия изображений
|
||||
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.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.addEventListener("touch", _close);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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("click", _close);
|
||||
images.removeEventListener("touch", _close);
|
||||
images.removeEventListener("mouseup", _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 (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,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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue