💄 动态设置 typewriter 固定位置

Vanessa219 · Apr 9, 2020 · afc8ad8 · afc8ad8
1 parent 6d60aed
commit afc8ad8
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 19 deletions.
diff --git a/src/assets/scss/_content.scss b/src/assets/scss/_content.scss
@@ -72,8 +72,9 @@
     }
 
     &:after {
+      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom);
+      height: var(--editor-bottom-fullscreen, $height);
       display: block;
     }
   }
@@ -211,14 +212,14 @@
 
     &__close {
       position: absolute;
-      color:  var(--toolbar-icon-color);
+      color: var(--toolbar-icon-color);
       top: -7px;
       right: -15px;
       font-weight: bold;
       cursor: pointer;
 
       &:hover {
-        color:  var(--toolbar-icon-hover-color);
+        color: var(--toolbar-icon-hover-color);
       }
     }
   }

diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -137,8 +137,9 @@
     }
 
     &:after {
+      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom);
+      height: var(--editor-bottom-fullscreen, $height);
       display: block;
     }
 

diff --git a/src/assets/scss/_wysiwyg.scss b/src/assets/scss/_wysiwyg.scss
@@ -27,8 +27,9 @@
     }
 
     &:after {
+      $height: var(--editor-bottom);
       content: "";
-      height: var(--editor-bottom);
+      height: var(--editor-bottom-fullscreen, $height);
       display: block;
     }
   }

diff --git a/src/ts/toolbar/Fullscreen.ts b/src/ts/toolbar/Fullscreen.ts
@@ -12,10 +12,17 @@ export class Fullscreen extends MenuItem {
     }
 
     public _bindEvent(vditor: IVditor, menuItem: IMenuItem) {
+        const setTypewriterPosition = () => {
+            // 由于 Firefox padding-bottom bug，只能使用 :after
+            vditor.element.style.setProperty("--editor-bottom-fullscreen", (window.innerHeight / 2 - 18) + "px");
+        };
+
         this.element.children[0].addEventListener(getEventName(), function(event) {
             event.preventDefault();
-            if (vditor.element.className.indexOf("vditor--fullscreen") > -1) {
+            if (vditor.element.className.includes("vditor--fullscreen")) {
                 this.innerHTML = menuItem.icon || fullscreenSVG;
+                vditor.element.style.removeProperty("--editor-bottom-fullscreen");
+                window.removeEventListener("resize", setTypewriterPosition);
                 vditor.element.classList.remove("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
@@ -25,6 +32,8 @@ export class Fullscreen extends MenuItem {
                 });
             } else {
                 this.innerHTML = menuItem.icon || contractSVG;
+                setTypewriterPosition();
+                window.addEventListener("resize", setTypewriterPosition);
                 vditor.element.classList.add("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;

diff --git a/src/ts/ui/initUI.ts b/src/ts/ui/initUI.ts
@@ -1,5 +1,6 @@
 import {html2md} from "../sv/html2md";
 import {setEditMode} from "../toolbar/EditMode";
+import {scrollCenter} from "../util/editorCommonEvent";
 import {setTheme} from "./setTheme";
 
 export const initUI = (vditor: IVditor) => {
@@ -73,27 +74,33 @@ export const setPadding = (vditor: IVditor) => {
 };
 
 const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
-    if (vditor.options.typewriterMode) {
-        let height: number = window.innerHeight - 37;
-        if (typeof vditor.options.height === "number") {
-            height = Math.min(window.innerHeight, vditor.options.height) - 37;
+    const setTypewriterPosition = () => {
+        let height: number;
+        if (typeof vditor.options.height !== "number") {
+            height = window.innerHeight;
+        } else {
+            height = vditor.options.height;
+            if (typeof vditor.options.minHeight === "number") {
+                height = Math.max(height, vditor.options.minHeight + vditor.toolbar.element.offsetHeight);
+            }
+            height = Math.min(window.innerHeight, height);
         }
         // 由于 Firefox padding-bottom bug，只能使用 :after
-        contentElement.style.setProperty("--editor-bottom", height / 2 + "px");
+        contentElement.style.setProperty("--editor-bottom", (height / 2 - 18) + "px");
+    };
+
+    if (vditor.options.typewriterMode) {
+        setTypewriterPosition();
     }
 
     window.addEventListener("resize", () => {
         setPadding(vditor);
+        if (vditor.options.typewriterMode) {
+            setTypewriterPosition();
+            scrollCenter(vditor);
+        }
     });
 
-    // TODO: 监听因为 sticky 导致的 toolbar 与 content 相对位置变化
-    // window.addEventListener("scroll", () => {
-    //     // tslint:disable-next-line: max-line-length
-    //     const stickyOffset = vditor.wysiwyg.element.parentElement.parentElement.offsetTop
-    //     - vditor.toolbar.element.offsetTop - vditor.toolbar.element.offsetHeight;
-    //     vditor.wysiwyg.popover.style.setProperty("--sticky-offset", stickyOffset + "px");
-    // });
-
     // set default value
     let initValue = localStorage.getItem(vditor.options.cache.id);
     if (!vditor.options.cache.enable || !initValue) {