Implement 'Show Hidden Files' feature

This commit is contained in:
Sun Jia Cheng
2024-03-09 11:06:14 +08:00
parent b56392cf3a
commit e39e38da11
7 changed files with 96 additions and 7 deletions

3
.gitignore vendored
View File

@@ -4,4 +4,5 @@ node_modules/
*.tgz
license.config.json
license-header.txt
dist/
dist/
.vscode/

View File

@@ -683,6 +683,18 @@ async function UIDesktop(options){
}
},
// -------------------------------------------
// Show/Hide hidden files
// -------------------------------------------
{
html: `${window.user_preferences.show_hidden_files ? 'Hide' : 'Show'} hidden files`,
onClick: function(){
window.mutate_user_preferences({
show_hidden_files : !window.user_preferences.show_hidden_files,
});
window.show_or_hide_files(document.querySelectorAll('.item-container'));
}
},
// -------------------------------------------
// -
// -------------------------------------------
'-',

View File

@@ -46,6 +46,7 @@ function UIItem(options){
// set options defaults
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;
@@ -71,7 +72,7 @@ function UIItem(options){
// --------------------------------------------------------
let h = '';
h += `<div id="item-${item_id}"
class="item${options.is_selected ? ' item-selected':''} ${options.disabled ? 'item-disabled':''}"
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)}"

View File

@@ -1880,6 +1880,18 @@ async function UIWindow(options) {
}
},
// -------------------------------------------
// Show/Hide hidden files
// -------------------------------------------
{
html: `${window.user_preferences.show_hidden_files ? "Hide" : "Show"} hidden files`,
onClick: function(){
window.mutate_user_preferences({
show_hidden_files : !window.user_preferences.show_hidden_files,
});
window.show_or_hide_files(document.querySelectorAll('.item-container'));
}
},
// -------------------------------------------
// -
// -------------------------------------------
'-',

View File

@@ -306,6 +306,18 @@ input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, sel
pointer-events: none;
}
.item-revealed {
opacity: 0.9;
}
.item-hidden {
display: none
}
.item-revealed.item-disabled {
opacity: 0.7
}
.item-container-list .item {
height: initial;
width: max-content;

View File

@@ -85,6 +85,19 @@ if(window.user !== undefined && window.user !== null){
}
window.root_dirname = 'Puter';
// user preferences, persisted across sessions, cached in localStorage
try {
window.user_preferences = JSON.parse(localStorage.getItem('user_preferences'))
}catch(e){
window.user_preferences = null;
}
// default values
if (window.user_preferences === null) {
window.user_preferences = {
show_hidden_files: false,
}
}
window.window_stack = []
window.toolbar_height = 30;
window.default_taskbar_height = 50;

View File

@@ -656,7 +656,13 @@ window.refresh_user_data = async (auth_token)=>{
// update local user data
if(whoami){
update_auth_data(auth_token, whoami)
}
}
// update local user preferences
const user_preferences = {
show_hidden_files: (await puter.kv.get('user_preferences.show_hidden_files')) === 'true',
};
update_user_preferences(user_preferences);
}
window.update_auth_data = (auth_token, user)=>{
@@ -710,6 +716,20 @@ window.update_auth_data = (auth_token, user)=>{
}
}
window.mutate_user_preferences = function(user_preferences_delta) {
for (const [key, value] of Object.entries(user_preferences_delta)) {
// Don't wait for set to be done for better efficiency
puter.kv.set(`user_preferences.${key}`, String(value));
}
// There may be syncing issues across multiple devices
update_user_preferences({ ...window.user_preferences, ...user_preferences_delta });
}
window.update_user_preferences = function(user_preferences) {
window.user_preferences = user_preferences;
localStorage.setItem('user_preferences', JSON.stringify(user_preferences));
}
window.sendWindowWillCloseMsg = function(iframe_element) {
return new Promise(function(resolve){
const msg_id = uuidv4();
@@ -1255,11 +1275,18 @@ window.refresh_item_container = function(el_item_container, options){
if(!window.check_fsentry_against_allowed_file_types_string(fsentry, allowed_file_types))
is_disabled = true;
// skip if hidden (i.e. name starts with `.`)
if(fsentry.name.startsWith('.'))
continue;
// set visibility based on user preferences and whether file is hidden by default
const is_hidden_file = fsentry.name.startsWith('.');
let visible;
if (!is_hidden_file){
visible = 'visible';
}else if (window.user_preferences.show_hidden_files) {
visible = 'revealed';
}else{
visible = 'hidden';
}
//metadata
// metadata
let metadata;
if(fsentry.metadata !== ''){
try{
@@ -1295,6 +1322,7 @@ window.refresh_item_container = function(el_item_container, options){
modified: fsentry.modified,
suggested_apps: fsentry.suggested_apps,
disabled: is_disabled,
visible: visible,
});
}
}
@@ -1380,6 +1408,16 @@ window.sort_items = (item_container, sort_by, sort_order)=>{
}).appendTo(item_container);
}
window.show_or_hide_files = (item_containers) => {
const show_hidden_files = window.user_preferences.show_hidden_files;
const class_to_add = show_hidden_files ? 'item-revealed' : 'item-hidden';
const class_to_remove = show_hidden_files ? 'item-hidden' : 'item-revealed';
$(item_containers)
.find('.item')
.filter((_, item) => item.dataset.name.startsWith('.'))
.removeClass(class_to_remove).addClass(class_to_add);
}
window.create_folder = async(basedir, appendto_element)=>{
let dirname = basedir;
let folder_name = 'New Folder';