message context menu (WEBAPP-2861)

electron/js/menu/context.js

@@ -24,6 +24,7 @@ const {remote, ipcRenderer} = require('electron');
 const Menu = remote.Menu;
 const MenuItem = remote.MenuItem;
 const locale = require('./../../locale/locale');
+const customContext = require('./custom-context');
 
 // Default
 // =================================================================
@@ -99,41 +100,46 @@ var image_menu = Menu.buildFromTemplate([{
   }
 }]);
 
-window.addEventListener('contextmenu', function (e) {
-  const element = e.target;
+window.addEventListener('contextmenu', function (event) {
+  const element = event.target;
 
   if (element.nodeName === 'TEXTAREA' || element.nodeName === 'INPUT') {
-    e.preventDefault();
+    event.preventDefault();
     text_menu.popup(remote.getCurrentWindow());
   } else if (element.classList.contains('center-column')) {
     var id = element.getAttribute('data-uie-uid');
     if (createConversationMenu(id)) {
-      e.preventDefault();
+      event.preventDefault();
     }
   } else if (element.classList.contains('image-element') || element.classList.contains('detail-view-image')) {
-    e.preventDefault();
+    event.preventDefault();
     image_menu.image = element.src;
     image_menu.popup(remote.getCurrentWindow());
   } else if (element.classList.contains('text') || element.nodeName === 'A') {
-    e.preventDefault();
+    event.preventDefault();
     default_menu.popup(remote.getCurrentWindow());
   }
 
 }, false);
 
-window.addEventListener('click', function(e) {
-  const element = e.target;
+window.addEventListener('click', function(event) {
+  const element = event.target;
 
   if (element.classList.contains('icon-more') && element.parentElement.previousElementSibling) {
     // get center-column
     const id = element.parentElement.previousElementSibling.getAttribute('data-uie-uid');
     if (createConversationMenu(id)) {
-      e.stopPropagation();
-      e.preventDefault();
+      event.stopPropagation();
     }
   }
 }, true);
 
+window.addEventListener(z.components.ContextMenuEvent.CONTEXT_MENU, function(event) {
+  const element = event.target;
+  customContext.fromElement(element).popup(remote.getCurrentWindow());
+  event.stopPropagation();
+}, true);
+
 
 function savePicture(fileName, url) {
   fetch(url)

electron/js/menu/custom-context.js

@@ -0,0 +1,48 @@
+/*
+ * Wire
+ * Copyright (C) 2016 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+'use strict';
+
+const {remote} = require('electron');
+const Menu = remote.Menu;
+const MenuItem = remote.MenuItem;
+
+module.exports = {
+
+  fromElement: function(contextMenuElement) {
+    let menu = new Menu();
+    let elements = contextMenuElement.querySelectorAll('[data-context-action]');
+
+    Array.from(elements).forEach(function(element) {
+      let menuItem = new MenuItem({
+        label: element.innerText,
+        click: function() {
+          let tag = contextMenuElement.getAttribute('data-context-tag');
+          let data = contextMenuElement.getAttribute('data-context-data');
+          let action = element.getAttribute('data-context-action');
+          amplify.publish(z.event.WebApp.CONTEXT_MENU, tag, action, data);
+        }
+      });
+      menu.append(menuItem);
+    });
+
+    return menu;
+  }
+
+};