mirror/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-02-14 01:39:12 -06:00
Code Issues Packages Projects Releases Wiki Activity

close #169

Browse Source
This commit is contained in:
Nariman Jelveh
2024-07-18 13:01:14 -07:00
parent ad3d318d07
commit 82fa2d0862
3 changed files with 124 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/dev-center/css/style.css
View File

@@ -278,7 +278,7 @@ label, input[type="text"] {
text-decoration: underline;
}
input[type="text"], textarea {
input[type="text"], textarea, input[type="number"] {
display: block;
width: 100%;
height: 34px;

82
src/dev-center/js/dev-center.js
View File

@@ -435,6 +435,8 @@ function generate_edit_app_section(app) {
if(app.result)
app = app.result;
let maximize_on_start = app.maximize_on_start ? 'checked' : '';
let h = ``;
h += `
<div class="edit-app-navbar">
@@ -485,11 +487,6 @@ function generate_edit_app_section(app) {
<label for="edit-app-app-id">App ID</label>
<input type="text" style="width: 362px;" class="app-uid" value="${html_encode(app.uid)}" readonly>
<div>
<input type="checkbox" id="edit-app-maximize-on-start" name="edit-app-maximize-on-start" value="true" style="margin-top:30px;" ${app.maximize_on_start ? 'checked' : ''}>
<label for="edit-app-maximize-on-start" style="display: inline;">Maximize window on start</label>
</div>
<div>
<input type="checkbox" id="edit-app-background" name="edit-app-background" value="true" style="margin-top:30px;" ${app.background ? 'checked' : ''}>
<label for="edit-app-background" style="display: inline;">Run as a background process.</label>
@@ -500,6 +497,35 @@ function generate_edit_app_section(app) {
<label for="edit-app-fullpage-on-landing" style="display: inline;">Load in full-page mode when a user lands directly on this app.</label>
</div>
<div>
<input type="checkbox" id="edit-app-maximize-on-start" name="edit-app-maximize-on-start" value="true" style="margin-top:30px;" ${maximize_on_start ? 'checked' : ''}>
<label for="edit-app-maximize-on-start" style="display: inline;">Maximize window on start</label>
</div>
<div>
<label for="edit-app-window-width">Window Width</label>
<input type="number" id="edit-app-window-width" placeholder="800" value="${html_encode(app.metadata?.window_size?.width ?? 800)}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
<label for="edit-app-window-height">Window Height</label>
<input type="number" id="edit-app-window-height" placeholder="600" value="${html_encode(app.metadata?.window_size?.height ?? 600)}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
</div>
<div style="margin-top:30px;">
<label for="edit-app-window-top">Window Top</label>
<input type="number" id="edit-app-window-top" placeholder="100" value="${app.metadata?.window_position?.top ? html_encode(app.metadata.window_position.top) : ''}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
<label for="edit-app-window-left">Window Left</label>
<input type="number" id="edit-app-window-left" placeholder="100" value="${app.metadata?.window_position?.left ? html_encode(app.metadata.window_position.left) : ''}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
</div>
<div style="margin-top:30px;">
<input type="checkbox" id="edit-app-window-resizable" name="edit-app-window-resizable" value="true" ${app.metadata?.window_resizable ? 'checked' : ''}>
<label for="edit-app-window-resizable" style="display: inline;">Window Resizable</label>
</div>
<div style="margin-top:30px;">
<input type="checkbox" id="edit-app-hide-titlebar" name="edit-app-hide-titlebar" value="true" ${app.metadata?.hide_titlebar ? 'checked' : ''}>
<label for="edit-app-hide-titlebar" style="display: inline;">Hide Titlebar</label>
</div>
<label for="edit-app-icon">Icon</label>
<div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}>
<div id="change-app-icon">Change App Icon</div>
@@ -804,6 +830,11 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
const index_url = $('#edit-app-index-url').val();
const description = $('#edit-app-description').val();
const uid = $('#edit-app-uid').val();
const height = $('#edit-app-window-height').val();
const width = $('#edit-app-window-width').val();
const top = $('#edit-app-window-top').val();
const left = $('#edit-app-window-left').val();
let filetype_associations = $('#edit-app-filetype-associations').val();
let icon;
@@ -827,6 +858,24 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
error = `<strong>Index URL</strong> must be a valid url.`;
else if (!index_url.toLowerCase().startsWith('https://') && !index_url.toLowerCase().startsWith('http://'))
error = `<strong>Index URL</strong> must start with 'https://' or 'http://'.`;
// height must be a number
else if (isNaN(height))
error = `<strong>Window Height</strong> must be a number.`;
// height must be greater than 0
else if (height <= 0)
error = `<strong>Window Height</strong> must be greater than 0.`;
// width must be a number
else if (isNaN(width))
error = `<strong>Window Width</strong> must be a number.`;
// width must be greater than 0
else if (width <= 0)
error = `<strong>Window Width</strong> must be greater than 0.`;
// top must be a number
else if (top && isNaN(top))
error = `<strong>Window Top</strong> must be a number.`;
// left must be a number
else if (left && isNaN(left))
error = `<strong>Window Left</strong> must be a number.`;
// download icon from URL
else {
@@ -871,6 +920,16 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
background: $('#edit-app-background').is(":checked"),
metadata: {
fullpage_on_landing: $('#edit-app-fullpage-on-landing').is(":checked"),
window_size: {
width: width ?? 800,
height: height ?? 600,
},
window_position: {
top: top,
left: left,
},
window_resizable: $('#edit-app-window-resizable').is(":checked"),
hide_titlebar: $('#edit-app-hide-titlebar').is(":checked"),
},
filetypeAssociations: filetype_associations,
}).then(async (app) => {
@@ -2013,4 +2072,15 @@ function getMimeType(extension) {
// Return the MIME type if found, otherwise return 'application/octet-stream'
return mimeTypes[cleanExtension] || 'application/octet-stream';
}
}
// if edit-app-maximize-on-start is checked, disable window size and position fields
$(document).on('change', '#edit-app-maximize-on-start', function (e) {
if ($(this).is(':checked')) {
$('#edit-app-window-width, #edit-app-window-height').prop('disabled', true);
$('#edit-app-window-top, #edit-app-window-left').prop('disabled', true);
} else {
$('#edit-app-window-width, #edit-app-window-height').prop('disabled', false);
$('#edit-app-window-top, #edit-app-window-left').prop('disabled', false);
}
})

53
src/gui/src/helpers/launch_app.js
View File

@@ -36,7 +36,7 @@ const launch_app = async (options)=>{
}
// If the app object is not provided, get it from the server
let app_info = options.app_obj ?? await window.get_apps(options.name);
let app_info = options.app_obj ?? await puter.apps.get(options.name);
// For backward compatibility reasons we need to make sure that both `uuid` and `uid` are set
app_info.uuid = app_info.uuid ?? app_info.uid;
@@ -68,7 +68,7 @@ const launch_app = async (options)=>{
//-----------------------------------
// maximize on start
//-----------------------------------
if(app_info.maximize_on_start && app_info.maximize_on_start === 1)
if(app_info.maximize_on_start)
options.maximized = 1;
//-----------------------------------
@@ -254,6 +254,44 @@ const launch_app = async (options)=>{
// register app_instance_uid
window.app_instance_ids.add(uuid);
// width
let window_width;
if(app_info.metadata?.window_size?.width !== undefined)
window_width = parseFloat(app_info.metadata.window_size.width);
if(options.maximized)
window_width = '100%';
// height
let window_height;
if(app_info.metadata?.window_size?.height !== undefined){
window_height = parseFloat(app_info.metadata.window_size.height);
}if(options.maximized)
window_height = `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)`;
// top
let top;
if(app_info.metadata?.window_position?.top !== undefined)
top = parseFloat(app_info.metadata.window_position.top) + window.toolbar_height + 1;
if(options.maximized)
top = 0;
// left
let left;
if(app_info.metadata?.window_position?.left !== undefined)
left = parseFloat(app_info.metadata.window_position.left);
if(options.maximized)
left = 0;
// window_resizable
let window_resizable = true;
if(app_info.metadata?.window_resizable !== undefined && typeof app_info.metadata.window_resizable === 'boolean')
window_resizable = app_info.metadata.window_resizable;
// hide_titlebar
let hide_titlebar = false;
if(app_info.metadata?.hide_titlebar !== undefined && typeof app_info.metadata.hide_titlebar === 'boolean')
hide_titlebar = app_info.metadata.hide_titlebar;
// open window
el_win = UIWindow({
element_uuid: uuid,
@@ -264,18 +302,21 @@ const launch_app = async (options)=>{
window_class: 'window-app',
update_window_url: true,
app_uuid: app_info.uuid ?? app_info.uid,
top: options.maximized ? 0 : undefined,
left: options.maximized ? 0 : undefined,
height: options.maximized ? `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)` : undefined,
width: options.maximized ? `100%` : undefined,
top: top,
left: left,
height: window_height,
width: window_width,
app: options.name,
is_visible: ! app_info.background,
is_maximized: options.maximized,
is_fullpage: options.is_fullpage,
...window_options,
is_resizable: window_resizable,
has_head: ! hide_titlebar,
show_in_taskbar: app_info.background ? false : window_options?.show_in_taskbar,
});
// If the app is not in the background, show the window
if ( ! app_info.background ) {
$(el_win).show();
}