@ctsy/layui-vue/es/fullscreen/index.js

a component library for Vue 3 base on layui-vue

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, renderSlot } from "vue";
var index = "";
const __default__ = {
  name: "LayFullscreen"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __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);
        }
      }
    };
    onMounted(() => {
      document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
      document.addEventListener("keydown", onFullscreenchange);
    });
    onBeforeUnmount(() => {
      document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
      document.addEventListener("keydown", onFullscreenchange);
    });
    return (_ctx, _cache) => {
      return renderSlot(_ctx.$slots, "default", {
        isFullscreen: isFullscreen.value,
        enter,
        exit,
        toggle
      });
    };
  }
}));
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };