text: import { on, off } from "../../../utils/dom";
  import { renderThumbStyle, BAR_MAP } from "./util";
  
  /* istanbul ignore next */
  export default {
    name: "Bar",
  
    props: {
      vertical: Boolean,
      size: String,
      move: Number
    },
  
    computed: {
      bar() {
        return BAR_MAP[this.vertical ? "vertical" : "horizontal"];
      },
  
      wrap() {
        return this.$parent.wrap;
      }
    },
  
    render(h) {
      const { size, move, bar } = this;
      return h(
        "div",
        {
          class: ["ml-scrollbar__bar", "is-" + bar.key],
          on: {
            mousedown: this.clickTrackHandler
          }
        },
        [
          h("div", {
            ref: "thumb",
            on: { mousedown: this.clickThumbHandler },
            class: "ml-scrollbar__thumb",
            style: renderThumbStyle({ size, move, bar })
          })
        ]
      );
    },
  
    methods: {
      clickThumbHandler(e) {
        // prevent click event of right button
        if (e.ctrlKey || e.button === 2) {
          return;
        }
        this.startDrag(e);
        this[this.bar.axis] =
          e.currentTarget[this.bar.offset] -
          (e[this.bar.client] -
            e.currentTarget.getBoundingClientRect()[this.bar.direction]);
      },
  
      clickTrackHandler(e) {
        const offset = Math.abs(
          e.target.getBoundingClientRect()[this.bar.direction] -
            e[this.bar.client]
        );
        const thumbHalf = this.$refs.thumb[this.bar.offset] / 2;
        const thumbPositionPercentage =
          ((offset - thumbHalf) * 100) / this.$el[this.bar.offset];
  
        this.wrap[this.bar.scroll] =
          (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100;
      },
  
      startDrag(e) {
        e.stopImmediatePropagation();
        this.cursorDown = true;
  
        on(document, "mousemove", this.mouseMoveDocumentHandler);
        on(document, "mouseup", this.mouseUpDocumentHandler);
        document.onselectstart = () => false;
      },
  
      mouseMoveDocumentHandler(e) {
        if (this.cursorDown === false) return;
        const prevPage = this[this.bar.axis];
  
        if (!prevPage) return;
  
        const offset =
          (this.$el.getBoundingClientRect()[this.bar.direction] -
            e[this.bar.client]) *
          -1;
        const thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage;
        const thumbPositionPercentage =
          ((offset - thumbClickPosition) * 100) / this.$el[this.bar.offset];
  
        this.wrap[this.bar.scroll] =
          (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100;
      },
  
      mouseUpDocumentHandler(e) {
        this.cursorDown = false;
        this[this.bar.axis] = 0;
        off(document, "mousemove", this.mouseMoveDocumentHandler);
        document.onselectstart = null;
      }
    },
  
    destroyed() {
      off(document, "mouseup", this.mouseUpDocumentHandler);
    }
  };
  