VueUseのuseFullscreenを読む

useFullscreen | VueUse

全画面 API - Web API | MDNをラップして使いやすくしたライブラリ。

全画面化したいテンプレート参照を引数targetとすることで、制御できる。
https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/demo.vue#L13
https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/demo.vue#L6
https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/index.ts#L35

toggleで全画面へのenterとexitをトグル。

https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/index.ts#L150-L152

enterは、以下の順でフルスクリーン化する

• 全画面APIをサポートしているか？していないならば早期リターン
• 現在全画面化しているか？全画面中なら、一旦終了する
• 全画面化するtargetを取得。（targetが指定されていない場合は全体（document.querySelector('html')が指定される））
• targetを全画面化する（ target[requestMethod.value] ）

https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/index.ts#L136-L148

exitはenterとほぼ同様。
https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/index.ts#L117-L131

参考になるのは isSurpported。これは、プロパティがtargetに存在するかを in 演算子 - JavaScript | MDN 確認している。

https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/index.ts#L86-L92

https://github.com/vueuse/vueuse/blob/c9842b267587d53f90f351e94a8b2fea439589de/packages/core/useFullscreen/index.ts#L46-L56