Refactor `helpers.js` to reduce file size

src/UI/UIDesktop.js

@@ -33,6 +33,7 @@ import UIWindowLogin from "./UIWindowLogin.js"
 import UIWindowQR from "./UIWindowQR.js"
 import UIWindowRefer from "./UIWindowRefer.js"
 import UITaskbar from "./UITaskbar.js"
+import new_context_menu_item from "../helpers/new_context_menu_item.js"
 
 async function UIDesktop(options){
     let h = '';
@@ -707,7 +708,7 @@ async function UIDesktop(options){
                     // -------------------------------------------
                     // New File
                     // -------------------------------------------
-                    window.new_context_menu_item(desktop_path, el_desktop),
+                    new_context_menu_item(desktop_path, el_desktop),
                     // -------------------------------------------
                     // -
                     // -------------------------------------------

src/UI/UIWindow.js

@@ -24,6 +24,7 @@ import UITaskbarItem from './UITaskbarItem.js';
 import UIWindowLogin from './UIWindowLogin.js';
 import UIWindowPublishWebsite from './UIWindowPublishWebsite.js';
 import UIWindowItemProperties from './UIWindowItemProperties.js';
+import new_context_menu_item from '../helpers/new_context_menu_item.js';
 
 const el_body = document.getElementsByTagName('body')[0];
 
@@ -1898,7 +1899,7 @@ async function UIWindow(options) {
                         // -------------------------------------------
                         // New
                         // -------------------------------------------
-                        window.new_context_menu_item($(el_window).attr('data-path'), el_window_body),
+                        new_context_menu_item($(el_window).attr('data-path'), el_window_body),
                         // -------------------------------------------
                         // -
                         // -------------------------------------------

src/helpers.js

@@ -1979,13 +1979,6 @@ window.launch_app = async (options)=>{
             window_class: 'window-app',
             update_window_url: true,
             app_uuid: app_info.uuid ?? app_info.uid,
-            // has_head: options.has_head ?? true,
-            // top: options.top ?? undefined,
-            // left: options.left ?? undefined,
-            // width: options.width ?? undefined,
-            // height: options.height ?? undefined,
-            // is_resizable: options.is_resizable ?? undefined,
-            // window_css: options.window_css ?? undefined,
             top: options.maximized ? 0 : undefined,
             left: options.maximized ? 0 : undefined,
             height: options.maximized ? `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)` : undefined,
@@ -2243,63 +2236,6 @@ window.open_item = async function(options){
     }    
 }
 
-/**
- * Returns a context menu item to create a new file/folder. 
- * 
- * @param {string} dirname - The directory path to create the item in
- * @param {HTMLElement} append_to_element - Element to append the new item to 
- * @returns {Object} The context menu item object
- */
-
-window.new_context_menu_item = function(dirname, append_to_element){
-    return {
-        html: "New",
-        items: [
-            // New Folder
-            {
-                html: "New Folder",
-                icon: `<img src="${html_encode(window.icons['folder.svg'])}" class="ctx-item-icon">`,
-                onClick: function(){
-                    create_folder(dirname, append_to_element);
-                }
-            },
-            // divider
-            '-',
-            // Text Document
-            {
-                html: `Text Document`,
-                icon: `<img src="${html_encode(window.icons['file-text.svg'])}" class="ctx-item-icon">`,
-                onClick: async function(){
-                    create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.txt'});
-                }
-            },
-            // HTML Document
-            {
-                html: `HTML Document`,
-                icon: `<img src="${html_encode(window.icons['file-html.svg'])}" class="ctx-item-icon">`,
-                onClick: async function(){
-                    create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.html'});
-                }
-            },
-            // JPG Image
-            {
-                html: `JPG Image`,
-                icon: `<img src="${html_encode(window.icons['file-image.svg'])}" class="ctx-item-icon">`,
-                onClick: async function(){
-                    var canvas = document.createElement("canvas");
-
-                    canvas.width = 800;
-                    canvas.height = 600;
-                    
-                    canvas.toBlob((blob) =>{
-                        create_file({dirname: dirname, append_to_element: append_to_element, name: 'New Image.jpg', content: blob});
-                    });
-                }
-            },
-        ]
-    }
-}
-
 /**
  * Moves the given items to the destination path. 
  * 
@@ -3127,29 +3063,6 @@ window.getUsage = () => {
 
 }  
 
-window.determine_active_container_parent = function(){
-    // the container is either an ancestor of active element...
-    let parent_container = $(active_element).closest('.item-container');
-    // ... or a descendant of it...
-    if(parent_container.length === 0){
-        parent_container = $(active_element).find('.item-container');
-    }
-    // ... or siblings or cousins
-    if(parent_container.length === 0){
-        parent_container = $(active_element).closest('.window').find('.item-container');
-    }
-    // ... or the active element itself (if it's a container)
-    if(parent_container.length === 0 && active_element && $(active_element).hasClass('item-container')){
-        parent_container = $(active_element);
-    }
-    // ... or if there is no active element, the selected item that is not blurred
-    if(parent_container.length === 0 && active_item_container){
-        parent_container = active_item_container;
-    }
-
-    return parent_container;
-}
-
 window.getAppUIDFromOrigin = async function(origin) {
     try {
         const response = await fetch(window.api_origin + "/auth/app-uid-from-origin", {

src/helpers/determine_active_container_parent.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (C) 2024 Puter Technologies Inc.
+ *
+ * This file is part of Puter.
+ *
+ * Puter is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+const determine_active_container_parent = function(){
+    // the container is either an ancestor of active element...
+    let parent_container = $(active_element).closest('.item-container');
+    // ... or a descendant of it...
+    if(parent_container.length === 0){
+        parent_container = $(active_element).find('.item-container');
+    }
+    // ... or siblings or cousins
+    if(parent_container.length === 0){
+        parent_container = $(active_element).closest('.window').find('.item-container');
+    }
+    // ... or the active element itself (if it's a container)
+    if(parent_container.length === 0 && active_element && $(active_element).hasClass('item-container')){
+        parent_container = $(active_element);
+    }
+    // ... or if there is no active element, the selected item that is not blurred
+    if(parent_container.length === 0 && active_item_container){
+        parent_container = active_item_container;
+    }
+
+    return parent_container;
+}
+
+export default determine_active_container_parent;

src/helpers/new_context_menu_item.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (C) 2024 Puter Technologies Inc.
+ *
+ * This file is part of Puter.
+ *
+ * Puter is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+/**
+ * Returns a context menu item to create a new folder and a variety of file types.
+ * 
+ * @param {string} dirname - The directory path to create the item in
+ * @param {HTMLElement} append_to_element - Element to append the new item to 
+ * @returns {Object} The context menu item object
+ */
+
+const new_context_menu_item = function(dirname, append_to_element){
+    return {
+        html: "New",
+        items: [
+            // New Folder
+            {
+                html: "New Folder",
+                icon: `<img src="${html_encode(window.icons['folder.svg'])}" class="ctx-item-icon">`,
+                onClick: function(){
+                    create_folder(dirname, append_to_element);
+                }
+            },
+            // divider
+            '-',
+            // Text Document
+            {
+                html: `Text Document`,
+                icon: `<img src="${html_encode(window.icons['file-text.svg'])}" class="ctx-item-icon">`,
+                onClick: async function(){
+                    create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.txt'});
+                }
+            },
+            // HTML Document
+            {
+                html: `HTML Document`,
+                icon: `<img src="${html_encode(window.icons['file-html.svg'])}" class="ctx-item-icon">`,
+                onClick: async function(){
+                    create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.html'});
+                }
+            },
+            // JPG Image
+            {
+                html: `JPG Image`,
+                icon: `<img src="${html_encode(window.icons['file-image.svg'])}" class="ctx-item-icon">`,
+                onClick: async function(){
+                    var canvas = document.createElement("canvas");
+
+                    canvas.width = 800;
+                    canvas.height = 600;
+                    
+                    canvas.toBlob((blob) =>{
+                        create_file({dirname: dirname, append_to_element: append_to_element, name: 'New Image.jpg', content: blob});
+                    });
+                }
+            },
+        ]
+    }
+}
+
+export default new_context_menu_item;

src/initgui.js

@@ -33,6 +33,7 @@ import UIWindowChangeUsername from './UI/UIWindowChangeUsername.js';
 import update_last_touch_coordinates from './helpers/update_last_touch_coordinates.js';
 import update_title_based_on_uploads from './helpers/update_title_based_on_uploads.js';
 import PuterDialog from './UI/PuterDialog.js';
+import determine_active_container_parent from './helpers/determine_active_container_parent.js';
 
 window.initgui = async function(){
     let url = new URL(window.location);