tav-ui
Version:
79 lines (76 loc) • 2.99 kB
JavaScript
import { defineComponent, getCurrentInstance, ref, inject, computed, onUnmounted, h } from 'vue';
import { on, off } from '../../../utils/domUtils2.mjs';
import { BAR_MAP, renderThumbStyle } from './util2.mjs';
var Bar = defineComponent({
name: "Bar",
props: {
vertical: Boolean,
size: String,
move: Number
},
setup(props) {
const instance = getCurrentInstance();
const thumb = ref();
const wrap = inject("scroll-bar-wrap", {});
const bar = computed(() => {
return BAR_MAP[props.vertical ? "vertical" : "horizontal"];
});
const barStore = ref({});
const cursorDown = ref(false);
const clickThumbHandler = (e) => {
if (e.ctrlKey || e.button === 2)
return;
window.getSelection()?.removeAllRanges();
startDrag(e);
barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
};
const clickTrackHandler = (e) => {
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
const thumbHalf = thumb.value[bar.value.offset] / 2;
const thumbPositionPercentage = (offset - thumbHalf) * 100 / instance?.vnode.el?.[bar.value.offset];
wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
};
const startDrag = (e) => {
e.stopImmediatePropagation();
cursorDown.value = true;
on(document, "mousemove", mouseMoveDocumentHandler);
on(document, "mouseup", mouseUpDocumentHandler);
document.onselectstart = () => false;
};
const mouseMoveDocumentHandler = (e) => {
if (cursorDown.value === false)
return;
const prevPage = barStore.value[bar.value.axis];
if (!prevPage)
return;
const offset = (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
const thumbPositionPercentage = (offset - thumbClickPosition) * 100 / instance?.vnode.el?.[bar.value.offset];
wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
};
function mouseUpDocumentHandler() {
cursorDown.value = false;
barStore.value[bar.value.axis] = 0;
off(document, "mousemove", mouseMoveDocumentHandler);
document.onselectstart = null;
}
onUnmounted(() => {
off(document, "mouseup", mouseUpDocumentHandler);
});
return () => h("div", {
class: ["scrollbar__bar", `is-${bar.value.key}`],
onMousedown: clickTrackHandler
}, h("div", {
ref: thumb,
class: "scrollbar__thumb",
onMousedown: clickThumbHandler,
style: renderThumbStyle({
size: props.size,
move: props.move,
bar: bar.value
})
}));
}
});
export { Bar as default };
//# sourceMappingURL=bar2.mjs.map