mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 13:51:20 -08:00
feat: 添加对移动设备的支持并优化滑块事件处理
This commit is contained in:
1 parent
38ef03d31f
commit
e7c31e55b3
6 files changed
+79
-57
No files matched your search
@@ -1389,7 +1389,8 @@ class Setting {
|
||||
});
|
||||
}
|
||||
createSlider({ min, max, container, findIndex, onChange, steps = [] }) {
|
||||
const { query, clamp } = this.utils;
|
||||
const { query, clamp, setStyle } = this.utils;
|
||||
setStyle(container, "touch-action", "none");
|
||||
container.innerHTML = `
|
||||
<div class="apd-slider-line">
|
||||
<div class="apd-slider-points">
|
||||
@@ -1413,24 +1414,30 @@ class Setting {
|
||||
onChange(index);
|
||||
}
|
||||
function updateLeft(event) {
|
||||
const { left, width } = container.getBoundingClientRect();
|
||||
const value = clamp(event.clientX - left, 0, width);
|
||||
const index = Math.round(value / width * (max - min) + min);
|
||||
reset(index);
|
||||
const { top, height, left, width } = container.getBoundingClientRect();
|
||||
if (this.art.isRotate) {
|
||||
const value = clamp(event.clientY - top, 0, height);
|
||||
const index = Math.round(value / height * (max - min) + min);
|
||||
reset(index);
|
||||
} else {
|
||||
const value = clamp(event.clientX - left, 0, width);
|
||||
const index = Math.round(value / width * (max - min) + min);
|
||||
reset(index);
|
||||
}
|
||||
}
|
||||
this.art.proxy(container, "click", (event)=>{
|
||||
updateLeft(event);
|
||||
updateLeft.call(this, event);
|
||||
});
|
||||
this.art.proxy(container, "mousedown", (event)=>{
|
||||
this.art.proxy(container, "pointerdown", (event)=>{
|
||||
isDroging = event.button === 0;
|
||||
});
|
||||
this.art.on("document:mousemove", (event)=>{
|
||||
if (isDroging) updateLeft(event);
|
||||
this.art.proxy(document, "pointermove", (event)=>{
|
||||
if (isDroging) updateLeft.call(this, event);
|
||||
});
|
||||
this.art.on("document:mouseup", (event)=>{
|
||||
this.art.proxy(document, "pointerup", (event)=>{
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
updateLeft(event);
|
||||
updateLeft.call(this, event);
|
||||
}
|
||||
});
|
||||
return {
|
||||
|
||||
Reference in new issue
Block a user