feat: first extension that implements a custom user options menu

Author: jelveh

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'){

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();
                 }

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];
+    }
+});