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

Vue hooks library

import screenfull from "screenfull";
import { ref, onUnmounted, readonly } from "vue";
import { getTargetElement } from "../utils/domTarget";
const useFullscreen = (target, options) => {
  const { onExit, onEnter, defaultElement = document.documentElement } = options || {};
  const onExitRef = ref(onExit);
  const onEnterRef = ref(onEnter);
  const state = ref(false);
  const setState = (val) => {
    state.value = val;
  };
  const onChange = () => {
    var _a, _b, _c;
    if (screenfull.isEnabled) {
      const el = getTargetElement(target, defaultElement);
      if (!screenfull.element) {
        (_a = onExitRef.value) == null ? void 0 : _a.call(onExitRef);
        setState(false);
        screenfull.off("change", onChange);
      } else {
        const isFullscreen = screenfull.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 = getTargetElement(target, defaultElement);
    if (!el) {
      return;
    }
    if (screenfull.isEnabled) {
      try {
        screenfull.request(el);
        screenfull.on("change", onChange);
      } catch (error) {
        console.error(error);
      }
    }
  };
  const exitFullscreen = () => {
    const el = getTargetElement(target, defaultElement);
    if (screenfull.isEnabled && screenfull.element === el) {
      screenfull.exit();
    }
  };
  const toggleFullscreen = () => {
    if (state.value) {
      exitFullscreen();
    } else {
      enterFullscreen();
    }
  };
  onUnmounted(() => {
    if (screenfull.isEnabled) {
      screenfull.off("change", onChange);
    }
  });
  return [
    readonly(state),
    {
      enterFullscreen,
      exitFullscreen,
      toggleFullscreen,
      isEnabled: screenfull.isEnabled
    }
  ];
};
export {
  useFullscreen as default
};