Skip to content

Commit 7006dcc

Browse files
jelvehjelveh
committed
refactor item_icon 
1 parent 219cb63 commit 7006dcc

File tree

8 files changed

+229
-201
lines changed

8 files changed

+229
-201
lines changed

‎src/IPC.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import path from "./lib/path.js";
3030
import UIContextMenu from './UI/UIContextMenu.js';
3131
import update_mouse_position from './helpers/update_mouse_position.js';
3232
import launch_app from './helpers/launch_app.js';
33+
import item_icon from './helpers/item_icon.js';
3334

3435
/**
3536
* In Puter, apps are loaded in iframes and communicate with the graphical user interface (GUI), and each other, using the postMessage API.
@@ -1063,7 +1064,7 @@ window.addEventListener('message', async (event) => {
10631064
immutable: res.immutable,
10641065
associated_app_name: res.associated_app?.name,
10651066
path: target_path,
1066-
icon: await window.item_icon(res),
1067+
icon: await item_icon(res),
10671068
name: path.basename(target_path),
10681069
uid: res.uid,
10691070
size: res.size,

‎src/UI/UIDesktop.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import UIWindowTaskManager from "./UIWindowTaskManager.js"
3939
import truncate_filename from '../helpers/truncate_filename.js';
4040
import UINotification from "./UINotification.js"
4141
import launch_app from "../helpers/launch_app.js"
42+
import item_icon from "../helpers/item_icon.js"
4243

4344
async function UIDesktop(options){
4445
let h = '';
@@ -135,7 +136,7 @@ async function UIDesktop(options){
135136
UIWindow({
136137
path: '/' + notification.fields.username,
137138
title: path.basename(item_path),
138-
icon: await window.item_icon({is_dir: true, path: item_path}),
139+
icon: await item_icon({is_dir: true, path: item_path}),
139140
is_dir: true,
140141
app: 'explorer',
141142
});
@@ -217,7 +218,7 @@ async function UIDesktop(options){
217218
$(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)).replaceAll(' ', ' '));
218219

219220
// Set new icon
220-
const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await window.item_icon(item)).image);
221+
const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
221222
$(`.item[data-uid='${item.uid}']`).find('.item-icon-thumb').attr('src', new_icon);
222223
$(`.item[data-uid='${item.uid}']`).find('.item-icon-icon').attr('src', new_icon);
223224

@@ -338,7 +339,7 @@ async function UIDesktop(options){
338339
immutable: fsentry.immutable,
339340
uid: fsentry.uid,
340341
path: fsentry.path,
341-
icon: await window.item_icon(fsentry),
342+
icon: await item_icon(fsentry),
342343
name: (dest_path === window.trash_path) ? metadata.original_name : fsentry.name,
343344
is_dir: fsentry.is_dir,
344345
size: fsentry.size,
@@ -366,7 +367,7 @@ async function UIDesktop(options){
366367
immutable: false,
367368
uid: dir.uid,
368369
path: dir.path,
369-
icon: await window.item_icon(dir),
370+
icon: await item_icon(dir),
370371
name: dir.name,
371372
size: dir.size,
372373
type: dir.type,
@@ -421,7 +422,7 @@ async function UIDesktop(options){
421422
$(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)).replaceAll(' ', ' '));
422423

423424
// Set new icon
424-
const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await window.item_icon(item)).image);
425+
const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
425426
$(`.item[data-uid='${item.uid}']`).find('.item-icon-icon').attr('src', new_icon);
426427

427428
// Set new data-name
@@ -498,7 +499,7 @@ async function UIDesktop(options){
498499
'data-type': item.type,
499500
})
500501
// set new icon
501-
const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await window.item_icon(item)).image);
502+
const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
502503
$(`.item[data-uid="${item.overwritten_uid}"]`).find('.item-icon > img').attr('src', new_icon);
503504

504505
//sort each window
@@ -513,7 +514,7 @@ async function UIDesktop(options){
513514
immutable: item.immutable,
514515
associated_app_name: item.associated_app?.name,
515516
path: item.path,
516-
icon: await window.item_icon(item),
517+
icon: await item_icon(item),
517518
name: item.name,
518519
size: item.size,
519520
type: item.type,
@@ -1007,7 +1008,7 @@ async function UIDesktop(options){
10071008
UIWindow({
10081009
path: predefined_path,
10091010
title: path.basename(predefined_path),
1010-
icon: await window.item_icon({is_dir: true, path: predefined_path}),
1011+
icon: await item_icon({is_dir: true, path: predefined_path}),
10111012
// todo
10121013
// uid: $(el_item).attr('data-uid'),
10131014
is_dir: true,

‎src/UI/UIWindow.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import UIWindowSaveAccount from './UIWindowSaveAccount.js';
3030
import UIWindowEmailConfirmationRequired from './UIWindowEmailConfirmationRequired.js';
3131
import launch_app from "../helpers/launch_app.js"
3232
import UIWindowShare from './UIWindowShare.js';
33+
import item_icon from '../helpers/item_icon.js';
3334

3435
const el_body = document.getElementsByTagName('body')[0];
3536

@@ -2343,7 +2344,7 @@ $(document).on('click', '.window-sidebar-item', async function(e){
23432344
UIWindow({
23442345
path: item_path,
23452346
title: path.basename(item_path),
2346-
icon: await window.item_icon({is_dir: true, path: item_path}),
2347+
icon: await item_icon({is_dir: true, path: item_path}),
23472348
// todo
23482349
// uid: $(el_item).attr('data-uid'),
23492350
is_dir: true,
@@ -2405,7 +2406,7 @@ $(document).on('contextmenu taphold', '.window-sidebar-item', function(event){
24052406
UIWindow({
24062407
path: item_path,
24072408
title: path.basename(item_path),
2408-
icon: await window.item_icon({is_dir: true, path: item_path}),
2409+
icon: await item_icon({is_dir: true, path: item_path}),
24092410
// todo
24102411
// uid: $(el_item).attr('data-uid'),
24112412
is_dir: true,

‎src/helpers.js

+4-186
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,17 @@
1818
*/
1919

