feat(custom-block): 新增滚动显示功能 | Add scrolling display function.

Zuoqiu-Yingyi · Jul 4, 2023 · a36ac1e · a36ac1e
1 parent 67f46e7
commit a36ac1e
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 12 deletions.
diff --git a/public/i18n/en_US.json b/public/i18n/en_US.json
@@ -2,10 +2,13 @@
     "displayName": "Custom Block Style",
     "menu": {
         "custom-block-render-danmaku": {
-            "label": "Bullet screen"
+            "label": "Bullet Screen"
+        },
+        "custom-block-render-scroll": {
+            "label": "Scrolling Display"
         },
         "custom-block-style": {
-            "label": "block style"
+            "label": "Block Style"
         }
     }
 }
diff --git a/public/i18n/zh_CHT.json b/public/i18n/zh_CHT.json
@@ -4,6 +4,9 @@
         "custom-block-render-danmaku": {
             "label": "彈幕"
         },
+        "custom-block-render-scroll": {
+            "label": "滾屏顯示"
+        },
         "custom-block-style": {
             "label": "塊樣式"
         }

diff --git a/public/i18n/zh_CN.json b/public/i18n/zh_CN.json
@@ -4,6 +4,9 @@
         "custom-block-render-danmaku": {
             "label": "弹幕"
         },
+        "custom-block-render-scroll": {
+            "label": "滚屏显示"
+        },
         "custom-block-style": {
             "label": "块样式"
         }

diff --git a/src/configs/default.ts b/src/configs/default.ts
@@ -73,5 +73,27 @@ export const DEFAULT_CONFIG: IConfig = {
                 },
             ],
         },
+        { // 滚屏显示
+            id: "custom-block-render-scroll",
+            enable: true,
+            mode: MenuItemMode.button,
+            multi: true,
+            icon: "iconScrollWrapped",
+            accelerator: "render: scroll",
+            token: "render-scroll",
+            type: {
+                default: { enable: true },
+                [sdk.siyuan.NodeType.NodeTable]: { enable: false },
+            },
+            tasks: [
+                {
+                    type: TaskType.toggle,
+                    params: {
+                        name: "custom-block-render",
+                        token: "scroll",
+                    },
+                },
+            ],
+        },
     ],
 };
diff --git a/src/styles/custom-block-render.less → src/styles/custom-block-render-danmaku.less b/src/styles/custom-block-render.less → src/styles/custom-block-render-danmaku.less
@@ -13,17 +13,20 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-:root[plugin-custom-block~=render-danmaku] {
-    .protyle-wysiwyg {
+:root {
 
-        &[custom-block-render~=danmaku]>[data-node-id],
-        [custom-block-render~=danmaku][data-node-id] {
-            /* 使用滚动动画 */
-            animation: var(--custom-block-render-danmaku-time) danmaku linear infinite normal;
+    &[plugin-custom-block~=render-danmaku] {
+        .protyle-wysiwyg {
 
-            &:hover {
-                /* 鼠标悬浮时暂停 */
-                animation-play-state: paused;
+            &[custom-block-render~=danmaku]>[data-node-id],
+            [custom-block-render~=danmaku][data-node-id] {
+                /* 使用滚动动画 */
+                animation: var(--custom-block-render-danmaku-time) danmaku linear infinite normal;
+
+                &:hover {
+                    /* 鼠标悬浮时暂停 */
+                    animation-play-state: paused;
+                }
             }
         }
     }

diff --git a/src/styles/custom-block-render-scroll.less b/src/styles/custom-block-render-scroll.less
@@ -0,0 +1,53 @@
+// Copyright (C) 2023 Zuoqiu Yingyi
+// 
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+// 
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+// 
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+/* 块过长时设置块内纵向滚动条 */
+:root {
+
+    &[plugin-custom-block~=render-scroll] {
+        .protyle-wysiwyg {
+
+            &[custom-block-render~=scroll]>[data-node-id],
+            [custom-block-render~=scroll][data-node-id] {
+
+                // >.protyle-icons,
+                >.protyle-action {
+                    /* 右上角悬浮控件 */
+                    position: sticky;
+                }
+
+                >.protyle-attr {
+                    .protyle-attr--refcount {
+                        /* 块引用数量标示 */
+                        right: 4px;
+                    }
+                }
+
+                // 非表格块
+                &:not(.table) {
+                    /* 纵向滚动条 */
+                    overflow-y: auto;
+                    max-height: var(--custom-block-render-scroll-max-height);
+
+                    &::-webkit-scrollbar-track {
+                        /* 滚动条轨道样式 */
+                        background-color: var(--b3-scroll-color);
+                        border-radius: var(--b3-border-radius);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/define.less b/src/styles/define.less
@@ -16,6 +16,9 @@
 :root {
     /* 弹幕滚动时间 */
     --custom-block-render-danmaku-time: 16s;
+
+    /* 滚屏模式最大高度 */
+    --custom-block-render-scroll-max-height: 50vh;
 }
 
 /* 弹幕滚动动画 */

diff --git a/src/styles/index.less b/src/styles/index.less
@@ -14,4 +14,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 @import (once) url(./define.less);
-@import (once) url(./custom-block-render.less);
+
+@import (once) url(./custom-block-render-danmaku.less);
+@import (once) url(./custom-block-render-scroll.less);