refactor: Put truncate_filename() helper in its own file

Every user previously set the max_length as window.TRUNCATE_LENGTH, so
I've moved that constant into the truncate_filename file and set it as
the default if max_length is not specified.

src/UI/UIDesktop.js

@@ -36,6 +36,7 @@ import refresh_item_container from "../helpers/refresh_item_container.js"
 import changeLanguage from "../i18n/i18nChangeLanguage.js"
 import UIWindowSettings from "./Settings/UIWindowSettings.js"
 import UIWindowTaskManager from "./UIWindowTaskManager.js"
+import truncate_filename from '../helpers/truncate_filename.js';
 
 async function UIDesktop(options){
     let h = '';
@@ -150,7 +151,7 @@ async function UIDesktop(options){
 
         // Update matching items
         // set new item name
-        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(window.truncate_filename(item.name, window.TRUNCATE_LENGTH)).replaceAll(' ', ' '));
+        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)).replaceAll(' ', ' '));
 
         // Set new icon
         const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await window.item_icon(item)).image);
@@ -354,7 +355,7 @@ async function UIDesktop(options){
 
         // Update matching items
         // Set new item name
-        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(window.truncate_filename(item.name, window.TRUNCATE_LENGTH)).replaceAll(' ', ' '));
+        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)).replaceAll(' ', ' '));
 
         // Set new icon
         const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await window.item_icon(item)).image);

src/UI/UIItem.js

@@ -25,6 +25,7 @@ import UIWindowEmailConfirmationRequired from './UIWindowEmailConfirmationRequir
 import UIContextMenu from './UIContextMenu.js'
 import UIAlert from './UIAlert.js'
 import path from "../lib/path.js"
