From c0d69c7b9608d418472d968e3b540c342e4c5fe7 Mon Sep 17 00:00:00 2001 From: xiangyu <3170102889@zju.edu.cn> Date: Wed, 4 May 2022 00:25:58 +0800 Subject: [PATCH] add: custom add link position --- src/events.ts | 63 +++++++++++++++++++++++++++++++++++++++++++-------- src/views.ts | 53 +++++++++++++++++++++++++++++++++++++++---- 2 files changed, 102 insertions(+), 14 deletions(-) diff --git a/src/events.ts b/src/events.ts index e556eb4..d1c85fa 100644 --- a/src/events.ts +++ b/src/events.ts @@ -117,7 +117,7 @@ class AddonEvents extends AddonBase { "openWorkspace", "start" ); - await this._Addon.views.addEditorButton( + const addLinkDropDown: Element = await this._Addon.views.addEditorButton( message.content.editorInstance, "knowledge-addlink", "addToKnowledge", @@ -125,6 +125,33 @@ class AddonEvents extends AddonBase { "addToKnowledge", "middle" ); + const buttonParam = []; + const nodes = this._Addon.knowledge.getNoteTreeAsList(undefined); + for (let node of nodes) { + buttonParam.push({ + id: `knowledge-addlink-popup-${node.model.endIndex}`, + text: node.model.name, + eventType: "addToKnowledgeLine", + }); + } + addLinkDropDown.addEventListener("mouseover", async (e) => { + if (addLinkDropDown.getElementsByClassName("popup").length > 0) { + return; + } + const popup: Element = await this._Addon.views.addEditorPopup( + message.content.editorInstance, + "knowledge-addlink-popup", + // [{ id: ''; icon: string; eventType: string }], + buttonParam, + addLinkDropDown + ); + addLinkDropDown.addEventListener("mouseleave", (e) => { + popup.remove(); + }); + addLinkDropDown.addEventListener("click", (e) => { + popup.remove(); + }); + }); await this._Addon.views.addEditorButton( message.content.editorInstance, "knowledge-end", @@ -160,15 +187,15 @@ class AddonEvents extends AddonBase { } if (message.content.params === "main") { // This is a main knowledge, hide all buttons except the export button and add title - const title = _window.document.getElementById("knowledge-addlink"); - this._Addon.views.changeEditorButtonView( - title, - "mainHeading", - "This is a Main Knowledge", - "empty" + const middle = _window.document.getElementById( + "knowledge-tools-middle" ); - title.setAttribute("class", ""); - title.setAttribute("style", "font-size: medium"); + middle.innerHTML = ""; + const header = _window.document.createElement("div"); + header.setAttribute("title", "This is a Main Knowledge"); + header.innerHTML = "Main Knowledge"; + header.setAttribute("style", "font-size: medium"); + middle.append(header); } else { // This is a preview knowledge, hide openWorkspace button add show close botton this._Addon.views.changeEditorButtonView( @@ -191,6 +218,24 @@ class AddonEvents extends AddonBase { -1, message.content.editorInstance._item.id ); + } else if (message.type === "addToKnowledgeLine") { + /* + message.content = { + editorInstance, + event, + type + } + */ + // if(message.content.) + Zotero.debug("Knowledge4Zotero: addToKnowledgeLine"); + Zotero.debug(message.content.event.target.id); + const idSplit = message.content.event.target.id.split("-"); + const lineIndex = parseInt(idSplit[idSplit.length - 1]); + this._Addon.knowledge.addLinkToNote( + undefined, + lineIndex, + message.content.editorInstance._item.id + ); } else if (message.type === "setMainKnowledge") { /* message.content = { diff --git a/src/views.ts b/src/views.ts index 9f01bff..efbc64c 100644 --- a/src/views.ts +++ b/src/views.ts @@ -13,7 +13,6 @@ class AddonViews extends AddonBase { default: "chrome://Knowledge4Zotero/skin/favicon.png", }; this.editorIcon = { - mainHeading: "Main Knowledge", addToKnowledge: ``, notMainKnowledge: ``, isMainKnowledge: ``, @@ -70,24 +69,68 @@ class AddonViews extends AddonBase { await this.addEditorKnowledgeToolBar(editorInstances); } const toolbar = _document.getElementById(`knowledge-tools-${position}`); + const dropdown = _document.createElement("div"); + dropdown.setAttribute("class", "dropdown more-dropdown"); + dropdown.setAttribute("id", id); const button = _document.createElement("button"); button.setAttribute("class", "toolbar-button"); - button.setAttribute("id", id); button.setAttribute("title", title); button.setAttribute("eventType", eventType); button.innerHTML = this.editorIcon[icon]; - toolbar.append(button); + dropdown.append(button); + toolbar.append(dropdown); const message = new EditorMessage("", { itemID: editorInstances._item.id, editorInstances: editorInstances, }); - button.addEventListener("click", (e: XULEvent) => { + dropdown.addEventListener("click", (e: XULEvent) => { message.type = e.target.getAttribute("eventType"); message.content.event = e as XULEvent; message.content.editorInstance = editorInstances; this._Addon.events.onEditorEvent(message); }); - return button; + return dropdown; + } + + async addEditorPopup( + editorInstances: EditorInstance, + id: string, + buttons: { id: string; text: string; eventType: string }[], + parentDropDown: Element + ) { + // Use Zotero.Notes._editorInstances to find current opened note editor + await editorInstances._initPromise; + + const _document = editorInstances._iframeWindow.document; + let knowledgeToolBar = _document.getElementById("knowledge-tools"); + if (!knowledgeToolBar) { + await this.addEditorKnowledgeToolBar(editorInstances); + } + const popup = _document.createElement("div"); + popup.setAttribute("class", "popup"); + popup.setAttribute("id", id); + for (let buttonParam of buttons) { + const button = _document.createElement("button"); + button.setAttribute("class", "option"); + button.setAttribute("id", buttonParam.id); + button.setAttribute("eventType", buttonParam.eventType); + button.innerHTML = buttonParam.text; + popup.append(button); + const message = new EditorMessage("", { + itemID: editorInstances._item.id, + editorInstances: editorInstances, + }); + button.addEventListener("click", (e: XULEvent) => { + message.type = e.target.getAttribute("eventType"); + message.content.event = e as XULEvent; + message.content.editorInstance = editorInstances; + this._Addon.events.onEditorEvent(message); + e.stopPropagation(); + popup.remove(); + }); + } + parentDropDown.append(popup); + return popup; } changeEditorButtonView(