diff --git a/src/gui/src/IPC.js b/src/gui/src/IPC.js index 7d4823e8..8cef32cc 100644 --- a/src/gui/src/IPC.js +++ b/src/gui/src/IPC.js @@ -30,6 +30,9 @@ import path from "./lib/path.js"; import UIContextMenu from './UI/UIContextMenu.js'; import update_mouse_position from './helpers/update_mouse_position.js'; import item_icon from './helpers/item_icon.js'; +import UIPopover from './UI/UIPopover.js'; +import socialLink from './helpers/socialLink.js'; + import { PROCESS_IPC_ATTACHED } from './definitions.js'; window.ipc_handlers = {}; @@ -46,7 +49,7 @@ window.ipc_handlers = {}; */ const ipc_listener = async (event, handled) => { const app_env = event.data?.env ?? 'app'; - + // Only process messages from apps if(app_env !== 'app') return handled.resolve(false); @@ -192,6 +195,78 @@ const ipc_listener = async (event, handled) => { response: prompt_resp, }, '*'); } + //-------------------------------------------------------- + // socialShare + //-------------------------------------------------------- + else if(event.data.msg === 'socialShare' && event.data.url !== undefined){ + const window_position = $el_parent_window.position(); + + // left position provided + if(event.data.options.left !== undefined){ + event.data.options.left = Math.abs(event.data.options.left); + event.data.options.left += window_position.left; + } + // left position not provided + else{ + // use top left of the window + event.data.options.left = window_position.left; + } + if(event.data.options.top !== undefined){ + event.data.options.top = Math.abs(event.data.options.top); + event.data.options.top += window_position.top + 30; + }else{ + // use top left of the window + event.data.options.top = window_position.top + 30; + } + + // top and left must be numbers + event.data.options.top = parseFloat(event.data.options.top); + event.data.options.left = parseFloat(event.data.options.left); + + const social_links = socialLink({url: event.data.url, title: event.data.message, description: event.data.message}); + + let h = ``; + let copy_icon = ``; + + // create html + h += `
'; + + let po = await UIPopover({ + content: h, + // snapToElement: this, + // parent_element: this, + // width: 300, + height: 100, + left: event.data.options.left, + top: event.data.options.top, + position: 'bottom', + }); + + $(po).find('.copy-link').on('click', function(e){ + const url = $(po).find('.social-url').val(); + navigator.clipboard.writeText(url); + // set checkmark + $(po).find('.copy-link').html(``); + // reset checkmark + setTimeout(function(){ + $(po).find('.copy-link').html(copy_icon) + }, 1000); + }) + } + //-------------------------------------------------------- // env //-------------------------------------------------------- diff --git a/src/puter-js/src/modules/UI.js b/src/puter-js/src/modules/UI.js index 1d318644..61ab1b8a 100644 --- a/src/puter-js/src/modules/UI.js +++ b/src/puter-js/src/modules/UI.js @@ -608,6 +608,12 @@ class UI extends EventListener { }) } + socialShare = function(url, message, options, callback) { + return new Promise((resolve) => { + this.#postMessageWithCallback('socialShare', resolve, { url, message, options }); + }) + } + prompt = function(message, placeholder, options, callback) { return new Promise((resolve) => { this.#postMessageWithCallback('PROMPT', resolve, { message, placeholder, options });