init

es/fullscreen/index.js

@@ -0,0 +1,163 @@
+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 };