Skip to content

Commit

Permalink
增加颜色配置
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzlb0224
zzlb0224 committed Mar 10, 2024
1 parent 1150077 commit 24dd69a
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 57 deletions.
35 changes: 34 additions & 1 deletion addon/chrome/content/preferences.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
preference="extensions.zotero.__addonRef__.enable" data-l10n-id="pref-enable" /> -->
<vbox>
<html:label
for="zotero-prefpane-__prefsPrefix__-tags"
for="zotero-prefpane-__addonRef__-tags"
data-l10n-id="pref-tagsLabel"
>
</html:label>
Expand All @@ -27,7 +27,40 @@
preference="__prefsPrefix__.tags"
/>
</vbox>
<vbox>
<html:label
for="zotero-prefpane-__addonRef__-fixed-colors"
data-l10n-id="pref-fixed-colors"
>
</html:label>
</vbox>
<vbox>
<html:input
id="zotero-prefpane-__addonRef__-fixed-colors"
style="width: 100%"
native="true"
preference="__prefsPrefix__.fixed-colors"
/>
</vbox>
<html:div id="zotero-prefpane-__addonRef__-coloredTags"></html:div>
<hbox>
<html:label
for="zotero-prefpane-__addonRef__-optional-color"
data-l10n-id="pref-optional-color"
>
</html:label>
<html:input
id="zotero-prefpane-__addonRef__-optional-color"
native="true"
preference="__prefsPrefix__.optional-color"
/>
<html:label
id="zotero-prefpane-__addonRef__-optional-color-label"
for="zotero-prefpane-__addonRef__-optional-color"
data-l10n-id="pref-optional-color-label"
>
</html:label>
</hbox>
<checkbox
id="zotero-prefpane-__addonRef__-selectedCollection"
preference="__prefsPrefix__.selectedCollection"
Expand Down
5 changes: 4 additions & 1 deletion addon/locale/en-US/preferences.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ pref-enable =
.label = Enable
pref-input = this is a input
pref-tagsLabel = TAGS
pref-tagsLabel =fixed tags
pref-fixed-colors = colors
pref-optional-color =optional color #ffc0cb
pref-optional-color-label =optional color #ffc0cb
pref-selectedCollection =
.label = relate tags in selected collection
Expand Down
7 changes: 5 additions & 2 deletions addon/locale/zh-CN/preferences.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ pref-enable =
pref-input = 输入
pref-tagsLabel = 固定输出标签
pref-tagsLabel = 固定输出标签，以英文逗号分隔
pref-fixed-colors = 固定颜色，以英文逗号分隔，使用六位的颜色如#ffc0cb
pref-optional-color = 备选颜色，当没有颜色的时候使用这个颜色
pref-optional-color-label = 备选颜色
pref-selectedCollection =
Expand All @@ -13,7 +16,7 @@ pref-currentCollection =
.label = 显示当前条目所在文件夹（collection）的相关标签（一个条目可以属于多个文件夹）
pref-showAllTags =
.label = 显示库中的所有标签（会卡的吧）
.label = 显示库中的所有标签
pref-multipleTags =
.label = 同时添加多个标签
Expand Down
103 changes: 70 additions & 33 deletions src/modules/annotations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,16 +161,17 @@ let allTagsInLibrary: groupByResult<{
}>[] = [];

function createDiv(
doc: Document,
doc3: Document,
reader: _ZoteroTypes.ReaderInstance,
params: any, // { annotation?: any; ids?: string[]; currentID?: string; x?: number; y?: number; },
) {
setTimeout(async () => {
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"
Expand All @@ -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);
Expand All @@ -199,14 +203,8 @@ function createDiv(
} = getPrimaryViewDoc(doc);
let maxWidth = 666;
const styles: Partial<CSSStyleDeclaration> = {
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",
Expand Down Expand Up @@ -252,29 +250,37 @@ function createDiv(
properties: {
tabIndex: -1,
},
styles,
children: [createSearchDiv(), createTagsDiv()],
});
return div;

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",
listener: (e: Event) => {
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(),
Expand All @@ -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: [
{
Expand All @@ -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" },
},
],
};
}
Expand All @@ -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 {
Expand All @@ -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: [
Expand All @@ -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,
};
}
Expand All @@ -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(
{
Expand Down Expand Up @@ -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 这样更新大小好像没起到效果。估计还要换个思路
Expand Down Expand Up @@ -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);
}
},
});
}
Expand Down
45 changes: 44 additions & 1 deletion src/modules/preferenceScript.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ async function updatePrefsUI() {
return;
}
replaceElement(doc);
changeOptionalColor();

// const tags = doc.querySelector(`${config.addonRef}-tags`) as HTMLInputElement
// if(tags)
Expand Down Expand Up @@ -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);
Expand All @@ -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`,
Expand All @@ -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(","));
Expand All @@ -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");
}
}
Loading

0 comments on commit 24dd69a

Please sign in to comment.