Merge pull request #63 from Hufe921/feature/fullscreen

feat:add full screen feature

index.html

@@ -222,6 +222,7 @@
         <div class="page-scale-add">
           <i></i>
         </div>
+        <i class="fullscreen"></i>
       </div>
     </div>
   </div>

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>

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>

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 = [{

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;