diff --git a/packages/puter-js/src/modules/UI.js b/packages/puter-js/src/modules/UI.js index c9b99033..8a3fe496 100644 --- a/packages/puter-js/src/modules/UI.js +++ b/packages/puter-js/src/modules/UI.js @@ -650,33 +650,94 @@ class UI extends EventListener { }) } - setWindowTitle = function(title, callback) { + setWindowTitle = function(title, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + return new Promise((resolve) => { - this.#postMessageWithCallback('setWindowTitle', resolve, { new_title: title }); + this.#postMessageWithCallback('setWindowTitle', resolve, { new_title: title, window_id: window_id}); }) } - setWindowWidth = function(width, callback) { + setWindowWidth = function(width, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + return new Promise((resolve) => { - this.#postMessageWithCallback('setWindowWidth', resolve, { width }); + this.#postMessageWithCallback('setWindowWidth', resolve, { width: width, window_id: window_id }); }) } - setWindowHeight = function(height, callback) { + setWindowHeight = function(height, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + return new Promise((resolve) => { - this.#postMessageWithCallback('setWindowHeight', resolve, { height }); + this.#postMessageWithCallback('setWindowHeight', resolve, { height: height, window_id: window_id }); }) } - setWindowSize = function(width, height, callback) { + setWindowSize = function(width, height, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + return new Promise((resolve) => { - this.#postMessageWithCallback('setWindowSize', resolve, { width, height }); + this.#postMessageWithCallback('setWindowSize', resolve, { width: width, height: height, window_id: window_id }); }) } - setWindowPosition = function(x, y, callback) { + setWindowPosition = function(x, y, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + return new Promise((resolve) => { - this.#postMessageWithCallback('setWindowPosition', resolve, { x, y }); + this.#postMessageWithCallback('setWindowPosition', resolve, { x, y, window_id }); + }) + } + + setWindowY = function(y, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + + return new Promise((resolve) => { + this.#postMessageWithCallback('setWindowY', resolve, { y, window_id }); + }) + } + + setWindowX = function(x, window_id, callback) { + if(typeof window_id === 'function'){ + callback = window_id; + window_id = undefined; + }else if(typeof window_id === "object" && window_id !== null){ + window_id = window_id.id; + } + + return new Promise((resolve) => { + this.#postMessageWithCallback('setWindowX', resolve, { x, window_id }); }) } @@ -860,7 +921,9 @@ class UI extends EventListener { createWindow = function (options, callback) { return new Promise((resolve) => { - this.#postMessageWithCallback('createWindow', resolve, { options: options ?? {} }); + this.#postMessageWithCallback('createWindow', (res)=>{ + resolve(res.window); + }, { options: options ?? {} }); }) } diff --git a/src/IPC.js b/src/IPC.js index c17f8c31..7faa5fae 100644 --- a/src/IPC.js +++ b/src/IPC.js @@ -168,7 +168,7 @@ window.addEventListener('message', async (event) => { else if(event.data.msg === 'createWindow'){ // todo: validate as many of these as possible if(event.data.options){ - UIWindow({ + const win = await UIWindow({ title: event.data.options.title, disable_parent_window: event.data.options.disable_parent_window, width: event.data.options.width, @@ -180,6 +180,17 @@ window.addEventListener('message', async (event) => { iframe_srcdoc: event.data.options.content, parent_uuid: event.data.appInstanceID, }) + + // create safe window object + const safe_win = { + id: $(win).attr('data-element_uuid'), + } + + // send confirmation to requester window + target_iframe.contentWindow.postMessage({ + original_msg_id: msg_id, + window: safe_win, + }, '*'); } } //-------------------------------------------------------- @@ -312,7 +323,18 @@ window.addEventListener('message', async (event) => { // setWindowTitle //-------------------------------------------------------- else if(event.data.msg === 'setWindowTitle' && event.data.new_title !== undefined){ - const el_window = window.window_for_app_instance(event.data.appInstanceID); + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + // set window title $(el_window).find(`.window-head-title`).html(html_encode(event.data.new_title)); // send confirmation to requester window @@ -347,7 +369,6 @@ window.addEventListener('message', async (event) => { // does this window have a head? const $head = $(el_window).find('.window-head'); if($head.length > 0 && $head.css('display') !== 'none'){ - console.log('head height', $head.height()); y += $head.height(); } @@ -598,12 +619,24 @@ window.addEventListener('message', async (event) => { // setWindowWidth //-------------------------------------------------------- else if(event.data.msg === 'setWindowWidth' && event.data.width !== undefined){ + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + event.data.width = parseFloat(event.data.width); // must be at least 200 if(event.data.width < 200) event.data.width = 200; // set window width - $($el_parent_window).css('width', event.data.width); + $(el_window).css('width', event.data.width); // send confirmation to requester window target_iframe.contentWindow.postMessage({ original_msg_id: msg_id, @@ -613,13 +646,25 @@ window.addEventListener('message', async (event) => { // setWindowHeight //-------------------------------------------------------- else if(event.data.msg === 'setWindowHeight' && event.data.height !== undefined){ + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + event.data.height = parseFloat(event.data.height); // must be at least 200 if(event.data.height < 200) event.data.height = 200; // convert to number and set - $($el_parent_window).css('height', event.data.height); + $(el_window).css('height', event.data.height); // send confirmation to requester window target_iframe.contentWindow.postMessage({ @@ -630,13 +675,25 @@ window.addEventListener('message', async (event) => { // setWindowSize //-------------------------------------------------------- else if(event.data.msg === 'setWindowSize' && (event.data.width !== undefined || event.data.height !== undefined)){ + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + // convert to number and set if(event.data.width !== undefined){ event.data.width = parseFloat(event.data.width); // must be at least 200 if(event.data.width < 200) event.data.width = 200; - $($el_parent_window).css('width', event.data.width); + $(el_window).css('width', event.data.width); } if(event.data.height !== undefined){ @@ -644,7 +701,7 @@ window.addEventListener('message', async (event) => { // must be at least 200 if(event.data.height < 200) event.data.height = 200; - $($el_parent_window).css('height', event.data.height); + $(el_window).css('height', event.data.height); } // send confirmation to requester window @@ -656,6 +713,18 @@ window.addEventListener('message', async (event) => { // setWindowPosition //-------------------------------------------------------- else if(event.data.msg === 'setWindowPosition' && (event.data.x !== undefined || event.data.y !== undefined)){ + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + // convert to number and set if(event.data.x !== undefined){ event.data.x = parseFloat(event.data.x); @@ -666,7 +735,7 @@ window.addEventListener('message', async (event) => { if(event.data.x > window.innerWidth - 100) event.data.x = window.innerWidth - 100; // set window left - $($el_parent_window).css('left', parseFloat(event.data.x)); + $(el_window).css('left', parseFloat(event.data.x)); } if(event.data.y !== undefined){ @@ -678,7 +747,7 @@ window.addEventListener('message', async (event) => { if(event.data.y > window.innerHeight - 100) event.data.y = window.innerHeight - 100; // set window top - $($el_parent_window).css('top', parseFloat(event.data.y)); + $(el_window).css('top', parseFloat(event.data.y)); } // send confirmation to requester window @@ -687,6 +756,74 @@ window.addEventListener('message', async (event) => { }, '*'); } //-------------------------------------------------------- + // setWindowX + //-------------------------------------------------------- + else if(event.data.msg === 'setWindowX' && (event.data.x !== undefined)){ + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + + // convert to number and set + if(event.data.x !== undefined){ + event.data.x = parseFloat(event.data.x); + // we don't want the window to go off the left edge of the screen + if(event.data.x < 0) + event.data.x = 0; + // we don't want the window to go off the right edge of the screen + if(event.data.x > window.innerWidth - 100) + event.data.x = window.innerWidth - 100; + // set window left + $(el_window).css('left', parseFloat(event.data.x)); + } + + // send confirmation to requester window + target_iframe.contentWindow.postMessage({ + original_msg_id: msg_id, + }, '*'); + } + //-------------------------------------------------------- + // setWindowY + //-------------------------------------------------------- + else if(event.data.msg === 'setWindowY' && (event.data.y !== undefined)){ + let el_window; + // specific window + if( event.data.window_id ) + el_window = $(`.window[data-element_uuid="${html_encode(event.data.window_id)}"]`) + // app window + else + el_window = window.window_for_app_instance(event.data.appInstanceID); + + // window not found + if(!el_window || el_window.length === 0) + return; + + // convert to number and set + if(event.data.y !== undefined){ + event.data.y = parseFloat(event.data.y); + // we don't want the window to go off the top edge of the screen + if(event.data.y < window.taskbar_height) + event.data.y = window.taskbar_height; + // we don't want the window to go off the bottom edge of the screen + if(event.data.y > window.innerHeight - 100) + event.data.y = window.innerHeight - 100; + // set window top + $(el_window).css('top', parseFloat(event.data.y)); + } + + // send confirmation to requester window + target_iframe.contentWindow.postMessage({ + original_msg_id: msg_id, + }, '*'); + } + //-------------------------------------------------------- // watchItem //-------------------------------------------------------- else if(event.data.msg === 'watchItem' && event.data.item_uid !== undefined){ diff --git a/src/initgui.js b/src/initgui.js index 9be38b24..31a3b97b 100644 --- a/src/initgui.js +++ b/src/initgui.js @@ -1434,7 +1434,6 @@ $(document).on('contextmenu', '.disable-context-menu', function(e){ } }) - /** * Converts a file system path to a privacy-aware path. * - Paths starting with `~/` are returned unchanged.