From f35136597a2ffbf7e0249cfe5c3a9fe748e04bc8 Mon Sep 17 00:00:00 2001 From: windingwind <33902321+windingwind@users.noreply.github.com> Date: Mon, 8 Apr 2024 23:10:42 +0800 Subject: [PATCH] add: note preview full-height --- addon/chrome/content/icons/full-16.svg | 6 +++ addon/chrome/content/styles/workspace.css | 5 +-- addon/locale/en-US/notePreview.ftl | 2 + addon/locale/it-IT/notePreview.ftl | 2 + addon/locale/ru-RU/notePreview.ftl | 2 + addon/locale/tr-TR/notePreview.ftl | 2 + addon/locale/zh-CN/notePreview.ftl | 2 + src/addon.ts | 6 +++ src/elements/workspace.ts | 2 + src/modules/workspace/preview.ts | 45 ++++++++++++++++++++++- src/utils/workspace.ts | 9 +++++ 11 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 addon/chrome/content/icons/full-16.svg diff --git a/addon/chrome/content/icons/full-16.svg b/addon/chrome/content/icons/full-16.svg new file mode 100644 index 0000000..168edd8 --- /dev/null +++ b/addon/chrome/content/icons/full-16.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/styles/workspace.css b/addon/chrome/content/styles/workspace.css index 869bd6b..1a4f879 100644 --- a/addon/chrome/content/styles/workspace.css +++ b/addon/chrome/content/styles/workspace.css @@ -11,10 +11,7 @@ bn-workspace #__addonRef__-editor-main #links-container, display: none; } -.bn-note-preview { - height: 450px; -} - .bn-note-preview iframe { + height: var(--details-height, 450px); border-radius: 8px; } diff --git a/addon/locale/en-US/notePreview.ftl b/addon/locale/en-US/notePreview.ftl index cccc216..41fb4bb 100644 --- a/addon/locale/en-US/notePreview.ftl +++ b/addon/locale/en-US/notePreview.ftl @@ -6,3 +6,5 @@ note-preview-open = .tooltiptext = Open note note-preview-close = .tooltiptext = Close +note-preview-full = + .tooltiptext = Toggle full height diff --git a/addon/locale/it-IT/notePreview.ftl b/addon/locale/it-IT/notePreview.ftl index cccc216..41fb4bb 100644 --- a/addon/locale/it-IT/notePreview.ftl +++ b/addon/locale/it-IT/notePreview.ftl @@ -6,3 +6,5 @@ note-preview-open = .tooltiptext = Open note note-preview-close = .tooltiptext = Close +note-preview-full = + .tooltiptext = Toggle full height diff --git a/addon/locale/ru-RU/notePreview.ftl b/addon/locale/ru-RU/notePreview.ftl index cccc216..41fb4bb 100644 --- a/addon/locale/ru-RU/notePreview.ftl +++ b/addon/locale/ru-RU/notePreview.ftl @@ -6,3 +6,5 @@ note-preview-open = .tooltiptext = Open note note-preview-close = .tooltiptext = Close +note-preview-full = + .tooltiptext = Toggle full height diff --git a/addon/locale/tr-TR/notePreview.ftl b/addon/locale/tr-TR/notePreview.ftl index cccc216..41fb4bb 100644 --- a/addon/locale/tr-TR/notePreview.ftl +++ b/addon/locale/tr-TR/notePreview.ftl @@ -6,3 +6,5 @@ note-preview-open = .tooltiptext = Open note note-preview-close = .tooltiptext = Close +note-preview-full = + .tooltiptext = Toggle full height diff --git a/addon/locale/zh-CN/notePreview.ftl b/addon/locale/zh-CN/notePreview.ftl index 6dc7906..c2c351c 100644 --- a/addon/locale/zh-CN/notePreview.ftl +++ b/addon/locale/zh-CN/notePreview.ftl @@ -6,3 +6,5 @@ note-preview-open = .tooltiptext = 打开笔记 note-preview-close = .tooltiptext = 关闭 +note-preview-full = + .tooltiptext = 切换全屏高度 diff --git a/src/addon.ts b/src/addon.ts index fe9fbbe..9899a01 100644 --- a/src/addon.ts +++ b/src/addon.ts @@ -45,6 +45,9 @@ class Addon { }; }; notify: Array>; + workspace: { + instances: Record>; + }; imageViewer: { window?: Window; srcList: string[]; @@ -89,6 +92,9 @@ class Addon { diff: {}, }, notify: [], + workspace: { + instances: {}, + }, imageViewer: { window: undefined, srcList: [], diff --git a/src/elements/workspace.ts b/src/elements/workspace.ts index 09e81bf..cc4af54 100644 --- a/src/elements/workspace.ts +++ b/src/elements/workspace.ts @@ -70,6 +70,8 @@ export class Workspace extends PluginCEBase { // For note preview section enabled decision this.dataset.uid = Zotero.Utilities.randomString(8); + this._addon.data.workspace.instances[this.dataset.uid] = new WeakRef(this); + this._outline = this._queryID("left-container") as unknown as OutlinePane; this._editorElement = this._queryID("editor-main") as EditorElement; this._outline._editorElement = this._editorElement; diff --git a/src/modules/workspace/preview.ts b/src/modules/workspace/preview.ts index fcdc16f..eebecf8 100644 --- a/src/modules/workspace/preview.ts +++ b/src/modules/workspace/preview.ts @@ -1,5 +1,6 @@ import { config } from "../../../package.json"; import { waitUtilAsync } from "../../utils/wait"; +import { getWorkspaceByUID } from "../../utils/workspace"; export function openNotePreview( noteItem: Zotero.Item, @@ -40,6 +41,36 @@ export function openNotePreview( Zotero.ItemPaneManager.unregisterSection(key || ""); }, }, + { + type: "fullHeight", + icon: `chrome://${config.addonRef}/content/icons/full-16.svg`, + l10nID: `${config.addonRef}-note-preview-full`, + onClick: ({ body }) => { + const iframe = body.querySelector("iframe"); + const details = body.closest("bn-details"); + const head = body + .closest("item-pane-custom-section") + ?.querySelector(".head"); + const heightKey = "--details-height"; + if (iframe?.style.getPropertyValue(heightKey)) { + iframe.style.removeProperty(heightKey); + // @ts-ignore + if (details.pinnedPane === key) { + // @ts-ignore + details.pinnedPane = ""; + } + } else { + iframe?.style.setProperty( + heightKey, + `${details!.clientHeight - head!.clientHeight - 8}px`, + ); + // @ts-ignore + details.pinnedPane = key; + // @ts-ignore + details.scrollToPane(key); + } + }, + }, ], onItemChange: ({ body, setEnabled }) => { if ( @@ -82,6 +113,14 @@ export function openNotePreview( }, }); + const workspace = getWorkspaceByUID(workspaceUID); + setTimeout( + () => + // @ts-ignore + workspace?.querySelector("bn-details")?.scrollToPane(key), + 500, + ); + if (!key) { scrollPreviewEditorTo(noteItem, workspaceUID, options); } @@ -95,8 +134,10 @@ function scrollPreviewEditorTo( sectionName?: string; } = {}, ) { - const editor = document.querySelector( - `bn-workspace[data-uid="${workspaceUID}"] note-editor[data-id="${item.id}"]`, + const workspace = getWorkspaceByUID(workspaceUID); + if (!workspace) return; + const editor = workspace.querySelector( + `note-editor[data-id="${item.id}"]`, ) as EditorElement; if (!editor) return; if (typeof options.lineIndex === "number") { diff --git a/src/utils/workspace.ts b/src/utils/workspace.ts index 09b5279..3499089 100644 --- a/src/utils/workspace.ts +++ b/src/utils/workspace.ts @@ -4,3 +4,12 @@ export enum OutlineType { mindMap, bubbleMap, } + +export function getWorkspaceByUID(uid: string): HTMLElement | undefined { + const workspace = addon.data.workspace.instances[uid]?.deref(); + if (!workspace?.ownerDocument) { + delete addon.data.workspace.instances[uid]; + return undefined; + } + return workspace; +}