fix: toolbar 浮动

shimohq · Jun 19, 2019 · bac5999 · bac5999
1 parent 5adfe86
commit bac5999
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,11 @@
 
 #### 通过引入 js 文件进行
 ```html
-<div id="container"></div>
+<div id="container" style="
+    height: 100%;
+    overflow: hidden; 
+    /* 这里的样式可以自定义 */
+"></div>
 <script>
     // prepare 等待后端请求返回之后的函数
     window.shimo.prepare().then(function() {

diff --git a/document.ts b/document.ts
@@ -36,6 +36,17 @@ const historyCSSClassTemplate = `
     }
 `;
 
+const toolbarCSSClassTemplate = `
+    .sm-editor-scroller {
+        height: calc(100% - 46px);
+        overflow: auto;
+    }
+
+    .sm-toolbar-wrapper.active {
+        border-bottom: 1px solid #F7F7F7;
+    }
+`;
+
 export default class ShimoDocumentCabinet extends CabinetBase {
     public editor: ShimoSDK.Document.Editor;
     private sdkCommon: any;
@@ -82,8 +93,16 @@ export default class ShimoDocumentCabinet extends CabinetBase {
         }
 
         const toolbarContainer = this.getDom("toolbar-wrapper");
+        const editorScroller = this.getDom("sm-editor-scroller");
+        toolbarContainer.className += "sm-toolbar-wrapper";
+        editorScroller.className += "sm-editor-scroller";
 
-        editor.render(this.getDom("sm-editor"), {
+        const style = document.createElement("style");
+        style.type = "text/css";
+        style.innerHTML = historyCSSClassTemplate + toolbarCSSClassTemplate;
+        document.getElementsByTagName("head")[0].appendChild(style);
+
+        editor.render(this.getDom("sm-editor", editorScroller), {
             readOnly: !this.editorOptions.editable,
             id: this.user.id,
             localeConfig,
@@ -92,6 +111,17 @@ export default class ShimoDocumentCabinet extends CabinetBase {
             },
         });
         editor.setContent(this.file.content);
+
+        editorScroller.addEventListener("scroll", () => {
+            setTimeout(() => {
+                if (editorScroller.scrollTop === 0) {
+                    toolbarContainer.classList.remove("active");
+                } else {
+                    toolbarContainer.classList.add("active");
+                }
+            }, 0);
+        });
+
         for (const plugin of this.plugins) {
             this[`init${plugin}`](editor);
         }
@@ -137,11 +167,6 @@ export default class ShimoDocumentCabinet extends CabinetBase {
         };
 
         if (!document.querySelector("history-sidebar")) {
-            const style = document.createElement("style");
-            style.type = "text/css";
-            style.innerHTML = historyCSSClassTemplate;
-            document.getElementsByTagName("head")[0].appendChild(style);
-
             this.rootDom.insertAdjacentHTML("afterend", historyContainerTemplate);
         }
 

diff --git a/example/document/index.html b/example/document/index.html
@@ -47,7 +47,10 @@
 <script src="<path>/shimo.sdk.document.plugins.uploader.min.js"></script>
 
 <body>
-<div id="container"></div>
+<div id="container" style="
+  height: 100%;
+  overflow: hidden;
+"></div>
 </body>
 
 <script>

diff --git a/sheet.ts b/sheet.ts
@@ -3,7 +3,7 @@
 import CabinetBase from "./base";
 
 export default class ShimoSheetCabinet extends CabinetBase {
-    public editor: ShimoSDK.Document.Editor;
+    public editor: ShimoSDK.Sheet.Editor;
     private sdkSheet: any;
     private sdkCommon: any;
     private user: ShimoSDK.User;
@@ -55,6 +55,20 @@ export default class ShimoSheetCabinet extends CabinetBase {
             this.insertAfter(referenceNode, this.getDom("editor"));
         }
 
+        editor.on(this.sdkSheet.sheets.Events, (msg) => {
+            this.sdkSheet.sheets.utils.confirm({
+                title: "表格异常",
+                description: '表格出现异常，无法编辑，请刷新后继续使用。<br /><i style="font-size:12px;color:#ccc;">' + msg + "</i>",
+                buttons: [
+                {
+                  type: "button",
+                  buttonLabel: "确定",
+                  customClass: "btn-ok",
+                  closeAfterClick: true,
+                }],
+            });
+        });
+
         return editor;
     }