From 04c495a1949d24ed9f11ed395f7b5e8eb208416f Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Sun, 7 Aug 2022 15:54:54 +0800
Subject: [PATCH] feat:add full screen feature

---
 index.html                               |  1 +
 src/assets/images/exit-fullscreen.svg    |  1 +
 src/assets/images/request-fullscreen.svg |  1 +
 src/main.ts                              | 23 ++++++++++++++++++++++-
 src/style.css                            |  8 ++++++++
 5 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/exit-fullscreen.svg
 create mode 100644 src/assets/images/request-fullscreen.svg

diff --git a/index.html b/index.html
index 73751df..9a8fc0c 100644
--- a/index.html
+++ b/index.html
@@ -222,6 +222,7 @@
         <div class="page-scale-add">
           <i></i>
         </div>
+        <i class="fullscreen"></i>
       </div>
     </div>
   </div>
diff --git a/src/assets/images/exit-fullscreen.svg b/src/assets/images/exit-fullscreen.svg
new file mode 100644
index 0000000..7999e25
--- /dev/null
+++ b/src/assets/images/exit-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M9 9h1v4H9z"/><path d="M9 9h4v1H9zM7 7H6V3h1z"/><path d="M7 7H3V6h4z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/request-fullscreen.svg b/src/assets/images/request-fullscreen.svg
new file mode 100644
index 0000000..cf47c4a
--- /dev/null
+++ b/src/assets/images/request-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M3 3h1v4H3z"/><path d="M3 3h4v1H3zm10 10h-1V9h1z"/><path d="M13 13H9v-1h4z"/></g></svg>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index a80c0a6..dcd906e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -608,7 +608,7 @@ window.onload = function () {
     instance.command.executePrint()
   }
 
-  // 6. 页面模式 | 纸张缩放
+  // 6. 页面模式 | 纸张缩放 | 全屏
   const pageModeDom = document.querySelector<HTMLDivElement>('.page-mode')!
   const pageModeOptionsDom = pageModeDom.querySelector<HTMLDivElement>('.options')!
   pageModeDom.onclick = function () {
@@ -634,6 +634,27 @@ window.onload = function () {
     instance.command.executePageScaleAdd()
   }
 
+  // 全屏
+  const fullscreenDom = document.querySelector<HTMLDivElement>('.fullscreen')!
+  fullscreenDom.onclick = toggleFullscreen
+  window.addEventListener('keydown', (evt) => {
+    if (evt.key === 'F11') {
+      toggleFullscreen()
+      evt.preventDefault()
+    }
+  })
+  document.addEventListener('fullscreenchange', () => {
+    fullscreenDom.classList.toggle('exist')
+  })
+  function toggleFullscreen() {
+    console.log('fullscreen')
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+    } else {
+      document.exitFullscreen()
+    }
+  }
+
   // 7. 编辑器使用模式
   let modeIndex = 0
   const modeList = [{
diff --git a/src/style.css b/src/style.css
index 6a85fc9..115d386 100644
--- a/src/style.css
+++ b/src/style.css
@@ -662,6 +662,14 @@ ul {
   user-select: none;
 }
 
+.footer .fullscreen {
+  background-image: url('./assets/images/request-fullscreen.svg');
+}
+
+.footer .fullscreen.exist {
+  background-image: url('./assets/images/exit-fullscreen.svg');
+}
+
 .footer .editor-mode {
   cursor: pointer;
   user-select: none;