rsesot/misskey
1
0
Fork 0
forked from mirrors/misskey
Code Pull Requests Activity

🎨

Browse Source
This commit is contained in:
syuilo
2022-12-30 15:40:29 +09:00
parent 43fafc8d57
commit d147181a82
5 changed files with 83 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/frontend/src/components/form/range.vue
View File

@@ -59,16 +59,17 @@ const finalValue = computed(() => {
}
});
const thumbWidth = computed(() => {
const getThumbWidth = () => {
if (thumbEl.value == null) return 0;
return thumbEl.value!.offsetWidth;
});
};
const thumbPosition = ref(0);
const calcThumbPosition = () => {
if (containerEl.value == null) {
thumbPosition.value = 0;
} else {
thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
thumbPosition.value = (containerEl.value.offsetWidth - getThumbWidth()) * steppedRawValue.value;
console.log(containerEl.value.offsetWidth, getThumbWidth());
}
};
watch([steppedRawValue, containerEl], calcThumbPosition);
@@ -110,12 +111,14 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
document.head.appendChild(style);
const thumbWidth = getThumbWidth();
const onDrag = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault();
const containerRect = containerEl.value!.getBoundingClientRect();
const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth / 2));
rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth)));
};
let beforeValue = finalValue.value;