🔀 Merge branch 'dev'

frostime · Jul 21, 2024 · 5b651ff · 5b651ff
2 parents 3144e2c + f5edcbb
commit 5b651ff
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 39 deletions.
diff --git a/public/i18n/en_US.yaml b/public/i18n/en_US.yaml
@@ -27,6 +27,9 @@ setting:
   autoRefreshOnExpand:
     title: Auto Refresh on Expand
     description: Automatically refreshes the items within a dynamic group when it is expanded from a collapsed state.
+  ariaLabel:
+    title: Display Hover Box
+    description: Display full title of the bookmark item in a hover box when the mouse hovers
 viewMode:
   bookmark: Bookmark Style
   card: Card Style

diff --git a/public/i18n/zh_CN.yaml b/public/i18n/zh_CN.yaml
@@ -27,6 +27,9 @@ setting:
   autoRefreshOnExpand:
     title: 展开后刷新
     description: 展开一个被折叠的动态组时，自动刷新其中的内容
+  ariaLabel:
+    title: 显示悬浮框
+    description: 鼠标悬停在书签项目上时，在悬浮框中显示书签项目的完整标题
 viewMode:
   bookmark: 书签样式
   card: 卡片样式

diff --git a/src/components/group.tsx b/src/components/group.tsx
@@ -12,6 +12,7 @@ import { i18n, renderI18n } from "@/utils/i18n";
 import Item from "./item";
 import { groups, setGroups, configs, itemInfo } from "../model";
 import { BookmarkContext, itemMoving, setItemMoving, groupDrop, setGroupDrop } from "./context";
+import { getActiveDoc } from "@/utils";
 
 
 interface Props {
@@ -281,18 +282,7 @@ const Group: Component<Props> = (props) => {
                 label: i18n_.currentdoc,
                 icon: "iconAdd",
                 click: () => {
-                    let wnd = document.querySelector('div.layout__wnd--active[data-type="wnd"]');
-                    let container = wnd ?? document;
-                    const li = container.querySelector(
-                        "ul.layout-tab-bar>li.item--focus"
-                    );
-                    if (!li) return;
-                    const dataId = li.getAttribute("data-id");
-                    const protyle = document.querySelector(
-                        `div.protyle[data-id="${dataId}"] .protyle-title`
-                    );
-                    if (!protyle) return;
-                    const id = protyle.getAttribute("data-node-id");
+                    let id = getActiveDoc();
                     addItemByBlockId(id);
                 },
             });

diff --git a/src/components/item.tsx b/src/components/item.tsx
@@ -3,7 +3,7 @@ import { render } from "solid-js/web";
 import { Menu, openTab, showMessage } from "siyuan";
 import { buildItemDetail } from "../libs/dom";
 
-import { itemInfo, setGroups, groupMap } from "../model";
+import { itemInfo, setGroups, groupMap, configs } from "../model";
 
 import { BookmarkContext, itemMoving, setItemMoving } from "./context";
 
@@ -61,6 +61,8 @@ const showErrItem = (item: IBookmarkItemInfo) => {
     });
 }
 
+// const ariaLabel = () => `Callout 插件 <small class='ft__on-surface'>10.07 kB</small><br>更新于 2024-07-18 15:36:20, 3 天前<br>创建于 2024-06-29 19:09:50, 3 个星期前`;
+
 
 const Item: Component<IProps> = (props) => {
     const item = () => itemInfo[props.itemCore.id];
@@ -85,6 +87,14 @@ const Item: Component<IProps> = (props) => {
         }
     });
 
