🔀 Merge branch 'dev'

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

public/i18n/zh_CN.yaml

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

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);
  },
  });

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

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}

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();

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") {

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
+};

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,
 });

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) {