vue-hooks-plus/lib/useFullscreen/index.js

Vue hooks library

"use strict";
const screenfull = require("screenfull");
const vue = require("vue");
const domTarget = require("../utils/domTarget");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const screenfull__default = /* @__PURE__ */ _interopDefaultLegacy(screenfull);
const useFullscreen = (target, options) => {
  const { onExit, onEnter, defaultElement = document.documentElement } = options || {};
  const onExitRef = vue.ref(onExit);
  const onEnterRef = vue.ref(onEnter);
  const state = vue.ref(false);
  const setState = (val) => {
    state.value = val;
  };
  const onChange = () => {
    var _a, _b, _c;
    if (screenfull__default.default.isEnabled) {
      const el = domTarget.getTargetElement(target, defaultElement);
      if (!screenfull__default.default.element) {
        (_a = onExitRef.value) == null ? void 0 : _a.call(onExitRef);
        setState(false);
        screenfull__default.default.off("change", onChange);
      } else {
        const isFullscreen = screenfull__default.default.element === el;
        if (isFullscreen) {
          (_b = onEnterRef.value) == null ? void 0 : _b.call(onEnterRef);
        } else {
          (_c = onExitRef.value) == null ? void 0 : _c.call(onExitRef);
        }
        setState(isFullscreen);
      }
    }
  };
  const enterFullscreen = () => {
    const el = domTarget.getTargetElement(target, defaultElement);
    if (!el) {
      return;
    }
    if (screenfull__default.default.isEnabled) {
      try {
        screenfull__default.default.request(el);
        screenfull__default.default.on("change", onChange);
      } catch (error) {
        console.error(error);
      }
    }
  };
  const exitFullscreen = () => {
    const el = domTarget.getTargetElement(target, defaultElement);
    if (screenfull__default.default.isEnabled && screenfull__default.default.element === el) {
      screenfull__default.default.exit();
    }
  };
  const toggleFullscreen = () => {
    if (state.value) {
      exitFullscreen();
    } else {
      enterFullscreen();
    }
  };
  vue.onUnmounted(() => {
    if (screenfull__default.default.isEnabled) {
      screenfull__default.default.off("change", onChange);
    }
  });
  return [
    vue.readonly(state),
    {
      enterFullscreen,
      exitFullscreen,
      toggleFullscreen,
      isEnabled: screenfull__default.default.isEnabled
    }
  ];
};
module.exports = useFullscreen;