+    const notebook = createMemo(() => {
+        return getNotebook(item().box).name;
+    })
+
+    const hoverContext = createMemo(() => {
+        return `<b>${notebook()}</b><br/>${item().title}`;
+    });
+
     createEffect(() => {
         let value = item();
         if (value) {
@@ -316,7 +326,13 @@ const Item: Component<IProps> = (props) => {
                 </svg>
             </span>
             <div innerHTML={Icon()} />
-            <span class="b3-list-item__text ariaLabel" data-position="parentE" style={titleStyle()}>
+            <span class="b3-list-item__text"
+                classList={{
+                    ariaLabel: configs.ariaLabel
+                }}
+                data-position="parentE"
+                {...(configs.ariaLabel ? { 'aria-label': hoverContext() } : {})}
+                style={titleStyle()}>
                 {item().title}
             </span>
             <span

diff --git a/src/components/setting/index.tsx b/src/components/setting/index.tsx
@@ -82,6 +82,19 @@ const App = () => {
                     }}
                 />
             </SettingItemWrap>
+            <SettingItemWrap
+                title={i18n_.ariaLabel.title}
+                description={i18n_.ariaLabel.description}
+            >
+                <InputItem
+                    type='checkbox'
+                    key='ariaLabel'
+                    value={configs['ariaLabel']}
+                    changed={(v: any) => {
+                        setConfigs('ariaLabel', v);
+                    }}
+                />
+            </SettingItemWrap>
             <SettingItemWrap
                 title={i18n_.grouplist.title}
                 description={i18n_.grouplist.description}

diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2024-06-12 19:48:53
  * @FilePath     : /src/index.ts
- * @LastEditTime : 2024-07-08 15:35:06
+ * @LastEditTime : 2024-07-21 17:20:44
  * @Description  : 
  */
 import {
@@ -124,7 +124,7 @@ export default class PluginBookmarkPlus extends Plugin {
         simpleDialog({
             title: window.siyuan.languages.config,
             ele: container,
-            width: '600px',
+            width: '700px',
             height: '700px',
             callback: () => {
                 model.save();

diff --git a/src/libs/components/item-input.tsx b/src/libs/components/item-input.tsx
@@ -1,4 +1,4 @@
-import { createMemo } from "solid-js";
+import { createMemo, For } from "solid-js";
 
 interface IProps extends ISettingItemCore {
     changed: (v?: any) => void;
@@ -23,7 +23,7 @@ export default function InputItem(props: IProps) {
             styles = { resize: "vertical", height: '10rem', "white-space": "nowrap" };
         }
         let propstyle = props.style ?? {};
-        styles = {...styles, ...propstyle};
+        styles = { ...styles, ...propstyle };
         return {
             style: styles
         };
@@ -102,14 +102,15 @@ export default function InputItem(props: IProps) {
                     classList={{ fn__size200: fn_size }}
                     {...attrStyle()}
                     id={props.key}
-                    value={props.value}
                     onChange={(e) => {
                         changed(e.currentTarget.value);
                     }}
                 >
-                    {Object.entries(props.options).map(([optionValue, text]) => (
-                        <option value={optionValue}>{text}</option>
-                    ))}
+                    <For each={Object.entries(props.options)}>
+                        {([optionValue, text]) => (
+                            <option value={optionValue} selected={props.value === optionValue}>{text}</option>
+                        )}
+                    </For>
                 </select>
             );
         } else if (props.type === "slider") {

diff --git a/src/libs/template.ts b/src/libs/template.ts
@@ -0,0 +1,41 @@
+import { getActiveDoc } from "@/utils";
+
+type TVarName = string;
+type TVars = Record<TVarName, () => string | null>;
+
+
+const DefaultVars: TVars = {
+    'yyyy': () => new Date().getFullYear().toString(),
+    'mm': () => (new Date().getMonth() + 1).toString().padStart(2, '0'),
+    'dd': () => new Date().getDate().toString().padStart(2, '0'),
+    'docid': () => getActiveDoc(),
+}
+
+/**
+ * 将所有模板变量替换为实际的值
+ * 模板变量使用 {{\s*(...)\s*}} 包裹
+ * 默认模板变量:
+ *  - yyyy: 当前年份
+ *  - mm: 当前月份
+ *  - dd: 当前日期
+ *  - docid: 当前激活中的文档的 id
+ * @param template 模板字符串
+ * @param vars 自定义模板变量
+ * @returns (string | null) 替换后的字符串; 如果有模板变量没有被正确替换, 则返回 null
+ */
+const renderTemplate = (template: string, vars?: TVars): string => {
+    vars = vars ?? {};
+    vars = { ...DefaultVars, ...vars };
+    let result = template;
+    for (const [varName, evaluate] of Object.entries(vars)) {
+        const varReg = new RegExp(`{{\\s*${varName}\\s*}}`, 'g');
+        let value = evaluate();
+        if (value === null || value === undefined) return null;
+        result = result.replace(varReg, value);
+    }
+    return result;
+}
+
+export {
+    renderTemplate
+};
diff --git a/src/model/stores.ts b/src/model/stores.ts
@@ -23,12 +23,14 @@ interface IConfig {
     viewMode: 'bookmark' | 'card';
     replaceDefault: boolean;
     autoRefreshOnExpand: boolean;
+    ariaLabel: boolean;
 }
 
 export const [configs, setConfigs] = createStore<IConfig>({
     hideClosed: true,
     hideDeleted: true,
     viewMode: 'bookmark',
     replaceDefault: true,
-    autoRefreshOnExpand: false
+    autoRefreshOnExpand: false,
+    ariaLabel: false,
 });
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2024-04-18 21:05:32
  * @FilePath     : /src/utils/index.ts
- * @LastEditTime : 2024-06-14 13:37:22
+ * @LastEditTime : 2024-07-20 18:17:00
  * @Description  : 
  */
 import * as api from '../api';
@@ -27,21 +27,20 @@ export const getNotebook = (boxId: string): Notebook => {
     }
 }
 
-export function getActiveDoc() {
-    let tab = document.querySelector("div.layout__wnd--active ul.layout-tab-bar>li.item--focus");
-    let dataId: string = tab?.getAttribute("data-id");
-    if (!dataId) {
-        return null;
-    }
-    const activeTab: HTMLDivElement = document.querySelector(
-        `.layout-tab-container.fn__flex-1>div.protyle[data-id="${dataId}"]`
-    ) as HTMLDivElement;
-    if (!activeTab) {
-        return;
-    }
-    const eleTitle = activeTab.querySelector(".protyle-title");
-    let docId = eleTitle?.getAttribute("data-node-id");
-    return docId;
+export function getActiveDoc(): DocumentId {
+    let wnd = document.querySelector('div.layout__wnd--active[data-type="wnd"]');
+    let container = wnd ?? document;
+    const li = container.querySelector(
+        "ul.layout-tab-bar>li.item--focus"
+    );
+    if (!li) return;
+    const dataId = li.getAttribute("data-id");
+    const protyle = document.querySelector(
+        `div.protyle[data-id="${dataId}"] .protyle-title`
+    );
+    if (!protyle) return;
+    const id = protyle.getAttribute("data-node-id");
+    return id;
 }
 
 export function isnot(value: any) {