mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-15 06:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Put truncate_filename() helper in its own file

Browse Source 
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.
This commit is contained in:
Sam Atkins 2024-05-10 16:49:28 +01:00
parent 3992fe1a45
commit e53bfe6b62
5 changed files with 62 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/UI/UIDesktop.js
View File

@ -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);

5
src/UI/UIItem.js
View File

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

2
src/globals.js
View File

@ -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;

35
src/helpers.js
View File

@ -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(' ', '&nbsp;'));
$(`.item[data-uid='${$(el_item).attr('data-uid')}'] .item-name`).html(html_encode(truncate_filename(new_name)).replaceAll(' ', '&nbsp;'));
$(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>`;

51
src/helpers/truncate_filename.js Normal file
View File

@ -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;