首页 > 其他分享 >[Typescript] Toggle full screen

[Typescript] Toggle full screen

时间:2024-09-09 14:35:35浏览次数:1  
标签:function el Typescript const screen Toggle export return document

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);
}

 

标签:function,el,Typescript,const,screen,Toggle,export,return,document
From: https://www.cnblogs.com/Answer1215/p/18404521

相关文章

  • 如何在 Nuxt 3 中有效使用 TypeScript
    title:如何在Nuxt3中有效使用TypeScriptdate:2024/9/9updated:2024/9/9author:cmdragonexcerpt:摘要:本文详细介绍了如何在Nuxt3项目中有效使用TypeScript,包括创建新项目、安装TypeScript依赖、进行类型检查、配置自动类型检查、使用自动生成的类型文件、实现更严......
  • TypeScript 中可选链操作符?. 
    在TypeScript中,可选链操作符 ?. 主要有以下作用和特点:一、作用1. 安全地访问可能为 null 或 undefined 的属性或方法:-当使用可选链操作符访问对象的属性或调用方法时,如果对象在链中的某一环节为 null 或 undefined ,整个表达式会立即返回 undefined......
  • 鸿蒙-TypeScript语法
    1.概述HarmonyOS应用的主要开发语言是ArkTS,它由TypeScript(简称TS)扩展而来,在继承TypeScript语法的基础上进行了一系列优化,使开发者能够以更简洁、更自然的方式开发应用。注意:TypeScript本身也是由另一门语言JavaScript扩展而来,它主要是在JavaScript的基础上添加了静......
  • [Typescript] Handle Errors with a Generic Result Type
    Considerthis Result type:typeResult<TResult,TError>=|{success:true;data:TResult;}|{success:false;error:TError;};The Result typehastwotypeparametersfor TResult and TError.Itreturnsadisc......
  • React18+TypeScript4+Vue3:‌入门到实战,‌灵活技术选型指南
    React18+TypeScript4+Vue3:‌入门到实战,‌灵活技术选型指南在当今的前端开发领域,‌React、‌TypeScript和Vue是三大热门技术,‌它们各自拥有独特的优势和广泛的应用场景。‌掌握这些技术,‌不仅能够提升你的开发效率,‌还能帮助你在不同项目中做出更加合适的技术选型。‌本文将带......
  • [Typescript] TypeScript Project References
    Considerthis package.json file:{"name":"exercise","version":"1.0.0","main":"index.js","scripts":{"dev":"run-pdev:*","dev:client&qu......
  • 前端Pinia教程,Pinia+Vue3+Vite+TypeScript+腾讯IM聊天解决方案项目实战
    前端Pinia教程:‌Pinia+Vue3+Vite+TypeScript+腾讯IM聊天解决方案项目实战在前端开发中,‌随着Vue3的普及和Vite构建工具的兴起,‌结合TypeScript和Pinia进行状态管理成为了一个高效且受欢迎的选择。‌本文将详细介绍如何结合这些技术栈以及腾讯IM聊天解决方案,‌搭建一个高效的前端......
  • 前端项目实战Uniapp移动端项目+Vue3+Typescript+AntdVue管理平台
    ‌前端项目实战:‌构建Uniapp移动端项目与Vue3+Typescript+AntdVue管理平台‌在当今的前端开发领域,‌技术的不断迭代和创新为开发者带来了更多的选择和可能性。‌本文将介绍如何使用Uniapp框架开发移动端项目,‌并结合Vue3、‌Typescript以及AntdVue来构建一个高效的管理平台。......
  • [Typescript] Build mode of tsc: tsc -b
    Along-awaitedfeatureissmartincrementalbuildsforTypeScriptprojects.In3.0youcanusethe --build flagwith tsc.Thisiseffectivelyanewentrypointfor tsc thatbehavesmorelikeabuildorchestratorthanasimplecompiler.Running tsc--bui......
  • HarmonyOS沉浸式模式FullScreen
    import{window}from'@kit.ArkUI'classFullScreen{//开启全屏asyncenable(){constctx=AppStorage.get<Context>('context')!constwin=awaitwindow.getLastWindow(ctx)win.setWindowLayoutFullScreen(true)//顶部安全区......