ivue-material-plus/dist/unplugin-vue-components/lib/components/ivue-modal/mixins-scrollbar.js

A high quality UI components Library with Vue.js

'use strict';

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

var vue = require('vue');
var helpers = require('../../utils/helpers.js');

const scrollbarMixins = ({ lockScroll = true }) => {
  const bodyIsOverflowing = vue.ref(false);
  const scrollBarWidth = vue.ref(0);
  const checkScrollBar = () => {
    if (!helpers.isClient) {
      return;
    }
    let fullWindowWidth = window.innerWidth;
    if (!fullWindowWidth) {
      const documentElementRect = document.documentElement.getBoundingClientRect();
      fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
    }
    bodyIsOverflowing.value = document.body.clientWidth < fullWindowWidth;
    if (bodyIsOverflowing.value) {
      scrollBarWidth.value = helpers.getScrollBarSize();
    }
  };
  const checkMaskInVisible = () => {
    if (!helpers.isClient) {
      return;
    }
    const masks = document.getElementsByClassName("ivue-modal-mask") || [];
    return Array.from(masks).every(
      (m) => m.style.display === "none" || m.classList.contains("fade-leave-to")
    );
  };
  const resetScrollBar = () => {
    if (!helpers.isClient) {
      return;
    }
    document.body.style.paddingRight = "";
  };
  const setScrollBar = () => {
    if (!helpers.isClient) {
      return;
    }
    if (bodyIsOverflowing.value && scrollBarWidth.value !== void 0) {
      document.body.style.paddingRight = `${scrollBarWidth.value}px`;
    }
  };
  const addScrollEffect = () => {
    if (!helpers.isClient) {
      return;
    }
    if (!lockScroll) {
      return;
    }
    checkScrollBar();
    setScrollBar();
    document.body.style.overflow = "hidden";
  };
  const removeScrollEffect = () => {
    if (!lockScroll) {
      return;
    }
    if (helpers.isClient && checkMaskInVisible()) {
      document.body.style.overflow = "";
      resetScrollBar();
    }
  };
  return {
    checkScrollBar,
    checkMaskInVisible,
    resetScrollBar,
    setScrollBar,
    addScrollEffect,
    removeScrollEffect
  };
};

exports.scrollbarMixins = scrollbarMixins;
//# sourceMappingURL=mixins-scrollbar.js.map