[Share] Customize color labels of reader #211
Replies: 10 comments 23 replies
-
|
Very nice! thank you very much for this script. |
Beta Was this translation helpful? Give feedback.
-
|
选中一个条目，shift+enter 在一个独立窗口中打开PDF，在这个独立窗口中动作无效，不知道是我姿势不对？还是？ |
Beta Was this translation helpful? Give feedback.
-
|
我确认该动作没问题。如果认为是bug请提交issue |
Beta Was this translation helpful? Give feedback.
-
|
在独立窗口中也有效吗？ |
Beta Was this translation helpful? Give feedback.
-
|
对 |
Beta Was this translation helpful? Give feedback.
-
|
我又试了一下，确实可以，但是颜色似乎不能自定义，我在想，颜色能不能也支持自定义？就类似zotero style的那个更改高亮的功能（zotero style可以在主窗口阅读时更改颜色，但是在独立窗口中的阅读器中无效） |
Beta Was this translation helpful? Give feedback.
-
|
I am not able to get this script to work. Here are the parameters I have set: But after restart, I still get: Restart with Logging Enabled: D762267552 Just to confirm also: will the labels return to the default labels when I disable this script and restart Zotero? |
Beta Was this translation helpful? Give feedback.
-
|
updated |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much! I confirm that it is working nicely now. Just a minor problem: it seems that the space between the color square and the label is missing: Even adding a space manually does not work: See the difference with the default labels: Zotero 7.0.0-beta.117+794dc6bf0 (64-bit) |
Beta Was this translation helpful? Give feedback.
-
|
This script seems to not work in the popup after selecting text. The tooltip text remains the default color label. |
Beta Was this translation helpful? Give feedback.
-
|
Please check here: #211 |
Beta Was this translation helpful? Give feedback.
-
|
Fantastic! Thank you very much. |
Beta Was this translation helpful? Give feedback.
-
|
It doesn't seem to work anymore for me either - but such a useful addition! Any ideas? |
Beta Was this translation helpful? Give feedback.
-
|
Have you updated the script to the latest version (modified in the post at the top)? |
Beta Was this translation helpful? Give feedback.
-
|
I'm on version 2.0.0 of the plug in, 7.0.1-beta.3+ec7ffa8c0 (64-bit) of Zotero, Windows 10 pro, version 22H2. I installed the plug in yesterday, copied the script from the plug in this morning, and pasted it into the Monaco box loaded by the plugin. the rest of the settings are as per the screenshot. The only other changes I made were to edit lines 56-65 as follows: Hoping I have missed out a blindingly obvious step - as this adaptation seems so needed. |
Beta Was this translation helpful? Give feedback.
-
|
Does the original script work before making any modification?
You should just replace lines 10-19. |
Beta Was this translation helpful? Give feedback.
-
|
Just to add that I've also edited lines 10-19 as well - but it didn't make any difference when I restarted Zotero. |
Beta Was this translation helpful? Give feedback.
-
|
I really appreciate you taking the time to respond but this is what I get after editing 10-19 but returning 56-65 to what they were. |
Beta Was this translation helpful? Give feedback.
-
|
I am a bit confused here. Can you show a screenshot of the code you have? |
Beta Was this translation helpful? Give feedback.
-
|
Interesting! Mine is much longer - 95 lines :( I'll try to print it out and get rid of the surplus. That's very bizarre, as I just copied it from the data bit further up the thread.. Thank you so much though :) |
Beta Was this translation helpful? Give feedback.
-
|
Cracked it - thank you! I've no idea how that went wrong, but it did. |
Beta Was this translation helpful? Give feedback.
-
|
Add customize color labels to selection popup and sidebar tag, add space to original context menus /**
* Customize color labels of reader
* @author windingwind
* @editor weihv
* @eidt Add customize color labels to selection popup and sidebar tag, add space to original context menus
* @reference https://www.zotero.org/support/dev/zotero_7_for_developers#custom_reader_event_handlers
* @usage Set the Event to Program Startup; Edit the action script below to replace the labels.
* @link https://github.com/windingwind/zotero-actions-tags/discussions/211
* @see https://github.com/windingwind/zotero-actions-tags/discussions/211
*/
// Edit labels below
const replaceLabelMap = {
"#ffd400": "Custom Yellow",
"#ff6666": "Custom Red",
"#5fb236": "Custom Green",
"#2ea8e5": "Custom Blue",
"#a28ae5": "Custom Purple",
"#e56eee": "Custom Magenta",
"#f19837": "Custom Orange",
"#aaaaaa": "Custom Grey",
};
function hackContextMenuLabel(event) {
setTimeout(() => {
// Check if we are dealing with a context menu
if (event.reader._iframeWindow?.document.querySelector(".context-menu")) {
// This is the context menu case
event.reader._iframeWindow?.document
.querySelectorAll(".context-menu .row")
.forEach((e) => {
const color = e.querySelector("path[fill]")?.getAttribute("fill");
if (!color) {
return;
}
if (color in replaceLabelMap) {
e.innerHTML = e.querySelector("svg")?.outerHTML + " " + replaceLabelMap[color];
}
});
}
}, 10);
}
function hackTextSelectionPopup(event) {
setTimeout(() => {
// Target the text selection popup
const popup = event.reader._iframeWindow?.document.querySelector(".selection-popup");
if (popup) {
// Modify the title of each button
popup.querySelectorAll(".toolbar-button.color-button").forEach((button) => {
const svgElement = button.querySelector("path[fill]");
if (svgElement) {
const color = svgElement.getAttribute("fill");
if (color && replaceLabelMap[color]) {
button.setAttribute("title", replaceLabelMap[color]);
}
}
});
}
}, 10);
}
function hackSidebarAnnotationHeader(event) {
setTimeout(() => {
// Target sidebar bottom selector
const selectorMenu = event.reader._iframeWindow?.document.querySelector(".selector");
if (selectorMenu) {
selectorMenu.querySelectorAll(".color").forEach((button) => {
const svgElement = button.querySelector("path[fill]");
if (svgElement) {
const color = svgElement.getAttribute("fill");
if (color && replaceLabelMap[color]) {
// first line shows label name on color tag
// second line show label name after color tag
button.setAttribute("title", replaceLabelMap[color]); // comment this line if want to show color name on color tag
button.innerHTML = svgElement.closest("svg")?.outerHTML + " " + replaceLabelMap[color];
}
}
});
}
}, 10);
}
// Register event listeners for context menus, popup, selector
// For left sidebar's annotation right-click menu
Zotero.Reader.registerEventListener(
"createAnnotationContextMenu",
hackContextMenuLabel,
"[email protected]"
);
// For top toolbar's color picker menu
Zotero.Reader.registerEventListener(
"createColorContextMenu",
hackContextMenuLabel,
"[email protected]"
);
// For reader text selection popup
Zotero.Reader.registerEventListener(
"renderTextSelectionPopup",
hackTextSelectionPopup,
"[email protected]"
);
// For left sidebar's annotation header (bottom left tag filtering)
Zotero.Reader.registerEventListener(
"renderSidebarAnnotationHeader",
hackSidebarAnnotationHeader,
"[email protected]"
); |
Beta Was this translation helpful? Give feedback.
-
I pasted the original button item here: <button tabindex="-1" class="row basic"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1 3C1 1.89543 1.89543 1 3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V3Z" fill="#ff6666"></path><path d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5H13C13.8284 1.5 14.5 2.17157 14.5 3V13C14.5 13.8284 13.8284 14.5 13 14.5H3C2.17157 14.5 1.5 13.8284 1.5 13V3Z" stroke="black" stroke-opacity="0.1"></path></svg></div>Red</button>Depends on where you put text. Inside or out side |
Beta Was this translation helpful? Give feedback.
-
|
Sure! For example: const replaceLabelMap = {
"#ff6666": "Custom Red", // order is changed
"#ffd400": "Custom Yellow", // order is changed
"#2ea8e5": "Custom Blue", // order is changed
"#5fb236": "Custom Green", // order is changed
"#a28ae5": "Custom Purple",
"#e56eee": "Custom Magenta",
"#f19837": "Custom Orange",
"#aaaaaa": "Custom Grey",
};Notice that the position of colors in |
Beta Was this translation helpful? Give feedback.
-
JavaScript objects like replaceLabelMap here do not have a guaranteed order even if you can see order here. |
Beta Was this translation helpful? Give feedback.
-
|
Yep that's right. But able to have the order would be great! |
Beta Was this translation helpful? Give feedback.
-
|
I modified only the function hackContextMenuLabel(event) {
setTimeout(() => {
const contextMenu = event.reader._iframeWindow?.document.querySelector(".context-menu");
if (contextMenu) {
const rows = Array.from(contextMenu.querySelectorAll(".row"));
const colorOrder = Object.keys(replaceLabelMap);
const orderedRows = rows.sort((a, b) => {
const colorA = a.querySelector("path[fill]")?.getAttribute("fill");
const colorB = b.querySelector("path[fill]")?.getAttribute("fill");
return colorOrder.indexOf(colorA) - colorOrder.indexOf(colorB);
});
orderedRows.forEach((e) => {
const color = e.querySelector("path[fill]")?.getAttribute("fill");
if (color && replaceLabelMap[color]) {
e.innerHTML = e.querySelector("svg")?.outerHTML + " " + replaceLabelMap[color];
}
contextMenu.appendChild(e);
});
}
}, 10);
} |
Beta Was this translation helpful? Give feedback.
-
|
Just learned about scripts and found this one I have wanted for a while. This is an awesome script. Thanks |
Beta Was this translation helpful? Give feedback.
-
Description
Customize color labels of reader. Edit the action script below to replace the labels.
See also #210
Event
Program Startup
Operation
Script
Data
Anything else
No response
Beta Was this translation helpful? Give feedback.
All reactions