+import truncate_filename from '../helpers/truncate_filename.js';
 
 function UIItem(options){
     const matching_appendto_count = $(options.appendTo).length;
@@ -158,7 +159,7 @@ function UIItem(options){
         h += `</div>`;
 
         // name
-        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${options.is_trash ? i18n('trash') : html_encode(window.truncate_filename(options.name, window.TRUNCATE_LENGTH)).replaceAll(' ', '&nbsp;')}</span>`
+        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${options.is_trash ? i18n('trash') : html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;')}</span>`
         // name editor
         h += `<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${html_encode(options.name)}</textarea>`
     h += `</div>`;
@@ -648,7 +649,7 @@ function UIItem(options){
                 UIAlert(`The name ".." is not allowed, because it is a reserved name. Please choose another name.`)
             }
 
-            $(el_item_name).html(window.truncate_filename(options.name, window.TRUNCATE_LENGTH).replaceAll(' ', '&nbsp;'));
+            $(el_item_name).html(truncate_filename(options.name).replaceAll(' ', '&nbsp;'));
             $(el_item_name).show();
             $(el_item_name_editor).val($(el_item).attr('data-name'));
             $(el_item_name_editor).hide();

src/globals.js

@@ -29,8 +29,6 @@ window.app_instance_ids = new Set();
 window.download_progress = [];
 window.download_item_global_id = 0;
 
-window.TRUNCATE_LENGTH = 20;
-
 // This is the minimum width of the window for the sidebar to be shown
 window.window_width_threshold_for_sidebar = 500;
 

src/helpers.js

@@ -27,6 +27,7 @@ import UIWindowSaveAccount from './UI/UIWindowSaveAccount.js';
 import update_username_in_gui from './helpers/update_username_in_gui.js';
 import update_title_based_on_uploads from './helpers/update_title_based_on_uploads.js';
 import content_type_to_icon from './helpers/content_type_to_icon.js';
+import truncate_filename from './helpers/truncate_filename.js';
 import { PROCESS_RUNNING, PortalProcess, PseudoProcess } from "./definitions.js";
 import UIWindowProgress from './UI/UIWindowProgress.js';
 
@@ -113,34 +114,6 @@ window.is_email = (email) => {
     return re.test(String(email).toLowerCase());
 }
 
-/**
- * A function that truncates a file name if it exceeds a certain length, while preserving the file extension. 
- * An ellipsis character '…' is added to indicate the truncation. If the original filename is short enough, 
- * it is returned unchanged.
- *
- * @param {string} input - The original filename to be potentially truncated.
- * @param {number} max_length - The maximum length for the filename. If the original filename (excluding the extension) exceeds this length, it will be truncated.
- *
- * @returns {string} The truncated filename with preserved extension if original filename is too long; otherwise, the original filename.
- *
- * @example
- *
- * let truncatedFilename = window.truncate_filename('really_long_filename.txt', 10); 
- * // truncatedFilename would be something like 'really_lo…me.txt'
- *
- */
-window.truncate_filename = (input, max_length)=>{
-    const extname = path.extname('/' + input);
-
-    if ((input.length - 15)  > max_length){
-        if(extname !== '')
-            return input.substring(0, max_length) + '…' + input.slice(-1 * (extname.length + 2));
-        else
-            return input.substring(0, max_length) + '…';
-    }
-    return input;
-};
-
 /**
  * A function that scrolls the parent element so that the child element is in view. 
  * If the child element is already in view, no scrolling occurs. 
@@ -3146,7 +3119,7 @@ window.rename_file = async(options, new_name, old_name, old_path, el_item, el_it
             }
 
             // Set new item name
-            $(`.item[data-uid='${$(el_item).attr('data-uid')}'] .item-name`).html(html_encode(window.truncate_filename(new_name, window.TRUNCATE_LENGTH)).replaceAll(' ', ' '));
+            $(`.item[data-uid='${$(el_item).attr('data-uid')}'] .item-name`).html(html_encode(truncate_filename(new_name)).replaceAll(' ', ' '));
             $(el_item_name).show();
 
             // Hide item name editor
@@ -3213,7 +3186,7 @@ window.rename_file = async(options, new_name, old_name, old_path, el_item, el_it
         },
         error: function (err){
             // reset to old name
-            $(el_item_name).text(window.truncate_filename(options.name, window.TRUNCATE_LENGTH));
+            $(el_item_name).text(truncate_filename(options.name));
             $(el_item_name).show();
 
             // hide item name editor
@@ -3423,7 +3396,7 @@ window.get_html_element_from_options = async function(options){
         h += `</div>`;
 
         // name
-        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(window.truncate_filename(options.name, window.TRUNCATE_LENGTH)).replaceAll(' ', '&nbsp;')}</span>`
+        h += `<span class="item-name" data-item-id="${item_id}" title="${html_encode(options.name)}">${html_encode(truncate_filename(options.name)).replaceAll(' ', '&nbsp;')}</span>`
         // name editor
         h += `<textarea class="item-name-editor hide-scrollbar" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" data-gramm_editor="false">${html_encode(options.name)}</textarea>`
     h += `</div>`;
@@ -3597,4 +3570,4 @@ window.check_password_strength = (password) => {
         overallPass: overallPass,
         report: criteria_report,
     };
-}
+}

src/helpers/truncate_filename.js

@@ -0,0 +1,51 @@
+/**
+ * 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/>.
+ */
+import path from '../lib/path.js';
+
+export const DEFAULT_TRUNCATE_LENGTH = 20;
+
+/**
+ * A function that truncates a file name if it exceeds a certain length, while preserving the file extension.
+ * An ellipsis character '…' is added to indicate the truncation. If the original filename is short enough,
+ * it is returned unchanged.
+ *
+ * @param {string} input - The original filename to be potentially truncated.
+ * @param {number} max_length - The maximum length for the filename. If the original filename (excluding the extension) exceeds this length, it will be truncated.
+ *
+ * @returns {string} The truncated filename with preserved extension if original filename is too long; otherwise, the original filename.
+ *
+ * @example
+ *
+ * let truncatedFilename = truncate_filename('really_long_filename.txt', 10);
+ * // truncatedFilename would be something like 'really_lo…me.txt'
+ *
+ */
+const truncate_filename = (input, max_length = DEFAULT_TRUNCATE_LENGTH) => {
+    const extname = path.extname('/' + input);
+
+    if ((input.length - 15)  > max_length){
+        if(extname !== '')
+            return input.substring(0, max_length) + '…' + input.slice(-1 * (extname.length + 2));
+        else
+            return input.substring(0, max_length) + '…';
+    }
+    return input;
+};
+
+export default truncate_filename;