tiefen_space_h5/components/ImagesMask/index.jsx

476 lines
17 KiB
React
Raw Normal View History

"use client";
import React, {
useState,
useEffect,
useRef,
forwardRef,
useImperativeHandle,
} from "react";
import { Mask, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2024-08-19 12:54:10 +08:00
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
2024-08-07 18:08:33 +08:00
import { createRoot } from "react-dom/client";
2024-08-14 19:59:03 +08:00
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
function ImagesMask({}, ref) {
const [visible, setVisible] = useState(false);
const [images, setImages] = useState([]);
2024-08-14 19:59:03 +08:00
const [data, setData] = useState(null);
const scrollRef = useRef(null);
2024-08-14 19:59:03 +08:00
const defaultIndex = useRef(null);
const router = useRouter();
2024-08-07 18:08:33 +08:00
useEffect(() => {
2024-08-21 16:15:35 +08:00
let body = document.body;
2024-08-16 13:29:14 +08:00
if (visible) {
2024-08-21 16:15:35 +08:00
body.style.touchAction = "none";
2024-08-16 13:29:14 +08:00
const root = createRoot(document?.getElementById("maskDomBox"));
root.render(
<div>
<ImagesMaskContaint
images={images}
visible={visible}
ref={scrollRef}
setVisible={setVisible}
setImages={setImages}
router={router}
data={data}
defaultIndex={defaultIndex.current}
root={root}
/>
</div>
);
2024-08-21 16:15:35 +08:00
} else {
body.style.touchAction = "auto";
2024-08-16 13:29:14 +08:00
}
2024-08-07 18:08:33 +08:00
// root.render(<div>xxxx</div>);
}, [visible]);
2024-08-14 19:59:03 +08:00
useImperativeHandle(ref, () => ({
2024-08-14 19:59:03 +08:00
show: (arr, index, data) => {
defaultIndex.current = index;
setImages(arr);
2024-08-14 19:59:03 +08:00
setData(data);
setVisible((old) => {
2024-08-15 20:29:15 +08:00
// console.log(arr, index, old);
2024-08-14 19:59:03 +08:00
return !old;
2024-08-07 18:08:33 +08:00
});
2024-08-14 19:59:03 +08:00
// Mask.show
// const maskDomBox = document.getElementById("maskDomBox");
},
close: () => setVisible(false),
}));
2024-08-07 18:08:33 +08:00
return <></>;
}
const ImagesMaskContaint = forwardRef(
2024-08-14 19:59:03 +08:00
(
2024-08-16 13:29:14 +08:00
{
visible,
images,
setVisible,
setImages,
router,
data,
defaultIndex = 0,
root,
},
2024-08-14 19:59:03 +08:00
ref
) => {
const [currentIndex, setCurrentIndex] = useState(0);
const [direction, setDirection] = useState("left");
const [initialX, setInitialX] = useState(0);
const [xOffset, setXOffset] = useState(0);
2024-08-16 13:29:14 +08:00
const [initialMoveX, setInitialMoveX] = useState(0);
const [initialMoveY, setInitialMoveY] = useState(0);
const [xOffsetMove, setXOffsetMove] = useState(0);
const [yOffsetMove, setYOffsetMove] = useState(0);
2024-08-14 19:59:03 +08:00
const [active, setActive] = useState(false);
2024-08-16 13:29:14 +08:00
const [zoomed, setZoomed] = useState(false);
2024-08-14 19:59:03 +08:00
const base = baseRequest();
2024-08-15 20:29:15 +08:00
const directionX = useRef(0);
2024-08-16 13:29:14 +08:00
// const imgDom = useRef(null);
const currentDistance = useRef(0);
2024-08-15 20:29:15 +08:00
// const getDistance = (e) => {
// e.stopPropagation();
// const distance = ref.current.scrollLeft;
// setDistance(distance);
// };
2024-08-14 19:59:03 +08:00
useEffect(() => {
2024-08-15 20:29:15 +08:00
// setCurrentIndex(defaultIndex);
// test3(defaultIndex - 1, "left");
if (defaultIndex) {
2024-08-16 13:29:14 +08:00
// console.log("defaultIndex.current", defaultIndex);
test3(defaultIndex - 1, "left", true);
2024-08-15 20:29:15 +08:00
}
2024-08-14 19:59:03 +08:00
}, [defaultIndex]);
useEffect(() => {
if (ref.current) {
ref.current.style.transform = `translateX(${
-window.innerWidth * currentIndex
}px)`;
}
}, [currentIndex]);
const test1 = (e) => {
2024-08-16 13:29:14 +08:00
var touches = e.touches;
// console.log(currentIndex, e.target.children[0].offsetLeft);
setInitialMoveX(touches[0].clientX - e.target.children[0].offsetLeft);
setInitialMoveY(touches[0].clientY - e.target.children[0].offsetTop);
// console.log(touches[0].pageX- ref.current.getBoundingClientRect().left);
if (touches.length === 2) {
var touch1 = touches[0];
var touch2 = touches[1];
currentDistance.current = Math.hypot(
touch2.pageX - touch1.pageX,
touch2.pageY - touch1.pageY
);
}
if (touches.length === 1 && !zoomed) {
setInitialX(touches[0].clientX - (!currentIndex ? 0 : xOffset));
2024-08-14 19:59:03 +08:00
// 单点触摸
setActive(true);
2024-08-07 18:08:33 +08:00
}
};
2024-08-14 19:59:03 +08:00
const test2 = (e) => {
2024-08-16 13:29:14 +08:00
var touches = e.touches;
// if (touches.length == 2) {
// var touch1 = touches[0];
// var touch2 = touches[1];
// currentDistance.current = Math.hypot(
// touch2.pageX - touch1.pageX,
// touch2.pageY - touch1.pageY
// );
// let scale = currentDistance.current / ref.current.startDistance;
// let matrix = new WebKitCSSMatrix(
// window.getComputedStyle(ref.current.children[0]).transform
// );
// let currentScale = matrix.m11;
// // alert(currentDistance.current + "-" + ref.current.startDistance);
// let size =
// currentScale * scale < 0.5
// ? 0.5
// : currentScale * scale > 3
// ? 3
// : currentScale * scale;
// ref.current.children[0].style.transform =
// "matrix(" + size + ", 0, 0, " + size + ", 0, 0)";
// }
if (zoomed) {
let currentX = touches[0].clientX - initialMoveX;
let currentY = touches[0].clientY - initialMoveY;
// console.log(currentX + xOffsetMove);
if (Math.abs(currentX + xOffsetMove) > window.innerWidth) return;
2024-08-16 13:29:14 +08:00
ref.current.children[currentIndex].style.left = `${
currentX + xOffsetMove
}px`;
if (Math.abs(currentY + yOffsetMove - 54) > window.innerHeight) return;
2024-08-16 13:29:14 +08:00
ref.current.children[currentIndex].style.top = `${
currentY + yOffsetMove - 54
}px`;
} else {
if (active) {
let X = touches[0].clientX - initialX;
setDirection(
directionX.current > touches[0].clientX ? "left" : "right"
);
ref.current.style.transform = "translateX(" + X + "px)";
directionX.current = touches[0].clientX;
}
2024-08-14 19:59:03 +08:00
}
};
2024-08-16 13:29:14 +08:00
const test3 = (index, currentDirection, isActive) => {
// const rect = ref.current.getBoundingClientRect();
// console.log(ref.current.children[currentIndex].offsetTop);
setXOffsetMove(
ref.current.children[currentIndex].offsetLeft -
window.innerWidth * currentIndex
);
setYOffsetMove(ref.current.children[currentIndex].offsetTop + 54);
if (active || isActive) {
let cxOffset = window.innerWidth;
if (currentDirection == "left") {
if (index < images.length - 1) {
setCurrentIndex(index + 1);
} else {
2024-08-21 16:15:35 +08:00
// setCurrentIndex(0);
2024-08-16 13:29:14 +08:00
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
2024-08-14 19:59:03 +08:00
} else {
2024-08-16 13:29:14 +08:00
if (index > 0) {
setCurrentIndex(index - 1);
} else {
2024-08-21 16:15:35 +08:00
// setCurrentIndex(images.length - 1);
2024-08-16 13:29:14 +08:00
ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
}
2024-08-14 19:59:03 +08:00
}
2024-08-16 13:29:14 +08:00
// setInitialX(currentX);
setInitialX(
-cxOffset * (index + (currentDirection == "left" ? 1 : -1))
);
if (currentDirection == "left" && index > images.length - 2) return;
setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
2024-08-14 19:59:03 +08:00
}
};
2024-08-16 13:29:14 +08:00
// };
// };
// };
2024-08-15 20:29:15 +08:00
function downloadImage(url) {
let randomNum = "";
for (let i = 0; i < 10; i++) {
randomNum += Math.floor(Math.random() * 10);
}
fetch(url)
.then((res) => res.blob())
.then((blob) => {
2024-08-15 21:03:10 +08:00
if (typeof window == "undefined") return;
2024-08-15 20:29:15 +08:00
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = randomNum + ".jpg";
a.click();
});
}
2024-08-16 13:29:14 +08:00
2024-08-07 18:08:33 +08:00
return (
2024-08-21 16:15:35 +08:00
<Mask
destroyOnClose={false}
visible={visible}
className="z-[1002] h-screen flex justify-center items-center"
onMaskClick={() => {
setVisible(false), setImages([]), setCurrentIndex(null);
root.unmount();
}}
color="#000000d9"
>
<div className="relative">
{images[currentIndex]?.type != "hid" && (
<div
className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
style={{ width: "calc(100% - 24px)" }}
>
<div>
{/* <div
2024-08-16 13:29:14 +08:00
onClick={() => downloadImage(images[currentIndex]?.url)}
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
>
<FontAwesomeIcon icon={faDownload} size="xl" />
</div> */}
2024-08-21 16:15:35 +08:00
</div>
<div>
<div
onClick={() => {
setZoomed(!zoomed);
setActive(false);
ref.current.children[currentIndex].style.transform =
"matrix(" +
(zoomed ? 1 : 3) +
", 0, 0, " +
(zoomed ? 1 : 3) +
", 0, 0)";
ref.current.children[currentIndex].style.left = `0px`;
ref.current.children[currentIndex].style.top = `0px`;
}}
className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
>
{!zoomed ? (
<svg
t="1723822459763"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4557"
width="24"
height="24"
>
<path
d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
p-id="4558"
fill="#ffffff"
></path>
<path
d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"
p-id="4559"
fill="#ffffff"
></path>
</svg>
) : (
<svg
t="1723822428728"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4379"
width="24"
height="24"
>
<path
d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
p-id="4380"
fill="#ffffff"
></path>
<path
d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"
p-id="4381"
fill="#ffffff"
></path>
</svg>
)}
2024-08-16 13:29:14 +08:00
</div>
2024-08-15 20:29:15 +08:00
</div>
2024-08-14 19:59:03 +08:00
</div>
2024-08-21 16:15:35 +08:00
)}
<div className="text-center mb-2 leading-[54px]">
{currentIndex + 1}/{images.length}
</div>
<div
className="flex justify-start items-center"
style={{ height: "calc(100vh - 174px)" }}
onClick={() => {
setVisible(false), setImages([]), setCurrentIndex(null);
root.unmount();
}}
>
2024-08-07 18:08:33 +08:00
<div
2024-08-21 16:15:35 +08:00
ref={ref}
id="imagesScrollBox"
className="flex justify-center items-center transition-transform duration-300 h-full relative"
draggable={true}
onTouchStart={test1}
onTouchMove={test2}
onTouchEnd={() => test3(currentIndex, direction)}
2024-08-07 18:08:33 +08:00
>
2024-08-21 16:15:35 +08:00
{images.map((item, index) => {
return (
<div
draggable={true}
key={index}
className="flex-none w-screen relative h-full"
// onDoubleClick={() => {
// setZoomed(!zoomed);
// ref.current.children[0].style.transform =
// "matrix(" + zoomed
// ? 1
// : 3 + ", 0, 0, " + zoomed
// ? 1
// : 3 + ", 0, 0)";
// ref.current.style.left = `0px`;
// ref.current.style.top = `0px`;
// }}
>
{/* <img
2024-08-15 20:29:15 +08:00
src={item.url}
className="h-full m-auto"
style={{
filter: item.type == "hid" ? "blur(10px)" : "none",
}}
/> */}
2024-08-21 16:15:35 +08:00
<Image
draggable={true}
className="h-full m-auto"
src={item.url}
style={{
filter: item.type == "hid" ? "blur(10px)" : "none",
}}
// draggable={true}
height={"100%"}
fit="contain"
placeholder={
<div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
}
/>
2024-08-15 20:29:15 +08:00
2024-08-21 16:15:35 +08:00
<div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
{item.type == "hid" && (
<div className="flex justify-center">
<div
className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
onClick={() => {
router.push(
"/webView/" +
encodeURIComponent(
"/zone/pay/" +
data?.zid +
"/h5_zone_moment/" +
data?.id +
"?base=" +
encodeURIComponent(JSON.stringify(base))
)
);
}}
>
此内容暂未解锁立即解锁
2024-08-14 19:59:03 +08:00
</div>
2024-08-21 16:15:35 +08:00
</div>
)}
2024-08-14 19:59:03 +08:00
</div>
2024-08-21 16:15:35 +08:00
</div>
);
})}
</div>
</div>
<div
className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none"
style={{
marginTop: "calc(-50vh + 118px)",
height: "calc(100vh - 174px)",
visibility: images.length > 1 ? "visible" : "hidden",
}}
>
<div
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
onClick={() => {
setActive(true);
setZoomed(false);
setInitialMoveX(0);
setInitialMoveY(0);
setXOffsetMove(0);
setYOffsetMove(0);
ref.current.children[currentIndex].style.transform =
"matrix(1, 0, 0, 1, 0, 0)";
ref.current.children[currentIndex].style.left = `0px`;
ref.current.children[currentIndex].style.top = `0px`;
test3(currentIndex, "right", true);
}}
>
<FontAwesomeIcon
icon={faAngleLeft}
size="xl"
style={{ maxWidth: "12px" }}
/>
2024-08-07 18:08:33 +08:00
</div>
<div
2024-08-21 16:15:35 +08:00
className="w-12 h-full flex items-center justify-center rounded-full float-left pointer-events-auto"
onClick={() => {
setZoomed(false);
setInitialMoveX(0);
setInitialMoveY(0);
setXOffsetMove(0);
setYOffsetMove(0);
ref.current.children[currentIndex].style.transform =
"matrix(1, 0, 0, 1, 0, 0)";
ref.current.children[currentIndex].style.left = `0px`;
ref.current.children[currentIndex].style.top = `0px`;
test3(currentIndex, "left", true);
2024-08-07 18:08:33 +08:00
}}
>
2024-08-21 16:15:35 +08:00
<FontAwesomeIcon
icon={faAngleRight}
size="xl"
style={{ maxWidth: "12px" }}
/>
2024-08-07 18:08:33 +08:00
</div>
</div>
2024-08-21 16:15:35 +08:00
</div>
</Mask>
2024-08-07 18:08:33 +08:00
);
}
);
export default forwardRef(ImagesMask);