From 24dd69a78a4534fb796f947442e3d626cbec76c5 Mon Sep 17 00:00:00 2001 From: "zhoulibin@xiaoxin" <125377187@qq.com> Date: Sun, 10 Mar 2024 14:36:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A2=9C=E8=89=B2=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addon/chrome/content/preferences.xhtml | 35 ++++++++- addon/locale/en-US/preferences.ftl | 5 +- addon/locale/zh-CN/preferences.ftl | 7 +- src/modules/annotations.ts | 103 +++++++++++++++++-------- src/modules/preferenceScript.ts | 45 ++++++++++- src/utils/zzlb.ts | 37 +++++---- 6 files changed, 175 insertions(+), 57 deletions(-) diff --git a/addon/chrome/content/preferences.xhtml b/addon/chrome/content/preferences.xhtml index d3101e2b..de8d913c 100644 --- a/addon/chrome/content/preferences.xhtml +++ b/addon/chrome/content/preferences.xhtml @@ -14,7 +14,7 @@ preference="extensions.zotero.__addonRef__.enable" data-l10n-id="pref-enable" /> --> @@ -27,7 +27,40 @@ preference="__prefsPrefix__.tags" /> + + + + + + + + + + + + + + [] = []; function createDiv( - doc: Document, + doc3: Document, reader: _ZoteroTypes.ReaderInstance, params: any, // { annotation?: any; ids?: string[]; currentID?: string; x?: number; y?: number; }, ) { @@ -169,8 +169,9 @@ function createDiv( allTagsInLibrary = await getAllTags(); }, 0); const isExistAnno = !!params.ids; - //TODO doc 参数都是从reader里面出来的？那么这个参数是不是就没必要了，有待测试 - // if (doc.getElementById(`${config.addonRef}-reader-div`)) + + const doc = reader._iframeWindow?.document; + if (!doc) return; if ( doc.getElementById(`${config.addonRef}-reader-div`)?.parentElement ?.nodeName == "BODY" @@ -181,6 +182,9 @@ function createDiv( .getElementById(`${config.addonRef}-reader-div`) ?.parentElement?.remove(); const bShowAllTags = !!getPref("showAllTags"); + const fontSize = + Zotero.Prefs.get(`extensions.zotero.ZoteroPDFTranslate.fontSize`, true) + + "px"; const tags1 = bShowAllTags ? allTagsInLibrary : groupBy(relateTags(reader._item), (t) => t.tag); @@ -199,14 +203,8 @@ function createDiv( } = getPrimaryViewDoc(doc); let maxWidth = 666; const styles: Partial = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - padding: "2px 5px", - marginLeft: "2px", // width: "calc(100% - 4px)", // maxWidth: maxWidth + "px", - justifyContent: "space-start", background: "#eeeeee", border: "#cc9999", // boxShadow: "#666666 0px 0px 6px 4px", @@ -252,6 +250,7 @@ function createDiv( properties: { tabIndex: -1, }, + styles, children: [createSearchDiv(), createTagsDiv()], }); return div; @@ -259,11 +258,17 @@ function createDiv( function createSearchDiv(): TagElementProps { return { tag: "div", - styles: { display: "flex", justifyContent: "space-between" }, + styles: { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + justifyContent: "space-start", + maxWidth: maxWidth + "px", + }, children: [ { tag: "input", - styles: { flex: "1" }, + styles: { flex: "1", fontSize }, listeners: [ { type: "keyup", @@ -271,10 +276,11 @@ function createDiv( const target = e.target as HTMLInputElement; ztoolkit.log(e); searchTag = target.value.trim(); - if ((e as any).keyCode == 13) { + const { keyCode } = e as any; + if (keyCode == 13) { onTagClick(searchTag); } - if (doc.getElementById(`${config.addonRef}-reader-div-tags`)) { + if (doc?.getElementById(`${config.addonRef}-reader-div-tags`)) { searchTagResult(); ztoolkit.UI.replaceElement( createTagsDiv(), @@ -288,23 +294,21 @@ function createDiv( }, { tag: "div", - id: `${config.addonRef}-reader-div-selected-tags`, - styles: { display: "flex", justifyContent: "space-between" }, - }, - { - tag: "div", - styles, + styles: { display: "flex" }, children: [ { tag: "button", properties: { - textContent: getPref("multipleTags") ? "添加多标签" : "单标签", + textContent: getPref("multipleTags") + ? "添加多个标签" + : "单标签", }, styles: { margin: "2px", padding: "2px", border: "1px solid #dddddd", background: "#99aa66", + fontSize, }, listeners: [ { @@ -316,8 +320,36 @@ function createDiv( }, ], }, + { + tag: "button", + properties: { + textContent: "关闭", + }, + styles: { + margin: "2px", + padding: "2px", + border: "1px solid #dddddd", + background: "#99aa66", + fontSize, + }, + listeners: [ + { + type: "click", + listener: (e: Event) => { + div?.remove(); + //@ts-ignore 隐藏弹出框 + reader._primaryView._onSetSelectionPopup(null); + }, + }, + ], + }, ], }, + { + tag: "div", + id: `${config.addonRef}-reader-div-selected-tags`, + styles: { display: "flex", justifyContent: "space-between" }, + }, ], }; } @@ -328,7 +360,6 @@ function createDiv( ? tags2.filter((f) => RegExp(searchTag, "i").test(f.key)) : tags1; tagsDisplay.splice(0, 1e6, ...tags3); - return tags3; } function createTagsDiv(): TagElementProps { @@ -349,12 +380,7 @@ function createDiv( margin: "2px", padding: "2px", background: bgColor, - // fontSize: ((label.count-min)/(max-min)*10+15).toFixed()+ "px", - fontSize: - Zotero.Prefs.get( - `extensions.zotero.ZoteroPDFTranslate.fontSize`, - true, - ) + "px", + fontSize, boxShadow: "#999999 0px 0px 3px 3px", }, listeners: [ @@ -372,7 +398,13 @@ function createDiv( tag: "div", namespace: "html", id: `${config.addonRef}-reader-div-tags`, - styles, + styles: { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + justifyContent: "space-start", + fontSize, + }, children, }; } @@ -399,7 +431,7 @@ function createDiv( ); } function onTagClick(tag: string, color: string = "") { - if (selectedTags.every((s) => s.tag != tag)) { + if (doc && selectedTags.every((s) => s.tag != tag)) { selectedTags.push({ tag, color: color || getFixedColor(tag) }); ztoolkit.UI.appendElement( { @@ -497,8 +529,10 @@ function renderTextSelectionPopup( // event.params.annotation.tags, // ); const div = createDiv(doc, reader, params); - setTimeout(() => updateDivWidth(div), 1000); - append(div); + if (div) { + setTimeout(() => updateDivWidth(div), 1000); + append(div); + } } function updateDivWidth(div: HTMLElement, n = 3) { //TODO 这样更新大小好像没起到效果。估计还要换个思路 @@ -549,8 +583,11 @@ function createAnnotationContextMenu( onCommand: () => { // ztoolkit.log("测试添加标签"); const div = createDiv(doc, reader, params); - doc.body.appendChild(div); - setTimeout(() => div?.remove(), 10000); + if (div) { + doc.body.appendChild(div); + + // setTimeout(() => div?.remove(), 10000); + } }, }); } diff --git a/src/modules/preferenceScript.ts b/src/modules/preferenceScript.ts index 29f07a0a..d0c141f8 100644 --- a/src/modules/preferenceScript.ts +++ b/src/modules/preferenceScript.ts @@ -92,6 +92,7 @@ async function updatePrefsUI() { return; } replaceElement(doc); + changeOptionalColor(); // const tags = doc.querySelector(`${config.addonRef}-tags`) as HTMLInputElement // if(tags) @@ -177,7 +178,7 @@ function bindPrefEvents() { .prefs!.window.document.querySelector( `#zotero-prefpane-${config.addonRef}-tags`, ) - ?.addEventListener("change", (e) => { + ?.addEventListener("keyup", (e) => { ztoolkit.log(e, getPref("tags")); replaceElement(addon.data.prefs!.window.document); @@ -186,6 +187,26 @@ function bindPrefEvents() { // ); }); + addon.data + .prefs!.window.document.querySelector( + `#zotero-prefpane-${config.addonRef}-fixed-colors`, + ) + ?.addEventListener("keyup", (e) => { + ztoolkit.log(e, getPref("tags")); + + replaceElement(addon.data.prefs!.window.document); + // addon.data.prefs!.window.alert( + // `Successfully changed to ${(e.target as HTMLInputElement).value}!`, + // ); + }); + addon.data + .prefs!.window.document.querySelector( + `#zotero-prefpane-${config.addonRef}-optional-color`, + ) + ?.addEventListener("keyup", (e) => { + changeOptionalColor(); + }); + addon.data .prefs!.window.document.querySelector( `#zotero-prefpane-${config.addonRef}-input`, @@ -197,6 +218,19 @@ function bindPrefEvents() { ); }); } +function changeOptionalColor() { + if (addon.data.prefs) { + const label = addon.data.prefs!.window.document.getElementById( + `zotero-prefpane-${config.addonRef}-optional-color-label`, + ); + if (label) { + const optionalColor = (getPref("optional-color") as string) || ""; + label.style.background = optionalColor; + label.textContent = optionalColor; + } + } +} + export async function setDefaultPrefSettings() { if (!getPref("tags")) { setPref("tags", getFixedTags().join(",")); @@ -207,4 +241,13 @@ export async function setDefaultPrefSettings() { if (getPref("selectedCollection") == undefined) { setPref("selectedCollection", true); } + if (getPref("fixed-colors") == undefined) { + setPref( + "fixed-colors", + "#ffd400,#ff6666,#5fb236,#2ea8e5,#a28ae5,#e56eee,#f19837,#aaaaaa", + ); + } + if (getPref("optional-color") == undefined) { + setPref("optional-color", "#ffc0cb"); + } } diff --git a/src/utils/zzlb.ts b/src/utils/zzlb.ts index e8542db4..fa5fb2f8 100644 --- a/src/utils/zzlb.ts +++ b/src/utils/zzlb.ts @@ -86,38 +86,37 @@ export function sortByTAGs(a: groupByResult, b: groupByResult) { return b.values.length - a.values.length + (b.key > a.key ? -0.5 : 0.5); } -export function getFixedTags() { +export function getFixedTags(): string[] { const prefTags = ((getPref("tags") as string) || "") .split(",") .map((a) => a.trim()) .filter((f) => f); - return prefTags && prefTags.length > 0 - ? prefTags - : "目的,假设,框架,数据,量表,方法,理论,结论,贡献,不足,背景,现状,问题,对策".split( + if (prefTags && prefTags.length > 0) return prefTags; + return "目的,假设,框架,数据,量表,方法,理论,结论,贡献,不足,背景,现状,问题,对策".split( + ",", + ); +} +export function getFixedColors(): string[] { + let fixedColor = ((getPref("fixed-colors") as string) || "") + .split(",") + .map((a) => a.trim()) + .filter((f) => f); + if (!fixedColor || fixedColor.length == 0) + fixedColor = + "#ffd400,#ff6666,#5fb236,#2ea8e5,#a28ae5,#e56eee,#f19837,#aaaaaa".split( ",", ); -} -export function getFixedColors() { const tags = getFixedTags(); return Array.from({ - length: tags.length / ANNOTATION_COLORS.length + 1, - }).flatMap((a) => ANNOTATION_COLORS); + length: tags.length / fixedColor.length + 1, + }).flatMap(() => fixedColor); } -export function getFixedColor(tag: string, optional: string = "#ffc0cb") { +export function getFixedColor(tag: string, optional?: string): string { const tags = getFixedTags(); if (tags.includes(tag)) { return getFixedColors()[tags.indexOf(tag)]; } + if (optional == undefined) return getPref("optional-color") as string; return optional; } -const ANNOTATION_COLORS = [ - "#ffd400", - "#ff6666", - "#5fb236", - "#2ea8e5", - "#a28ae5", - "#e56eee", - "#f19837", - "#aaaaaa", -];