Bubble: forward context menu and reactions events to C++ part

psi-im · Jun 27, 2024 · c43eff3 · c43eff3
1 parent 743e8a8
commit c43eff3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/src/chatview_webkit.cpp b/src/chatview_webkit.cpp
@@ -298,6 +298,24 @@ class ChatViewJSObject : public ChatViewThemeSession {
         connect(reply, SIGNAL(finished()), SLOT(onUrlHeadersReady()));
     }
 
+    Q_INVOKABLE void react(const QString &messageId, const QString &reaction)
+    {
+        //_view->updateReactions()
+        qDebug() << "react" << messageId << reaction;
+    }
+
+    Q_INVOKABLE void deleteMessage(const QString &messageId) { qDebug() << "deleteMessage" << messageId; }
+
+    Q_INVOKABLE void replyMessage(const QString &messageId) { qDebug() << "replyMessage" << messageId; }
+
+    Q_INVOKABLE void copyMessage(const QString &messageId) { qDebug() << "copyMessage" << messageId; }
+
+    Q_INVOKABLE void showInfo(const QString &nick) { qDebug() << "showInfo" << nick; }
+
+    Q_INVOKABLE void openChat(const QString &nick) { qDebug() << "openChat" << nick; }
+
+    Q_INVOKABLE void kick(const QString &nick) { qDebug() << "kick" << nick; }
+
 private slots:
     void onUrlHeadersReady()
     {

diff --git a/themes/chatview/psi/bubble/index.html b/themes/chatview/psi/bubble/index.html
@@ -13,7 +13,7 @@
 var util = shared.chat.util;
 var themeStyle     = document.getElementById("themeStyle").sheet;
 var cssBody        = util.findStyleSheet(themeStyle, "body").style;
-const reactionsSelector = new shared.chat.ReactionsSelector();
+const reactionsSelector = new shared.chat.ReactionsSelector(shared.session);
 const chatMenu = new shared.chat.ContextMenu();
 
 var applyPsiSettings = function() {
@@ -95,7 +95,7 @@
                 selector.textContent = "❤️";
                 setTimeout(() => { selector.classList.add('noopacity'); }, 0);
                 shared_timer.timer = null;
-                selector.addEventListener("click", () => reactionsSelector.show(selector, document.documentElement));
+                selector.addEventListener("click", () => reactionsSelector.show(el.id, selector, document.documentElement));
             }, 500);
         });
         if (shared.cdata.reply) {
@@ -126,16 +126,16 @@
             let items;
             if (isNick) {
                 items = [
-                    { text: "Info", action: ()=>{} },
-                    { text: "Open Chat", action: ()=>{} },
-                    { text: "Kick", action: ()=>{} }
+                    { text: "Info", action: ()=>{      shared.session.showInfo(nick); } },
+                    { text: "Open Chat", action: ()=>{ shared.session.openChat(nick); } },
+                    { text: "Kick", action: ()=>{      shared.session.kick(nick); } }
                 ]
             } else {
                 items = [
-                    { text: "Delete", action: ()=>{} },
-                    { text: "Reply", action: ()=>{} },
-                    { text: "Forward", action: ()=>{} },
-                    { text: "Copy", action: ()=>{} }
+                    { text: "Delete", action: ()=>{  shared.session.deleteMessage(msgNode.id); } },
+                    { text: "Reply", action: ()=>{   shared.session.replyMessage(msgNode.id);  } },
+                    { text: "Forward", action: ()=>{ shared.session.forwardMessage(msgNode.id); } },
+                    { text: "Copy", action: ()=>{    shared.session.copyMessage(msgNode.id);   } }
                 ]
             }
             return items;
@@ -146,7 +146,7 @@
 
 
 function render_reactions(event) {
-    const msg = document.getElementById(event.target);
+    const msg = document.getElementById(event.messageid);
     if (!msg) {
         return;
     }
@@ -164,14 +164,21 @@
         const base = event["reactions"][r].base || event["reactions"][r].text;
         groupped[base] = groupped[base] || {"text": "", "nicks": []};
         groupped[base].nicks = groupped[base].nicks.concat(event["reactions"][r].nicks);
-        groupped[base].text += event["reactions"][r].text;
+        groupped[base].text += `<em>${event["reactions"][r].text}</em>`;
     }
 
     for (const [base, value] of Object.entries(groupped)) {
         const nicks = value.nicks.sort().filter((x, i, a) => !i || x != a[i-1]);
         const reaction = document.createElement("span");
-        reaction.innerHTML = `${nicks.length} <em>${value.text}</em>`;
+        reaction.innerHTML = `${nicks.length} ${value.text}`;
         reaction.title = nicks.join("\n");
+        reaction.addEventListener("click", (event)=>{
+            if (event.target.nodeName == "EM") {
+                shared.session.react(msg.id, event.target.textContent);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        });
         reactions.appendChild(reaction);
     }
 }

diff --git a/themes/chatview/psi/psi.css b/themes/chatview/psi/psi.css
@@ -95,7 +95,7 @@
 }
 
 img.psi-icon {
-    vertical-align:bottom;
+    vertical-align:middle;
     max-height: 1em;
     max-width: 1em;
 }

diff --git a/themes/chatview/util.js b/themes/chatview/util.js
@@ -685,7 +685,7 @@ function initPsiTheme() {
             o.cancel = stopAnimation; // stops any current in-progress autoscroll
         },
 
-        ReactionsSelector : function() {
+        ReactionsSelector : function(session) {
             var available_reactions = [
                 "😂",
                 "🤣",
@@ -709,8 +709,10 @@ function initPsiTheme() {
             });
             document.body.appendChild(rs);
 
+            var selector = this;
             rs.addEventListener("click", function (event) {
-                if (event.target.localName == "em") {
+                if (event.target.nodeName == "EM") {
+                    session.react(selector.currentMessage, event.target.textContent);
                     event.target.parentNode.style.display = "none";
                 }
                 event.stopPropagation();
@@ -720,7 +722,8 @@ function initPsiTheme() {
                 event.stopPropagation();
             });
 
-            this.show = function(nearEl, scrollEl) {
+            this.show = function(messageId, nearEl, scrollEl) {
+                this.currentMessage = messageId;
                 const nbr = nearEl.getBoundingClientRect();
                 rs.style.top = (nbr.top + scrollEl.scrollTop) + "px";
                 rs.style.display = "flex";