Ver código fonte

refactor `get_html_element_from_options`

Nariman Jelveh 11 meses atrás
pai
commit
0726a11d11
2 arquivos alterados com 150 adições e 131 exclusões
  1. 3 131
      src/helpers.js
  2. 147 0
      src/helpers/get_html_element_from_options.js

+ 3 - 131
src/helpers.js

@@ -31,6 +31,7 @@ import truncate_filename from './helpers/truncate_filename.js';
 import UIWindowProgress from './UI/UIWindowProgress.js';
 import launch_app from "./helpers/launch_app.js";
 import globToRegExp from "./helpers/globToRegExp.js";
+import get_html_element_from_options from "./helpers/get_html_element_from_options.js";
 
 window.is_auth = ()=>{
     if(localStorage.getItem("auth_token") === null || window.auth_token === null)
@@ -2138,7 +2139,6 @@ window.upload_items = async function(items, dest_path){
             },
             // abort
             abort: async function(operation_id){
-                // console.log('upload aborted');
                 // remove from active_uploads
                 delete window.active_uploads[opid];
             }
@@ -2456,7 +2456,6 @@ window.unzipItem = async function(itemPath) {
     zip.loadAsync(file).then(async function (zip) {
         const rootdir = await puter.fs.mkdir(path.dirname(filPath) + '/' + path.basename(filPath, '.zip'), {dedupeName: true});
         Object.keys(zip.files).forEach(async function (filename) {
-            console.log(filename);
             if(filename.endsWith('/'))
                 await puter.fs.mkdir(rootdir.path +'/' + filename, {createMissingParents: true});
             zip.files[filename].async('blob').then(async function (fileData) {
@@ -2652,146 +2651,19 @@ window.undo_copy = async(files)=>{
 
 window.undo_move = async(items)=>{
     for (const item of items) {
-        const el = await window.get_html_element_from_options(item.options);
-        console.log(item.original_path)
+        const el = await get_html_element_from_options(item.options);
         window.move_items([el], path.dirname(item.original_path), true);
     }
 }
 
 window.undo_delete = async(items)=>{
     for (const item of items) {
-        const el = await window.get_html_element_from_options(item.options);
+        const el = await get_html_element_from_options(item.options);
         let metadata = $(el).attr('data-metadata') === '' ? {} : JSON.parse($(el).attr('data-metadata'))
         window.move_items([el], path.dirname(metadata.original_path), true);
     }
 }
 
-
-window.get_html_element_from_options = async function(options){
-    const item_id = window.global_element_id++;
-    
-    options.disabled = options.disabled ?? false;
-    options.visible = options.visible ?? 'visible'; // one of 'visible', 'revealed', 'hidden'
-    options.is_dir = options.is_dir ?? false;
-    options.is_selected = options.is_selected ?? false;
-    options.is_shared = options.is_shared ?? false;
-    options.is_shortcut = options.is_shortcut ?? 0;
-    options.is_trash = options.is_trash ?? false;
-    options.metadata = options.metadata ?? '';
-    options.multiselectable = (!options.multiselectable || options.multiselectable === true) ? true : false;
-    options.shortcut_to = options.shortcut_to ?? '';
-    options.shortcut_to_path = options.shortcut_to_path ?? '';
-    options.immutable = (options.immutable === false || options.immutable === 0 || options.immutable === undefined ? 0 : 1);
-    options.sort_container_after_append = (options.sort_container_after_append !== undefined ? options.sort_container_after_append : false);
-    const is_shared_with_me = (options.path !== '/'+window.user.username && !options.path.startsWith('/'+window.user.username+'/'));
-
-    let website_url = window.determine_website_url(options.path);
-
-    // do a quick check to see if the target parent has any file type restrictions
-    const appendto_allowed_file_types = $(options.appendTo).attr('data-allowed_file_types')
-    if(!window.check_fsentry_against_allowed_file_types_string({is_dir: options.is_dir, name:options.name, type:options.type}, appendto_allowed_file_types))
-        options.disabled = true;
-
-    // --------------------------------------------------------
-    // HTML for Item
-    // --------------------------------------------------------
-    let h = '';
-    h += `<div  id="item-${item_id}" 
-                class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}" 
-                data-id="${item_id}" 
-                data-name="${html_encode(options.name)}" 
-                data-metadata="${html_encode(options.metadata)}" 
-                data-uid="${options.uid}" 
-                data-is_dir="${options.is_dir ? 1 : 0}" 
-                data-is_trash="${options.is_trash ? 1 : 0}"
-                data-has_website="${options.has_website ? 1 : 0 }" 
-                data-website_url = "${website_url ? html_encode(website_url) : ''}"
-                data-immutable="${options.immutable}" 
-                data-is_shortcut = "${options.is_shortcut}"
-                data-shortcut_to = "${html_encode(options.shortcut_to)}"
-                data-shortcut_to_path = "${html_encode(options.shortcut_to_path)}"
-                data-sortable = "${options.sortable ?? 'true'}"
-                data-sort_by = "${html_encode(options.sort_by) ?? 'name'}"
-                data-size = "${options.size ?? ''}"
-                data-type = "${html_encode(options.type) ?? ''}"
-                data-modified = "${options.modified ?? ''}"
-                data-associated_app_name = "${html_encode(options.associated_app_name) ?? ''}"
-                data-path="${html_encode(options.path)}">`;
-
-        // spinner
-        h += `<div class="item-spinner">`;
-        h += `</div>`;
-        // modified
-        h += `<div class="item-attr item-attr--modified">`;
-            h += `<span>${options.modified === 0 ? '-' : timeago.format(options.modified*1000)}</span>`;
-        h += `</div>`;
-        // size
-        h += `<div class="item-attr item-attr--size">`;
-            h += `<span>${options.size ? window.byte_format(options.size) : '-'}</span>`;
-        h += `</div>`;
-        // type
-        h += `<div class="item-attr item-attr--type">`;
-            if(options.is_dir)
-                h += `<span>Folder</span>`;
-            else
-                h += `<span>${options.type ? html_encode(options.type) : '-'}</span>`;
-        h += `</div>`;
-
-
-        // icon
-        h += `<div class="item-icon">`;
-            h += `<img src="${html_encode(options.icon.image)}" class="item-icon-${options.icon.type}" data-item-id="${item_id}">`;
-        h += `</div>`;
-        // badges
-        h += `<div class="item-badges">`;
-            // website badge
-            h += `<img  class="item-badge item-has-website-badge long-hover" 
-                        style="${options.has_website ? 'display:block;' : ''}" 
-                        src="${html_encode(window.icons['world.svg'])}" 
-                        data-item-id="${item_id}"
-                    >`;
-            // link badge
-            h += `<img  class="item-badge item-has-website-url-badge" 
-                        style="${website_url ? 'display:block;' : ''}" 
-                        src="${html_encode(window.icons['link.svg'])}" 
-                        data-item-id="${item_id}"
-                    >`;
-
-            // shared badge
-            h += `<img  class="item-badge item-badge-has-permission" 
-                        style="display: ${ is_shared_with_me ? 'block' : 'none'};
-                            background-color: #ffffff;
-                            padding: 2px;" src="${html_encode(window.icons['shared.svg'])}" 
-                        data-item-id="${item_id}"
-                        title="A user has shared this item with you.">`;
-            // owner-shared badge
-            h += `<img  class="item-badge item-is-shared" 
-                        style="background-color: #ffffff; padding: 2px; ${!is_shared_with_me && options.is_shared ? 'display:block;' : ''}" 
-                        src="${html_encode(window.icons['owner-shared.svg'])}" 
-                        data-item-id="${item_id}"
-                        data-item-uid="${options.uid}"
-                        data-item-path="${html_encode(options.path)}"
-                        title="You have shared this item with at least one other user."
-                    >`;
-            // shortcut badge
-            h += `<img  class="item-badge item-shortcut" 
-                        style="background-color: #ffffff; padding: 2px; ${options.is_shortcut !== 0 ? 'display:block;' : ''}" 
-                        src="${html_encode(window.icons['shortcut.svg'])}" 
-                        data-item-id="${item_id}"
-                        title="Shortcut"
-                    >`;
-
-        h += `</div>`;
-
-        // name
-        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>`;
-
-    return h;
-}
-
 window.store_auto_arrange_preference = (preference)=>{
     puter.kv.set('user_preferences.auto_arrange_desktop', preference);
     localStorage.setItem('auto_arrange', preference);

+ 147 - 0
src/helpers/get_html_element_from_options.js

@@ -0,0 +1,147 @@
+/**
+ * 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 truncate_filename from './truncate_filename.js';
+
+const get_html_element_from_options = async function(options){
+    const item_id = window.global_element_id++;
+    
+    options.disabled = options.disabled ?? false;
+    options.visible = options.visible ?? 'visible'; // one of 'visible', 'revealed', 'hidden'
+    options.is_dir = options.is_dir ?? false;
+    options.is_selected = options.is_selected ?? false;
+    options.is_shared = options.is_shared ?? false;
+    options.is_shortcut = options.is_shortcut ?? 0;
+    options.is_trash = options.is_trash ?? false;
+    options.metadata = options.metadata ?? '';
+    options.multiselectable = (!options.multiselectable || options.multiselectable === true) ? true : false;
+    options.shortcut_to = options.shortcut_to ?? '';
+    options.shortcut_to_path = options.shortcut_to_path ?? '';
+    options.immutable = (options.immutable === false || options.immutable === 0 || options.immutable === undefined ? 0 : 1);
+    options.sort_container_after_append = (options.sort_container_after_append !== undefined ? options.sort_container_after_append : false);
+    const is_shared_with_me = (options.path !== '/'+window.user.username && !options.path.startsWith('/'+window.user.username+'/'));
+
+    let website_url = window.determine_website_url(options.path);
+
+    // do a quick check to see if the target parent has any file type restrictions
+    const appendto_allowed_file_types = $(options.appendTo).attr('data-allowed_file_types')
+    if(!window.check_fsentry_against_allowed_file_types_string({is_dir: options.is_dir, name:options.name, type:options.type}, appendto_allowed_file_types))
+        options.disabled = true;
+
+    // --------------------------------------------------------
+    // HTML for Item
+    // --------------------------------------------------------
+    let h = '';
+    h += `<div  id="item-${item_id}" 
+                class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''} item-${options.visible}" 
+                data-id="${item_id}" 
+                data-name="${html_encode(options.name)}" 
+                data-metadata="${html_encode(options.metadata)}" 
+                data-uid="${options.uid}" 
+                data-is_dir="${options.is_dir ? 1 : 0}" 
+                data-is_trash="${options.is_trash ? 1 : 0}"
+                data-has_website="${options.has_website ? 1 : 0 }" 
+                data-website_url = "${website_url ? html_encode(website_url) : ''}"
+                data-immutable="${options.immutable}" 
+                data-is_shortcut = "${options.is_shortcut}"
+                data-shortcut_to = "${html_encode(options.shortcut_to)}"
+                data-shortcut_to_path = "${html_encode(options.shortcut_to_path)}"
+                data-sortable = "${options.sortable ?? 'true'}"
+                data-sort_by = "${html_encode(options.sort_by) ?? 'name'}"
+                data-size = "${options.size ?? ''}"
+                data-type = "${html_encode(options.type) ?? ''}"
+                data-modified = "${options.modified ?? ''}"
+                data-associated_app_name = "${html_encode(options.associated_app_name) ?? ''}"
+                data-path="${html_encode(options.path)}">`;
+
+        // spinner
+        h += `<div class="item-spinner">`;
+        h += `</div>`;
+        // modified
+        h += `<div class="item-attr item-attr--modified">`;
+            h += `<span>${options.modified === 0 ? '-' : timeago.format(options.modified*1000)}</span>`;
+        h += `</div>`;
+        // size
+        h += `<div class="item-attr item-attr--size">`;
+            h += `<span>${options.size ? window.byte_format(options.size) : '-'}</span>`;
+        h += `</div>`;
+        // type
+        h += `<div class="item-attr item-attr--type">`;
+            if(options.is_dir)
+                h += `<span>Folder</span>`;
+            else
+                h += `<span>${options.type ? html_encode(options.type) : '-'}</span>`;
+        h += `</div>`;
+
+
+        // icon
+        h += `<div class="item-icon">`;
+            h += `<img src="${html_encode(options.icon.image)}" class="item-icon-${options.icon.type}" data-item-id="${item_id}">`;
+        h += `</div>`;
+        // badges
+        h += `<div class="item-badges">`;
+            // website badge
+            h += `<img  class="item-badge item-has-website-badge long-hover" 
+                        style="${options.has_website ? 'display:block;' : ''}" 
+                        src="${html_encode(window.icons['world.svg'])}" 
+                        data-item-id="${item_id}"
+                    >`;
+            // link badge
+            h += `<img  class="item-badge item-has-website-url-badge" 
+                        style="${website_url ? 'display:block;' : ''}" 
+                        src="${html_encode(window.icons['link.svg'])}" 
+                        data-item-id="${item_id}"
+                    >`;
+
+            // shared badge
+            h += `<img  class="item-badge item-badge-has-permission" 
+                        style="display: ${ is_shared_with_me ? 'block' : 'none'};
+                            background-color: #ffffff;
+                            padding: 2px;" src="${html_encode(window.icons['shared.svg'])}" 
+                        data-item-id="${item_id}"
+                        title="A user has shared this item with you.">`;
+            // owner-shared badge
+            h += `<img  class="item-badge item-is-shared" 
+                        style="background-color: #ffffff; padding: 2px; ${!is_shared_with_me && options.is_shared ? 'display:block;' : ''}" 
+                        src="${html_encode(window.icons['owner-shared.svg'])}" 
+                        data-item-id="${item_id}"
+                        data-item-uid="${options.uid}"
+                        data-item-path="${html_encode(options.path)}"
+                        title="You have shared this item with at least one other user."
+                    >`;
+            // shortcut badge
+            h += `<img  class="item-badge item-shortcut" 
+                        style="background-color: #ffffff; padding: 2px; ${options.is_shortcut !== 0 ? 'display:block;' : ''}" 
+                        src="${html_encode(window.icons['shortcut.svg'])}" 
+                        data-item-id="${item_id}"
+                        title="Shortcut"
+                    >`;
+
+        h += `</div>`;
+
+        // name
+        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>`;
+
+    return h;
+}
+
+export default get_html_element_from_options;