mirror of
https://github.com/HeyPuter/puter.git
synced 2025-01-27 09:48:43 +08:00
3269 lines
150 KiB
JavaScript
3269 lines
150 KiB
JavaScript
/**
|
|
* 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 UIAlert from './UIAlert.js';
|
|
import UIContextMenu from './UIContextMenu.js';
|
|
import path from '../lib/path.js';
|
|
import UITaskbarItem from './UITaskbarItem.js';
|
|
import UIWindowLogin from './UIWindowLogin.js';
|
|
import UIWindowPublishWebsite from './UIWindowPublishWebsite.js';
|
|
import UIWindowItemProperties from './UIWindowItemProperties.js';
|
|
import new_context_menu_item from '../helpers/new_context_menu_item.js';
|
|
|
|
const el_body = document.getElementsByTagName('body')[0];
|
|
|
|
async function UIWindow(options) {
|
|
const win_id = global_element_id++;
|
|
last_window_zindex++;
|
|
|
|
// options.dominant places the window in center close to top.
|
|
options.dominant = options.dominant ?? false;
|
|
|
|
// in case of file dialogs, the window is automatically dominant
|
|
if(options.is_openFileDialog || options.is_saveFileDialog || options.is_directoryPicker)
|
|
options.dominant = true;
|
|
|
|
// we don't want to increment window_counter for dominant windows
|
|
if(!options.dominant)
|
|
window.window_counter++;
|
|
|
|
// add this window's id to the window_stack
|
|
window_stack.push(win_id);
|
|
|
|
// =====================================
|
|
// set options defaults
|
|
// =====================================
|
|
|
|
// indicates if sidebar is hidden, only applies to directory windows
|
|
let sidebar_hidden = false;
|
|
|
|
const default_window_top = ('calc(15% + ' + ((window.window_counter-1) % 10 * 20) + 'px)');
|
|
|
|
// list of file types that are allowed, other types will be disabled but still shown
|
|
options.allowed_file_types = options.allowed_file_types ?? '';
|
|
options.app = options.app ?? '';
|
|
options.allow_context_menu = options.allow_context_menu ?? true;
|
|
options.allow_native_ctxmenu = options.allow_native_ctxmenu ?? false;
|
|
options.allow_user_select = options.allow_user_select ?? false;
|
|
options.backdrop = options.backdrop ?? false;
|
|
options.body_css = options.body_css ?? {};
|
|
options.border_radius = options.border_radius ?? undefined;
|
|
options.draggable_body = options.draggable_body ?? false;
|
|
options.element_uuid = options.element_uuid ?? uuidv4();
|
|
options.center = options.center ?? false;
|
|
options.close_on_backdrop_click = options.close_on_backdrop_click ?? true;
|
|
options.disable_parent_window = options.disable_parent_window ?? false;
|
|
options.has_head = options.has_head ?? true;
|
|
options.height = options.height ?? 380;
|
|
options.icon = options.icon ?? null;
|
|
options.iframe_msg_uid = options.iframe_msg_uid ?? null;
|
|
options.is_droppable = options.is_droppable ?? true;
|
|
options.is_draggable = options.is_draggable ?? true;
|
|
options.is_dir = options.is_dir ?? false;
|
|
options.is_minimized = options.is_minimized ?? false;
|
|
options.is_maximized = options.is_maximized ?? false;
|
|
options.is_openFileDialog = options.is_openFileDialog ?? false;
|
|
options.is_resizable = options.is_resizable ?? true;
|
|
// if this is a fullpage window, it won't be resizable
|
|
if(options.is_fullpage)
|
|
options.is_resizable = false;
|
|
|
|
// in the embedded/fullpage mode every window is on top since there is no taskbar to switch between windows
|
|
// if user has specifically asked for this window to NOT stay on top, honor it.
|
|
if((is_embedded || window.is_fullpage_mode) && !options.parent_uuid && options.stay_on_top !== false)
|
|
options.stay_on_top = true;
|
|
// Keep the window on top of all previously opened windows
|
|
options.stay_on_top = options.stay_on_top ?? false;
|
|
|
|
options.is_saveFileDialog = options.is_saveFileDialog ?? false;
|
|
options.show_minimize_button = options.show_minimize_button ?? true;
|
|
options.on_close = options.on_close ?? undefined;
|
|
options.parent_uuid = options.parent_uuid ?? null;
|
|
options.selectable_body = options.selectable_body ?? true;
|
|
options.show_in_taskbar = options.show_in_taskbar ?? true;
|
|
options.show_maximize_button = options.show_maximize_button ?? true;
|
|
options.single_instance = options.single_instance ?? false;
|
|
options.sort_by = options.sort_by ?? 'name';
|
|
options.sort_order = options.sort_order ?? 'asc';
|
|
options.title = options.title ?? null;
|
|
options.top = options.top ?? default_window_top;
|
|
options.type = options.type ?? null;
|
|
options.update_window_url = options.update_window_url ?? false;
|
|
options.layout = options.layout ?? 'icons';
|
|
options.width = options.width ?? 680;
|
|
options.window_css = options.window_css ?? {};
|
|
options.window_class = (options.window_class !== undefined ? ' ' + options.window_class : '');
|
|
|
|
// if only one instance is allowed, bring focus to the window that is already open
|
|
if(options.single_instance && options.app !== ''){
|
|
let $already_open_window = $(`.window[data-app="${html_encode(options.app)}"]`);
|
|
if($already_open_window.length){
|
|
$(`.window[data-app="${html_encode(options.app)}"]`).focusWindow();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// left
|
|
if(!options.dominant && !options.center){
|
|
options.left = options.left ?? ((window.innerWidth/2 - options.width/2) +(window.window_counter-1) % 10 * 30) + 'px';
|
|
}else if(!options.dominant && options.center){
|
|
options.left = options.left ?? ((window.innerWidth/2 - options.width/2)) + 'px';
|
|
}
|
|
else if(options.dominant){
|
|
options.left = (window.innerWidth/2 - options.width/2) + 'px';
|
|
}
|
|
else
|
|
options.left = options.left ?? ((window.innerWidth/2 - options.width/2) + 'px');
|
|
|
|
// top
|
|
if(!options.dominant && !options.center){
|
|
options.top = options.top ?? ((window.innerHeight/2 - options.height/2) +(window.window_counter-1) % 10 * 30) + 'px';
|
|
}else if(!options.dominant && options.center){
|
|
options.top = options.top ?? ((window.innerHeight/2 - options.height/2)) + 'px';
|
|
}
|
|
else if(options.dominant){
|
|
options.top = (window.innerHeight * 0.15);
|
|
}
|
|
else if(isMobile.phone)
|
|
options.top = 100;
|
|
|
|
if(isMobile.phone){
|
|
options.left = 0;
|
|
options.top = window.toolbar_height + 'px';
|
|
options.width = '100%';
|
|
options.height = 'calc(100% - ' + window.toolbar_height + 'px)';
|
|
}else{
|
|
options.width += 'px'
|
|
options.height += 'px'
|
|
}
|
|
|
|
// =====================================
|
|
// cover page
|
|
// =====================================
|
|
if(options.cover_page){
|
|
options.left = 0;
|
|
options.top = 0;
|
|
options.width = '100%';
|
|
options.height = '100%';
|
|
}
|
|
// --------------------------------------------------------
|
|
// HTML for Window
|
|
// --------------------------------------------------------
|
|
let h = '';
|
|
|
|
// Window
|
|
let zindex = options.stay_on_top ? (99999999 + last_window_zindex + 1 + ' !important') : last_window_zindex;
|
|
h += `<div class="window window-active
|
|
${options.cover_page ? 'window-cover-page' : ''}
|
|
${options.uid !== undefined ? 'window-'+options.uid : ''}
|
|
${options.window_class}
|
|
${options.allow_user_select ? ' allow-user-select' : ''}
|
|
${options.is_openFileDialog || options.is_saveFileDialog || options.is_directoryPicker ? 'window-filedialog' : ''}"
|
|
id="window-${win_id}"
|
|
data-allowed_file_types = "${html_encode(options.allowed_file_types)}"
|
|
data-app="${html_encode(options.app)}"
|
|
data-app_uuid="${html_encode(options.app_uuid ?? '')}"
|
|
data-disable_parent_window = "${html_encode(options.disable_parent_window)}"
|
|
data-name="${html_encode(options.title)}"
|
|
data-path ="${html_encode(options.path)}"
|
|
data-uid ="${options.uid}"
|
|
data-element_uuid="${options.element_uuid}"
|
|
data-parent_uuid="${options.parent_uuid}"
|
|
data-id ="${win_id}"
|
|
data-iframe_msg_uid ="${options.iframe_msg_uid}"
|
|
data-is_dir ="${options.is_dir}"
|
|
data-return_to_parent_window = "${options.return_to_parent_window}"
|
|
data-initiating_app_uuid = "${options.initiating_app_uuid}"
|
|
data-is_openFileDialog ="${options.is_openFileDialog}"
|
|
data-is_saveFileDialog ="${options.is_saveFileDialog}"
|
|
data-is_directoryPicker ="${options.is_directoryPicker}"
|
|
data-is_fullpage ="${options.is_fullpage ? 1 : 0}"
|
|
data-is_minimized ="${options.is_minimized ? 1 : 0}"
|
|
data-is_maximized ="${options.is_maximized ? 1 : 0}"
|
|
data-layout ="${options.layout}"
|
|
data-stay_on_top ="${options.stay_on_top}"
|
|
data-sort_by ="${options.sort_by ?? 'name'}"
|
|
data-sort_order ="${options.sort_order ?? 'asc'}"
|
|
data-multiselectable = "${options.selectable_body}"
|
|
data-update_window_url = "${options.update_window_url}"
|
|
data-initial_zindex = "${zindex}"
|
|
style=" z-index: ${zindex};
|
|
${options.width !== undefined ? 'width: ' + html_encode(options.width) +'; ':''}
|
|
${options.height !== undefined ? 'height: ' + html_encode(options.height) +'; ':''}
|
|
${options.border_radius !== undefined ? 'border-radius: ' + html_encode(options.border_radius) +'; ':''}
|
|
"
|
|
>`;
|
|
// window mask
|
|
h += `<div class="window-disable-mask">`;
|
|
//busy indicator
|
|
h += `<div class="busy-indicator">BUSY</div>`;
|
|
h += `</div>`;
|
|
|
|
|
|
// Head
|
|
if(options.has_head){
|
|
h += `<div class="window-head">`;
|
|
// draggable handle which also contains icon and title
|
|
h+=`<div class="window-head-draggable">`;
|
|
// icon
|
|
if(options.icon)
|
|
h += `<img class="window-head-icon" />`;
|
|
// title
|
|
h += `<span class="window-head-title" title="${html_encode(options.title)}"></span>`;
|
|
h += `</div>`;
|
|
// Minimize button, only if window is resizable and not embedded
|
|
if(options.is_resizable && options.show_minimize_button && !is_embedded)
|
|
h += `<span class="window-action-btn window-minimize-btn" style="margin-left:0;"><img src="${html_encode(window.icons['minimize.svg'])}" draggable="false"></span>`;
|
|
// Maximize button
|
|
if(options.is_resizable && options.show_maximize_button)
|
|
h += `<span class="window-action-btn window-scale-btn"><img src="${html_encode(window.icons['scale.svg'])}" draggable="false"></span>`;
|
|
// Close button
|
|
h += `<span class="window-action-btn window-close-btn"><img src="${html_encode(window.icons['close.svg'])}" draggable="false"></span>`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
// Sidebar
|
|
if(options.is_dir && !isMobile.phone){
|
|
h += `<div class="window-sidebar disable-user-select hide-scrollbar"
|
|
style="${window.window_sidebar_width ? 'width: ' + html_encode(window.window_sidebar_width) + 'px !important;' : ''}"
|
|
draggable="false"
|
|
>`;
|
|
// favorites
|
|
h += `<h2 class="window-sidebar-title disable-user-select">Favorites</h2>`;
|
|
h += `<div draggable="false" title="Home" class="window-sidebar-item disable-user-select ${options.path === window.home_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.home_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-home.svg'])}">Home</div>`;
|
|
h += `<div draggable="false" title="Documents" class="window-sidebar-item disable-user-select ${options.path === window.docs_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.docs_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-documents.svg'])}">Documents</div>`;
|
|
h += `<div draggable="false" title="Pictures" class="window-sidebar-item disable-user-select ${options.path === window.pictures_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.pictures_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-pictures.svg'])}">Pictures</div>`;
|
|
h += `<div draggable="false" title="Desktop" class="window-sidebar-item disable-user-select ${options.path === window.desktop_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.desktop_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-desktop.svg'])}">Desktop</div>`;
|
|
h += `<div draggable="false" title="Videos" class="window-sidebar-item disable-user-select ${options.path === window.videos_path ? 'window-sidebar-item-active' : ''}" data-path="${html_encode(window.videos_path)}"><img draggable="false" class="window-sidebar-item-icon" src="${html_encode(window.icons['folder-videos.svg'])}">Videos</div>`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
// Navbar
|
|
if(options.is_dir){
|
|
h += `<div class="window-navbar">`;
|
|
h += `<div style="float:left; margin-left:5px; margin-right:5px;">`;
|
|
// Back
|
|
h += `<img draggable="false" class="window-navbar-btn window-navbar-btn-back window-navbar-btn-disabled" src="${html_encode(window.icons['arrow-left.svg'])}" title="Click to go back.">`;
|
|
// Forward
|
|
h += `<img draggable="false" class="window-navbar-btn window-navbar-btn-forward window-navbar-btn-disabled" src="${html_encode(window.icons['arrow-right.svg'])}" title="Click to go forward.">`;
|
|
// Up
|
|
h += `<img draggable="false" class="window-navbar-btn window-navbar-btn-up ${options.path === '/' ? 'window-navbar-btn-disabled' : ''}" src="${html_encode(window.icons['arrow-up.svg'])}" title="Click to go one directory up.">`;
|
|
h += `</div>`;
|
|
// Path
|
|
h += `<div class="window-navbar-path">${navbar_path(options.path, window.user.username)}</div>`;
|
|
// Path editor
|
|
h += `<input class="window-navbar-path-input" data-path="${html_encode(options.path)}" value="${html_encode(options.path)}" spellcheck="false"/>`;
|
|
// Layout settings
|
|
h += `<img class="window-navbar-layout-settings" src="${html_encode(options.layout === 'icons' ? window.icons['layout-icons.svg'] : window.icons['layout-list.svg'])}" draggable="false">`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
// Body
|
|
h += `<div
|
|
class="window-body${options.is_dir ? ' item-container' : ''}${options.iframe_url !== undefined || options.iframe_srcdoc !== undefined ? ' window-body-app' : ''}${options.is_saveFileDialog || options.is_openFileDialog || options.is_directoryPicker ? ' window-body-filedialog' : ''}"
|
|
data-allowed_file_types="${html_encode(options.allowed_file_types)}"
|
|
data-path="${html_encode(options.path)}"
|
|
data-multiselectable = "${options.selectable_body}"
|
|
data-sort_by ="${options.sort_by ?? 'name'}"
|
|
data-sort_order ="${options.sort_order ?? 'asc'}"
|
|
data-uid ="${options.uid}"
|
|
id="window-body-${win_id}"
|
|
style="${!options.has_head ? ' height: 100%;' : ''}">`;
|
|
// iframe, for apps
|
|
if(options.iframe_url || options.iframe_srcdoc){
|
|
// iframe
|
|
h += `<iframe tabindex="-1"
|
|
data-app="${html_encode(options.app)}"
|
|
class="window-app-iframe"
|
|
allowtransparency="true" allowpaymentrequest="true" allowfullscreen="true"
|
|
frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"
|
|
${options.iframe_url ? 'src="'+ html_encode(options.iframe_url)+'"' : ''}
|
|
${options.iframe_srcdoc ? 'srcdoc="'+ html_encode(options.iframe_srcdoc) +'"' : ''}
|
|
allow = "accelerometer; camera; encrypted-media; gamepad; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share; fullscreen;"
|
|
sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation allow-storage-access-by-user-activation"></iframe>`;
|
|
}
|
|
// custom body
|
|
else if(options.body_content !== undefined){
|
|
h += options.body_content;
|
|
}
|
|
|
|
// Directory
|
|
if(options.is_dir){
|
|
// Detail layout header
|
|
h += window.explore_table_headers();
|
|
|
|
// Add 'This folder is empty' message by default
|
|
h += `<div class="explorer-empty-message">This folder is empty</div>`;
|
|
|
|
// Loading spinner
|
|
h += `<div class="explorer-loading-spinner">`;
|
|
h +=`<svg style="display:block; margin: 0 auto; " xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;
|
|
h += `<p class="explorer-loading-spinner-msg">${i18n('loading')}...</p>`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
h += `</div>`;
|
|
|
|
// Explorer footer
|
|
if(options.is_dir && !options.is_saveFileDialog && !options.is_openFileDialog && !options.is_directoryPicker){
|
|
h += `<div class="explorer-footer">`
|
|
h += `<span class="explorer-footer-item-count"></span>`;
|
|
h += `<span class="explorer-footer-seperator">|</span>`;
|
|
h += `<span class="explorer-footer-selected-items-count"></span>`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
// is_saveFileDialog
|
|
if(options.is_saveFileDialog){
|
|
h += `<div class="window-filedialog-prompt">`;
|
|
h += `<div style="display:flex;">`;
|
|
h += `<input type="text" class="savefiledialog-filename" autocorrect="off" spellcheck="false" value="${html_encode(options.saveFileDialog_default_filename) ?? ''}">`;
|
|
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
|
h += `<button class="button `;
|
|
if(options.saveFileDialog_default_filename === undefined || options.saveFileDialog_default_filename === '')
|
|
h+= `disabled `;
|
|
h += `button-small button-primary savefiledialog-save-btn">Save</button>`;
|
|
h += `</div>`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
// is_openFileDialog
|
|
else if(options.is_openFileDialog){
|
|
h += `<div class="window-filedialog-prompt">`;
|
|
h += `<div style="text-align:right;">`;
|
|
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
|
h += `<button class="button disabled button-small button-primary openfiledialog-open-btn">Open</button>`;
|
|
h += `</div>`;
|
|
h += `</div>`;
|
|
}
|
|
|
|
// is_directoryPicker
|
|
else if(options.is_directoryPicker){
|
|
h += `<div class="window-filedialog-prompt">`;
|
|
h += `<div style="text-align:right;">`;
|
|
h += `<button class="button button-small filedialog-cancel-btn">Cancel</button>`;
|
|
h += `<button class="button button-small button-primary directorypicker-select-btn" style="margin-left:10px;">Select</button>`;
|
|
h += `</div>`;
|
|
h += `</div>`;
|
|
}
|
|
h += `</div>`;
|
|
|
|
// backdrop
|
|
if(options.backdrop){
|
|
let backdrop_zindex;
|
|
// backdrop should also cover over taskbar
|
|
let taskbar_zindex = $('.taskbar').css('z-index');
|
|
if(taskbar_zindex === null || taskbar_zindex === undefined)
|
|
backdrop_zindex = zindex;
|
|
else{
|
|
taskbar_zindex = parseInt(taskbar_zindex);
|
|
backdrop_zindex = taskbar_zindex > zindex ? taskbar_zindex : zindex;
|
|
}
|
|
|
|
h = `<div class="window-backdrop" style="z-index:${backdrop_zindex};">` + h + `</div>`;
|
|
}
|
|
|
|
// Append
|
|
$(el_body).append(h);
|
|
|
|
// disable_parent_window
|
|
if(options.disable_parent_window && options.parent_uuid !== null){
|
|
const $el_parent_window = $(`.window[data-element_uuid="${options.parent_uuid}"]`);
|
|
const $el_parent_disable_mask = $el_parent_window.find('.window-disable-mask');
|
|
//disable parent window
|
|
$el_parent_window.addClass('window-disabled')
|
|
$el_parent_disable_mask.show();
|
|
$el_parent_disable_mask.css('z-index', parseInt($el_parent_window.css('z-index')) + 1);
|
|
$el_parent_window.find('iframe').blur();
|
|
}
|
|
|
|
// Add Taskbar Item
|
|
if(!options.is_openFileDialog && !options.is_saveFileDialog && !options.is_directoryPicker && options.show_in_taskbar){
|
|
// add icon if there is no similar app already open
|
|
if($(`.taskbar-item[data-app="${options.app}"]`).length === 0){
|
|
UITaskbarItem({
|
|
icon: options.icon,
|
|
name: options.title,
|
|
app: options.app,
|
|
open_windows_count: 1,
|
|
onClick: function(){
|
|
let open_window_count = parseInt($(`.taskbar-item[data-app="${options.app}"]`).attr('data-open-windows'));
|
|
if(open_window_count === 0){
|
|
launch_app({
|
|
name: options.app,
|
|
})
|
|
}else{
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
if(options.app)
|
|
$(`.taskbar-item[data-app="${options.app}"] .active-taskbar-indicator`).show();
|
|
}else{
|
|
if(options.app){
|
|
$(`.taskbar-item[data-app="${options.app}"]`).attr('data-open-windows', parseInt($(`.taskbar-item[data-app="${options.app}"]`).attr('data-open-windows')) + 1);
|
|
$(`.taskbar-item[data-app="${options.app}"] .active-taskbar-indicator`).show();
|
|
}
|
|
}
|
|
}
|
|
|
|
// if directory, set window_nav_history and window_nav_history_current_position
|
|
if(options.is_dir){
|
|
window_nav_history[win_id] = [options.path];
|
|
window_nav_history_current_position[win_id] = 0;
|
|
}
|
|
|
|
// get all the elements needed
|
|
const el_window = document.querySelector(`#window-${win_id}`);
|
|
const el_window_head = document.querySelector(`#window-${win_id} > .window-head`);
|
|
const el_window_sidebar = document.querySelector(`#window-${win_id} > .window-sidebar`);
|
|
const el_window_head_title = document.querySelector(`#window-${win_id} > .window-head .window-head-title`);
|
|
const el_window_head_icon = document.querySelector(`#window-${win_id} > .window-head .window-head-icon`);
|
|
const el_window_head_scale_btn = document.querySelector(`#window-${win_id} > .window-head > .window-scale-btn`);
|
|
const el_window_navbar_back_btn = document.querySelector(`#window-${win_id} .window-navbar-btn-back`);
|
|
const el_window_navbar_forward_btn = document.querySelector(`#window-${win_id} .window-navbar-btn-forward`);
|
|
const el_window_navbar_up_btn = document.querySelector(`#window-${win_id} .window-navbar-btn-up`);
|
|
const el_window_body = document.querySelector(`#window-${win_id} > .window-body`);
|
|
const el_window_app_iframe = document.querySelector(`#window-${win_id} > .window-body > .window-app-iframe`);
|
|
const el_savefiledialog_filename = document.querySelector(`#window-${win_id} .savefiledialog-filename`);
|
|
const el_savefiledialog_save_btn = document.querySelector(`#window-${win_id} .savefiledialog-save-btn`);
|
|
const el_filedialog_cancel_btn = document.querySelector(`#window-${win_id} .filedialog-cancel-btn`);
|
|
const el_openfiledialog_open_btn = document.querySelector(`#window-${win_id} .openfiledialog-open-btn`);
|
|
const el_directorypicker_select_btn = document.querySelector(`#window-${win_id} .directorypicker-select-btn`);
|
|
|
|
if(options.is_maximized){
|
|
// save original size and position
|
|
$(el_window).attr({
|
|
'data-left-before-maxim': ((window.innerWidth/2 - 680/2) +(window.window_counter-1) % 10 * 30) + 'px',
|
|
'data-top-before-maxim': default_window_top,
|
|
'data-width-before-maxim': '680px',
|
|
'data-height-before-maxim': '350px',
|
|
'data-is_maximized': '1',
|
|
});
|
|
|
|
// shrink icon
|
|
$(el_window).find('.window-scale-btn>img').attr('src', window.icons['scale-down-3.svg']);
|
|
|
|
// set new size and position
|
|
$(el_window).css({
|
|
'top': window.toolbar_height + 'px',
|
|
'left': '0',
|
|
'width': '100%',
|
|
'height': `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)`,
|
|
'transform': 'none',
|
|
});
|
|
}
|
|
|
|
// when a window is created, focus is brought to it and
|
|
// therefore it is the current active element
|
|
window.active_element = el_window;
|
|
|
|
// set name
|
|
$(el_window_head_title).html(html_encode(options.title));
|
|
|
|
// set icon
|
|
if(options.icon)
|
|
$(el_window_head_icon).attr('src', options.icon.image ?? options.icon);
|
|
|
|
// root folder of a shared user?
|
|
if(options.is_dir && (options.path.split('/').length - 1) === 1 && options.path !== '/'+window.user.username){
|
|
$(el_window_head_icon).attr('src', window.icons['shared.svg']);
|
|
}
|
|
// focus on this window and deactivate other windows
|
|
$(el_window).focusWindow();
|
|
|
|
if (animate_window_opening) {
|
|
// animate window opening
|
|
$(el_window).css({
|
|
'opacity': '0',
|
|
'transition': 'opacity 70ms ease-in-out',
|
|
});
|
|
|
|
// Use requestAnimationFrame to schedule a function to run at the next repaint of the browser window
|
|
requestAnimationFrame(() => {
|
|
// Change the window's opacity to 1 and scale to 1 to create an opening effect
|
|
$(el_window).css({
|
|
'opacity': '1',
|
|
})
|
|
|
|
// Set a timeout to run after the transition duration (100ms)
|
|
setTimeout(function () {
|
|
// Remove the transition property, so future CSS changes won't be animated
|
|
$(el_window).css({
|
|
'transition': 'none',
|
|
})
|
|
}, 70);
|
|
});
|
|
}
|
|
|
|
// onAppend() - using show() is a hack to make sure window is visible AND onAppend is called when
|
|
// window is actually appended and usable.
|
|
$(el_window).show(0, function(e){
|
|
// if SaveFileDialog, bring focus to the el_savefiledialog_filename and select all
|
|
if(options.is_saveFileDialog){
|
|
let item_name = el_savefiledialog_filename.value;
|
|
const extname = path.extname('/' + item_name);
|
|
if(extname !== '')
|
|
el_savefiledialog_filename.setSelectionRange(0, item_name.length - extname.length)
|
|
else
|
|
$(el_savefiledialog_filename).select();
|
|
|
|
$(el_savefiledialog_filename).get(0).focus({preventScroll:true});
|
|
}
|
|
//set custom window css
|
|
$(el_window).css(options.window_css);
|
|
// onAppend()
|
|
if(options.onAppend && typeof options.onAppend === 'function'){
|
|
options.onAppend(el_window);
|
|
}
|
|
})
|
|
|
|
if(options.is_saveFileDialog){
|
|
//------------------------------------------------
|
|
// SaveFileDialog > Save button
|
|
//------------------------------------------------
|
|
$(el_savefiledialog_save_btn).on('click', function(e){
|
|
const filename = $(el_savefiledialog_filename).val();
|
|
try{
|
|
validate_fsentry_name(filename)
|
|
}catch(err){
|
|
UIAlert(err.message, 'error', 'OK')
|
|
return;
|
|
}
|
|
const target_path = path.join($(el_window).attr('data-path'), filename);
|
|
if(options.onSaveFileDialogSave && typeof options.onSaveFileDialogSave === 'function')
|
|
options.onSaveFileDialogSave(target_path, el_window)
|
|
})
|
|
|
|
//------------------------------------------------
|
|
// SaveFileDialog > Enter
|
|
//------------------------------------------------
|
|
$(el_savefiledialog_filename).on('keypress', function(event) {
|
|
if(event.which === 13){
|
|
$(el_savefiledialog_save_btn).trigger('click');
|
|
}
|
|
})
|
|
|
|
//------------------------------------------------
|
|
// Enable/disable Save button based on input
|
|
//------------------------------------------------
|
|
$(el_savefiledialog_filename).bind('keydown change input paste', function(){
|
|
if($(this).val() !== '')
|
|
$(el_savefiledialog_save_btn).removeClass('disabled');
|
|
else
|
|
$(el_savefiledialog_save_btn).addClass('disabled');
|
|
})
|
|
$(el_savefiledialog_filename).get(0).focus({preventScroll:true});
|
|
}
|
|
|
|
if(options.is_openFileDialog){
|
|
//------------------------------------------------
|
|
// OpenFileDialog > Open button
|
|
//------------------------------------------------
|
|
$(el_openfiledialog_open_btn).on('click', async function(e){
|
|
const selected_els = $(el_window).find('.item-selected[data-is_dir="0"]');
|
|
let selected_files;
|
|
|
|
// No item selected
|
|
if(selected_els.length === 0)
|
|
return;
|
|
// ------------------------------------------------
|
|
// Item(s) selected
|
|
// ------------------------------------------------
|
|
else{
|
|
selected_files = []
|
|
// an array that hold the items to sign
|
|
const items_to_sign = [];
|
|
|
|
// prepare items to sign
|
|
for(let i=0; i<selected_els.length; i++)
|
|
items_to_sign.push({uid: $(selected_els[i]).attr('data-uid'), action: 'write', path: $(selected_els[i]).attr('data-path')});
|
|
|
|
// sign items
|
|
selected_files = await puter.fs.sign(options.initiating_app_uuid, items_to_sign);
|
|
selected_files = selected_files.items;
|
|
selected_files = Array.isArray(selected_files) ? selected_files : [selected_files];
|
|
|
|
// change path of each item to preserve privacy
|
|
for(let i=0; i<selected_files.length; i++)
|
|
selected_files[i].path = `~/` + selected_files[i].path.split('/').slice(2).join('/');
|
|
}
|
|
|
|
const ifram_msg_uid = $(el_window).attr('data-iframe_msg_uid');
|
|
if(options.return_to_parent_window){
|
|
window.opener.postMessage({
|
|
msg: "fileOpenPicked",
|
|
original_msg_id: ifram_msg_uid,
|
|
items: Array.isArray(selected_files) ? [...selected_files] : [selected_files],
|
|
// LEGACY SUPPORT, remove this in the future when Polotno uses the new SDK
|
|
// this is literally put in here to support Polotno's legacy code
|
|
...(selected_files.length === 1 && selected_files[0])
|
|
}, '*');
|
|
|
|
window.close();
|
|
window.open('','_self').close();
|
|
}
|
|
else if(options.parent_uuid){
|
|
// send event to iframe
|
|
const target_iframe = $(`.window[data-element_uuid="${options.parent_uuid}"]`).find('.window-app-iframe').get(0);
|
|
if(target_iframe){
|
|
target_iframe.contentWindow.postMessage({
|
|
msg: "fileOpenPicked",
|
|
original_msg_id: ifram_msg_uid,
|
|
items: Array.isArray(selected_files) ? [...selected_files] : [selected_files],
|
|
// LEGACY SUPPORT, remove this in the future when Polotno uses the new SDK
|
|
// this is literally put in here to support Polotno's legacy code
|
|
...(selected_files.length === 1 && selected_files[0])
|
|
}, '*');
|
|
}
|
|
// focus on iframe
|
|
$(target_iframe).get(0)?.focus({preventScroll:true});
|
|
|
|
// send file_opened event
|
|
const file_opened_event = new CustomEvent('file_opened', {detail: Array.isArray(selected_files) ? [...selected_files] : [selected_files]});
|
|
|
|
// dispatch event to parent window
|
|
$(`.window[data-element_uuid="${options.parent_uuid}"]`).get(0)?.dispatchEvent(file_opened_event);
|
|
|
|
$(el_window).close();
|
|
}
|
|
})
|
|
}
|
|
else if(options.is_directoryPicker){
|
|
//------------------------------------------------
|
|
// DirectoryPicker > Select button
|
|
//------------------------------------------------
|
|
$(el_directorypicker_select_btn).on('click', async function(e){
|
|
const selected_els = $(el_window).find('.item-selected[data-is_dir="1"]');
|
|
let selected_dirs;
|
|
// ------------------------------------------------
|
|
// No item selected, return current directory
|
|
// ------------------------------------------------
|
|
if(selected_els.length === 0){
|
|
selected_dirs = await puter.fs.sign(options.initiating_app_uuid, {uid: $(el_window).attr('data-uid'), action: 'write'})
|
|
selected_dirs = selected_dirs.items;
|
|
}
|
|
|
|
// ------------------------------------------------
|
|
// directorie(s) selected
|
|
// ------------------------------------------------
|
|
else{
|
|
selected_dirs = []
|
|
// an array that hold the items to sign
|
|
const items_to_sign = [];
|
|
|
|
// prepare items to sign
|
|
for(let i=0; i<selected_els.length; i++)
|
|
items_to_sign.push({uid: $(selected_els[i]).attr('data-uid'), action: 'write', path: $(selected_els[i]).attr('data-path')});
|
|
|
|
// sign items
|
|
selected_dirs = await puter.fs.sign(options.initiating_app_uuid, items_to_sign);
|
|
selected_dirs = selected_dirs.items;
|
|
selected_dirs = Array.isArray(selected_dirs) ? selected_dirs : [selected_dirs];
|
|
|
|
// change path of each item to preserve privacy
|
|
for(let i=0; i<selected_dirs.length; i++)
|
|
selected_dirs[i].path = `~/` + selected_dirs[i].path.split('/').slice(2).join('/');
|
|
}
|
|
|
|
const ifram_msg_uid = $(el_window).attr('data-iframe_msg_uid');
|
|
|
|
if(options.return_to_parent_window){
|
|
window.opener.postMessage({
|
|
msg: "directoryPicked",
|
|
original_msg_id: ifram_msg_uid,
|
|
items: Array.isArray(selected_dirs) ? [...selected_dirs] : [selected_dirs],
|
|
// LEGACY SUPPORT, remove this in the future when Polotno uses the new SDK
|
|
// this is literally put in here to support Polotno's legacy code
|
|
...(selected_dirs.length === 1 && selected_dirs[0])
|
|
}, '*');
|
|
|
|
window.close();
|
|
window.open('','_self').close();
|
|
}
|
|
if(options.parent_uuid){
|
|
// Send directoryPicked event to iframe
|
|
const target_iframe = $(`.window[data-element_uuid="${options.parent_uuid}"]`).find('.window-app-iframe').get(0);
|
|
if(target_iframe){
|
|
target_iframe.contentWindow.postMessage({
|
|
msg: "directoryPicked",
|
|
original_msg_id: ifram_msg_uid,
|
|
items: Array.isArray(selected_dirs) ? [...selected_dirs] : [selected_dirs],
|
|
}, '*');
|
|
}
|
|
$(target_iframe).get(0).focus({preventScroll:true});
|
|
$(el_window).close();
|
|
}
|
|
})
|
|
}
|
|
|
|
if(options.is_saveFileDialog || options.is_openFileDialog || options.is_directoryPicker){
|
|
//------------------------------------------------
|
|
// FileDialog > Cancel button
|
|
//------------------------------------------------
|
|
$(el_filedialog_cancel_btn).on('click', function(e){
|
|
if(options.return_to_parent_window){
|
|
window.close();
|
|
window.open('','_self').close();
|
|
}
|
|
$(el_window).hide(0, ()=>{
|
|
// re-anable parent window
|
|
$(`.window[data-element_uuid="${options.parent_uuid}"]`).removeClass('window-disabled');
|
|
$(`.window[data-element_uuid="${options.parent_uuid}"]`).find('.window-disable-mask').hide();
|
|
$(el_window).close();
|
|
})
|
|
})
|
|
}
|
|
|
|
if(options.is_dir){
|
|
navbar_path_droppable(el_window);
|
|
sidebar_item_droppable(el_window);
|
|
// --------------------------------------------------------
|
|
// Back button
|
|
// --------------------------------------------------------
|
|
$(el_window_navbar_back_btn).on('click', function(e){
|
|
// if history menu is open don't continue
|
|
if($(el_window_navbar_back_btn).hasClass('has-open-contextmenu'))
|
|
return;
|
|
// if ctrl/cmd are pressed, open in new window
|
|
if(e.ctrlKey || e.metaKey){
|
|
const dirpath = window_nav_history[win_id].at(window_nav_history_current_position[win_id] - 1);
|
|
UIWindow({
|
|
path: dirpath,
|
|
title: dirpath === '/' ? root_dirname : path.basename(dirpath),
|
|
icon: window.icons['folder.svg'],
|
|
// uid: $(el_item).attr('data-uid'),
|
|
is_dir: true,
|
|
});
|
|
}
|
|
// ... otherwise, open in same window
|
|
else{
|
|
window_nav_history_current_position[win_id] > 0 && window_nav_history_current_position[win_id]--;
|
|
const new_path = window_nav_history[win_id].at(window_nav_history_current_position[win_id]);
|
|
// update window path
|
|
update_window_path(el_window, new_path);
|
|
}
|
|
})
|
|
// --------------------------------------------------------
|
|
// Back button click-hold
|
|
// --------------------------------------------------------
|
|
$(el_window_navbar_back_btn).on('taphold', function() {
|
|
let items = [];
|
|
const pos = el_window_navbar_back_btn.getBoundingClientRect();
|
|
|
|
for(let index = window_nav_history_current_position[win_id] - 1; index >= 0; index--){
|
|
const history_item = window_nav_history[win_id].at(index);
|
|
|
|
// build item for context menu
|
|
items.push({
|
|
html: `<span>${history_item === window.home_path ? 'Home' : path.basename(history_item)}</span>`,
|
|
val: index,
|
|
onClick: async function(e){
|
|
let history_index = e.value;
|
|
window_nav_history_current_position[win_id] = history_index;
|
|
const new_path = window_nav_history[win_id].at(window_nav_history_current_position[win_id]);
|
|
// if ctrl/cmd are pressed, open in new window
|
|
if(e.ctrlKey || e.metaKey && (new_path !== undefined && new_path !== null)){
|
|
UIWindow({
|
|
path: new_path,
|
|
title: new_path === '/' ? root_dirname : path.basename(new_path),
|
|
icon: window.icons['folder.svg'],
|
|
is_dir: true,
|
|
});
|
|
}
|
|
// update window path
|
|
else{
|
|
update_window_path(el_window, new_path);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// Menu
|
|
UIContextMenu({
|
|
position: {top: pos.top + pos.height + 3, left: pos.left},
|
|
parent_element: el_window_navbar_back_btn,
|
|
items: items,
|
|
})
|
|
})
|
|
// --------------------------------------------------------
|
|
// Forward button
|
|
// --------------------------------------------------------
|
|
$(el_window_navbar_forward_btn).on('click', function(e){
|
|
// if history menu is open don't continue
|
|
if($(el_window_navbar_forward_btn).hasClass('has-open-contextmenu'))
|
|
return;
|
|
// if ctrl/cmd are pressed, open in new window
|
|
if(e.ctrlKey || e.metaKey){
|
|
const dirpath = window_nav_history[win_id].at(window_nav_history_current_position[win_id] + 1);
|
|
UIWindow({
|
|
path: dirpath,
|
|
title: dirpath === '/' ? root_dirname : path.basename(dirpath),
|
|
icon: window.icons['folder.svg'],
|
|
// uid: $(el_item).attr('data-uid'),
|
|
is_dir: true,
|
|
});
|
|
}
|
|
// ... otherwise, open in same window
|
|
else{
|
|
window_nav_history_current_position[win_id]++;
|
|
// get last path in history
|
|
const target_path = window_nav_history[win_id].at(window_nav_history_current_position[win_id]);
|
|
// update window path
|
|
if(target_path !== undefined){
|
|
update_window_path(el_window, target_path);
|
|
}
|
|
}
|
|
})
|
|
// --------------------------------------------------------
|
|
// forward button click-hold
|
|
// --------------------------------------------------------
|
|
$(el_window_navbar_forward_btn).on('taphold', function() {
|
|
let items = [];
|
|
const pos = el_window_navbar_forward_btn.getBoundingClientRect();
|
|
|
|
for(let index = window_nav_history_current_position[win_id] + 1; index < window_nav_history[win_id].length; index++){
|
|
const history_item = window_nav_history[win_id].at(index);
|
|
|
|
// build item for context menu
|
|
items.push({
|
|
html: `<span>${history_item === window.home_path ? 'Home' : path.basename(history_item)}</span>`,
|
|
val: index,
|
|
onClick: async function(e){
|
|
let history_index = e.value;
|
|
window_nav_history_current_position[win_id] = history_index;
|
|
const new_path = window_nav_history[win_id].at(window_nav_history_current_position[win_id]);
|
|
// if ctrl/cmd are pressed, open in new window
|
|
if(e.ctrlKey || e.metaKey && (new_path !== undefined && new_path !== null)){
|
|
UIWindow({
|
|
path: new_path,
|
|
title: new_path === '/' ? root_dirname : path.basename(new_path),
|
|
icon: window.icons['folder.svg'],
|
|
is_dir: true,
|
|
});
|
|
}
|
|
// update window path
|
|
else{
|
|
update_window_path(el_window, new_path);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// Menu
|
|
UIContextMenu({
|
|
parent_element: el_window_navbar_forward_btn,
|
|
position: {top: pos.top + pos.height + 3, left: pos.left},
|
|
items: items,
|
|
})
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Up button
|
|
// --------------------------------------------------------
|
|
$(el_window_navbar_up_btn).on('click', function(e){
|
|
const target_path = path.resolve(path.join($(el_window).attr('data-path'), '..'));
|
|
// if ctrl/cmd are pressed, open in new window
|
|
if(e.ctrlKey || e.metaKey && (target_path !== undefined && target_path !== null)){
|
|
UIWindow({
|
|
path: target_path,
|
|
title: target_path === '/' ? root_dirname : path.basename(target_path),
|
|
icon: window.icons['folder.svg'],
|
|
// uid: $(el_item).attr('data-uid'),
|
|
is_dir: true,
|
|
});
|
|
}
|
|
// ... otherwise, open in same window
|
|
else if(target_path !== undefined && target_path !== null){
|
|
// update history
|
|
window_nav_history[win_id] = window_nav_history[win_id].slice(0, window_nav_history_current_position[win_id]+1);
|
|
window_nav_history[win_id].push(target_path);
|
|
window_nav_history_current_position[win_id]++;
|
|
// update window path
|
|
update_window_path(el_window, target_path);
|
|
}
|
|
})
|
|
|
|
const layouts = ['icons', 'list', 'details'];
|
|
|
|
$(el_window).find('.window-navbar-layout-settings').on('contextmenu taphold', function() {
|
|
let cur_layout = $(el_window).attr('data-layout');
|
|
let items = [];
|
|
for(let i=0; i<layouts.length; i++){
|
|
items.push({
|
|
html: `<span style="text-transform: capitalize;">${layouts[i]}</span>`,
|
|
icon: cur_layout === layouts[i] ? '✓' : '',
|
|
onClick: async function(e){
|
|
update_window_layout(el_window, layouts[i]);
|
|
window.set_layout($(el_window).attr('data-uid'), layouts[i]);
|
|
}
|
|
})
|
|
}
|
|
UIContextMenu({
|
|
parent_element: this,
|
|
items: items,
|
|
})
|
|
})
|
|
$(el_window).find('.window-navbar-layout-settings').on('click', function() {
|
|
let cur_layout = $(el_window).attr('data-layout');
|
|
for(let i=0; i<layouts.length; i++){
|
|
if(cur_layout === layouts[i]){
|
|
if(i === layouts.length - 1){
|
|
update_window_layout(el_window, layouts[0]);
|
|
window.set_layout($(el_window).attr('data-uid'), layouts[0]);
|
|
}else{
|
|
update_window_layout(el_window, layouts[i+1]);
|
|
window.set_layout($(el_window).attr('data-uid'), layouts[i+1]);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
// --------------------------------------------------------
|
|
// directory content
|
|
// --------------------------------------------------------
|
|
//auth
|
|
if(!is_auth() && !(await UIWindowLogin()))
|
|
return;
|
|
|
|
// get directory content
|
|
refresh_item_container(el_window_body, options);
|
|
}
|
|
|
|
// set iframe url
|
|
if (options.iframe_url){
|
|
$(el_window_app_iframe).attr('src', options.iframe_url)
|
|
//bring focus to iframe
|
|
el_window_app_iframe.contentWindow.focus();
|
|
}
|
|
// set the position of window
|
|
if(!options.is_maximized){
|
|
$(el_window).css('top', options.top)
|
|
$(el_window).css('left', options.left)
|
|
}
|
|
$(el_window).css('display', 'block');
|
|
|
|
// mousedown on the window body will unselect selected items if neither ctrl nor command are pressed
|
|
$(el_window_body).on('mousedown', function(e){
|
|
if($(e.target).hasClass('window-body') && !e.ctrlKey && !e.metaKey){
|
|
$(el_window_body).find('.item-selected').removeClass('item-selected');
|
|
update_explorer_footer_selected_items_count(el_window);
|
|
// if this is openFileDialog, disable the Open button
|
|
if(options.is_openFileDialog)
|
|
$(el_openfiledialog_open_btn).addClass('disabled')
|
|
}
|
|
})
|
|
|
|
// on_close event
|
|
$(el_window).on('remove', function(e){
|
|
// if on_close callback is set, call it
|
|
options.on_close?.();
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Backdrop click
|
|
// --------------------------------------------------------
|
|
if(options.backdrop && options.close_on_backdrop_click){
|
|
$(el_window).closest('.window-backdrop').on('mousedown', function(e){
|
|
if($(e.target).hasClass('window-backdrop')){
|
|
$(el_window).close();
|
|
}
|
|
})
|
|
}
|
|
// --------------------------------------------------------
|
|
// Selectable
|
|
// only for Desktop screens
|
|
// --------------------------------------------------------
|
|
if(options.is_dir && options.selectable_body && !isMobile.phone && !isMobile.tablet){
|
|
let selected_ctrl_items = [];
|
|
// init viselect
|
|
const selection = new SelectionArea({
|
|
selectionContainerClass: '.selection-area-container',
|
|
container: `#window-body-${win_id}`,
|
|
selectables: [`#window-body-${win_id} .item`],
|
|
startareas: [`#window-body-${win_id}`],
|
|
boundaries: [`#window-body-${win_id}`],
|
|
behaviour: {
|
|
overlap: 'drop',
|
|
intersect: 'touch',
|
|
startThreshold: 10,
|
|
scrolling: {
|
|
speedDivider: 10,
|
|
manualSpeed: 750,
|
|
startScrollMargins: {x: 0, y: 0}
|
|
}
|
|
},
|
|
features: {
|
|
touch: true,
|
|
range: true,
|
|
singleTap: {
|
|
allow: true,
|
|
intersect: 'native'
|
|
}
|
|
}
|
|
});
|
|
|
|
selection.on('beforestart', ({store, event}) => {
|
|
selected_ctrl_items = [];
|
|
return $(event.target).is(`#window-body-${win_id}`)
|
|
})
|
|
.on('beforedrag', evt => {
|
|
})
|
|
.on('start', ({store, event}) => {
|
|
if (!event.ctrlKey && !event.metaKey) {
|
|
|
|
for (const el of store.stored) {
|
|
el.classList.remove('item-selected');
|
|
}
|
|
|
|
selection.clearSelection();
|
|
}
|
|
})
|
|
.on('move', ({store: {changed: {added, removed}}, event}) => {
|
|
for (const el of added) {
|
|
// if ctrl or meta key is pressed and the item is already selected, then unselect it
|
|
if((event.ctrlKey || event.metaKey) && $(el).hasClass('item-selected')){
|
|
el.classList.remove('item-selected');
|
|
selected_ctrl_items.push(el);
|
|
}
|
|
// otherwise select it
|
|
else{
|
|
el.classList.add('item-selected');
|
|
// the latest selected item is the active element
|
|
active_element = el;
|
|
}
|
|
}
|
|
|
|
for (const el of removed) {
|
|
el.classList.remove('item-selected');
|
|
// in case this item was selected by ctrl+click before, then reselect it again
|
|
if(selected_ctrl_items.includes(el))
|
|
$(el).addClass('item-selected');
|
|
}
|
|
|
|
update_explorer_footer_selected_items_count(el_window);
|
|
|
|
// If this is openFileDialog, enable/disable the Open button accordingly
|
|
if(options.is_openFileDialog && $(el_window).find('.item-selected').length)
|
|
$(el_openfiledialog_open_btn).removeClass('disabled')
|
|
else
|
|
$(el_openfiledialog_open_btn).addClass('disabled')
|
|
})
|
|
.on('stop', ({store, event}) => {
|
|
// If this is openFileDialog, enable/disable the Open button accordingly
|
|
if(options.is_openFileDialog && $(el_window).find('.item-selected').length)
|
|
$(el_openfiledialog_open_btn).removeClass('disabled')
|
|
else
|
|
$(el_openfiledialog_open_btn).addClass('disabled')
|
|
});
|
|
}
|
|
|
|
// --------------------------------------------------------
|
|
// Droppable
|
|
// --------------------------------------------------------
|
|
$(el_window_body).droppable({
|
|
accept: '.item',
|
|
greedy: true,
|
|
tolerance: "pointer",
|
|
drop: async function( e, ui ) {
|
|
// check if item was actually dropped on this window
|
|
if($(mouseover_window).attr('data-id') !== $(el_window).attr('data-id'))
|
|
return;
|
|
|
|
// can't drop anything here but a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
|
|
// --------------------------------------------------
|
|
// In case this was dropped on an App window
|
|
// --------------------------------------------------
|
|
if(el_window_app_iframe !== null){
|
|
const items_to_move = []
|
|
|
|
// first item
|
|
items_to_move.push(ui.draggable);
|
|
|
|
// all subsequent items
|
|
const cloned_items = document.getElementsByClassName('item-selected-clone');
|
|
for(let i =0; i<cloned_items.length; i++){
|
|
const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
|
|
if(source_item !== null)
|
|
items_to_move.push(source_item);
|
|
}
|
|
|
|
// sign all items
|
|
const items_to_sign = []
|
|
|
|
// prepare items to sign
|
|
for(let i=0; i<items_to_move.length; i++)
|
|
items_to_sign.push({uid: $(items_to_move[i]).attr('data-uid'), action: 'write', path: $(items_to_move[i]).attr('data-path')});
|
|
|
|
// sign items
|
|
let signatures = await puter.fs.sign(options.app_uuid, items_to_sign);
|
|
signatures = signatures.items;
|
|
signatures = Array.isArray(signatures) ? signatures : [signatures];
|
|
|
|
// prepare items
|
|
let items = [];
|
|
for (let index = 0; index < signatures.length; index++) {
|
|
const item = signatures[index];
|
|
items.push({
|
|
name: item.fsentry_name,
|
|
readURL: item.read_url,
|
|
writeURL: item.write_url,
|
|
metadataURL: item.metadata_url,
|
|
isDirectory: item.fsentry_is_dir,
|
|
path: `~/` + item.path.split('/').slice(2).join('/'),
|
|
uid: item.uid,
|
|
})
|
|
}
|
|
|
|
// send to app iframe
|
|
el_window_app_iframe.contentWindow.postMessage({
|
|
msg: "itemsOpened",
|
|
original_msg_id: $(el_window).attr('data-iframe_msg_uid'),
|
|
items: items,
|
|
}, '*');
|
|
|
|
// if item is dragged over an app iframe, highlight the iframe
|
|
var rect = el_window_app_iframe.getBoundingClientRect();
|
|
|
|
// if mouse is inside iframe, send drag message to iframe
|
|
el_window_app_iframe.contentWindow.postMessage({msg: "drop", x: (mouseX - rect.left), y: (mouseY - rect.top), items: items}, '*');
|
|
|
|
// bring focus to this window
|
|
$(el_window).focusWindow();
|
|
}
|
|
|
|
// if this window is not a directory, cancel drop.
|
|
// why not simply only launch droppable on directories? this is because
|
|
// if a window is not droppable and an item is dropped on it, the app will think
|
|
// it was dropped on desktop.
|
|
if(!options.is_dir){
|
|
return false;
|
|
}
|
|
// If dropped on the same window, do not proceed
|
|
if($(ui.draggable).closest('.item-container').attr('data-path') === $(mouseover_window).attr('data-path') && !e.ctrlKey){
|
|
return;
|
|
}
|
|
// If ctrl is pressed and source is Trashed, cancel whole operation
|
|
if(e.ctrlKey && path.dirname($(ui.draggable).attr('data-path')) === window.trash_path)
|
|
return;
|
|
|
|
// Unselect already selected items
|
|
$(el_window_body).find('.item-selected').removeClass('item-selected')
|
|
|
|
const items_to_move = []
|
|
|
|
// first item
|
|
items_to_move.push(ui.draggable);
|
|
|
|
// all subsequent items
|
|
const cloned_items = document.getElementsByClassName('item-selected-clone');
|
|
for(let i =0; i<cloned_items.length; i++){
|
|
const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
|
|
if(source_item !== null){
|
|
items_to_move.push(source_item);
|
|
}
|
|
}
|
|
|
|
// If ctrl key is down, copy items. Except if target is Trash
|
|
if(e.ctrlKey && $(mouseover_window).attr('data-path') !== window.trash_path){
|
|
// Copy items
|
|
copy_items(items_to_move, $(mouseover_window).attr('data-path'))
|
|
}
|
|
|
|
// if alt key is down, create shortcut items
|
|
else if(e.altKey){
|
|
items_to_move.forEach((item_to_move) => {
|
|
create_shortcut(
|
|
path.basename($(item_to_move).attr('data-path')),
|
|
$(item_to_move).attr('data-is_dir') === '1',
|
|
$(mouseover_window).attr('data-path'),
|
|
null,
|
|
$(item_to_move).attr('data-shortcut_to') === '' ? $(item_to_move).attr('data-uid') : $(item_to_move).attr('data-shortcut_to'),
|
|
$(item_to_move).attr('data-shortcut_to_path') === '' ? $(item_to_move).attr('data-path') : $(item_to_move).attr('data-shortcut_to_path'),
|
|
);
|
|
});
|
|
}
|
|
// otherwise, move items
|
|
else{
|
|
move_items(items_to_move, $(mouseover_window).attr('data-path'));
|
|
}
|
|
},
|
|
over: function(event, ui){
|
|
// Don't do anything if the dragged item is NOT a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
},
|
|
out: function(event, ui){
|
|
// Don't do anything if the dragged item is NOT a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
}
|
|
});
|
|
|
|
// --------------------------------------------------------
|
|
// Double Click on Head
|
|
// double click on a window head will maximize or shrink window
|
|
// only maximize/shrink if window is marked `is_resizable`
|
|
// --------------------------------------------------------
|
|
if(options.is_resizable){
|
|
$(el_window_head).dblclick(function () {
|
|
scale_window(el_window);
|
|
})
|
|
}
|
|
|
|
$(el_window_head).mousedown(function () {
|
|
if(window_is_snapped){
|
|
$( el_window ).draggable( "option", "cursorAt", { left: width_before_snap/2 } );
|
|
}
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Click On The `Scale` Button
|
|
// (the little rectangle in the window head)
|
|
// --------------------------------------------------------
|
|
if(options.is_resizable){
|
|
$(el_window_head_scale_btn).click(function () {
|
|
scale_window(el_window);
|
|
})
|
|
}
|
|
|
|
// --------------------------------------------------------
|
|
// Dragster
|
|
// If a local item is dragged over this window, bring it to front
|
|
// --------------------------------------------------------
|
|
let drag_enter_timeout;
|
|
$(el_window).dragster({
|
|
enter: function (dragsterEvent, event) {
|
|
// make sure to cancel any previous timeouts otherwise the window will be brought to front multiple times
|
|
clearTimeout(drag_enter_timeout);
|
|
// If items are dragged over this window long enough, bring it to front
|
|
drag_enter_timeout = setTimeout(function(){
|
|
// focus window
|
|
$(el_window).focusWindow();
|
|
}, 1400);
|
|
},
|
|
leave: function (dragsterEvent, event) {
|
|
// cancel the timeout for 'bringing window to front'
|
|
clearTimeout(drag_enter_timeout);
|
|
},
|
|
drop: function (dragsterEvent, event) {
|
|
// cancel the timeout for 'bringing window to front'
|
|
clearTimeout(drag_enter_timeout);
|
|
},
|
|
over: function (dragsterEvent, event) {
|
|
// cancel the timeout for 'bringing window to front'
|
|
clearTimeout(drag_enter_timeout);
|
|
}
|
|
});
|
|
|
|
// --------------------------------------------------------
|
|
// Dragster
|
|
// Allow dragging of local files onto this window, if it's is_dir
|
|
// --------------------------------------------------------
|
|
$(el_window_body).dragster({
|
|
enter: function (dragsterEvent, event) {
|
|
if(options.is_dir){
|
|
// remove any context menu that might be open
|
|
$('.context-menu').remove();
|
|
|
|
// highlight this item container
|
|
$(el_window).find('.item-container').addClass('item-container-active');
|
|
}
|
|
},
|
|
leave: function (dragsterEvent, event) {
|
|
if(options.is_dir){
|
|
$(el_window).find('.item-container').removeClass('item-container-active');
|
|
}
|
|
},
|
|
drop: function (dragsterEvent, event) {
|
|
const e = event.originalEvent;
|
|
if(options.is_dir){
|
|
// if files were dropped...
|
|
if(e.dataTransfer?.items?.length>0){
|
|
upload_items(e.dataTransfer.items, $(el_window).attr('data-path'))
|
|
}
|
|
// de-highlight all windows
|
|
$('.item-container').removeClass('item-container-active');
|
|
}
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// --------------------------------------------------------
|
|
// Close button
|
|
// --------------------------------------------------------
|
|
$(`#window-${win_id} > .window-head > .window-close-btn`).click(function () {
|
|
$(el_window).close({
|
|
shrink_to_target: options.on_close_shrink_to_target
|
|
});
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Minimize button
|
|
// --------------------------------------------------------
|
|
$(`#window-${win_id} > .window-head > .window-minimize-btn`).click(function () {
|
|
$(el_window).hideWindow();
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Draggable
|
|
// --------------------------------------------------------
|
|
let width_before_snap = 0;
|
|
let height_before_snap = 0;
|
|
let window_is_snapped = false;
|
|
let snap_placeholder_active = false;
|
|
let snap_trigger_timeout;
|
|
|
|
if(options.is_draggable){
|
|
let window_snap_placeholder = $(
|
|
`<div class="window-snap-placeholder animate__animated animate__zoomIn animate__faster">
|
|
<div class="window-snap-placeholder-inner"></div>
|
|
</div>`
|
|
);
|
|
|
|
$(el_window).draggable({
|
|
start: function(e, ui){
|
|
// if window is snapped, unsnap it and reset its position to where it was before snapping
|
|
if(options.is_resizable && window_is_snapped){
|
|
window_is_snapped = false;
|
|
$(el_window).css({
|
|
'width': width_before_snap,
|
|
'height': height_before_snap + 'px',
|
|
});
|
|
|
|
// if at any point the window's width is "too small", hide the sidebar
|
|
if($(el_window).width() < window_width_threshold_for_sidebar){
|
|
if(width_before_snap >= window_width_threshold_for_sidebar && !sidebar_hidden){
|
|
$(el_window_sidebar).hide();
|
|
}
|
|
sidebar_hidden = true;
|
|
}
|
|
// if at any point the window's width is "big enough", show the sidebar
|
|
else if($(el_window).width() >= window_width_threshold_for_sidebar){
|
|
if(sidebar_hidden){
|
|
$(el_window_sidebar).show();
|
|
}
|
|
sidebar_hidden = false;
|
|
}
|
|
}
|
|
|
|
$(el_window).addClass('window-dragging');
|
|
|
|
// rm window from original_window_position
|
|
window.original_window_position[$(el_window).attr('id')] = undefined;
|
|
|
|
// since jquery draggable sets the z-index automatically we need this to
|
|
// bring windows to the front when they are clicked.
|
|
last_window_zindex = parseInt($(el_window).css('z-index'));
|
|
|
|
//transform causes draggable to start inaccurately
|
|
$(el_window).css('transform', 'none');
|
|
},
|
|
drag: function ( e, ui ) {
|
|
$(el_window_app_iframe).css('pointer-events', 'none');
|
|
$('.window').css('pointer-events', 'none');
|
|
// jqueryui changes the z-index automatically, if the stay_on_top flag is set
|
|
// make sure window stays on top
|
|
$(`.window[data-stay_on_top="true"]`).css('z-index', 999999999)
|
|
|
|
if($(el_window).attr('data-is_maximized') === '1'){
|
|
$(el_window).attr('data-is_maximized', '0');
|
|
// maximize icon
|
|
$(el_window_head_scale_btn).find('img').attr('src', window.icons['scale.svg']);
|
|
}
|
|
// --------------------------------------------------------
|
|
// Snap to screen edges
|
|
// --------------------------------------------------------
|
|
if(options.is_resizable){
|
|
clearTimeout(snap_trigger_timeout);
|
|
// if window is not snapped, check if it should be snapped
|
|
snap_trigger_timeout = setTimeout(function(){
|
|
// if cursor is not in a snap zone, don't snap
|
|
if(!current_active_snap_zone){
|
|
return;
|
|
}
|
|
// if dragging has stopped by now, don't snap
|
|
if(!$(el_window).hasClass('window-dragging')){
|
|
return;
|
|
}
|
|
|
|
// W
|
|
if(!window_is_snapped && current_active_snap_zone === 'w'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'width': '50%',
|
|
'height': desktop_height,
|
|
'top': toolbar_height,
|
|
'left': 0,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
// NW
|
|
else if(!window_is_snapped && current_active_snap_zone === 'nw'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
'top': toolbar_height,
|
|
'left': 0,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
// NE
|
|
else if(!window_is_snapped && current_active_snap_zone ==='ne'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
'top': toolbar_height,
|
|
'left': desktop_width/2,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
// E
|
|
else if(!window_is_snapped && current_active_snap_zone ==='e'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'width': '50%',
|
|
'height': desktop_height,
|
|
'top': toolbar_height,
|
|
'left': 'initial',
|
|
'right': 0,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
// N
|
|
else if(!window_is_snapped && current_active_snap_zone ==='n'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'width': desktop_width,
|
|
'height': desktop_height,
|
|
'top': toolbar_height,
|
|
'left': 0,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
// SW
|
|
else if(!window_is_snapped && current_active_snap_zone ==='sw'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'top': toolbar_height + desktop_height/2,
|
|
'left': 0,
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
// SE
|
|
else if(!window_is_snapped && current_active_snap_zone ==='se'){
|
|
window_snap_placeholder.css({
|
|
'display': 'block',
|
|
'top': toolbar_height + desktop_height/2,
|
|
'left': desktop_width/2,
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
'z-index': last_window_zindex - 1,
|
|
})
|
|
}
|
|
|
|
// If snap placeholder is not active, append it and make it active
|
|
if(!window_is_snapped && !snap_placeholder_active){
|
|
snap_placeholder_active = true;
|
|
$(el_body).append(window_snap_placeholder);
|
|
}
|
|
|
|
// save window size before snap
|
|
width_before_snap = $(el_window).width();
|
|
height_before_snap = $(el_window).height();
|
|
}, 500);
|
|
|
|
// if mouse is not in a snap zone, hide snap placeholder
|
|
if(snap_placeholder_active && !current_active_snap_zone){
|
|
snap_placeholder_active = false;
|
|
window_snap_placeholder.fadeOut(80);
|
|
}
|
|
}
|
|
},
|
|
stop: function () {
|
|
let window_will_snap = false;
|
|
$( el_window ).draggable( "option", "cursorAt", false );
|
|
|
|
$(el_window).removeClass('window-dragging');
|
|
$(el_window).attr({
|
|
'data-orig-top': $(el_window).position().top,
|
|
'data-orig-left': $(el_window).position().left,
|
|
})
|
|
|
|
$(el_window_app_iframe).css('pointer-events', 'all');
|
|
$('.window').css('pointer-events', 'initial');
|
|
|
|
// jqueryui changes the z-index automatically, if the stay_on_top flag is set
|
|
// make sure window stays on top with the initial zindex though
|
|
$(`.window[data-stay_on_top="true"]`).each(function(){
|
|
$(this).css('z-index', $(this).attr('data-initial_zindex'))
|
|
})
|
|
|
|
if(options.is_resizable && snap_placeholder_active && !window_is_snapped){
|
|
window_will_snap = true;
|
|
$(window_snap_placeholder).css('padding', 0);
|
|
|
|
setTimeout(function(){
|
|
// snap to w
|
|
if(current_active_snap_zone === 'w'){
|
|
$(el_window).css({
|
|
'top': toolbar_height,
|
|
'left': 0,
|
|
'width': '50%',
|
|
'height': desktop_height,
|
|
})
|
|
}
|
|
// snap to nw
|
|
else if(current_active_snap_zone === 'nw'){
|
|
$(el_window).css({
|
|
'top': toolbar_height,
|
|
'left': 0,
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
})
|
|
}
|
|
// snap to ne
|
|
else if(current_active_snap_zone === 'ne'){
|
|
$(el_window).css({
|
|
'top': toolbar_height,
|
|
'left': '50%',
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
})
|
|
}
|
|
// snap to sw
|
|
else if(current_active_snap_zone === 'sw'){
|
|
$(el_window).css({
|
|
'top': toolbar_height + desktop_height/2,
|
|
'left': 0,
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
})
|
|
}
|
|
// snap to se
|
|
else if(current_active_snap_zone === 'se'){
|
|
$(el_window).css({
|
|
'top': toolbar_height + desktop_height/2,
|
|
'left': desktop_width/2,
|
|
'width': '50%',
|
|
'height': desktop_height/2,
|
|
})
|
|
}
|
|
// snap to e
|
|
else if(current_active_snap_zone === 'e'){
|
|
$(el_window).css({
|
|
'top': toolbar_height,
|
|
'left': '50%',
|
|
'width': '50%',
|
|
'height': desktop_height,
|
|
})
|
|
}
|
|
// snap to n
|
|
else if(current_active_snap_zone === 'n'){
|
|
scale_window(el_window);
|
|
}
|
|
// snap placeholder is no longer active
|
|
snap_placeholder_active = false;
|
|
// hide snap placeholder
|
|
window_snap_placeholder.css('display', 'none');
|
|
window_snap_placeholder.css('padding', '10px');
|
|
// mark window as snapped
|
|
window_is_snapped = true;
|
|
|
|
// if at any point the window's width is "too small", hide the sidebar
|
|
if($(el_window).width() < window_width_threshold_for_sidebar){
|
|
if(width_before_snap >= window_width_threshold_for_sidebar && !sidebar_hidden){
|
|
$(el_window_sidebar).hide();
|
|
}
|
|
sidebar_hidden = true;
|
|
}
|
|
// if at any point the window's width is "big enough", show the sidebar
|
|
else if($(el_window).width() >= window_width_threshold_for_sidebar){
|
|
if(sidebar_hidden){
|
|
$(el_window_sidebar).show();
|
|
}
|
|
sidebar_hidden = false;
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// if window is dropped below the taskbar, move it up
|
|
// the lst '- 30' is to account for the window head
|
|
if($(el_window).position().top > window.innerHeight - taskbar_height - 30 && !window_will_snap){
|
|
$(el_window).animate({
|
|
top: window.innerHeight - taskbar_height - 60,
|
|
}, 100);
|
|
}
|
|
// if window is dropped too far to the right, move it left
|
|
if($(el_window).position().left > window.innerWidth - 50 && !window_will_snap){
|
|
$(el_window).animate({
|
|
left: window.innerWidth - 50,
|
|
}, 100);
|
|
}
|
|
// if window is dropped too far to the left, move it right
|
|
if(($(el_window).position().left + $(el_window).width() - 150 )< 0 && !window_will_snap){
|
|
$(el_window).animate({
|
|
left: -1 * ($(el_window).width() - 150),
|
|
}, 100);
|
|
}
|
|
},
|
|
handle: `.window-head-draggable` + (options.draggable_body ? `, .window-body` : ``),
|
|
stack: `.window`,
|
|
scroll: false,
|
|
containment: '.window-container',
|
|
});
|
|
}
|
|
|
|
// --------------------------------------------------------
|
|
// Resizable
|
|
// --------------------------------------------------------
|
|
if(options.is_resizable){
|
|
if($(el_window).width() < window_width_threshold_for_sidebar){
|
|
$(el_window_sidebar).hide();
|
|
sidebar_hidden = true;
|
|
}
|
|
|
|
$(el_window).resizable({
|
|
handles: "n, ne, nw, e, s, se, sw, w",
|
|
minWidth: 200,
|
|
minHeight: 200,
|
|
start: function(){
|
|
$(el_window_app_iframe).css('pointer-events', 'none');
|
|
$('.window').css('pointer-events', 'none');
|
|
},
|
|
resize: function (e, ui) {
|
|
// if at any point the window's width is "too small", hide the sidebar
|
|
if(ui.size.width < window_width_threshold_for_sidebar){
|
|
if(ui.originalSize.width >= window_width_threshold_for_sidebar && !sidebar_hidden){
|
|
$(el_window_sidebar).hide();
|
|
}
|
|
sidebar_hidden = true;
|
|
}
|
|
// if at any point the window's width is "big enough", show the sidebar
|
|
else if(ui.size.width >= window_width_threshold_for_sidebar){
|
|
if(sidebar_hidden){
|
|
$(el_window_sidebar).show();
|
|
}
|
|
sidebar_hidden = false;
|
|
}
|
|
|
|
// when resizing the top of the window, make sure the window head is not hidden behind the toolbar
|
|
if($(el_window).position().top < toolbar_height){
|
|
var difference = toolbar_height - $(el_window).position().top;
|
|
$(el_window).css({
|
|
'top': toolbar_height,
|
|
'height': ui.size.height - difference // Reduce the height by the difference
|
|
});
|
|
// don't resize
|
|
return false;
|
|
}
|
|
},
|
|
stop: function () {
|
|
$(el_window_app_iframe).css('pointer-events', 'all');
|
|
$('.window').css('pointer-events', 'initial');
|
|
$(el_window_sidebar).resizable("option", "maxWidth", el_window.getBoundingClientRect().width/2);
|
|
$(el_window).attr({
|
|
'data-orig-width': $(el_window).width(),
|
|
'data-orig-height': $(el_window).height(),
|
|
})
|
|
// maximize icon
|
|
$(el_window_head_scale_btn).find('img').attr('src', window.icons['scale.svg']);
|
|
$(el_window).attr('data-is_maximized', '0');
|
|
},
|
|
containment: 'parent',
|
|
})
|
|
}
|
|
|
|
let side = $(el_window).find('.window-sidebar')
|
|
side.resizable({
|
|
handles: "e,w",
|
|
minWidth: 100,
|
|
maxWidth: el_window.getBoundingClientRect().width/2,
|
|
start: function(){
|
|
$(el_window_app_iframe).css('pointer-events', 'none');
|
|
$('.window').css('pointer-events', 'none');
|
|
},
|
|
stop: function () {
|
|
$(el_window_app_iframe).css('pointer-events', 'all');
|
|
$('.window').css('pointer-events', 'initial');
|
|
const new_width = $(el_window_sidebar).width();
|
|
// save new width in the cloud, to user's settings
|
|
setItem({key: "window_sidebar_width", value: new_width});
|
|
// save new width locally, to window object
|
|
window.window_sidebar_width = new_width;
|
|
}
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Alt/Option + Shift + click on window head will open a prompt to enter iframe url
|
|
// --------------------------------------------------------
|
|
$(el_window_head).on('click', function(e){
|
|
if(e.altKey && e.shiftKey && el_window_app_iframe !== null){
|
|
let url = prompt("Enter URL", options.iframe_url);
|
|
if(url){
|
|
$(el_window_app_iframe).attr('src', url);
|
|
}
|
|
}
|
|
})
|
|
// --------------------------------------------------------
|
|
// Head Context Menu
|
|
// --------------------------------------------------------
|
|
$(el_window_head).bind("contextmenu taphold", function (event) {
|
|
// dimiss taphold on regular devices
|
|
if(event.type==='taphold' && !isMobile.phone && !isMobile.tablet)
|
|
return;
|
|
|
|
const $target = $(event.target);
|
|
|
|
// Cases in which native ctx menu should be preserved
|
|
if(options.allow_native_ctxmenu || $target.hasClass('allow-native-ctxmenu') || $target.is('input') || $target.is('textarea'))
|
|
return true;
|
|
|
|
// custom ctxmenu for all other elements
|
|
event.preventDefault();
|
|
|
|
// If window has no head, don't show ctxmenu
|
|
if(!options.has_head)
|
|
return;
|
|
|
|
let menu_items = [];
|
|
// -------------------------------------------
|
|
// Maximize/Minimize
|
|
// -------------------------------------------
|
|
if(options.is_resizable){
|
|
menu_items.push({
|
|
html: $(el_window).attr('data-is_maximized') === '0' ? 'Maximize' : 'Restore',
|
|
onClick: function(){
|
|
// maximize window
|
|
scale_window(el_window);
|
|
}
|
|
});
|
|
menu_items.push({
|
|
html: 'Minimize',
|
|
onClick: function(){
|
|
$(el_window).hideWindow();
|
|
}
|
|
});
|
|
// -
|
|
menu_items.push('-')
|
|
}
|
|
// -------------------------------------------
|
|
// Close
|
|
// -------------------------------------------
|
|
menu_items.push({
|
|
html: 'Close',
|
|
onClick: function(){
|
|
$(el_window).close();
|
|
}
|
|
});
|
|
|
|
UIContextMenu({
|
|
parent_element: el_window_head,
|
|
items: menu_items,
|
|
parent_id: win_id,
|
|
})
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Body Context Menu
|
|
// --------------------------------------------------------
|
|
$(el_window_body).bind("contextmenu taphold", function (event) {
|
|
// dimiss taphold on regular devices
|
|
if(event.type==='taphold' && !isMobile.phone && !isMobile.tablet)
|
|
return;
|
|
|
|
const $target = $(event.target);
|
|
|
|
// Cases in which native ctx menu should be preserved
|
|
if(options.allow_native_ctxmenu || $target.hasClass('allow-native-ctxmenu') || $target.is('input') || $target.is('textarea'))
|
|
return true
|
|
|
|
// custom ctxmenu for all other elements
|
|
event.preventDefault();
|
|
if(options.allow_context_menu && event.target === el_window_body){
|
|
// Regular directories
|
|
if($(el_window).attr('data-path') !== trash_path){
|
|
UIContextMenu({
|
|
parent_element: el_window_body,
|
|
items: [
|
|
// -------------------------------------------
|
|
// Sort by
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('sort_by'),
|
|
items: [
|
|
{
|
|
html: i18n('name'),
|
|
icon: $(el_window).attr('data-sort_by') === 'name' ? '✓' : '',
|
|
onClick: async function(){
|
|
sort_items(el_window_body, 'name', $(el_window).attr('data-sort_order'));
|
|
set_sort_by($(el_window).attr('data-uid'), 'name', $(el_window).attr('data-sort_order'))
|
|
}
|
|
},
|
|
{
|
|
html: i18n('date_modified'),
|
|
icon: $(el_window).attr('data-sort_by') === 'modified' ? '✓' : '',
|
|
onClick: async function(){
|
|
sort_items(el_window_body, 'modified', $(el_window).attr('data-sort_order'));
|
|
set_sort_by($(el_window).attr('data-uid'), 'modified', $(el_window).attr('data-sort_order'))
|
|
}
|
|
},
|
|
{
|
|
html: i18n('type'),
|
|
icon: $(el_window).attr('data-sort_by') === 'type' ? '✓' : '',
|
|
onClick: async function(){
|
|
sort_items(el_window_body, 'type', $(el_window).attr('data-sort_order'));
|
|
set_sort_by($(el_window).attr('data-uid'), 'type', $(el_window).attr('data-sort_order'))
|
|
}
|
|
},
|
|
{
|
|
html: i18n('size'),
|
|
icon: $(el_window).attr('data-sort_by') === 'size' ? '✓' : '',
|
|
onClick: async function(){
|
|
sort_items(el_window_body, 'size', $(el_window).attr('data-sort_order'));
|
|
set_sort_by($(el_window).attr('data-uid'), 'size', $(el_window).attr('data-sort_order'))
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// -
|
|
// -------------------------------------------
|
|
'-',
|
|
{
|
|
html: i18n('ascending'),
|
|
icon: $(el_window).attr('data-sort_order') === 'asc' ? '✓' : '',
|
|
onClick: async function(){
|
|
const sort_by = $(el_window).attr('data-sort_by')
|
|
sort_items(el_window_body, sort_by, 'asc');
|
|
set_sort_by($(el_window).attr('data-uid'), sort_by, 'asc')
|
|
}
|
|
},
|
|
{
|
|
html: i18n('descending'),
|
|
icon: $(el_window).attr('data-sort_order') === 'desc' ? '✓' : '',
|
|
onClick: async function(){
|
|
const sort_by = $(el_window).attr('data-sort_by')
|
|
sort_items(el_window_body, sort_by, 'desc');
|
|
set_sort_by($(el_window).attr('data-uid'), sort_by, 'desc')
|
|
}
|
|
},
|
|
|
|
]
|
|
},
|
|
// -------------------------------------------
|
|
// Refresh
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('refresh'),
|
|
onClick: function(){
|
|
refresh_item_container(el_window_body, options);
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// Show/Hide hidden files
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('show_hidden'),
|
|
icon: window.user_preferences.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'));
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// -
|
|
// -------------------------------------------
|
|
'-',
|
|
// -------------------------------------------
|
|
// New
|
|
// -------------------------------------------
|
|
new_context_menu_item($(el_window).attr('data-path'), el_window_body),
|
|
// -------------------------------------------
|
|
// -
|
|
// -------------------------------------------
|
|
'-',
|
|
// -------------------------------------------
|
|
// Paste
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('paste'),
|
|
disabled: (clipboard.length === 0 || $(el_window).attr('data-path') === '/') ? true : false,
|
|
onClick: function(){
|
|
if(clipboard_op === 'copy')
|
|
copy_clipboard_items($(el_window).attr('data-path'), el_window_body);
|
|
else if(clipboard_op === 'move')
|
|
move_clipboard_items(el_window_body)
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// Undo
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('undo'),
|
|
disabled: actions_history.length > 0 ? false : true,
|
|
onClick: function(){
|
|
undo_last_action();
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// Upload Here
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('upload_here'),
|
|
disabled: $(el_window).attr('data-path') === '/' ? true : false,
|
|
onClick: function(){
|
|
init_upload_using_dialog(el_window_body, $(el_window).attr('data-path') + '/');
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// -
|
|
// -------------------------------------------
|
|
'-',
|
|
// -------------------------------------------
|
|
// Publish As Website
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('publish_as_website'),
|
|
disabled: !options.is_dir,
|
|
onClick: async function () {
|
|
if (window.require_email_verification_to_publish_website) {
|
|
if (window.user.is_temp &&
|
|
!await UIWindowSaveAccount({
|
|
send_confirmation_code: true,
|
|
message: i18n('save_account_to_publish_website'),
|
|
window_options: {
|
|
backdrop: true,
|
|
close_on_backdrop_click: false,
|
|
}
|
|
}))
|
|
return;
|
|
else if (!window.user.email_confirmed && !await UIWindowEmailConfirmationRequired())
|
|
return;
|
|
}
|
|
UIWindowPublishWebsite($(el_window).attr('data-uid'), $(el_window).attr('data-name'), $(el_window).attr('data-path'));
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// Deploy as App
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('deploy_as_app'),
|
|
disabled: !options.is_dir,
|
|
onClick: async function () {
|
|
launch_app({
|
|
name: 'dev-center',
|
|
file_path: $(el_window).attr('data-path'),
|
|
file_uid: $(el_window).attr('data-uid'),
|
|
params: {
|
|
source_path: $(el_window).attr('data-path'),
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// -------------------------------------------
|
|
// -
|
|
// -------------------------------------------
|
|
'-',
|
|
// -------------------------------------------
|
|
// Properties
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('properties'),
|
|
onClick: function(){
|
|
let window_height = 500;
|
|
let window_width = 450;
|
|
|
|
let left = mouseX;
|
|
left -= 200;
|
|
left = left > (window.innerWidth - window_width)? (window.innerWidth - window_width) : left;
|
|
|
|
let top = mouseY;
|
|
top = top > (window.innerHeight - (window_height + window.taskbar_height + window.toolbar_height))? (window.innerHeight - (window_height + window.taskbar_height + window.toolbar_height)) : top;
|
|
|
|
UIWindowItemProperties(options.title, options.path, options.uid, left, top, window_width, window_height);
|
|
}
|
|
},
|
|
]
|
|
});
|
|
}
|
|
// Trash conext menu
|
|
else{
|
|
UIContextMenu({
|
|
parent_element: el_window_body,
|
|
items: [
|
|
// -------------------------------------------
|
|
// Empty Trash
|
|
// -------------------------------------------
|
|
{
|
|
html: i18n('empty_trash'),
|
|
disabled: false,
|
|
onClick: async function(){
|
|
const alert_resp = await UIAlert({
|
|
message: i18n('empty_trash_confirmation'),
|
|
buttons:[
|
|
{
|
|
label: i18n('yes'),
|
|
value: 'yes',
|
|
type: 'primary',
|
|
},
|
|
{
|
|
label: i18n('no'),
|
|
value: 'no',
|
|
},
|
|
]
|
|
})
|
|
if(alert_resp === 'no')
|
|
return;
|
|
|
|
// todo this has to be case-insensitive but the `i` selector doesn't work on ^=
|
|
$(`.item[data-path^="${html_encode(trash_path)}/"]`).each(function(){
|
|
delete_item(this);
|
|
})
|
|
// update other clients
|
|
if(window.socket){
|
|
window.socket.emit('trash.is_empty', {is_empty: true});
|
|
}
|
|
// use the 'empty trash' icon
|
|
$(`.item[data-path="${html_encode(trash_path)}" i], .item[data-shortcut_to_path="${html_encode(trash_path)}" i]`).find('.item-icon > img').attr('src', window.icons['trash.svg']);
|
|
}
|
|
},
|
|
]
|
|
});
|
|
}
|
|
}
|
|
});
|
|
// --------------------------------------------------------
|
|
// Head Context Menu
|
|
// --------------------------------------------------------
|
|
if(options.has_head){
|
|
$(el_window_head).bind("contextmenu taphold", function (event) {
|
|
event.preventDefault();
|
|
return false;
|
|
})
|
|
}
|
|
|
|
// --------------------------------------------------------
|
|
// Droppable sidebar items
|
|
// --------------------------------------------------------
|
|
$(el_window).find('.window-sidebar-item').each(function (index){
|
|
// todo only continue if this item is a dir
|
|
const el_item = this;
|
|
$(el_item).dragster({
|
|
enter: function (dragsterEvent, event) {
|
|
$(el_item).addClass('item-selected');
|
|
},
|
|
leave: function (dragsterEvent, event) {
|
|
$(el_item).removeClass('item-selected');
|
|
},
|
|
drop: function (dragsterEvent, event) {
|
|
const e = event.originalEvent;
|
|
$(el_item).removeClass('item-selected');
|
|
// if files were dropped...
|
|
if(e.dataTransfer?.items?.length > 0){
|
|
upload_items(e.dataTransfer.items, $(el_item).attr('data-path'))
|
|
}
|
|
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
})
|
|
|
|
//set styles
|
|
$(el_window_body).css(options.body_css);
|
|
|
|
// is fullpage?
|
|
if(options.is_fullpage){
|
|
$(el_window).hide()
|
|
setTimeout(function(){
|
|
enter_fullpage_mode(el_window);
|
|
$(el_window).show()
|
|
}, 5);
|
|
}
|
|
|
|
return el_window;
|
|
}
|
|
|
|
function delete_window_element (el_window){
|
|
// if this is the active element, set it to null
|
|
if(active_element === el_window){
|
|
active_element = null;
|
|
}
|
|
// remove DOM element
|
|
$(el_window).remove();
|
|
// if no other windows open, reset window_counter
|
|
// resetting window counter is important so that next window opens at the center of the screen
|
|
if($('.window').length === 0)
|
|
window.window_counter = 0;
|
|
}
|
|
|
|
|
|
$(document).on('click', '.window-sidebar-item', async function(e){
|
|
const el_window = $(this).closest('.window');
|
|
const parent_win_id = $(el_window).attr('data-id');
|
|
const item_path = $(this).attr('data-path');
|
|
|
|
// ctrl/cmd + click will open in new window
|
|
if(e.metaKey || e.ctrlKey){
|
|
UIWindow({
|
|
path: item_path,
|
|
title: path.basename(item_path),
|
|
icon: await item_icon({is_dir: true, path: item_path}),
|
|
// todo
|
|
// uid: $(el_item).attr('data-uid'),
|
|
is_dir: true,
|
|
// todo
|
|
// sort_by: $(el_item).attr('data-sort_by'),
|
|
app: 'explorer',
|
|
// top: options.maximized ? 0 : undefined,
|
|
// left: options.maximized ? 0 : undefined,
|
|
// height: options.maximized ? `calc(100% - ${window.taskbar_height + 1}px)` : undefined,
|
|
// width: options.maximized ? `100%` : undefined,
|
|
});
|
|
}
|
|
// update window path only if it's a new path AND no ctrl/cmd key pressed
|
|
else if(item_path !== $(el_window).attr('data-path')){
|
|
window_nav_history[parent_win_id] = window_nav_history[parent_win_id].slice(0, window_nav_history_current_position[parent_win_id] + 1);
|
|
window_nav_history[parent_win_id].push(item_path);
|
|
window_nav_history_current_position[parent_win_id]++;
|
|
|
|
update_window_path(el_window, item_path);
|
|
}
|
|
})
|
|
|
|
$(document).on('contextmenu', '.window-sidebar', function(e){
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
})
|
|
|
|
$(document).on('contextmenu taphold', '.window-sidebar-item', function(event){
|
|
// dismiss taphold on regular devices
|
|
if(event.type==='taphold' && !isMobile.phone && !isMobile.tablet)
|
|
return;
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
// todo
|
|
// $(this).addClass('window-sidebar-item-highlighted');
|
|
const item = this;
|
|
UIContextMenu({
|
|
parent_element: $(this),
|
|
items: [
|
|
//--------------------------------------------------
|
|
// Open
|
|
//--------------------------------------------------
|
|
{
|
|
html: "Open",
|
|
onClick: function(){
|
|
$(item).trigger('click');
|
|
}
|
|
},
|
|
//--------------------------------------------------
|
|
// Open in New Window
|
|
//--------------------------------------------------
|
|
{
|
|
html: "Open in New Window",
|
|
onClick: async function(){
|
|
let item_path = $(item).attr('data-path');
|
|
|
|
UIWindow({
|
|
path: item_path,
|
|
title: path.basename(item_path),
|
|
icon: await item_icon({is_dir: true, path: item_path}),
|
|
// todo
|
|
// uid: $(el_item).attr('data-uid'),
|
|
is_dir: true,
|
|
// todo
|
|
// sort_by: $(el_item).attr('data-sort_by'),
|
|
app: 'explorer',
|
|
// top: options.maximized ? 0 : undefined,
|
|
// left: options.maximized ? 0 : undefined,
|
|
// height: options.maximized ? `calc(100% - ${window.taskbar_height + 1}px)` : undefined,
|
|
// width: options.maximized ? `100%` : undefined,
|
|
});
|
|
}
|
|
}
|
|
]
|
|
});
|
|
return false;
|
|
})
|
|
|
|
$(document).on('dblclick', '.window .ui-resizable-handle', function(e){
|
|
let el_window = $(this).closest('.window');
|
|
// bottom
|
|
if($(this).hasClass('ui-resizable-s')){
|
|
let height = window.innerHeight - $(el_window).position().top - window.taskbar_height -1;
|
|
$(el_window).height(height);
|
|
}
|
|
|
|
// top
|
|
else if($(this).hasClass('ui-resizable-n')){
|
|
let height = $(el_window).height() + $(el_window).position().top - window.toolbar_height;
|
|
$(el_window).css({
|
|
height: height,
|
|
top: window.toolbar_height,
|
|
});
|
|
}
|
|
// right
|
|
else if($(this).hasClass('ui-resizable-e')){
|
|
let width = window.innerWidth - $(el_window).position().left;
|
|
$(el_window).css({
|
|
width: width,
|
|
});
|
|
}
|
|
// left
|
|
else if($(this).hasClass('ui-resizable-w')){
|
|
let width = $(el_window).width() + $(el_window).position().left;
|
|
$(el_window).css({
|
|
width: width,
|
|
left: 0
|
|
});
|
|
}
|
|
// bottom left
|
|
else if($(this).hasClass('ui-resizable-sw')){
|
|
let width = $(el_window).width() + $(el_window).position().left;
|
|
let height = window.innerHeight - $(el_window).position().top - window.taskbar_height -1;
|
|
$(el_window).css({
|
|
width: width,
|
|
height: height,
|
|
left: 0
|
|
});
|
|
}
|
|
// bottom right
|
|
else if($(this).hasClass('ui-resizable-se')){
|
|
let width = window.innerWidth - $(el_window).position().left;
|
|
let height = window.innerHeight - $(el_window).position().top - window.taskbar_height -1;
|
|
$(el_window).css({
|
|
width: width,
|
|
height: height,
|
|
});
|
|
}
|
|
// top right
|
|
else if($(this).hasClass('ui-resizable-ne')){
|
|
let width = window.innerWidth - $(el_window).position().left;
|
|
let height = $(el_window).height() + $(el_window).position().top - window.toolbar_height;
|
|
$(el_window).css({
|
|
width: width,
|
|
height: height,
|
|
top: window.toolbar_height,
|
|
});
|
|
}
|
|
// top left
|
|
else if($(this).hasClass('ui-resizable-nw')){
|
|
let width = $(el_window).width() + $(el_window).position().left;
|
|
let height = $(el_window).height() + $(el_window).position().top - window.toolbar_height;
|
|
$(el_window).css({
|
|
width: width,
|
|
height: height,
|
|
top: window.toolbar_height,
|
|
left:0,
|
|
});
|
|
}
|
|
|
|
})
|
|
|
|
$(document).on('click', '.window-navbar-path', function(e){
|
|
if(!$(e.target).hasClass('window-navbar-path'))
|
|
return;
|
|
|
|
$(e.target).hide();
|
|
$(e.target).siblings('.window-navbar-path-input').show().select();
|
|
})
|
|
$(document).on('blur', '.window-navbar-path-input', function(e){
|
|
$(e.target).hide();
|
|
$(e.target).siblings('.window-navbar-path').show().select();
|
|
})
|
|
|
|
$(document).on('keyup', '.window-navbar-path-input', function(e){
|
|
if (e.key === 'Enter' || e.keyCode === 13) {
|
|
update_window_path($(e.target).closest('.window'), $(e.target).val());
|
|
$(e.target).hide();
|
|
$(e.target).siblings('.window-navbar-path').show().select();
|
|
}
|
|
})
|
|
|
|
|
|
$(document).on('click', '.window-navbar-path-dirname', function(e){
|
|
const $el_parent_window = $(this).closest('.window');
|
|
const parent_win_id = $($el_parent_window).attr('data-id');
|
|
|
|
// open in new window
|
|
if(e.metaKey || e.ctrlKey){
|
|
const dirpath = $(this).attr('data-path');
|
|
UIWindow({
|
|
path: dirpath,
|
|
title: dirpath === '/' ? root_dirname : path.basename(dirpath),
|
|
icon: window.icons['folder.svg'],
|
|
// uid: $(el_item).attr('data-uid'),
|
|
is_dir: true,
|
|
app: 'explorer',
|
|
});
|
|
}
|
|
// only change dir if target is not the same as current path
|
|
else if($el_parent_window.attr('data-path') !== $(this).attr('data-path')){
|
|
window_nav_history[parent_win_id] = window_nav_history[parent_win_id].slice(0, window_nav_history_current_position[parent_win_id]+1);
|
|
window_nav_history[parent_win_id].push($(this).attr('data-path'));
|
|
window_nav_history_current_position[parent_win_id] = window_nav_history[parent_win_id].length - 1;
|
|
update_window_path($el_parent_window, $(this).attr('data-path'));
|
|
}
|
|
})
|
|
|
|
$(document).on('contextmenu taphold', '.window-navbar', function(event){
|
|
// don't disable system ctxmenu on the address bar input
|
|
if($(event.target).hasClass('window-navbar-path-input'))
|
|
return;
|
|
|
|
// dismiss taphold on regular devices
|
|
if(event.type==='taphold' && !isMobile.phone && !isMobile.tablet)
|
|
return;
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
})
|
|
|
|
$(document).on('contextmenu taphold', '.window-navbar-path-dirname', function(event){
|
|
// dismiss taphold on regular devices
|
|
if(event.type==='taphold' && !isMobile.phone && !isMobile.tablet)
|
|
return;
|
|
|
|
event.preventDefault();
|
|
const menu_items = [];
|
|
const el = this;
|
|
// -------------------------------------------
|
|
// Open
|
|
// -------------------------------------------
|
|
menu_items.push({
|
|
html: 'Open',
|
|
onClick: ()=>{
|
|
$(this).trigger('click');
|
|
}
|
|
});
|
|
// -------------------------------------------
|
|
// Open in New Window
|
|
// (only if the item is on a window)
|
|
// -------------------------------------------
|
|
menu_items.push({
|
|
html: 'Open in New Window',
|
|
onClick: function(){
|
|
UIWindow({
|
|
path: $(el).attr('data-path'),
|
|
title: $(el).attr('data-path') === '/' ? root_dirname : path.basename($(el).attr('data-path')),
|
|
icon: window.icons['folder.svg'],
|
|
uid: $(el).attr('data-uid'),
|
|
is_dir: true,
|
|
app: 'explorer',
|
|
});
|
|
}
|
|
});
|
|
// -------------------------------------------
|
|
// -
|
|
// -------------------------------------------
|
|
menu_items.push('-'),
|
|
// -------------------------------------------
|
|
// Paste
|
|
// -------------------------------------------
|
|
menu_items.push({
|
|
html: "Paste",
|
|
disabled: clipboard.length > 0 ? false : true,
|
|
onClick: function(){
|
|
if(clipboard_op === 'copy')
|
|
copy_clipboard_items($(el).attr('data-path'), null);
|
|
else if(clipboard_op === 'move')
|
|
move_clipboard_items(null, $(el).attr('data-path'))
|
|
}
|
|
})
|
|
|
|
UIContextMenu({
|
|
parent_element: $(this),
|
|
items: menu_items
|
|
});
|
|
})
|
|
|
|
// if the click is on the mask, bring focus to the active child window
|
|
$(document).on('click', '.window-disable-mask', async function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
})
|
|
|
|
// --------------------------------------------------------
|
|
// Navbar Dir Droppable
|
|
// --------------------------------------------------------
|
|
window.navbar_path_droppable = (el_window)=>{
|
|
$(el_window).find('.window-navbar-path-dirname').droppable({
|
|
accept: '.item',
|
|
tolerance: 'pointer',
|
|
drop: function( event, ui ) {
|
|
// check if item was actually dropped on this navbar path
|
|
if($(mouseover_window).attr('data-id') !== $(el_window).attr('data-id')){
|
|
return;
|
|
}
|
|
const items_to_move = []
|
|
|
|
// first item
|
|
items_to_move.push(ui.draggable);
|
|
|
|
// all subsequent items
|
|
const cloned_items = document.getElementsByClassName('item-selected-clone');
|
|
for(let i =0; i<cloned_items.length; i++){
|
|
const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
|
|
if(source_item !== null)
|
|
items_to_move.push(source_item);
|
|
}
|
|
|
|
// if alt key is down, create shortcut items
|
|
if(event.altKey){
|
|
items_to_move.forEach((item_to_move) => {
|
|
create_shortcut(
|
|
path.basename($(item_to_move).attr('data-path')),
|
|
$(item_to_move).attr('data-is_dir') === '1',
|
|
$(this).attr('data-path'),
|
|
null,
|
|
$(item_to_move).attr('data-shortcut_to') === '' ? $(item_to_move).attr('data-uid') : $(item_to_move).attr('data-shortcut_to'),
|
|
$(item_to_move).attr('data-shortcut_to_path') === '' ? $(item_to_move).attr('data-path') : $(item_to_move).attr('data-shortcut_to_path'),
|
|
);
|
|
});
|
|
}
|
|
// move items
|
|
else{
|
|
move_items(items_to_move, $(this).attr('data-path'));
|
|
}
|
|
|
|
$('.item-container').droppable('enable')
|
|
$(this).removeClass('window-navbar-path-dirname-active');
|
|
|
|
return false;
|
|
},
|
|
over: function(event, ui){
|
|
// check if item was actually hovered over this window
|
|
if($(mouseover_window).attr('data-id') !== $(el_window).attr('data-id'))
|
|
return;
|
|
|
|
// Don't do anything if the dragged item is NOT a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
|
|
// highlight this dirname
|
|
$(this).addClass('window-navbar-path-dirname-active');
|
|
$('.ui-draggable-dragging').css('opacity', 0.2)
|
|
$('.item-selected-clone').css('opacity', 0.2)
|
|
|
|
// disable all window bodies
|
|
$('.item-container').droppable( 'disable' )
|
|
},
|
|
out: function(event, ui){
|
|
// Don't do anything if the dragged element is NOT a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
|
|
// unselect directory if item is dragged out
|
|
$(this).removeClass('window-navbar-path-dirname-active');
|
|
$('.ui-draggable-dragging').css('opacity', 'initial')
|
|
$('.item-selected-clone').css('opacity', 'initial')
|
|
|
|
$('.item-container').droppable( 'enable' )
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Constructs a XSS-safe string that represents a navigation bar path.
|
|
* The result is a string with HTML span elements for each directory in the path, each accompanied by a separator icon.
|
|
* Each span element has a `data-path` attribute holding the encoded path to that directory, and contains the encoded directory name as text.
|
|
* The root directory name is a constant defined in globals.js, represented as 'root_dirname'.
|
|
*
|
|
* @param {string} abs_path - The absolute path to be displayed in the navigation bar. It should be a string with directories separated by slashes ('/').
|
|
*
|
|
* @returns {string} A string of HTML spans and separators, each span representing a directory in the navigation bar.
|
|
*
|
|
*/
|
|
window.navbar_path = (abs_path)=>{
|
|
const dirs = (abs_path === '/' ? [''] : abs_path.split('/'));
|
|
const dirpaths = (abs_path === '/' ? ['/'] : [])
|
|
const path_seperator_html = `<img class="path-seperator" draggable="false" src="${html_encode(window.icons['triangle-right.svg'])}">`;
|
|
if(dirs.length > 1){
|
|
for(let i=0; i<dirs.length; i++){
|
|
dirpaths[i] = '';
|
|
for(let j=1; j<=i; j++){
|
|
dirpaths[i] += '/'+dirs[j];
|
|
}
|
|
}
|
|
}
|
|
let str = `${path_seperator_html}<span class="window-navbar-path-dirname" data-path="${html_encode('/')}">${html_encode(window.root_dirname)}</span>`;
|
|
for(let k=1; k<dirs.length; k++){
|
|
str += `${path_seperator_html}<span class="window-navbar-path-dirname" data-path="${html_encode(dirpaths[k])}">${dirs[k] === 'Trash' ? i18n('trash') : html_encode(dirs[k])}</span>`;
|
|
}
|
|
return str;
|
|
}
|
|
|
|
window.update_window_path = async function(el_window, target_path){
|
|
const win_id = $(el_window).attr('data-id');
|
|
const el_window_navbar_forward_btn = $(el_window).find('.window-navbar-btn-forward');
|
|
const el_window_navbar_back_btn = $(el_window).find('.window-navbar-btn-back');
|
|
const el_window_navbar_up_btn = $(el_window).find('.window-navbar-btn-up');
|
|
const el_window_body = $(el_window).find('.window-body');
|
|
const el_window_item_container = $(el_window).find('.item-container');
|
|
const el_window_navbar_path_input = $(el_window).find('.window-navbar-path-input');
|
|
const is_dir = ($(el_window).attr('data-is_dir') === '1' || $(el_window).attr('data-is_dir') === 'true');
|
|
const old_path = $(el_window).attr('data-path');
|
|
|
|
// update sidebar items' active status
|
|
$(el_window).find(`.window-sidebar-item`).removeClass('window-sidebar-item-active');
|
|
$(el_window).find(`.window-sidebar-item[data-path="${html_encode(target_path)}"]`).addClass('window-sidebar-item-active');
|
|
|
|
// clean
|
|
$(el_window).find('.explore-table-headers-th > .header-sort-icon').html('');
|
|
|
|
if(is_dir){
|
|
// if nav history for this window is empty, disable forward btn
|
|
if(window_nav_history[win_id] && window_nav_history[win_id].length - 1 === window_nav_history_current_position[win_id])
|
|
$(el_window_navbar_forward_btn).addClass('window-navbar-btn-disabled');
|
|
// ... else, enable forawrd btn
|
|
else
|
|
$(el_window_navbar_forward_btn).removeClass('window-navbar-btn-disabled');
|
|
|
|
// disable back button if path is root
|
|
if(window_nav_history_current_position[win_id] === 0)
|
|
$(el_window_navbar_back_btn).addClass('window-navbar-btn-disabled');
|
|
// ... enable back btn in all other cases
|
|
else
|
|
$(el_window_navbar_back_btn).removeClass('window-navbar-btn-disabled');
|
|
|
|
// disabled Up button if this is root
|
|
if(target_path === '/')
|
|
$(el_window_navbar_up_btn).addClass('window-navbar-btn-disabled');
|
|
// ... enable back btn in all other cases
|
|
else
|
|
$(el_window_navbar_up_btn).removeClass('window-navbar-btn-disabled');
|
|
|
|
$(el_window_item_container).attr('data-path', target_path);
|
|
$(el_window).find('.window-navbar-path').html(navbar_path(target_path, window.user.username));
|
|
|
|
// empty body to be filled with the results of /readdir
|
|
$(el_window_body).find('.item').removeItems()
|
|
|
|
// add the 'Detail View' table header
|
|
if($(el_window).find('.explore-table-headers').length === 0)
|
|
$(el_window_body).prepend(window.explore_table_headers());
|
|
|
|
// 'Detail View' table header is hidden by default
|
|
$(el_window).find('.explore-table-headers').hide();
|
|
|
|
// system directories with custom icons and predefined names
|
|
if(target_path === window.desktop_path){
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['folder-desktop.svg']);
|
|
$(el_window).find('.window-head-title').text('Desktop')
|
|
}else if (target_path === window.home_path){
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['folder-home.svg']);
|
|
$(el_window).find('.window-head-title').text('Home')
|
|
}else if (target_path === window.docs_path){
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['folder-documents.svg']);
|
|
$(el_window).find('.window-head-title').text('Documents')
|
|
}else if (target_path === window.videos_path){
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['folder-videos.svg']);
|
|
$(el_window).find('.window-head-title').text('Videos')
|
|
}else if (target_path === window.pictures_path){
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['folder-pictures.svg']);
|
|
$(el_window).find('.window-head-title').text('Pictures')
|
|
}// root folder of a shared user?
|
|
else if((target_path.split('/').length - 1) === 1 && target_path !== '/'+window.user.username)
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['shared.svg']);
|
|
else
|
|
$(el_window).find('.window-head-icon').attr('src', window.icons['folder.svg']);
|
|
}
|
|
|
|
$(el_window).attr('data-path', html_encode(target_path));
|
|
$(el_window).attr('data-name', html_encode(path.basename(target_path)));
|
|
|
|
// /stat
|
|
if(target_path !== '/'){
|
|
try{
|
|
puter.fs.stat(target_path, function(fsentry){
|
|
$(el_window).removeClass('window-' + $(el_window).attr('data-uid'));
|
|
$(el_window).addClass('window-' + fsentry.id);
|
|
$(el_window).attr('data-uid', fsentry.id);
|
|
$(el_window).attr('data-sort_by', fsentry.sort_by ?? 'name');
|
|
$(el_window).attr('data-sort_order', fsentry.sort_order ?? 'asc');
|
|
$(el_window).attr('data-layout', fsentry.layout ?? 'icons');
|
|
$(el_window_item_container).attr('data-uid', fsentry.id);
|
|
// title
|
|
if (target_path === window.home_path)
|
|
$(el_window).find('.window-head-title').text('Home')
|
|
else
|
|
$(el_window).find('.window-head-title').text(fsentry.name);
|
|
// data-name
|
|
$(el_window).attr('data-name', html_encode(fsentry.name));
|
|
// data-path
|
|
$(el_window).attr('data-path', html_encode(target_path));
|
|
$(el_window_navbar_path_input).val(target_path);
|
|
$(el_window_navbar_path_input).attr('data-path', target_path);
|
|
// update layout
|
|
update_window_layout(el_window, fsentry.layout);
|
|
// update explore header if in details view
|
|
if(fsentry.layout === 'details'){
|
|
update_details_layout_sort_visuals(el_window, fsentry.sort_by, fsentry.sort_order);
|
|
}
|
|
});
|
|
}catch(err){
|
|
UIAlert(err.responseText)
|
|
|
|
// todo optim: this is dumb because updating the window should only happen if this /readdir request is successful,
|
|
// in that case there is no need for using update_window_path on error!!
|
|
update_window_path(el_window, old_path);
|
|
}
|
|
}
|
|
// path is '/' (global root)
|
|
else{
|
|
$(el_window).removeClass('window-' + $(el_window).attr('data-uid'));
|
|
$(el_window).addClass('window-null');
|
|
$(el_window).attr('data-uid', 'null');
|
|
$(el_window).attr('data-name', '');
|
|
$(el_window).find('.window-head-title').text(root_dirname);
|
|
}
|
|
|
|
if(is_dir){
|
|
refresh_item_container(el_window_body);
|
|
navbar_path_droppable(el_window)
|
|
}
|
|
|
|
update_explorer_footer_selected_items_count(el_window);
|
|
}
|
|
|
|
// --------------------------------------------------------
|
|
// Sidebar Item Droppable
|
|
// --------------------------------------------------------
|
|
window.sidebar_item_droppable = (el_window)=>{
|
|
$(el_window).find('.window-sidebar-item').droppable({
|
|
accept: '.item',
|
|
tolerance: 'pointer',
|
|
drop: function( event, ui ) {
|
|
// check if item was actually dropped on this navbar path
|
|
if($(mouseover_window).attr('data-id') !== $(el_window).attr('data-id')){
|
|
return;
|
|
}
|
|
const items_to_move = []
|
|
|
|
// first item
|
|
items_to_move.push(ui.draggable);
|
|
|
|
// all subsequent items
|
|
const cloned_items = document.getElementsByClassName('item-selected-clone');
|
|
for(let i =0; i<cloned_items.length; i++){
|
|
const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
|
|
if(source_item !== null)
|
|
items_to_move.push(source_item);
|
|
}
|
|
|
|
// if alt key is down, create shortcut items
|
|
if(event.altKey){
|
|
items_to_move.forEach((item_to_move) => {
|
|
create_shortcut(
|
|
path.basename($(item_to_move).attr('data-path')),
|
|
$(item_to_move).attr('data-is_dir') === '1',
|
|
$(this).attr('data-path'),
|
|
null,
|
|
$(item_to_move).attr('data-shortcut_to') === '' ? $(item_to_move).attr('data-uid') : $(item_to_move).attr('data-shortcut_to'),
|
|
$(item_to_move).attr('data-shortcut_to_path') === '' ? $(item_to_move).attr('data-path') : $(item_to_move).attr('data-shortcut_to_path'),
|
|
);
|
|
});
|
|
}
|
|
// move items
|
|
else{
|
|
move_items(items_to_move, $(this).attr('data-path'));
|
|
}
|
|
|
|
$('.item-container').droppable('enable')
|
|
$(this).removeClass('window-sidebar-item-drag-active');
|
|
|
|
return false;
|
|
},
|
|
over: function(event, ui){
|
|
// check if item was actually hovered over this window
|
|
if($(mouseover_window).attr('data-id') !== $(el_window).attr('data-id'))
|
|
return;
|
|
|
|
// Don't do anything if the dragged item is NOT a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
|
|
// highlight this item
|
|
$(this).addClass('window-sidebar-item-drag-active');
|
|
$('.ui-draggable-dragging').css('opacity', 0.2)
|
|
$('.item-selected-clone').css('opacity', 0.2)
|
|
|
|
// disable all window bodies
|
|
$('.item-container').droppable( 'disable' )
|
|
},
|
|
out: function(event, ui){
|
|
// Don't do anything if the dragged element is NOT a UIItem
|
|
if(!$(ui.draggable).hasClass('item'))
|
|
return;
|
|
|
|
// unselect item if item is dragged out
|
|
$(this).removeClass('window-sidebar-item-drag-active');
|
|
$('.ui-draggable-dragging').css('opacity', 'initial')
|
|
$('.item-selected-clone').css('opacity', 'initial')
|
|
|
|
$('.item-container').droppable( 'enable' )
|
|
}
|
|
});
|
|
}
|
|
|
|
// closes a window
|
|
$.fn.close = async function(options) {
|
|
options = options || {};
|
|
$(this).each(async function() {
|
|
const el_iframe = $(this).find('.window-app-iframe');
|
|
// tell child app that this window is about to close, get its response
|
|
if(el_iframe.length > 0 && el_iframe.attr('data-appUsesSDK') === 'true'){
|
|
if(!options.bypass_iframe_messaging){
|
|
const resp = await sendWindowWillCloseMsg(el_iframe.get(0));
|
|
if(!resp.msg){
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Process window close if this is a window
|
|
if($(this).hasClass('window')){
|
|
const win_id = parseInt($(this).attr('data-id'));
|
|
let window_uuid = $(this).attr('data-element_uuid');
|
|
// remove all instances of win_id from window_stack
|
|
_.pullAll(window_stack, [win_id]);
|
|
// taskbar update
|
|
let open_window_count = parseInt($(`.taskbar-item[data-app="${$(this).attr('data-app')}"]`).attr('data-open-windows'));
|
|
// update open window count of corresponding taskbar item
|
|
if(open_window_count > 0){
|
|
$(`.taskbar-item[data-app="${$(this).attr('data-app')}"]`).attr('data-open-windows', open_window_count - 1);
|
|
}
|
|
// decide whether to remove taskbar item
|
|
if(open_window_count === 1){
|
|
$(`.taskbar-item[data-app="${$(this).attr('data-app')}"] .active-taskbar-indicator`).hide();
|
|
remove_taskbar_item($(`.taskbar-item[data-app="${$(this).attr('data-app')}"][data-keep-in-taskbar="false"]`));
|
|
}
|
|
// if no more windows of this app are open, remove taskbar item
|
|
if(open_window_count - 1 === 0)
|
|
$(`.taskbar-item[data-app="${$(this).attr('data-app')}"] .active-taskbar-indicator`).hide();
|
|
// if a fullpage window is closed, show desktop and taskbar
|
|
if($(this).attr('data-is_fullpage') === '1'){
|
|
exit_fullpage_mode();
|
|
}
|
|
|
|
// FileDialog closed
|
|
if($(this).hasClass('window-filedialog') || $(this).attr('data-disable_parent_window') === 'true'){
|
|
// re-enable this FileDialog's parent window
|
|
$(`.window[data-element_uuid="${$(this).attr('data-parent_uuid')}"]`).addClass('window-active');
|
|
$(`.window[data-element_uuid="${$(this).attr('data-parent_uuid')}"]`).removeClass('window-disabled');
|
|
$(`.window[data-element_uuid="${$(this).attr('data-parent_uuid')}"]`).find('.window-disable-mask').hide();
|
|
// bring focus back to app iframe, if needed
|
|
$(`.window[data-element_uuid="${$(this).attr('data-parent_uuid')}"]`).focusWindow();
|
|
}
|
|
// Other types of windows closed
|
|
else{
|
|
// close any open FileDialogs belonging to this window
|
|
$(`.window-filedialog[data-parent_uuid="${window_uuid}"]`).close();
|
|
// bring focus to the last window in the window-stack (only if not minimized)
|
|
if(!_.isEmpty(window_stack)){
|
|
const $last_window_in_stack = $(`.window[data-id="${window_stack[window_stack.length - 1]}"]`);
|
|
// check if previous window is not minimized
|
|
if($last_window_in_stack !== null && $last_window_in_stack.attr('data-is_minimized') !== '1' && $last_window_in_stack.attr('data-is_minimized') !== 'true'){
|
|
$(`.window[data-id="${window_stack[window_stack.length - 1]}"]`).focusWindow();
|
|
}
|
|
// otherwise, change URL/Title to desktop
|
|
else{
|
|
window.history.replaceState(null, document.title, '/');
|
|
document.title = 'Puter';
|
|
}
|
|
// if it's explore
|
|
if($last_window_in_stack.attr('data-app') && $last_window_in_stack.attr('data-app').toLowerCase() === 'explorer'){
|
|
window.history.replaceState(null, document.title, '/');
|
|
document.title = 'Puter';
|
|
}
|
|
}
|
|
// otherwise, change URL/Title to desktop
|
|
else{
|
|
window.history.replaceState(null, document.title, '/');
|
|
document.title = 'Puter';
|
|
}
|
|
}
|
|
// close child windows
|
|
$(`.window[data-parent_uuid="${window_uuid}"]`).close();
|
|
// remove backdrop
|
|
$(this).closest('.window-backdrop').remove();
|
|
// remove DOM element
|
|
if(options?.shrink_to_target){
|
|
// get target location
|
|
const target_pos = $(options.shrink_to_target).position();
|
|
const target_size = $(options.shrink_to_target).get(0).getBoundingClientRect();
|
|
|
|
// animate window to target location
|
|
$(this).animate({
|
|
width: `1`,
|
|
height: `1`,
|
|
top: target_pos.top + target_size.height / 2,
|
|
left: target_pos.left + target_size.width / 2,
|
|
}, 300, () => {
|
|
// remove DOM element
|
|
delete_window_element(this);
|
|
});
|
|
}
|
|
else if(window.animate_window_closing){
|
|
// start shrink animation
|
|
$(this).css({
|
|
'transition': 'transform 400ms',
|
|
'transform': 'scale(0)',
|
|
});
|
|
// remove DOM element after fadeout animation
|
|
$(this).fadeOut(80, function(){
|
|
delete_window_element(this);
|
|
})
|
|
}else{
|
|
delete_window_element(this);
|
|
}
|
|
}
|
|
// focus back to desktop?
|
|
if(_.isEmpty(window_stack)){
|
|
// The following is to make sure the iphone keyboard is dismissed when the last window is closed
|
|
if(isMobile.phone || isMobile.tablet){
|
|
document.activeElement.blur();
|
|
$("input").blur();
|
|
}
|
|
// focus back to desktop
|
|
$('.desktop').find('.item-blurred').removeClass('item-blurred');
|
|
active_item_container = $('.desktop.item-container').get(0);
|
|
}
|
|
})
|
|
|
|
return this;
|
|
};
|
|
|
|
window.scale_window = (el_window)=>{
|
|
//maximize
|
|
if ($(el_window).attr('data-is_maximized') !== '1') {
|
|
// save original size and position
|
|
let el_window_rect = el_window.getBoundingClientRect();
|
|
$(el_window).attr({
|
|
'data-left-before-maxim': el_window_rect.left + 'px',
|
|
'data-top-before-maxim': el_window_rect.top + 'px',
|
|
'data-width-before-maxim': $(el_window).css('width'),
|
|
'data-height-before-maxim': $(el_window).css('height'),
|
|
'data-is_maximized': '1',
|
|
});
|
|
|
|
// shrink icon
|
|
$(el_window).find('.window-scale-btn>img').attr('src', window.icons['scale-down-3.svg']);
|
|
|
|
// set new size and position
|
|
$(el_window).css({
|
|
'top': toolbar_height+'px',
|
|
'left': '0',
|
|
'width': '100%',
|
|
'height': `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)`,
|
|
'transform': 'none',
|
|
});
|
|
}
|
|
//shrink
|
|
else {
|
|
// set size and position to original before maximization
|
|
$(el_window).css({
|
|
'top': $(el_window).attr('data-top-before-maxim'),
|
|
'left': $(el_window).attr('data-left-before-maxim'),
|
|
'width': $(el_window).attr('data-width-before-maxim'),
|
|
'height': $(el_window).attr('data-height-before-maxim'),
|
|
'transform': 'none',
|
|
});
|
|
|
|
// maximize icon
|
|
$(el_window).find('.window-scale-btn>img').attr('src', window.icons['scale.svg']);
|
|
|
|
$(el_window).attr({
|
|
'data-is_maximized': 0,
|
|
});
|
|
}
|
|
|
|
// record window size and position before scaling
|
|
$(el_window).attr({
|
|
'data-orig-width': $(el_window).width(),
|
|
'data-orig-height': $(el_window).height(),
|
|
'data-orig-top': $(el_window).position().top,
|
|
'data-orig-left': $(el_window).position().left,
|
|
'data-is_minimized': false,
|
|
})
|
|
}
|
|
|
|
window.update_explorer_footer_item_count = function(el_window){
|
|
//update dir count in explorer footer
|
|
let item_count = $(el_window).find('.item').length;
|
|
$(el_window).find('.explorer-footer .explorer-footer-item-count').html(item_count + ` ${i18n('item')}` + (item_count == 0 || item_count > 1 ? `${i18n('plural_suffix')}` : ''));
|
|
}
|
|
|
|
window.update_explorer_footer_selected_items_count = function(el_window){
|
|
//update dir count in explorer footer
|
|
let item_count = $(el_window).find('.item-selected').length;
|
|
if(item_count > 0){
|
|
$(el_window).find('.explorer-footer-seperator, .explorer-footer-selected-items-count').show();
|
|
$(el_window).find('.explorer-footer .explorer-footer-selected-items-count').html(item_count + ` ${i18n('item')}` + (item_count == 0 || item_count > 1 ? `${i18n('plural_suffix')}` : '') + ` ${i18n('selected')}`);
|
|
}else{
|
|
$(el_window).find('.explorer-footer-seperator, .explorer-footer-selected-items-count').hide();
|
|
}
|
|
}
|
|
|
|
window.set_sort_by = function(item_uid, sort_by, sort_order){
|
|
if(sort_order !== 'asc' && sort_order !== 'desc')
|
|
sort_order = 'asc';
|
|
|
|
$.ajax({
|
|
url: api_origin + "/set_sort_by",
|
|
type: 'POST',
|
|
data: JSON.stringify({
|
|
sort_by: sort_by,
|
|
item_uid: item_uid,
|
|
sort_order: sort_order,
|
|
}),
|
|
async: true,
|
|
contentType: "application/json",
|
|
headers: {
|
|
"Authorization": "Bearer "+auth_token
|
|
},
|
|
statusCode: {
|
|
401: function () {
|
|
logout();
|
|
},
|
|
},
|
|
success: function (){
|
|
}
|
|
})
|
|
// update the sort_by & sort_order attr of every matching element
|
|
$(`[data-uid="${item_uid}"]`).attr({
|
|
'data-sort_by': sort_by,
|
|
'data-sort_order': sort_order,
|
|
});
|
|
}
|
|
|
|
window.explore_table_headers = function(){
|
|
let h = ``;
|
|
h += `<div class="explore-table-headers">`;
|
|
h += `<div class="explore-table-headers-th explore-table-headers-th--name">Name<span class="header-sort-icon"></span></div>`;
|
|
h += `<div class="explore-table-headers-th explore-table-headers-th--modified">Modified<span class="header-sort-icon"></span></div>`;
|
|
h += `<div class="explore-table-headers-th explore-table-headers-th--size">Size<span class="header-sort-icon"></span></div>`;
|
|
h += `<div class="explore-table-headers-th explore-table-headers-th--type">Type<span class="header-sort-icon"></span></div>`;
|
|
h += `</div>`;
|
|
return h;
|
|
}
|
|
|
|
window.update_window_layout = function(el_window, layout){
|
|
layout = layout ?? 'icons';
|
|
|
|
if(layout === 'icons'){
|
|
$(el_window).find('.explore-table-headers').hide();
|
|
$(el_window).find('.item-container').removeClass('item-container-list');
|
|
$(el_window).find('.item-container').removeClass('item-container-details');
|
|
$(el_window).find('.window-navbar-layout-settings').attr('src', window.icons['layout-icons.svg']);
|
|
$(el_window).attr('data-layout', layout)
|
|
}
|
|
else if(layout === 'list'){
|
|
$(el_window).find('.explore-table-headers').hide();
|
|
$(el_window).find('.item-container').removeClass('item-container-details');
|
|
$(el_window).find('.item-container').addClass('item-container-list');
|
|
$(el_window).find('.window-navbar-layout-settings').attr('src', window.icons['layout-list.svg'])
|
|
$(el_window).attr('data-layout', layout)
|
|
}
|
|
else if(layout === 'details'){
|
|
$(el_window).find('.explore-table-headers').show();
|
|
$(el_window).find('.item-container').removeClass('item-container-list');
|
|
$(el_window).find('.item-container').addClass('item-container-details');
|
|
$(el_window).find('.window-navbar-layout-settings').attr('src', window.icons['layout-details.svg'])
|
|
$(el_window).attr('data-layout', layout)
|
|
}
|
|
}
|
|
|
|
$.fn.showWindow = async function(options) {
|
|
$(this).each(async function() {
|
|
if($(this).hasClass('window')){
|
|
// show window
|
|
const el_window = this;
|
|
$(el_window).css({
|
|
'transition': `top 0.2s, left 0.2s, bottom 0.2s, right 0.2s, width 0.2s, height 0.2s`,
|
|
top: $(el_window).attr('data-orig-top') + 'px',
|
|
left: $(el_window).attr('data-orig-left') + 'px',
|
|
width: $(el_window).attr('data-orig-width') + 'px',
|
|
height: $(el_window).attr('data-orig-height') + 'px',
|
|
});
|
|
$(el_window).css('z-index', ++last_window_zindex);
|
|
|
|
setTimeout(() => {
|
|
$(this).focusWindow();
|
|
}, 80);
|
|
|
|
// remove `transitions` a good while after setting css to make sure
|
|
// it doesn't interfere with an ongoing animation
|
|
setTimeout(() => {
|
|
$(el_window).css('transition', 'none');
|
|
}, 250);
|
|
}
|
|
})
|
|
return this;
|
|
};
|
|
|
|
window.show_or_hide_empty_folder_message = function(el_item_container){
|
|
// if the item container is the desktop, don't show/hide the empty message
|
|
if($(el_item_container).hasClass('desktop'))
|
|
return;
|
|
|
|
// if the item container is empty, show the empty message
|
|
if($(el_item_container).has('.item').length === 0){
|
|
$(el_item_container).find('.explorer-empty-message').show();
|
|
}
|
|
// if the item container is not empty, hide the empty message
|
|
else{
|
|
$(el_item_container).find('.explorer-empty-message').hide();
|
|
}
|
|
}
|
|
|
|
$.fn.focusWindow = function(event) {
|
|
if(this.hasClass('window')){
|
|
const $app_iframe = $(this).find('.window-app-iframe');
|
|
$('.window').not(this).removeClass('window-active');
|
|
$(this).addClass('window-active');
|
|
// disable pointer events on all other windows' iframes, except for this window's iframe
|
|
$('.window-app-iframe').not($app_iframe).css('pointer-events', 'none');
|
|
// bring this window to front, only if it's not stay_on_top
|
|
if($(this).attr('data-stay_on_top') !== 'true'){
|
|
$(this).css('z-index', ++last_window_zindex);
|
|
}
|
|
// if this window has a parent, bring them to the front too
|
|
if($(this).attr('data-parent_uuid') !== 'null'){
|
|
$(`.window[data-element_uuid="${$(this).attr('data-parent_uuid')}"]`).css('z-index', last_window_zindex);
|
|
}
|
|
// if this window has child windows, bring them to the front too
|
|
if($(this).attr('data-element_uuid') !== 'null'){
|
|
$(`.window[data-parent_uuid="${$(this).attr('data-element_uuid')}"]`).css('z-index', ++last_window_zindex);
|
|
}
|
|
//
|
|
// if this has an iframe, focus on it
|
|
if(!$(this).hasClass('window-disabled') && $app_iframe.length > 0){
|
|
$($app_iframe).css('pointer-events', 'all');
|
|
$app_iframe.get(0)?.focus({preventScroll:true});
|
|
$app_iframe.get(0)?.contentWindow?.focus({preventScroll:true});
|
|
// todo check if iframe is using SDK before sending messages
|
|
$app_iframe.get(0).contentWindow.postMessage({msg: "focus"}, '*');
|
|
var rect = $app_iframe.get(0).getBoundingClientRect();
|
|
// send click event to iframe, if this focus event was triggered by a click or similar mouse event
|
|
if(
|
|
event !== undefined &&
|
|
(event.type === 'click' || event.type === 'dblclick' || event.type === 'contextmenu' || event.type === 'mousedown' || event.type === 'mouseup' || event.type === 'mousemove')
|
|
){
|
|
$app_iframe.get(0).contentWindow.postMessage({msg: "click", x: (mouseX - rect.left), y: (mouseY - rect.top)}, '*');
|
|
}
|
|
}
|
|
// set active_item_container
|
|
active_item_container = $(this).find('.item-container').get(0);
|
|
// grey out all selected items on other windows/desktop
|
|
$('.item-container').not(active_item_container).find('.item-selected').addClass('item-blurred');
|
|
// update window-stack
|
|
window_stack.push(parseInt($(this).attr('data-id')));
|
|
// remove blurred class from items on this window
|
|
$(active_item_container).find('.item-blurred').removeClass('item-blurred');
|
|
//change window URL
|
|
const update_window_url = $(this).attr('data-update_window_url');
|
|
if(update_window_url === 'true' || update_window_url === null){
|
|
window.history.replaceState({window_id: $(this).attr('data-id')}, '', '/app/'+$(this).attr('data-app'));
|
|
document.title = $(this).attr('data-name');
|
|
}
|
|
$(`.taskbar .taskbar-item[data-app="${$(this).attr('data-app')}"]`).addClass('taskbar-item-active');
|
|
}else{
|
|
$('.window').find('.item-selected').addClass('item-blurred');
|
|
$('.desktop').find('.item-blurred').removeClass('item-blurred');
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
// hides a window
|
|
$.fn.hideWindow = async function(options) {
|
|
$(this).each(async function() {
|
|
if($(this).hasClass('window')){
|
|
// get taskbar item location
|
|
const taskbar_item_pos = $(`.taskbar .taskbar-item[data-app="${$(this).attr('data-app')}"]`).position();
|
|
|
|
$(this).attr({
|
|
'data-orig-width': $(this).width(),
|
|
'data-orig-height': $(this).height(),
|
|
'data-orig-top': $(this).position().top,
|
|
'data-orig-left': $(this).position().left,
|
|
'data-is_minimized': true,
|
|
})
|
|
|
|
$(this).css({
|
|
'transition': `top 0.2s, left 0.2s, bottom 0.2s, right 0.2s, width 0.2s, height 0.2s`,
|
|
width: `0`,
|
|
height: `0`,
|
|
top: 'calc(100% - 60px)',
|
|
left: taskbar_item_pos.left + 29,
|
|
});
|
|
|
|
// remove transitions a good while after setting css to make sure
|
|
// it doesn't interfere with an ongoing animation
|
|
setTimeout(() => {
|
|
$(this).css({
|
|
'transition': 'none',
|
|
'transform': 'none'
|
|
});
|
|
}, 250);
|
|
|
|
// update title and window URL
|
|
window.history.replaceState(null, document.title, '/');
|
|
document.title = 'Puter';
|
|
}
|
|
})
|
|
return this;
|
|
};
|
|
|
|
$(document).on('click', '.explore-table-headers-th', function(e){
|
|
let sort_by = 'name';
|
|
let sort_icon = `<img src="${window.icons['up-arrow.svg']}">`;
|
|
|
|
// current sort order
|
|
let sort_order = $(e.target).closest('.window').attr('data-sort_order') ?? 'asc';
|
|
|
|
// flip sort order
|
|
if(sort_order === 'asc'){
|
|
sort_order = 'desc';
|
|
sort_icon = `<img src="${window.icons['down-arrow.svg']}">`;
|
|
}else if(sort_order === 'desc'){
|
|
sort_icon = `<img src="${window.icons['up-arrow.svg']}">`;
|
|
sort_order = 'asc';
|
|
}
|
|
|
|
// remove active class from all headers
|
|
$(e.target).closest('.window').find('.explore-table-headers-th').removeClass('explore-table-headers-th-active');
|
|
// remove icons from all headers
|
|
$(e.target).closest('.window').find('.header-sort-icon').html('');
|
|
|
|
// add active class to this header
|
|
$(e.target).addClass('explore-table-headers-th-active');
|
|
|
|
// set sort icon
|
|
$(e.target).closest('.window').find('.explore-table-headers-th-active > .header-sort-icon').html(sort_icon);
|
|
|
|
// set sort_by
|
|
if($(e.target).hasClass('explore-table-headers-th--name')){
|
|
sort_by = 'name';
|
|
}else if($(e.target).hasClass('explore-table-headers-th--modified')){
|
|
sort_by = 'modified';
|
|
}else if($(e.target).hasClass('explore-table-headers-th--size')){
|
|
sort_by = 'size';
|
|
}else if($(e.target).hasClass('explore-table-headers-th--type')){
|
|
sort_by = 'type';
|
|
}
|
|
|
|
// sort
|
|
sort_items($(e.target).closest('.window-body'), sort_by, sort_order);
|
|
set_sort_by($(e.target).closest('.window').attr('data-uid'), sort_by, sort_order)
|
|
})
|
|
|
|
window.set_layout = function(item_uid, layout){
|
|
$.ajax({
|
|
url: api_origin + "/set_layout",
|
|
type: 'POST',
|
|
data: JSON.stringify({
|
|
item_uid: item_uid,
|
|
layout: layout,
|
|
}),
|
|
async: true,
|
|
contentType: "application/json",
|
|
headers: {
|
|
"Authorization": "Bearer "+auth_token
|
|
},
|
|
statusCode: {
|
|
401: function () {
|
|
logout();
|
|
},
|
|
},
|
|
success: function (){
|
|
if(layout === 'details'){
|
|
let el_window = $(`.window[data-uid="${item_uid}"]`);
|
|
if(el_window.length > 0){
|
|
let sort_by = el_window.attr('data-sort_by');
|
|
let sort_order = el_window.attr('data-sort_order');
|
|
update_details_layout_sort_visuals(el_window, sort_by, sort_order);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
window.update_details_layout_sort_visuals = function(el_window, sort_by, sort_order){
|
|
let sort_icon = '';
|
|
$(el_window).find('.explore-table-headers-th > .header-sort-icon').html('');
|
|
|
|
if(!sort_order || sort_order === 'asc')
|
|
sort_icon = `<img src="${window.icons['up-arrow.svg']}">`;
|
|
else if(sort_order === 'desc')
|
|
sort_icon = `<img src="${window.icons['down-arrow.svg']}">`;
|
|
|
|
if(!sort_by || sort_by === 'name'){
|
|
$(el_window).find('.explore-table-headers-th').removeClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--name').addClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--name > .header-sort-icon').html(sort_icon);
|
|
}else if(sort_by === 'size'){
|
|
$(el_window).find('.explore-table-headers-th').removeClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--size').addClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--size > .header-sort-icon').html(sort_icon);
|
|
}else if(sort_by === 'modified'){
|
|
$(el_window).find('.explore-table-headers-th').removeClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--modified').addClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--modified > .header-sort-icon').html(sort_icon);
|
|
}else if(sort_by === 'type'){
|
|
$(el_window).find('.explore-table-headers-th').removeClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--type').addClass('explore-table-headers-th-active');
|
|
$(el_window).find('.explore-table-headers-th--type > .header-sort-icon').html(sort_icon);
|
|
}
|
|
}
|
|
|
|
// This is a hack to fix the issue where the window scrolls to the bottom when an app scrolls.
|
|
// this is due to an issue with iframes being able to hijack the scroll event for the parent object.
|
|
// w3c is working on a fix for this, but it's not ready yet.
|
|
// more info here: https://github.com/w3c/webappsec-permissions-policy/issues/171
|
|
document.addEventListener('scroll', function (event) {
|
|
if($(event.target).hasClass('window-app') || $(event.target).hasClass('window-app-iframe') || $(event.target?.activeElement).hasClass('window-app-iframe')){
|
|
setTimeout(function(){
|
|
// scroll window back to top
|
|
$('.window-app').scrollTop(0);
|
|
// some times it's document that scrolls, so we need to check that too
|
|
$(document).scrollTop(0);
|
|
}, 1);
|
|
}
|
|
}, true);
|
|
|
|
export default UIWindow;
|