[Share] Customize color labels of reader

[windingwind]

Description

Customize color labels of reader. Edit the action script below to replace the labels.

Set the Event to Program Startup.

See also #210

Event

Program Startup

Operation

Script

Data

/**
 * Customize color labels of reader
 * @author windingwind
 * @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(() => {
    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);
}

Zotero.Reader.registerEventListener(
  "createAnnotationContextMenu",
  hackContextMenuLabel,
  "[email protected]"
);

Zotero.Reader.registerEventListener(
  "createColorContextMenu",
  hackContextMenuLabel,
  "[email protected]"
);

Anything else

No response

[OpenFoam-User]

Very nice! thank you very much for this script.

[Geo123abc]

选中一个条目，shift+enter 在一个独立窗口中打开PDF，在这个独立窗口中动作无效，不知道是我姿势不对？还是？

[windingwind]

我确认该动作没问题。如果认为是bug请提交issue

[Geo123abc]

在独立窗口中也有效吗？

[windingwind]

对

[Geo123abc]

我又试了一下，确实可以，但是颜色似乎不能自定义，我在想，颜色能不能也支持自定义？就类似zotero style的那个更改高亮的功能（zotero style可以在主窗口阅读时更改颜色，但是在独立窗口中的阅读器中无效）

[mjthoraval]

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?

[windingwind]

updated

[mjthoraval]

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)
Windows 10

[ramonmi]

This script seems to not work in the popup after selecting text. The tooltip text remains the default color label.

[weihv]

Please check here: #211

[ramonmi]

Fantastic! Thank you very much.

[jmw999]

It doesn't seem to work anymore for me either - but such a useful addition! Any ideas?

[mjthoraval]

Have you updated the script to the latest version (modified in the post at the top)?
Can you give more details on your OS, Zotero version, plugin version, and the steps you have followed?

[jmw999]

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:
// Edit labels below
const replaceLabelMap = {
"#ffd400": "Yellow - Useful",
"#ff6666": "Red - Definition",
"#5fb236": "Green - Quote",
"#2ea8e5": "Blue - Good point",
"#a28ae5": "Custom Purple",
"#e56eee": "Magenta - Counterargument",
"#f19837": "Custom Orange",
"#aaaaaa": "Custom Grey",
};

Hoping I have missed out a blindingly obvious step - as this adaptation seems so needed.

[mjthoraval]

Does the original script work before making any modification?

The only other changes I made were to edit lines 56-65 as follows:

You should just replace lines 10-19.
That is working for me:

[jmw999]

Just to add that I've also edited lines 10-19 as well - but it didn't make any difference when I restarted Zotero.

[jmw999]

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.

[mjthoraval]

I am a bit confused here.
The code shared here only has 48 lines for me:

Can you show a screenshot of the code you have?

[jmw999]

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

[jmw999]

Cracked it - thank you! I've no idea how that went wrong, but it did.

[weihv]

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]"
);

[weihv]

Thank you very much for this update. It is working great. I have just changed the space from " " to " " to make it a bit longer. " ": " ":

But it seems that the space is still not the same as the original padding? Original:

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

[physicslog]

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 replaceLabelMap are in different order than the Zotero's label map. So, after the relabeled, it would be great if you ordered the label based on the replaceLabelMap.

[weihv]

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 replaceLabelMap are in different order than the Zotero's label map. So, after the relabeled, it would be great if you ordered the label based on the replaceLabelMap.

JavaScript objects like replaceLabelMap here do not have a guaranteed order even if you can see order here.

[physicslog]

Yep that's right. But able to have the order would be great!

[physicslog]

I modified only the hackContextMenuLabel. It reorders the colour label based on the position of replaceLabelMap and it also reorders for popups but in a weird way. Maybe there should be a good way to do the same thing :)

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

[OESNES]

Just learned about scripts and found this one I have wanted for a while. This is an awesome script. Thanks