fix: #750 修复预览区点击回调事件失效的问题; feat: #750 增加点击toc页面目录不更新location hash的特性

Tencent · Apr 25, 2024 · 0cff250 · 0cff250
1 parent e1df984
commit 0cff250
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 deletions.
diff --git a/examples/scripts/index-demo.js b/examples/scripts/index-demo.js
@@ -192,7 +192,7 @@ var basicConfig = {
     sidebar: ['mobilePreview', 'copy', 'theme', 'publish'],
     sidebar: ['mobilePreview', 'copy', 'theme'],
     toc: {
-      updateLocationHash: true, // 要不要更新URL的hash
+      updateLocationHash: false, // 要不要更新URL的hash
       defaultModel: 'full', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
     },
     customMenu: {
@@ -225,6 +225,9 @@ var basicConfig = {
   //extensions: [],
   callback: {
     changeString2Pinyin: pinyin,
+    onClickPreview: (event) => {
+      console.log("onClickPreview", event);
+    },
   },
   editor: {
     id: 'cherry-text',

diff --git a/src/Previewer.js b/src/Previewer.js
@@ -131,6 +131,7 @@ export default class Previewer {
     this.$initPreviewerBubble();
     this.lazyLoadImg = new LazyLoadImg(this.options.lazyLoadImg, this);
     this.lazyLoadImg.doLazyLoad();
+    this.bindClick();
     this.onMouseDown();
     this.onSizeChange();
   }
@@ -962,6 +963,44 @@ export default class Previewer {
     this.$scrollAnimation(top);
   }
 
+  scrollToHeadByIndex(index) {
+    const previewDom = this.getDomContainer();
+    const targetHead = previewDom.querySelectorAll('h1,h2,h3,h4,h5,h6,h7,h8')[index] ?? false;
+    if (targetHead !== false) {
+      const scrollTop =
+        previewDom.scrollTop + targetHead.getBoundingClientRect().y - previewDom.getBoundingClientRect().y - 10;
+      previewDom.scrollTo({
+        top: scrollTop,
+        left: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  bindClick() {
+    this.getDomContainer().addEventListener('click', (event) => {
+      if (this.$cherry.options.callback.onClickPreview) {
+        const ret = this.$cherry.options.callback.onClickPreview(event);
+        // @ts-ignore
+        if (ret === false) {
+          return ret;
+        }
+      }
+      // 如果配置了点击toc目录不更新location hash
+      // @ts-ignore
+      if (this.$cherry.options.toolbars.toc?.updateLocationHash === false) {
+        const { target } = event;
+        if (target instanceof Element && target.nodeName === 'A' && /level-\d+/.test(target.className)) {
+          const liNode = target.parentElement;
+          const index = Array.from(liNode.parentElement.children).indexOf(liNode) - 1;
+          this.scrollToHeadByIndex(index);
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      }
+    });
+  }
+
   onMouseDown() {
     addEvent(this.getDomContainer(), 'mousedown', () => {
       setTimeout(() => {

diff --git a/src/toolbars/PreviewerBubble.js b/src/toolbars/PreviewerBubble.js
@@ -235,13 +235,7 @@ export default class PreviewerBubble {
    */
   $onClick(e) {
     const { target } = e;
-    const cherryStatus = this.previewer.$cherry.getStatus();
-    // 纯预览模式下，支持点击放大图片功能（以回调的形式实现，需要业务侧实现图片放大功能）
-    if (cherryStatus.editor === 'hide' || !(target instanceof Element)) {
-      if (cherryStatus.previewer === 'show') {
-        this.previewer.$cherry.options.callback.onClickPreview &&
-          this.previewer.$cherry.options.callback.onClickPreview(e);
-      }
+    if (!(target instanceof Element)) {
       return;
     }
 

diff --git a/src/toolbars/Toc.js b/src/toolbars/Toc.js
@@ -102,17 +102,7 @@ export default class Toc {
           this.$cherry.editor.scrollToLineNum(target.line, target.line + 1, 0);
         } else {
           // 有预览的情况下，直接通过滚动预览区位置实现滚动到锚点
-          const previewDom = this.$cherry.previewer.getDomContainer();
-          const target = previewDom.querySelectorAll('h1,h2,h3,h4,h5,h6,h7,h8')[index] ?? false;
-          if (target !== false) {
-            const scrollTop =
-              previewDom.scrollTop + target.getBoundingClientRect().y - previewDom.getBoundingClientRect().y - 20;
-            previewDom.scrollTo({
-              top: scrollTop,
-              left: 0,
-              behavior: 'smooth',
-            });
-          }
+          this.$cherry.previewer.scrollToHeadByIndex(index);
         }
         if (this.updateLocationHash) {
           location.href = id;