[Typescript] Toggle full screen

const requestFullscreenProps = [
  "requestFullScreen",
  "webkitRequestFullScreen",
  "mozRequestFullScreen",
  "msRequestFullScreen",
] as const;
const exitFullScreenProps = [
  "exitFullscreen",
  "webkitExitFullscreen",
  "mozCancelFullScreen",
  "msExitFullscreen",
] as const;
const fullscreenElementProps = [
  "fullscreenElement",
  "webkitFullscreenElement",
  "mozFullScreenElement",
  "msFullscreenElement",
] as const;

function getPropertyName<T extends string>(names: readonly T[], target: Node) {
  return names.find(function (name) {
    return name in target;
  });
}

const enterFullScreenName = getPropertyName(
  requestFullscreenProps,
  document.documentElement
);
export function enterFullscreen(el: Node) {
  enterFullScreenName && el[enterFullScreenName]();
}

const exitFullScreenName = getPropertyName(exitFullScreenProps, document);
export function exitFullscreen() {
  exitFullScreenName && document[exitFullScreenName]();
}

const fullEleName = getPropertyName(fullscreenElementProps, document);
export function fullscreenElement() {
  return (fullEleName && document[fullEleName]) || null;
}

export function isFullscreen() {
  return !!fullscreenElement();
}

export function toggleFullscreen(el: Node) {
  isFullscreen() ? exitFullscreen() : enterFullscreen(el);
}

 

posted @   Zhentiw  阅读(11)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2022-09-09 [Typescript] 23. Medium - Promise.all
2022-09-09 [Typescript] 22. Medium - Pop
2022-09-09 [Typescript] 21. Medium - Last of Array
2020-09-09 [Recoil] Use selectorFamily to take arguments in your Recoil selectors
2017-09-09 [Mobx] Use MobX actions to change and guard state
2017-09-09 [TypeScript] Type check JavaScript files using JSDoc and Typescript 2.5
2016-09-09 [Javascript] IO Functor
点击右上角即可分享
微信分享提示