hongluan-ui/lib/components/dialog/src/dragger.js

Hongluan Component Library for Vue 3

'use strict';

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

const initDialogDragger = (dlg) => {
  const dragger = dlg.__dragger__;
  const header = dlg.querySelector(".panel-header");
  header.addEventListener("mousedown", dragger.downHandler);
  header.style.cursor = "move";
  dragger.offsetX = 0;
  dragger.offsetY = 0;
};
const resetDialogDragger = (dlg) => {
  const dragger = dlg.__dragger__;
  const header = dlg.querySelector(".panel-header");
  header.removeEventListener("mousedown", dragger.downHandler);
  header.style.cursor = dragger.cursor;
};
const DialogDragger = {
  beforeMount: (dlg, binding) => {
    const header = dlg.querySelector(".panel-header");
    dlg.__dragger__ = Object.assign({
      cursor: header.style.cursor,
      moveHandler: (e) => {
        const dragger = dlg.__dragger__;
        dlg.style.marginLeft = e.pageX - dragger.offsetX + "px";
        dlg.style.marginTop = e.pageY - dragger.offsetY + "px";
      },
      upHandler: () => {
        const dragger = dlg.__dragger__;
        removeEventListener("mousemove", dragger.moveHandler);
        removeEventListener("mouseup", dragger.upHandler);
      },
      downHandler: (e) => {
        const dragger = dlg.__dragger__;
        dragger.offsetX = e.pageX - dlg.offsetLeft;
        dragger.offsetY = e.pageY - dlg.offsetTop;
        addEventListener("mousemove", dragger.moveHandler);
        addEventListener("mouseup", dragger.upHandler);
      }
    });
    if (!binding.value.canDrag)
      return;
    initDialogDragger(dlg);
  },
  updated(dlg, binding) {
    if (binding.value.canDrag) {
      initDialogDragger(dlg);
    } else {
      resetDialogDragger(dlg);
    }
    if (binding.value.showAs === "drawer" || binding.value.placement === "fullscreen") {
      dlg.style.removeProperty("margin-top");
      dlg.style.removeProperty("margin-left");
    }
  },
  beforeUnmount(dlg) {
    resetDialogDragger(dlg);
    dlg.__dragger__ = {};
  }
};

exports.DialogDragger = DialogDragger;
//# sourceMappingURL=dragger.js.map