layui-vue/es/fullscreen/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, renderSlot } from "vue";
var index = /* @__PURE__ */ (() => ".layui-fullscreen{top:0;left:0;width:100%;height:100%;position:fixed;overflow:auto;z-index:10}\n")();
const __default__ = {
  name: "LayFullscreen"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    target: null,
    immersive: { type: Boolean, default: true },
    position: null,
    zIndex: null
  },
  emits: ["fullscreenchange"],
  setup(__props, { emit }) {
    const props = __props;
    const methodMap = [
      [
        "requestFullscreen",
        "exitFullscreen",
        "fullscreenElement",
        "fullscreenEnabled",
        "fullscreenchange",
        "fullscreenerror"
      ],
      [
        "webkitRequestFullscreen",
        "webkitExitFullscreen",
        "webkitFullscreenElement",
        "webkitFullscreenEnabled",
        "webkitfullscreenchange",
        "webkitfullscreenerror"
      ],
      [
        "webkitRequestFullScreen",
        "webkitCancelFullScreen",
        "webkitCurrentFullScreenElement",
        "webkitCancelFullScreen",
        "webkitfullscreenchange",
        "webkitfullscreenerror"
      ],
      [
        "mozRequestFullScreen",
        "mozCancelFullScreen",
        "mozFullScreenElement",
        "mozFullScreenEnabled",
        "mozfullscreenchange",
        "mozfullscreenerror"
      ],
      [
        "msRequestFullscreen",
        "msExitFullscreen",
        "msFullscreenElement",
        "msFullscreenEnabled",
        "MSFullscreenChange",
        "MSFullscreenError"
      ]
    ];
    const defaultElement = document.documentElement;
    let targetEl = ref(props.target || defaultElement);
    const isFullscreen = ref(false);
    let isSupported = false;
    const unprefixedMethods = methodMap[0];
    const fullscreenAPI = {};
    for (const methodList of methodMap) {
      if (methodList[1] in document) {
        for (const [index2, method] of methodList.entries()) {
          fullscreenAPI[unprefixedMethods[index2]] = method;
        }
        isSupported = true;
        break;
      }
    }
    async function enter(targetEl2) {
      if (!isSupported)
        return;
      if (!targetEl2)
        targetEl2 = activeEl.value || defaultElement;
      let fullscreenEnter = null;
      if (props.immersive) {
        fullscreenEnter = Promise.resolve(targetEl2[fullscreenAPI.requestFullscreen]());
      } else {
        styleLayFullscreen(targetEl2, false);
        fullscreenEnter = Promise.resolve(targetEl2 == null ? void 0 : targetEl2.classList.add("layui-fullscreen"));
      }
      return await (fullscreenEnter == null ? void 0 : fullscreenEnter.then(() => {
        isFullscreen.value = true;
        emit("fullscreenchange", isFullscreen.value);
        return !!document.fullscreenElement;
      }));
    }
    async function exit(targetEl2) {
      if (!isSupported)
        return;
      if (!targetEl2)
        targetEl2 = activeEl.value || document;
      let fullscreenExit = null;
      if (props.immersive) {
        fullscreenExit = Promise.resolve(document[fullscreenAPI.exitFullscreen]());
      } else {
        if (targetEl2 instanceof Document)
          return;
        styleLayFullscreen(targetEl2, true);
        fullscreenExit = Promise.resolve(targetEl2 == null ? void 0 : targetEl2.classList.remove("layui-fullscreen"));
      }
      return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => {
        isFullscreen.value = false;
        emit("fullscreenchange", isFullscreen.value);
        return !!document.fullscreenElement;
      }));
    }
    async function toggle() {
      if (isFullscreen.value) {
        await exit(activeEl.value);
      } else {
        await enter(activeEl.value);
      }
    }
    const styleLayFullscreen = function(el, isRemove = false) {
      el.style.position = isRemove ? "" : props.position || "";
      el.style.zIndex = isRemove ? "" : props.zIndex || "";
    };
    const activeEl = computed(() => targetEl.value = props.target);
    const onFullscreenchange = function(event) {
      if (isFullscreen.value && !document.fullscreenElement) {
        if (props.immersive) {
          isFullscreen.value = false;
          emit("fullscreenchange", isFullscreen.value);
        } else if (event.key === "Escape") {
          exit(activeEl.value);
        }
      }
    };
    const onKeydownF11 = function(event) {
      let isRootNodeFullscreen = props.immersive && (!activeEl.value || activeEl.value === defaultElement);
      if (event.key === "F11" && isRootNodeFullscreen) {
        event.preventDefault();
        toggle();
      }
    };
    onMounted(() => {
      document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
      document.addEventListener("keydown", onFullscreenchange);
      document.addEventListener("keydown", onKeydownF11);
    });
    onBeforeUnmount(() => {
      document.removeEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
      document.removeEventListener("keydown", onFullscreenchange);
      document.removeEventListener("keydown", onKeydownF11);
    });
    return (_ctx, _cache) => {
      return renderSlot(_ctx.$slots, "default", {
        isFullscreen: isFullscreen.value,
        enter,
        exit,
        toggle
      });
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };