fix: handle window resize update style

opentiny · Oct 25, 2024 · 7daeab4 · 7daeab4
1 parent d5e7b35
commit 7daeab4
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/packages/fluent-editor/src/fullscreen/handler.ts b/packages/fluent-editor/src/fullscreen/handler.ts
@@ -2,25 +2,31 @@ import type { FluentEditorToolbar } from '../config/types'
 import { namespace } from '../config'
 
 let exitEscHandlerBindToolbar: (e: KeyboardEvent) => void
+let resizeHandlerBindToolbar: () => void
 function exitEscHandler(toolbar: FluentEditorToolbar, e: KeyboardEvent) {
   if (e.code === 'Escape') {
     exitFullscreen(toolbar)
   }
 }
+function updateToolbarHeight(toolbar: FluentEditorToolbar) {
+  const toolbatRect = toolbar.container.getBoundingClientRect()
+  toolbar.quill.container.style.setProperty(`--${namespace}-top`, `${toolbatRect.height}px`)
+}
 function intoFullscreen(toolbar: FluentEditorToolbar) {
   toolbar.quill.isFullscreen = true
   toolbar.container.classList.add('fullscreen')
   toolbar.quill.container.classList.add('fullscreen')
-  const toolbatRect = toolbar.container.getBoundingClientRect()
-  toolbar.quill.container.style.setProperty(`--${namespace}-top`, `${toolbatRect.height}px`)
   document.documentElement.classList.add('scroll--lock')
+  resizeHandlerBindToolbar()
+  window.addEventListener('resize', resizeHandlerBindToolbar)
   document.addEventListener('keydown', exitEscHandlerBindToolbar)
 }
 function exitFullscreen(toolbar: FluentEditorToolbar) {
   toolbar.quill.isFullscreen = false
   toolbar.container.classList.remove('fullscreen')
   toolbar.quill.container.classList.remove('fullscreen')
   document.documentElement.classList.remove('scroll--lock')
+  window.removeEventListener('resize', resizeHandlerBindToolbar)
   document.removeEventListener('keydown', exitEscHandlerBindToolbar)
 }
 export function fullscreenHandler(this: FluentEditorToolbar) {
@@ -29,6 +35,7 @@ export function fullscreenHandler(this: FluentEditorToolbar) {
   }
   else {
     exitEscHandlerBindToolbar = exitEscHandler.bind(undefined, this)
+    resizeHandlerBindToolbar = updateToolbarHeight.bind(undefined, this)
     intoFullscreen(this)
   }
 }