2020
import path from "./lib/path.js"
21-
import mime from "./lib/mime.js";
2221
import UIAlert from './UI/UIAlert.js'
2322
import UIItem from './UI/UIItem.js'
2423
import UIWindowLogin from './UI/UIWindowLogin.js';
2524
import UIWindowSaveAccount from './UI/UIWindowSaveAccount.js';
2625
import update_username_in_gui from './helpers/update_username_in_gui.js';
2726
import update_title_based_on_uploads from './helpers/update_title_based_on_uploads.js';
28-
import content_type_to_icon from './helpers/content_type_to_icon.js';
2927
import truncate_filename from './helpers/truncate_filename.js';
3028
import UIWindowProgress from './UI/UIWindowProgress.js';
3129
import globToRegExp from "./helpers/globToRegExp.js";
3230
import get_html_element_from_options from "./helpers/get_html_element_from_options.js";
31+
import item_icon from "./helpers/item_icon.js";
3332

3433
window.is_auth = ()=>{
3534
if(localStorage.getItem("auth_token") === null || window.auth_token === null)
@@ -624,187 +623,6 @@ window.sendItemChangeEventToWatchingApps = function(item_uid, event_data){
624623
}
625624
}
626625

627-
/**
628-
* Assigns an icon to a filesystem entry based on its properties such as name, type,
629-
* and whether it's a directory, app, trashed, or specific file type.
630-
*
631-
* @function item_icon
632-
* @global
633-
* @async
634-
* @param {Object} fsentry - A filesystem entry object. It may contain various properties
635-
* like name, type, path, associated_app, thumbnail, is_dir, and metadata, depending on
636-
* the type of filesystem entry.
637-
*/
638-
639-
window.item_icon = async (fsentry)=>{
640-
// --------------------------------------------------
641-
// If this file is Trashed then set the name to the original name of the file before it was trashed
642-
// --------------------------------------------------
643-
if(fsentry.path?.startsWith(window.trash_path + '/')){
644-
if(fsentry.metadata){
645-
try{
646-
let metadata = JSON.parse(fsentry.metadata);
647-
fsentry.name = (metadata && metadata.original_name) ? metadata.original_name : fsentry.name
648-
}
649-
catch(e){
650-
// Ignored
651-
}
652-
}
653-
}
654-
// --------------------------------------------------
655-
// thumbnail
656-
// --------------------------------------------------
657-
if(fsentry.thumbnail){
658-
return {image: fsentry.thumbnail, type: 'thumb'};
659-
}
660-
// --------------------------------------------------
661-
// app icon
662-
// --------------------------------------------------
663-
else if(fsentry.associated_app && fsentry.associated_app?.name){
664-
if(fsentry.associated_app.icon)
665-
return {image: fsentry.associated_app.icon, type: 'icon'};
666-
else
667-
return {image: window.icons['app.svg'], type: 'icon'};
668-
}
669-
// --------------------------------------------------
670-
// Trash
671-
// --------------------------------------------------
672-
else if(fsentry.shortcut_to_path && fsentry.shortcut_to_path === window.trash_path){
673-
// get trash image, this is needed to get the correct empty vs full trash icon
674-
let trash_img = $(`.item[data-path="${html_encode(window.trash_path)}" i] .item-icon-icon`).attr('src')
675-
// if trash_img is undefined that's probably because trash wasn't added anywhere, do a direct lookup to see if trash is empty or no
676-
if(!trash_img){
677-
let trashstat = await puter.fs.stat(window.trash_path);
678-
if(trashstat.is_empty !== undefined && trashstat.is_empty === true)
679-
trash_img = window.icons['trash.svg'];
680-
else
681-
trash_img = window.icons['trash-full.svg'];
682-
}
683-
return {image: trash_img, type: 'icon'};
684-
}
685-
// --------------------------------------------------
686-
// Directories
687-
// --------------------------------------------------
688-
else if(fsentry.is_dir){
689-
// System Directories
690-
if(fsentry.path === window.docs_path)
691-
return {image: window.icons['folder-documents.svg'], type: 'icon'};
692-
else if (fsentry.path === window.pictures_path)
693-
return { image: window.icons['folder-pictures.svg'], type: 'icon' };
694-
else if (fsentry.path === window.home_path)
695-
return { image: window.icons['folder-home.svg'], type: 'icon' };
696-
else if (fsentry.path === window.videos_path)
697-
return { image: window.icons['folder-videos.svg'], type: 'icon' };
698-
else if (fsentry.path === window.desktop_path)
699-
return { image: window.icons['folder-desktop.svg'], type: 'icon' };
700-
else if (fsentry.path === window.public_path)
701-
return { image: window.icons['folder-public.svg'], type: 'icon' };
702-
// regular directories
703-
else
704-
return {image: window.icons['folder.svg'], type: 'icon'};
705-
}
706-
// --------------------------------------------------
707-
// Match icon by file extension
708-
// --------------------------------------------------
709-
// *.doc
710-
else if(fsentry.name.toLowerCase().endsWith('.doc')){
711-
return {image: window.icons['file-doc.svg'], type: 'icon'};
712-
}
713-
// *.docx
714-
else if(fsentry.name.toLowerCase().endsWith('.docx')){
715-
return {image: window.icons['file-docx.svg'], type: 'icon'};
716-
}
717-
// *.exe
718-
else if(fsentry.name.toLowerCase().endsWith('.exe')){
719-
return {image: window.icons['file-exe.svg'], type: 'icon'};
720-
}
721-
// *.gz
722-
else if(fsentry.name.toLowerCase().endsWith('.gz')){
723-
return {image: window.icons['file-gzip.svg'], type: 'icon'};
724-
}
725-
// *.jar
726-
else if(fsentry.name.toLowerCase().endsWith('.jar')){
727-
return {image: window.icons['file-jar.svg'], type: 'icon'};
728-
}
729-
// *.java
730-
else if(fsentry.name.toLowerCase().endsWith('.java')){
731-
return {image: window.icons['file-java.svg'], type: 'icon'};
732-
}
733-
// *.jsp
734-
else if(fsentry.name.toLowerCase().endsWith('.jsp')){
735-
return {image: window.icons['file-jsp.svg'], type: 'icon'};
736-
}
737-
// *.log
738-
else if(fsentry.name.toLowerCase().endsWith('.log')){
739-
return {image: window.icons['file-log.svg'], type: 'icon'};
740-
}
741-
// *.mp3
742-
else if(fsentry.name.toLowerCase().endsWith('.mp3')){
743-
return {image: window.icons['file-mp3.svg'], type: 'icon'};
744-
}
745-
// *.rb
746-
else if(fsentry.name.toLowerCase().endsWith('.rb')){
747-
return {image: window.icons['file-ruby.svg'], type: 'icon'};
748-
}
749-
// *.rss
750-
else if(fsentry.name.toLowerCase().endsWith('.rss')){
751-
return {image: window.icons['file-rss.svg'], type: 'icon'};
752-
}
753-
// *.rtf
754-
else if(fsentry.name.toLowerCase().endsWith('.rtf')){
755-
return {image: window.icons['file-rtf.svg'], type: 'icon'};
756-
}
757-
// *.sketch
758-
else if(fsentry.name.toLowerCase().endsWith('.sketch')){
759-
return {image: window.icons['file-sketch.svg'], type: 'icon'};
760-
}
761-
// *.sql
762-
else if(fsentry.name.toLowerCase().endsWith('.sql')){
763-
return {image: window.icons['file-sql.svg'], type: 'icon'};
764-
}
765-
// *.tif
766-
else if(fsentry.name.toLowerCase().endsWith('.tif')){
767-
return {image: window.icons['file-tif.svg'], type: 'icon'};
768-
}
769-
// *.tiff
770-
else if(fsentry.name.toLowerCase().endsWith('.tiff')){
771-
return {image: window.icons['file-tiff.svg'], type: 'icon'};
772-
}
773-
// *.wav
774-
else if(fsentry.name.toLowerCase().endsWith('.wav')){
775-
return {image: window.icons['file-wav.svg'], type: 'icon'};
776-
}
777-
// *.cpp
778-
else if(fsentry.name.toLowerCase().endsWith('.cpp')){
779-
return {image: window.icons['file-cpp.svg'], type: 'icon'};
780-
}
781-
// *.pptx
782-
else if(fsentry.name.toLowerCase().endsWith('.pptx')){
783-
return {image: window.icons['file-pptx.svg'], type: 'icon'};
784-
}
785-
// *.psd
786-
else if(fsentry.name.toLowerCase().endsWith('.psd')){
787-
return {image: window.icons['file-psd.svg'], type: 'icon'};
788-
}
789-
// *.py
790-
else if(fsentry.name.toLowerCase().endsWith('.py')){
791-
return {image: window.icons['file-py.svg'], type: 'icon'};
792-
}
793-
// *.xlsx
794-
else if(fsentry.name.toLowerCase().endsWith('.xlsx')){
795-
return {image: window.icons['file-xlsx.svg'], type: 'icon'};
796-
}
797-
// --------------------------------------------------
798-
// Determine icon by set or derived mime type
799-
// --------------------------------------------------
800-
else if(fsentry.type){
801-
return {image: content_type_to_icon(fsentry.type), type: 'icon'};
802-
}
803-
else{
804-
return {image: content_type_to_icon(mime.getType(fsentry.name)), type: 'icon'};
805-
}
806-
}
807-
808626
/**
809627
* Asynchronously checks if a save account notice should be shown to the user, and if needed, displays the notice.
810628
*
@@ -1605,7 +1423,7 @@ window.move_items = async function(el_items, dest_path, is_undo = false){
16051423
associated_app_name: fsentry.associated_app?.name,
16061424
uid: fsentry.uid,
16071425
path: fsentry.path,
1608-
icon: await window.item_icon(fsentry),
1426+
icon: await item_icon(fsentry),
16091427
name: (dest_path === window.trash_path) ? $(el_item).attr('data-name') : fsentry.name,
16101428
is_dir: fsentry.is_dir,
16111429
size: fsentry.size,
@@ -1634,7 +1452,7 @@ window.move_items = async function(el_items, dest_path, is_undo = false){
16341452
immutable: false,
16351453
uid: dir.uid,
16361454
path: dir.path,
1637-
icon: await window.item_icon(dir),
1455+
icon: await item_icon(dir),
16381456
name: dir.name,
16391457
size: dir.size,
16401458
type: dir.type,
@@ -2277,7 +2095,7 @@ window.rename_file = async(options, new_name, old_name, old_path, el_item, el_it
22772095
$(el_item_name_editor).hide();
22782096

22792097
// Set new icon
2280-
const new_icon = (options.is_dir ? window.icons['folder.svg'] : (await window.item_icon(fsentry)).image);
2098+
const new_icon = (options.is_dir ? window.icons['folder.svg'] : (await item_icon(fsentry)).image);
22812099
$(el_item_icon).find('.item-icon-icon').attr('src', new_icon);
22822100

22832101
// Set new `data-name`

0 commit comments

Comments
 (0)