tav-ui/lib/packages/components/scrollbar/src/bar2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var domUtils = require('../../../utils/domUtils2.js');
var util = require('./util2.js');

var Bar = vue.defineComponent({
  name: "Bar",
  props: {
    vertical: Boolean,
    size: String,
    move: Number
  },
  setup(props) {
    const instance = vue.getCurrentInstance();
    const thumb = vue.ref();
    const wrap = vue.inject("scroll-bar-wrap", {});
    const bar = vue.computed(() => {
      return util.BAR_MAP[props.vertical ? "vertical" : "horizontal"];
    });
    const barStore = vue.ref({});
    const cursorDown = vue.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;
      domUtils.on(document, "mousemove", mouseMoveDocumentHandler);
      domUtils.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;
      domUtils.off(document, "mousemove", mouseMoveDocumentHandler);
      document.onselectstart = null;
    }
    vue.onUnmounted(() => {
      domUtils.off(document, "mouseup", mouseUpDocumentHandler);
    });
    return () => vue.h("div", {
      class: ["scrollbar__bar", `is-${bar.value.key}`],
      onMousedown: clickTrackHandler
    }, vue.h("div", {
      ref: thumb,
      class: "scrollbar__thumb",
      onMousedown: clickThumbHandler,
      style: util.renderThumbStyle({
        size: props.size,
        move: props.move,
        bar: bar.value
      })
    }));
  }
});

exports["default"] = Bar;
//# sourceMappingURL=bar2.js.map