From fc5e15f2a6d4eb5e5847fa7f2dd87b1fa382fc7c Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Tue, 29 Oct 2024 22:55:26 -0700
Subject: [PATCH] feat: first extension that implements a custom user options
 menu

---
 src/gui/src/UI/UIContextMenu.js               |  9 +++++--
 src/gui/src/UI/UIDesktop.js                   |  1 +
 .../extensions/modify-user-options-menu.js    | 27 +++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/gui/src/extensions/modify-user-options-menu.js

diff --git a/src/gui/src/UI/UIContextMenu.js b/src/gui/src/UI/UIContextMenu.js
index 202852c7..66d69c1b 100644
--- a/src/gui/src/UI/UIContextMenu.js
+++ b/src/gui/src/UI/UIContextMenu.js
@@ -90,7 +90,6 @@
  * https://github.com/kamens/jQuery-menu-aim
 */
 (function ($) {
-
     $.fn.menuAim = function (opts) {
         // Initialize menu-aim for all elements in jQuery collection
         this.each(function () {
@@ -365,6 +364,10 @@ function UIContextMenu(options){
     $('.window-active .window-app-iframe').css('pointer-events', 'none');
 
     const menu_id = window.global_element_id++;
+
+    // Dispatch 'ctxmenu-will-open' event 
+    window.dispatchEvent(new CustomEvent('ctxmenu-will-open', { detail: { options: options} }));
+
     let h = '';
     h += `<div 
                 id="context-menu-${menu_id}" 
@@ -424,10 +427,12 @@ function UIContextMenu(options){
     h += `</div>`
     $('body').append(h)
 
+
     const contextMenu = document.getElementById(`context-menu-${menu_id}`);
     const menu_width = $(contextMenu).width();
     const menu_height = $(contextMenu).outerHeight();
     let start_x, start_y;
+
     //--------------------------------
     // Auto position
     //--------------------------------
@@ -505,7 +510,7 @@ function UIContextMenu(options){
     };
 
     // An item is clicked
-    $(`#context-menu-${menu_id} > li:not(.context-menu-item-disabled)`).on('click', function (e) {
+    $(document).on('click', `#context-menu-${menu_id} > li:not(.context-menu-item-disabled)`, function (e) {
         
         // onClick
         if(options.items[$(this).attr("data-action")].onClick && typeof options.items[$(this).attr("data-action")].onClick === 'function'){
diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js
index 38c80aeb..c9014c0e 100644
--- a/src/gui/src/UI/UIDesktop.js
+++ b/src/gui/src/UI/UIDesktop.js
@@ -1411,6 +1411,7 @@ $(document).on('click', '.user-options-menu-btn', async function(e){
             //--------------------------------------------------
             {
                 html: i18n('contact_us'),
+                id: 'contact_us',
                 onClick: async function(){
                     UIWindowFeedback();
                 }
diff --git a/src/gui/src/extensions/modify-user-options-menu.js b/src/gui/src/extensions/modify-user-options-menu.js
new file mode 100644
index 00000000..6991bf68
--- /dev/null
+++ b/src/gui/src/extensions/modify-user-options-menu.js
@@ -0,0 +1,27 @@
+$(window).on('ctxmenu-will-open', (event) => {
+    if(event.detail.options?.id === 'user-options-menu'){
+        // Define array of new menu items
+        const newMenuItems = [
+            // Separator
+            '-',
+            // 'Developer', opens developer site in new tab
+            {
+                id: 'go_to_developer_site',
+                html: 'Developer<svg style="width: 11px; height: 11px; margin-left:2px;" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m26 28h-20a2.0027 2.0027 0 0 1 -2-2v-20a2.0027 2.0027 0 0 1 2-2h10v2h-10v20h20v-10h2v10a2.0027 2.0027 0 0 1 -2 2z"/><path d="m20 2v2h6.586l-8.586 8.586 1.414 1.414 8.586-8.586v6.586h2v-10z"/><path d="m0 0h32v32h-32z" fill="none"/></svg>',
+                html_active: 'Developer<svg style="width: 11px; height: 11px; margin-left:2px;" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"> <path d="m26 28h-20a2.0027 2.0027 0 0 1 -2-2v-20a2.0027 2.0027 0 0 1 2-2h10v2h-10v20h20v-10h2v10a2.0027 2.0027 0 0 1 -2 2z" style="fill: rgb(255, 255, 255);"/> <path d="m20 2v2h6.586l-8.586 8.586 1.414 1.414 8.586-8.586v6.586h2v-10z" style="fill: rgb(255, 255, 255);"/> <path d="m0 0h32v32h-32z" fill="none"/> </svg>',
+                action: function(){
+                    window.open('https://developer.puter.com', '_blank');
+                }
+            },
+        ];
+
+        // Find the position of 'contact_us'
+        const items = event.detail.options.items;
+        const insertBeforeIndex = items.findIndex(item => item.id === 'contact_us');
+        
+        // Insert all new items before 'contact_us'
+        const firstHalf = items.slice(0, insertBeforeIndex);
+        const secondHalf = items.slice(insertBeforeIndex);
+        event.detail.options.items = [...firstHalf, ...newMenuItems, ...secondHalf];
+    }
+});
\ No newline at end of file