-
+
`;
d.addEventListener("click", async () => {
@@ -2989,7 +2993,7 @@ async function updateWorkInfo(bookmarkTags) {
const el = await waitForDom(WORK_SECTION);
let workInfo = {};
for (let i = 0; i < 100; i++) {
- workInfo = Object.values(el)[0]["memoizedProps"]["children"][2]["props"];
+ workInfo = Object.values(el)[0]["memoizedProps"]["children"][3]["props"];
if (Object.keys(workInfo).length) break;
else await delay(200);
}
@@ -3013,6 +3017,7 @@ async function initializeVariables() {
token = await fetchTokenPolyfill();
pageInfo.userId = window.location.href.match(/users\/(\d+)/)?.[1];
pageInfo.client = { userId: uid, lang, token };
+ if (DEBUG) console.log("[Label Bookmarks] Page Info", pageInfo);
} catch (err) {
console.log(err);
console.log("[Label Bookmarks] Initializing Failed");
@@ -3055,11 +3060,21 @@ async function initializeVariables() {
el.classList.replace(prevTextColor, textColor);
},
);
- const prevClearTag = theme ? "dydUg" : "jbzOgz";
- const clearTag = theme ? "jbzOgz" : "dydUg";
- const clearTagsButton = document.querySelector("#clear_tags_button");
- if (clearTagsButton)
- clearTagsButton.children[0].classList.replace(prevClearTag, clearTag);
+
+ const pillBgColor = theme
+ ? "rgba(0, 0, 0, 0.04)"
+ : "rgba(255, 255, 255, 0.08)";
+ const pillTextColor = theme
+ ? "rgba(0, 0, 0, 0.88)"
+ : "rgba(255, 255, 255, 0.88)";
+
+ ["clear_tags_button", "remove_tag_button"].forEach((id) => {
+ const el = document.querySelector("#" + id);
+ if (el) {
+ el.style.backgroundColor = pillBgColor;
+ el.style.color = pillTextColor;
+ }
+ });
}).observe(themeDiv, { attributes: true });
synonymDict = getValue("synonymDict", {});
@@ -3090,7 +3105,7 @@ async function injectElements() {
if (DEBUG) console.log("[Label Bookmarks] Start Injecting");
const textColor = theme ? "text-lp-dark" : "text-lp-light";
const pageBody = document.querySelector(PAGE_BODY);
- const root = document.querySelector("nav");
+ const root = document.querySelector(NAV);
if (!root) console.log("[Label Bookmarks] Navbar Not Found");
root.classList.add("d-flex");
const buttonContainer = document.createElement("span");
@@ -3105,37 +3120,60 @@ async function injectElements() {
`;
- const clearTagsThemeClass = theme ? "OPGIe" : "bDwYXF";
const clearTagsText = lang.includes("zh") ? "清除标签" : "Clear Tags";
const clearTagsButton = document.createElement("div");
clearTagsButton.id = "clear_tags_button";
- clearTagsButton.className = "sc-15a17794-0 iTJRIU sc-231887f1-7 gzddfG";
+ const pillButtonStyle = `
+ display: none;
+ margin: 0px;
+ padding: 8px 16px;
+ border-radius: 9999px;
+ cursor: pointer;
+ user-select: none;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 22px;
+ background-color: ${theme ? "rgba(0, 0, 0, 0.04)" : "rgba(255, 255, 255, 0.08)"};
+ color: ${theme ? "rgba(0, 0, 0, 0.88)" : "rgba(255, 255, 255, 0.88)"};
+ transition: background-color 0.2s ease;
+ `;
+ clearTagsButton.style.cssText = pillButtonStyle;
clearTagsButton.setAttribute("aria-disabled", "true");
clearTagsButton.setAttribute("role", "button");
- clearTagsButton.innerHTML = `
`;
+ clearTagsButton.innerText = clearTagsText;
+ clearTagsButton.addEventListener("mouseenter", () => {
+ if (clearTagsButton.getAttribute("aria-disabled") !== "true") {
+ clearTagsButton.style.backgroundColor = theme
+ ? "rgba(0, 0, 0, 0.08)"
+ : "rgba(255, 255, 255, 0.16)";
+ }
+ });
+ clearTagsButton.addEventListener("mouseleave", () => {
+ clearTagsButton.style.backgroundColor = theme
+ ? "rgba(0, 0, 0, 0.04)"
+ : "rgba(255, 255, 255, 0.08)";
+ });
clearTagsButton.addEventListener("click", handleClearBookmarkTags);
+ unsafeWindow.clearTags = handleClearBookmarkTags;
const removeTagButton = document.createElement("div");
removeTagButton.id = "remove_tag_button";
- removeTagButton.style.display = "none";
- removeTagButton.style.marginRight = "16px";
- removeTagButton.style.marginBottom = "12px";
- removeTagButton.style.color = "rgba(0, 0, 0, 0.64)";
- removeTagButton.style.cursor = "pointer";
- removeTagButton.innerHTML = `
-
-
- `;
+ removeTagButton.style.cssText = pillButtonStyle;
+ removeTagButton.setAttribute("role", "button");
+ const removeTagText = lang.includes("zh") ? "删除标签" : "Delete Tag";
+ removeTagButton.innerHTML = `
${removeTagText}`;
+ removeTagButton.addEventListener("mouseenter", () => {
+ removeTagButton.style.backgroundColor = theme
+ ? "rgba(0, 0, 0, 0.08)"
+ : "rgba(255, 255, 255, 0.16)";
+ });
+ removeTagButton.addEventListener("mouseleave", () => {
+ removeTagButton.style.backgroundColor = theme
+ ? "rgba(0, 0, 0, 0.04)"
+ : "rgba(255, 255, 255, 0.08)";
+ });
removeTagButton.addEventListener("click", handleDeleteTag);
+ unsafeWindow.deleteTag = handleDeleteTag;
async function injection(_, injectionObserver) {
if (_) console.log(_);
@@ -3204,49 +3242,84 @@ async function injectElements() {
const editButtonContainer = await waitForDom(EDIT_BUTTON_CONTAINER);
if (editButtonContainer) {
- editButtonContainer.style.justifyContent = "initial";
- editButtonContainer.firstElementChild.style.marginRight = "auto";
- editButtonContainer.insertBefore(
- removeTagButton,
- editButtonContainer.lastChild,
- );
let removeBookmarkContainerObserver;
- const editButtonObserver = new MutationObserver(
- async (MutationRecord) => {
- const { tag } = await updateWorkInfo();
- if (!MutationRecord[0].addedNodes.length) {
- // open edit mode
- const removeBookmarkContainer = document.querySelector(
- REMOVE_BOOKMARK_CONTAINER,
- );
+
+ const isInEditMode = () => {
+ const section = document.querySelector("section");
+ return (
+ section &&
+ section.children.length >= 3 &&
+ section.children[2].querySelector('input[type="checkbox"]')
+ );
+ };
+
+ const handleEditModeChange = async () => {
+ const { tag } = await updateWorkInfo();
+ const inEditMode = isInEditMode();
+
+ if (inEditMode) {
+ if (DEBUG) console.log("[Label Bookmarks] In Edit Mode");
+ // open edit mode
+ let removeBookmarkContainer = document.querySelector(
+ REMOVE_BOOKMARK_CONTAINER,
+ );
+ if (
+ removeBookmarkContainer &&
+ !removeBookmarkContainer.contains(clearTagsButton)
+ ) {
removeBookmarkContainer.appendChild(clearTagsButton);
- removeBookmarkContainerObserver = new MutationObserver(() => {
- const value =
- removeBookmarkContainer.children[2].getAttribute(
- "aria-disabled",
- );
- clearTagsButton.setAttribute("aria-disabled", value);
- clearTagsButton.children[0].setAttribute("aria-disabled", value);
- });
- removeBookmarkContainerObserver.observe(
- removeBookmarkContainer.children[2],
- { attributes: true },
+ removeBookmarkContainer.appendChild(removeTagButton);
+ // Find button with aria-disabled to sync state - look for Remove bookmark button
+ const referenceButton = removeBookmarkContainer.querySelector(
+ '[role="button"][aria-disabled]',
);
- if (tag && tag !== "未分類") {
- document.querySelector("#remove_tag_prompt").innerText =
- lang.includes("zh") ? "删除标签 " + tag : "Delete Tag " + tag;
- removeTagButton.style.display = "flex";
+ if (referenceButton) {
+ const syncButtonState = () => {
+ const value = referenceButton.getAttribute("aria-disabled");
+ const isDisabled = value === "true";
+ // clearTagsButton: sync aria-disabled and show/hide based on selection
+ clearTagsButton.setAttribute("aria-disabled", value);
+ clearTagsButton.style.display = isDisabled ? "none" : "block";
+ clearTagsButton.style.cursor = isDisabled
+ ? "default"
+ : "pointer";
+ };
+ removeBookmarkContainerObserver = new MutationObserver(
+ syncButtonState,
+ );
+ removeBookmarkContainerObserver.observe(referenceButton, {
+ attributes: true,
+ });
+ // Sync initial state
+ syncButtonState();
}
+ }
+ if (tag && tag !== "未分類") {
+ document.querySelector("#remove_tag_prompt").innerText =
+ lang.includes("zh") ? "删除标签 " + tag : "Delete Tag " + tag;
+ removeTagButton.style.display = "block";
} else {
- // exit edit mode
removeTagButton.style.display = "none";
- if (removeBookmarkContainerObserver)
- removeBookmarkContainerObserver.disconnect();
- clearTagsButton.setAttribute("aria-disabled", "true");
- clearTagsButton.children[0].setAttribute("aria-disabled", "true");
}
- },
- );
+ } else {
+ // exit edit mode
+ removeTagButton.style.display = "none";
+ clearTagsButton.style.display = "none";
+ if (removeBookmarkContainerObserver)
+ removeBookmarkContainerObserver.disconnect();
+ clearTagsButton.setAttribute("aria-disabled", "true");
+ }
+ };
+
+ // Observe the section for child changes (detects edit mode toggle)
+ const section = document.querySelector("section");
+ const editModeObserver = new MutationObserver(handleEditModeChange);
+ editModeObserver.observe(section, {
+ childList: true,
+ });
+
+ // Also observe the header container for changes
+ const editButtonObserver = new MutationObserver(handleEditModeChange);
editButtonObserver.observe(editButtonContainer, {
childList: true,
});
@@ -3325,11 +3398,11 @@ async function injectElements() {
// all tags selection control
const prevAllTagsButton = await waitForDom(ALL_TAGS_BUTTON);
prevAllTagsButton.style.display = "none";
- addStyle(".ggMyQW { z-index: -1; }");
+ addStyle(`${ALL_TAGS_MODAL} { z-index: -1; }`);
const allTagsButton = document.createElement("div");
allTagsButton.setAttribute("data-bs-toggle", "modal");
allTagsButton.setAttribute("data-bs-target", "#all_tags_modal");
- allTagsButton.classList.add(ALL_TAGS_BUTTON.slice(1));
+ allTagsButton.className = "all-tags-custom-button";
allTagsButton.role = "button";
allTagsButton.innerHTML = `