`;
- h += ``;
- h += `
`;
- h += `
${number_format((app.stats.referral_count ?? 0) + app.stats.user_count)}`;
- h += `
${number_format(app.stats.open_count)}`;
- h += `Drop your app folder and files here to deploy.
HTML, JS, CSS, ...
`; const index_missing_error = `Please upload an 'index.html' file or if you're uploading a directory, make sure it contains an 'index.html' file at its root.`; -const lock_svg = ''; +const lock_svg = + ''; + // authUsername (async () => { - let user = await puter.auth.getUser(); + let user = await puter.auth.getUser(); - if (user?.username) { - authUsername = user.username; - } -})() + if (user?.username) { + authUsername = user.username; + } +})(); // source_path -if (URLParams.has('source_path')) { - source_path = URLParams.get('source_path'); +if (URLParams.has("source_path")) { + source_path = URLParams.get("source_path"); } else { - source_path = null; + source_path = null; } // domain and APIOrigin -if (URLParams.has('puter.domain')) { - domain = URLParams.get('puter.domain') +if (URLParams.has("puter.domain")) { + domain = URLParams.get("puter.domain"); } // static hosting domain -let static_hosting_domain = 'puter.site'; -if(domain === 'puter.localhost'){ - static_hosting_domain = 'site.puter.localhost'; +let static_hosting_domain = "puter.site"; +if (domain === "puter.localhost") { + static_hosting_domain = "site.puter.localhost"; } // add port to static_hosting_domain if provided -if (URLParams.has('puter.port') && URLParams.get('puter.port')) { - static_hosting_domain = static_hosting_domain + `:` + html_encode(URLParams.get('puter.port')); +if (URLParams.has("puter.port") && URLParams.get("puter.port")) { + static_hosting_domain = + static_hosting_domain + `:` + html_encode(URLParams.get("puter.port")); } // protocol -let protocol = 'https'; -if (URLParams.has('puter.protocol') && URLParams.get('puter.protocol') === 'http') - protocol = 'http'; +let protocol = "https"; +if ( + URLParams.has("puter.protocol") && + URLParams.get("puter.protocol") === "http" +) + protocol = "http"; // port -let port = ''; -if (URLParams.has('puter.port') && URLParams.get('puter.port')) { - port = html_encode(URLParams.get('puter.port')); +let port = ""; +if (URLParams.has("puter.port") && URLParams.get("puter.port")) { + port = html_encode(URLParams.get("puter.port")); } -$(document).ready(function () { - // initialize assets directory - initializeAssetsDirectory(); - - $('#loading').show(); - - setTimeout(async function () { - puter.ui.onLaunchedWithItems(async function (items) { - source_path = items[0].path; - // if source_path is provided, this means that the user is creating a new app/updating an existing app - // by deploying an existing Puter folder. So we create the app and deploy it. - if (source_path) { - // todo if there are no apps, go straight to creating a new app - $('.insta-deploy-modal').get(0).showModal(); - // set item name - $('.insta-deploy-item-name').html(html_encode(items[0].name)); - } - }) +$(document).ready(function() { + // initialize assets directory + initializeAssetsDirectory(); + + $("#loading").show(); + + setTimeout(async function() { + puter.ui.onLaunchedWithItems(async function(items) { + source_path = items[0].path; + // if source_path is provided, this means that the user is creating a new app/updating an existing app + // by deploying an existing Puter folder. So we create the app and deploy it. + if (source_path) { + // todo if there are no apps, go straight to creating a new app + $(".insta-deploy-modal").get(0).showModal(); + // set item name + $(".insta-deploy-item-name").html(html_encode(items[0].name)); + } + }); - // Get dev profile. This is only for puter.com for now as we don't have dev profiles in self-hosted Puter - if(domain === 'puter.com'){ - puter.apps.getDeveloperProfile(async function (dev_profile) { - developer = dev_profile; - if (dev_profile.approved_for_incentive_program && !dev_profile.joined_incentive_program) { - $('#join-incentive-program').show(); - } + // Get dev profile. This is only for puter.com for now as we don't have dev profiles in self-hosted Puter + if (domain === "puter.com") { + puter.apps.getDeveloperProfile(async function(dev_profile) { + developer = dev_profile; + if ( + dev_profile.approved_for_incentive_program && + !dev_profile.joined_incentive_program + ) { + $("#join-incentive-program").show(); + } - // show earn money c2a only if dev is not approved for incentive program or has already joined - if (!dev_profile.approved_for_incentive_program || dev_profile.joined_incentive_program) { - puter.kv.get('earn-money-c2a-closed').then((value) => { - if (value?.result || value === true || value === "true") - return; + // show earn money c2a only if dev is not approved for incentive program or has already joined + if ( + !dev_profile.approved_for_incentive_program || + dev_profile.joined_incentive_program + ) { + puter.kv.get("earn-money-c2a-closed").then((value) => { + if (value?.result || value === true || value === "true") return; - $('#earn-money').get(0).showModal(); - }); - } + $("#earn-money").get(0).showModal(); + }); + } - // show payout method tab if dev has joined incentive program - if (dev_profile.joined_incentive_program) { - $('.tab-btn[data-tab="payout-method"]').show(); - $('#payout-method-email').html(dev_profile.paypal); - } - }) + // show payout method tab if dev has joined incentive program + if (dev_profile.joined_incentive_program) { + $('.tab-btn[data-tab="payout-method"]').show(); + $("#payout-method-email").html(dev_profile.paypal); } - // Get apps - puter.apps.list().then((resp) => { - apps = resp; + }); + } + // Get apps + puter.apps.list().then((resp) => { + apps = resp; - // hide loading - $('#loading').hide(); + // hide loading + $("#loading").hide(); - // set apps - if (apps.length > 0) { - if (activeTab === 'apps') { - $('#no-apps-notice').hide(); - $('#app-list').show(); - } - $('.app-card').remove(); - apps.forEach(app => { - $('#app-list-table > tbody').append(generate_app_card(app)); - }); - count_apps(); - sort_apps(); - } else { - $('#no-apps-notice').show(); - } - }) - }, 1000); + // set apps + if (apps.length > 0) { + if (activeTab === "apps") { + $("#no-apps-notice").hide(); + $("#app-list").show(); + } + $(".app-card").remove(); + apps.forEach((app) => { + $("#app-list-table > tbody").append(generate_app_card(app)); + }); + count_apps(); + sort_apps(); + } else { + $("#no-apps-notice").show(); + } + }); + }, 1000); }); /** - * Refreshes the list of apps in the UI. - * - * @param {boolean} [show_loading=false] - Whether to show a loading indicator while refreshing. - * - */ +* Refreshes the list of apps in the UI. +* +* @param {boolean} [show_loading=false] - Whether to show a loading indicator while refreshing. +* +*/ function refresh_app_list(show_loading = false) { - if (show_loading) - $('#loading').show(); - // get apps - setTimeout(function () { - // uncheck the select all checkbox - $('.select-all-apps').prop('checked', false); - - puter.apps.list().then((apps_res) => { - $('#loading').hide(); - apps = apps_res; - if (apps.length > 0) { - if (activeTab === 'apps') { - $('#no-apps-notice').hide(); - $('#app-list').show(); - } - $('.app-card').remove(); - apps.forEach(app => { - $('#app-list-table > tbody').append(generate_app_card(app)); - }); - count_apps(); - sort_apps(); - } else { - $('#no-apps-notice').show(); - $('#app-list').hide() - } - }) - }, show_loading ? 1000 : 0); + if (show_loading) $("#loading").show(); + // get apps + setTimeout( + function() { + // uncheck the select all checkbox + $(".select-all-apps").prop("checked", false); + + puter.apps.list().then((apps_res) => { + $("#loading").hide(); + apps = apps_res; + if (apps.length > 0) { + if (activeTab === "apps") { + $("#no-apps-notice").hide(); + $("#app-list").show(); + } + $(".app-card").remove(); + apps.forEach((app) => { + $("#app-list-table > tbody").append(generate_app_card(app)); + }); + count_apps(); + sort_apps(); + } else { + $("#no-apps-notice").show(); + $("#app-list").hide(); + } + }); + }, + show_loading ? 1000 : 0 + ); } -$(document).on('click', '.tab-btn', function (e) { - $('section:not(.sidebar)').hide(); - $('.tab-btn').removeClass('active'); - $(this).addClass('active'); - $('section[data-tab="' + $(this).attr('data-tab') + '"]').show(); - - // --------------------------------------------------------------- - // Apps tab - // --------------------------------------------------------------- - if ($(this).attr('data-tab') === 'apps') { - refresh_app_list(); - activeTab = 'apps'; - } - // --------------------------------------------------------------- - // Payout Method tab - // --------------------------------------------------------------- - else if ($(this).attr('data-tab') === 'payout-method') { - activeTab = 'payout-method'; - $('#loading').show(); - setTimeout(function () { - puter.apps.getDeveloperProfile(function (dev_profile) { - // show payout method tab if dev has joined incentive program - if (dev_profile.joined_incentive_program) { - $('#payout-method-email').html(dev_profile.paypal); - } - $('#loading').hide(); - if (activeTab === 'payout-method') - $('#tab-payout-method').show(); - }) - }, 1000); - } -}) - -$(document).on('click', '.create-an-app-btn', async function (e) { - let title = await puter.ui.prompt('Please enter a title for your app:', 'My Awesome App'); +$(document).on("click", ".tab-btn", function(e) { + $("section:not(.sidebar)").hide(); + $(".tab-btn").removeClass("active"); + $(this).addClass("active"); + $('section[data-tab="' + $(this).attr("data-tab") + '"]').show(); + + // --------------------------------------------------------------- + // Apps tab + // --------------------------------------------------------------- + if ($(this).attr("data-tab") === "apps") { + refresh_app_list(); + activeTab = "apps"; + } + // --------------------------------------------------------------- + // Payout Method tab + // --------------------------------------------------------------- + else if ($(this).attr("data-tab") === "payout-method") { + activeTab = "payout-method"; + $("#loading").show(); + setTimeout(function() { + puter.apps.getDeveloperProfile(function(dev_profile) { + // show payout method tab if dev has joined incentive program + if (dev_profile.joined_incentive_program) { + $("#payout-method-email").html(dev_profile.paypal); + } + $("#loading").hide(); + if (activeTab === "payout-method") $("#tab-payout-method").show(); + }); + }, 1000); + } +}); - if (title.length > 60) { - puter.ui.alert(`Title cannot be longer than 60.`, [ - { - label: 'Ok', - }, - ]); - // todo go back to create an app prompt and prefill the title input with the title the user entered - return; - } - else if (title) { - create_app(title); - } -}) +$(document).on("click", ".create-an-app-btn", async function(e) { + let title = await puter.ui.prompt( + "Please enter a title for your app:", + "My Awesome App" + ); + + if (title.length > 60) { + puter.ui.alert(`Title cannot be longer than 60.`, [ + { + label: "Ok", + }, + ]); + // todo go back to create an app prompt and prefill the title input with the title the user entered + return; + } else if (title) { + create_app(title); + } +}); async function create_app(title, source_path = null, items = null) { - // name - let name = slugify(title, { - lower: true, - strict: true, - }); - - // icon - let icon = await getBase64ImageFromUrl('./img/app.svg'); - - // open the 'Creting new app...' modal - let start_ts = Date.now(); - $('.new-app-modal').get(0).showModal(); - - //---------------------------------------------------- - // Create app - //---------------------------------------------------- - puter.apps.create({ - title: title, - name: name, - indexURL: 'https://dev-center.puter.com/coming-soon.html', - icon: icon, - description: ' ', - maximizeOnStart: false, - background: false, - dedupeName: true, - metadata: { - window_resizable: true, - credentialless: true, - }, - + // name + let name = slugify(title, { + lower: true, + strict: true, + }); + + // icon + let icon = await getBase64ImageFromUrl("./img/app.svg"); + + // open the 'Creting new app...' modal + let start_ts = Date.now(); + $(".new-app-modal").get(0).showModal(); + + //---------------------------------------------------- + // Create app + //---------------------------------------------------- + puter.apps + .create({ + title: title, + name: name, + indexURL: "https://dev-center.puter.com/coming-soon.html", + icon: icon, + description: " ", + maximizeOnStart: false, + background: false, + dedupeName: true, + metadata: { + window_resizable: true, + credentialless: true, + }, + }) + .then(async (app) => { + let app_dir; + // ---------------------------------------------------- + // Create app directory in AppData + // ---------------------------------------------------- + app_dir = await puter.fs.mkdir( + `/${authUsername}/AppData/${dev_center_uid}/${app.uid}`, + { overwrite: true, recursive: true, rename: false } + ); + // ---------------------------------------------------- + // Create a router for the app with a fresh hostname + // ---------------------------------------------------- + let subdomain = name + "-" + Math.random().toString(36).substring(2); + await puter.hosting.create(subdomain, app_dir.path); + + // ---------------------------------------------------- + // Update the app with the new hostname + // ---------------------------------------------------- + puter.apps + .update(app.name, { + title: title, + indexURL: source_path + ? protocol + `://${subdomain}.` + static_hosting_domain + : "https://dev-center.puter.com/coming-soon.html", + icon: icon, + description: " ", + maximizeOnStart: false, + background: false, }) .then(async (app) => { - let app_dir; - // ---------------------------------------------------- - // Create app directory in AppData - // ---------------------------------------------------- - app_dir = await puter.fs.mkdir( - `/${authUsername}/AppData/${dev_center_uid}/${app.uid}`, - { overwrite: true, recursive: true, rename: false } - ); - // ---------------------------------------------------- - // Create a router for the app with a fresh hostname - // ---------------------------------------------------- - let subdomain = name + '-' + Math.random().toString(36).substring(2) - await puter.hosting.create(subdomain, app_dir.path); - - // ---------------------------------------------------- - // Update the app with the new hostname - // ---------------------------------------------------- - puter.apps.update(app.name, { - title: title, - indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html', - icon: icon, - description: ' ', - maximizeOnStart: false, - background: false, - }).then(async (app) => { - // refresh app list - puter.apps.list().then(async (resp) => { - apps = resp; - // Close the 'Creting new app...' modal - // but make sure it was shown for at least 2 seconds - setTimeout(() => { - // open edit app section - edit_app_section(app.name); - // set drop area if source_path was provided or items were dropped - if (source_path || items) { - $('.drop-area').removeClass('drop-area-hover'); - $('.drop-area').addClass('drop-area-ready-to-deploy'); - } - $('.new-app-modal').get(0).close(); - // deploy app if source_path was provided - if (source_path) { - deploy(app, source_path); - } else if (items) { - deploy(app, items); - } - }, (Date.now() - start_ts) > 2000 ? 1 : 2000 - (Date.now() - start_ts)); - }) - }).catch(async (err) => { - console.log(err); - }) - // ---------------------------------------------------- - // Create a "shortcut" on the desktop - // ---------------------------------------------------- - puter.fs.upload(new File([], app.title), - `/${authUsername}/Desktop`, - { - name: app.title, - dedupeName: true, - overwrite: false, - appUID: app.uid, + // refresh app list + puter.apps.list().then(async (resp) => { + apps = resp; + // Close the 'Creting new app...' modal + // but make sure it was shown for at least 2 seconds + setTimeout( + () => { + // open edit app section + edit_app_section(app.name); + // set drop area if source_path was provided or items were dropped + if (source_path || items) { + $(".drop-area").removeClass("drop-area-hover"); + $(".drop-area").addClass("drop-area-ready-to-deploy"); } - ) - }).catch(async (err) => { - $('#create-app-error').show(); - $('#create-app-error').html(err.message); - // scroll to top so that user sees error message - document.body.scrollTop = document.documentElement.scrollTop = 0; + $(".new-app-modal").get(0).close(); + // deploy app if source_path was provided + if (source_path) { + deploy(app, source_path); + } else if (items) { + deploy(app, items); + } + }, + Date.now() - start_ts > 2000 ? 1 : 2000 - (Date.now() - start_ts) + ); + }); }) + .catch(async (err) => { + console.log(err); + }); + // ---------------------------------------------------- + // Create a "shortcut" on the desktop + // ---------------------------------------------------- + puter.fs.upload(new File([], app.title), `/${authUsername}/Desktop`, { + name: app.title, + dedupeName: true, + overwrite: false, + appUID: app.uid, + }); + }) + .catch(async (err) => { + $("#create-app-error").show(); + $("#create-app-error").html(err.message); + // scroll to top so that user sees error message + document.body.scrollTop = document.documentElement.scrollTop = 0; + }); } +$(document).on("click", ".deploy-btn", function(e) { + deploy(currently_editing_app, dropped_items); +}); -$(document).on('click', '.deploy-btn', function (e) { - deploy(currently_editing_app, dropped_items); -}) - -$(document).on('click', '.edit-app, .got-to-edit-app', function (e) { - const cur_app_name = $(this).attr('data-app-name') - edit_app_section(cur_app_name); -}) +$(document).on("click", ".edit-app, .got-to-edit-app", function(e) { + const cur_app_name = $(this).attr("data-app-name"); + edit_app_section(cur_app_name); +}); -$(document).on('click', '.delete-app', async function (e) { - let app_uid = $(this).attr('data-app-uid'); - let app_title = $(this).attr('data-app-title'); - let app_name = $(this).attr('data-app-name'); +$(document).on("click", ".delete-app", async function(e) { + let app_uid = $(this).attr("data-app-uid"); + let app_title = $(this).attr("data-app-title"); + let app_name = $(this).attr("data-app-name"); - // get app - const app_data = await puter.apps.get(app_name); + // get app + const app_data = await puter.apps.get(app_name); - if(app_data.metadata?.locked){ - puter.ui.alert(`${app_data.title} is locked and cannot be deleted.`, [ - { - label: 'Ok', - }, - ], { - type: 'warning', - }); - return; - } - - // confirm delete - const alert_resp = await puter.ui.alert(`Are you sure you want to premanently delete ${html_encode(app_title)}?`, - [ - { - label: 'Yes, delete permanently', - value: 'delete', - type: 'danger', - }, - { - label: 'Cancel' - }, - ] + if (app_data.metadata?.locked) { + puter.ui.alert( + `${app_data.title} is locked and cannot be deleted.`, + [ + { + label: "Ok", + }, + ], + { + type: "warning", + } ); + return; + } + + // confirm delete + const alert_resp = await puter.ui.alert( + `Are you sure you want to premanently delete ${html_encode(app_title)}?`, + [ + { + label: "Yes, delete permanently", + value: "delete", + type: "danger", + }, + { + label: "Cancel", + }, + ] + ); + + if (alert_resp === "delete") { + let init_ts = Date.now(); + $(".deleting-app-modal")?.get(0)?.showModal(); + puter.apps + .delete(app_name) + .then(async (app) => { + setTimeout( + () => { + $(".deleting-app-modal")?.get(0)?.close(); + $(`.app-card[data-uid="${app_uid}"]`).fadeOut( + 200, + function name(params) { + $(this).remove(); + if ($(`.app-card`).length === 0) { + $("section:not(.sidebar)").hide(); + $("#no-apps-notice").show(); + } else { + $("section:not(.sidebar)").hide(); + $("#app-list").show(); + } + count_apps(); + } + ); + }, + // make sure the modal was shown for at least 2 seconds + Date.now() - init_ts > 2000 ? 1 : 2000 - (Date.now() - init_ts) + ); - if (alert_resp === 'delete') { - let init_ts = Date.now(); - $('.deleting-app-modal')?.get(0)?.showModal(); - puter.apps.delete(app_name).then(async (app) => { - setTimeout(() => { - $('.deleting-app-modal')?.get(0)?.close(); - $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) { - $(this).remove(); - if ($(`.app-card`).length === 0) { - $('section:not(.sidebar)').hide(); - $('#no-apps-notice').show(); - } else { - $('section:not(.sidebar)').hide(); - $('#app-list').show(); - } - count_apps(); - }); - }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); - - // get app directory - puter.fs.stat({ - path: `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, - returnSubdomains: true, - }).then(async (stat) => { - // delete subdomain associated with the app dir - puter.hosting.delete(stat.subdomains[0].subdomain) - // delete app directory - puter.fs.delete( - `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, - { recursive: true } - ) - }) - }).catch(async (err) => { - setTimeout(() => { - - $('.deleting-app-modal')?.get(0)?.close(); - puter.ui.alert(err?.message, [ - { - label: 'Ok', - }, - ]); - }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); - }) - } -}) + // get app directory + puter.fs + .stat({ + path: `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, + returnSubdomains: true, + }) + .then(async (stat) => { + // delete subdomain associated with the app dir + puter.hosting.delete(stat.subdomains[0].subdomain); + // delete app directory + puter.fs.delete( + `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, + { recursive: true } + ); + }); + }) + .catch(async (err) => { + setTimeout( + () => { + $(".deleting-app-modal")?.get(0)?.close(); + puter.ui.alert(err?.message, [ + { + label: "Ok", + }, + ]); + }, + // make sure the modal was shown for at least 2 seconds + Date.now() - init_ts > 2000 ? 1 : 2000 - (Date.now() - init_ts) + ); + }); + } +}); // generate app link function applink(app) { - return protocol + `://${domain}${ port ? ':' + port : '' }/app/${app.name}`; + return protocol + `://${domain}${port ? ":" + port : ""}/app/${app.name}`; } /** - * Generates the HTML for the app editing section. - * - * @param {Object} app - The app object containing details of the app to be edited. - * * - * @returns {string} HTML string for the app editing section. - * - * @description - * This function creates the HTML for the app editing interface, including: - * - App icon and title display - * - Options to open, add to desktop, or delete the app - * - Tabs for deployment and settings - * - Form fields for editing various app properties - * - Display of app statistics - * - * The generated HTML includes interactive elements and placeholders for - * dynamic content to be filled or updated by other functions. - * - * @example - * const appEditHTML = generate_edit_app_section(myAppObject); - * $('#edit-app').html(appEditHTML); - */ +* Generates the HTML for the app editing section. +* +* @param {Object} app - The app object containing details of the app to be edited. +* * +* @returns {string} HTML string for the app editing section. +* +* @description +* This function creates the HTML for the app editing interface, including: +* - App icon and title display +* - Options to open, add to desktop, or delete the app +* - Tabs for deployment and settings +* - Form fields for editing various app properties +* - Display of app statistics +* +* The generated HTML includes interactive elements and placeholders for +* dynamic content to be filled or updated by other functions. +* +* @example +* const appEditHTML = generate_edit_app_section(myAppObject); +* $('#edit-app').html(appEditHTML); +*/ function generate_edit_app_section(app) { if(app.result) @@ -555,59 +591,60 @@ function generate_edit_app_section(app) { -A comma-separated list of file type specifiers. For example if you include .txt, your apps could be opened when a user clicks on a TXT file.
A list of file type specifiers. For example if you include .txt your apps could be opened when a user clicks on a TXT file.
When locked, the app cannot be deleted. This is useful to prevent accidental deletion of important apps.
credentialless attribute for the iframe tag.
${items.length} items
Ready to deploy 🚀
Cancel
`; + $(".drop-area").html(drop_area_content); - // get dropped items - dropped_items = await puter.ui.getEntriesFromDataTransferItems(e.dataTransfer.items); - - // generate a flat array of full paths from the dropped items - let paths = []; - for (let item of dropped_items) { - paths.push('/' + (item.fullPath ?? item.filepath)); - } - - // generate a directory tree from the paths - let tree = generateDirTree(paths); - - dropped_items = setRootDirTree(tree, dropped_items); - - // alert if no index.html in root - if (!hasRootIndexHtml(tree)) { - puter.ui.alert(index_missing_error, [ - { - label: 'Ok', - }, - ]); - $('.drop-area').removeClass('drop-area-ready-to-deploy'); - $('.deploy-btn').addClass('disabled'); - dropped_items = []; - return; + // enable deploy button + $(".deploy-btn").removeClass("disabled"); + } else { + puter.ui.alert( + `You need to have an index.html file in your deployment.`, + [ + { + label: "Ok", + }, + ] + ); + $(".drop-area").removeClass("drop-area-ready-to-deploy"); + $(".drop-area").removeClass("drop-area-hover"); + $(".deploy-btn").addClass("disabled"); + dropped_items = []; + } + return; + } + // ---------------------------------------------------- + // One Puter directory dropped + // ---------------------------------------------------- + else if (items.length === 1 && items[0].isDirectory) { + let children = await puter.fs.readdir(items[0].path); + // check if index.html exists, if found, deploy entire directory + for (let child of children) { + if (child.name === "index.html") { + // deploy(currently_editing_app, items[0].path); + dropped_items = items[0].path; + let rootItems = ""; + + if (children.length === 1) rootItems = children[0].name; + else if (children.length === 2) + rootItems = children[0].name + ", " + children[1].name; + else if (children.length === 3) + rootItems = + children[0].name + + ", " + + children[1].name + + ", and" + + children[1].name; + else if (children.length > 3) + rootItems = + children[0].name + + ", " + + children[1].name + + ", and " + + (children.length - 2) + + " more item" + + (children.length - 2 > 1 ? "s" : ""); + + $(".drop-area").removeClass("drop-area-hover"); + $(".drop-area").addClass("drop-area-ready-to-deploy"); + drop_area_content = `${rootItems}
Ready to deploy 🚀
Cancel
`; + $(".drop-area").html(drop_area_content); + + // enable deploy button + $(".deploy-btn").removeClass("disabled"); + return; } + } - // Get all keys (directories and files) in the root - const rootKeys = Object.keys(tree); + // no index.html in directory + puter.ui.alert(index_missing_error, [ + { + label: "Ok", + }, + ]); + $(".drop-area").removeClass("drop-area-ready-to-deploy"); + $(".deploy-btn").addClass("disabled"); + dropped_items = []; + } - // generate a list of items in the root in the form of a string (e.g. /index.html, /css/style.css) with maximum of 3 items - let rootItems = ''; + return false; + } + + //----------------------------------------------------------------------------- + // Local items dropped + //----------------------------------------------------------------------------- + if ( + !e.dataTransfer || + !e.dataTransfer.items || + e.dataTransfer.items.length === 0 + ) + return; - if (rootKeys.length === 1) - rootItems = rootKeys[0]; - else if (rootKeys.length === 2) - rootItems = rootKeys[0] + ', ' + rootKeys[1]; - else if (rootKeys.length === 3) - rootItems = rootKeys[0] + ', ' + rootKeys[1] + ', and' + rootKeys[1]; - else if (rootKeys.length > 3) - rootItems = rootKeys[0] + ', ' + rootKeys[1] + ', and ' + (rootKeys.length - 2) + ' more item' + (rootKeys.length - 2 > 1 ? 's' : ''); + // get dropped items + dropped_items = await puter.ui.getEntriesFromDataTransferItems( + e.dataTransfer.items + ); - rootItems = html_encode(rootItems); - $('.drop-area').removeClass('drop-area-hover'); - $('.drop-area').addClass('drop-area-ready-to-deploy'); - drop_area_content = `${rootItems}
Ready to deploy 🚀
Cancel
`; - $('.drop-area').html(drop_area_content); + // generate a flat array of full paths from the dropped items + let paths = []; + for (let item of dropped_items) { + paths.push("/" + (item.fullPath ?? item.filepath)); + } - // enable deploy button - $('.deploy-btn').removeClass('disabled'); + // generate a directory tree from the paths + let tree = generateDirTree(paths); - return false; - } - }); + dropped_items = setRootDirTree(tree, dropped_items); - // Focus on the first input - $('#edit-app-title').focus(); + // alert if no index.html in root + if (!hasRootIndexHtml(tree)) { + puter.ui.alert(index_missing_error, [ + { + label: "Ok", + }, + ]); + $(".drop-area").removeClass("drop-area-ready-to-deploy"); + $(".deploy-btn").addClass("disabled"); + dropped_items = []; + return; + } + + // Get all keys (directories and files) in the root + const rootKeys = Object.keys(tree); + + // generate a list of items in the root in the form of a string (e.g. /index.html, /css/style.css) with maximum of 3 items + let rootItems = ""; + + if (rootKeys.length === 1) rootItems = rootKeys[0]; + else if (rootKeys.length === 2) + rootItems = rootKeys[0] + ", " + rootKeys[1]; + else if (rootKeys.length === 3) + rootItems = rootKeys[0] + ", " + rootKeys[1] + ", and" + rootKeys[1]; + else if (rootKeys.length > 3) + rootItems = + rootKeys[0] + + ", " + + rootKeys[1] + + ", and " + + (rootKeys.length - 2) + + " more item" + + (rootKeys.length - 2 > 1 ? "s" : ""); + + rootItems = html_encode(rootItems); + $(".drop-area").removeClass("drop-area-hover"); + $(".drop-area").addClass("drop-area-ready-to-deploy"); + drop_area_content = `${rootItems}
Ready to deploy 🚀
Cancel
`; + $(".drop-area").html(drop_area_content); + + // enable deploy button + $(".deploy-btn").removeClass("disabled"); + + return false; + }, + }); + + // Focus on the first input + $("#edit-app-title").focus(); } -$('.jip-submit-btn').on('click', async function (e) { - const first_name = $('#jip-first-name').val(); - const last_name = $('#jip-last-name').val(); - const paypal = $('#jip-paypal').val(); - let error; - - if (first_name === '' || last_name === '' || paypal === '') - error = `All fields are required.`; - else if (first_name.length > 100) - error = `First Name cannot be longer than ${100}.`; - else if (last_name.length > 100) - error = `Last Name cannot be longer than ${100}.`; - else if (paypal.length > 100) - error = `Paypal cannot be longer than ${100}.`; - // check if email is valid - else if (!validateEmail(paypal)) - error = `Paypal email must be a valid email address.`; - - // error? - if (error) { - $('#jip-error').show(); - $('#jip-error').html(error); - document.body.scrollTop = document.documentElement.scrollTop = 0; - return; +$(".jip-submit-btn").on("click", async function(e) { + const first_name = $("#jip-first-name").val(); + const last_name = $("#jip-last-name").val(); + const paypal = $("#jip-paypal").val(); + let error; + + if (first_name === "" || last_name === "" || paypal === "") + error = `All fields are required.`; + else if (first_name.length > 100) + error = `First Name cannot be longer than ${100}.`; + else if (last_name.length > 100) + error = `Last Name cannot be longer than ${100}.`; + else if (paypal.length > 100) + error = `Paypal cannot be longer than ${100}.`; + // check if email is valid + else if (!validateEmail(paypal)) + error = `Paypal email must be a valid email address.`; + + // error? + if (error) { + $("#jip-error").show(); + $("#jip-error").html(error); + document.body.scrollTop = document.documentElement.scrollTop = 0; + return; + } + + // disable submit button + $(".jip-submit-btn").prop("disabled", true); + + $.ajax({ + url: puter.APIOrigin + "/jip", + type: "POST", + async: true, + contentType: "application/json", + data: JSON.stringify({ + first_name: first_name, + last_name: last_name, + paypal: paypal, + }), + headers: { + Authorization: "Bearer " + puter.authToken, + }, + success: function() { + $("#jip-success").show(); + $("#jip-form").hide(); + //enable submit button + $(".jip-submit-btn").prop("disabled", false); + // update dev profile + $("#payout-method-email").html(paypal); + // show payout method tab + $('.tab-btn[data-tab="payout-method"]').show(); + }, + error: function(err) { + $("#jip-error").show(); + $("#jip-error").html(err.message); + // scroll to top so that user sees error message + document.body.scrollTop = document.documentElement.scrollTop = 0; + // enable submit button + $(".jip-submit-btn").prop("disabled", false); + }, + }); +}); + +$(document).on("click", ".edit-app-save-btn", async function(e) { + const title = $("#edit-app-title").val(); + const name = $("#edit-app-name").val(); + 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(); + const category = $("#edit-app-category").val(); + + let filetype_associations = $("#edit-app-filetype-associations").val(); + + let icon; + + let error; + + //validation + if (title === "") error = `Title is required.`; + else if (title.length > 60) + error = `Title cannot be longer than ${60}.`; + else if (name === "") error = `Name is required.`; + else if (name.length > 60) + error = `Name cannot be longer than ${60}.`; + else if (index_url === "") error = `Index URL is required.`; + else if (!name.match(/^[a-zA-Z0-9-_-]+$/)) + error = `Name can only contain letters, numbers, dash (-) and underscore (_).`; + else if (!is_valid_url(index_url)) + error = `Index URL must be a valid url.`; + else if ( + !index_url.toLowerCase().startsWith("https://") && + !index_url.toLowerCase().startsWith("http://") + ) + error = `Index URL must start with 'https://' or 'http://'.`; + // height must be a number + else if (isNaN(height)) + error = `Window Height must be a number.`; + // height must be greater than 0 + else if (height <= 0) + error = `Window Height must be greater than 0.`; + // width must be a number + else if (isNaN(width)) + error = `Window Width must be a number.`; + // width must be greater than 0 + else if (width <= 0) + error = `Window Width must be greater than 0.`; + // top must be a number + else if (top && isNaN(top)) + error = `Window Top must be a number.`; + // left must be a number + else if (left && isNaN(left)) + error = `Window Left must be a number.`; + // download icon from URL + else { + let icon_url = $("#edit-app-icon").attr("data-url"); + let icon_base64 = $("#edit-app-icon").attr("data-base64"); + + if (icon_base64) { + icon = icon_base64; + } else if (icon_url) { + icon = await getBase64ImageFromUrl(icon_url); + let app_max_icon_size = 5 * 1024 * 1024; + if (icon.length > app_max_icon_size) + error = `Icon cannot be larger than ${byte_format(app_max_icon_size)}`; + // make sure icon is an image + else if ( + !icon.startsWith("data:image/") && + !icon.startsWith("data:application/octet-stream") + ) + error = `Icon must be an image.`; + } else { + icon = null; } + } - // disable submit button - $('.jip-submit-btn').prop('disabled', true); - - $.ajax({ - url: puter.APIOrigin + "/jip", - type: 'POST', - async: true, - contentType: "application/json", - data: JSON.stringify({ - first_name: first_name, - last_name: last_name, - paypal: paypal, - }), - headers: { - "Authorization": "Bearer " + puter.authToken - }, - success: function () { - $('#jip-success').show(); - $('#jip-form').hide(); - //enable submit button - $('.jip-submit-btn').prop('disabled', false); - // update dev profile - $('#payout-method-email').html(paypal); - // show payout method tab - $('.tab-btn[data-tab="payout-method"]').show(); - }, - error: function (err) { - $('#jip-error').show(); - $('#jip-error').html(err.message); - // scroll to top so that user sees error message - document.body.scrollTop = document.documentElement.scrollTop = 0; - // enable submit button - $('.jip-submit-btn').prop('disabled', false); - } - }) -}) -$(document).on('click', '.edit-app-save-btn', async function (e) { - const title = $('#edit-app-title').val(); - const name = $('#edit-app-name').val(); - 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(); - const category = $('#edit-app-category').val(); - - let filetype_associations = $('#edit-app-filetype-associations').val(); - - let icon; - - let error; - - //validation - if (title === '') - error = `Title is required.`; - else if (title.length > 60) - error = `Title cannot be longer than ${60}.`; - else if (name === '') - error = `Name is required.`; - else if (name.length > 60) - error = `Name cannot be longer than ${60}.`; - else if (index_url === '') - error = `Index URL is required.`; - else if (!name.match(/^[a-zA-Z0-9-_-]+$/)) - error = `Name can only contain letters, numbers, dash (-) and underscore (_).`; - else if (!is_valid_url(index_url)) - error = `Index URL must be a valid url.`; - else if (!index_url.toLowerCase().startsWith('https://') && !index_url.toLowerCase().startsWith('http://')) - error = `Index URL must start with 'https://' or 'http://'.`; - // height must be a number - else if (isNaN(height)) - error = `Window Height must be a number.`; - // height must be greater than 0 - else if (height <= 0) - error = `Window Height must be greater than 0.`; - // width must be a number - else if (isNaN(width)) - error = `Window Width must be a number.`; - // width must be greater than 0 - else if (width <= 0) - error = `Window Width must be greater than 0.`; - // top must be a number - else if (top && isNaN(top)) - error = `Window Top must be a number.`; - // left must be a number - else if (left && isNaN(left)) - error = `Window Left must be a number.`; - - // download icon from URL - else { - let icon_url = $('#edit-app-icon').attr('data-url'); - let icon_base64 = $('#edit-app-icon').attr('data-base64'); - - if(icon_base64){ - icon = icon_base64; - }else if (icon_url) { - icon = await getBase64ImageFromUrl(icon_url); - let app_max_icon_size = 5 * 1024 * 1024; - if (icon.length > app_max_icon_size) - error = `Icon cannot be larger than ${byte_format(app_max_icon_size)}`; - // make sure icon is an image - else if (!icon.startsWith('data:image/') && !icon.startsWith('data:application/octet-stream')) - error = `Icon must be an image.`; - }else{ - icon = null; - } + //parse filetype_associations and validations + // Tagify returns a JSON string, so we parse it into an array + filetype_associations = JSON.parse(filetype_associations); + + filetype_associations = filetype_associations.map((type) => { + const fileType = type.value; + + + if ( + !fileType || + fileType === "." || + fileType === "/" + ) { + error = `File Association Type must be valid.`; + return null; // Return null for invalid cases } - // error? - if (error) { - $('#edit-app-error').show(); - $('#edit-app-error').html(error); - document.body.scrollTop = document.documentElement.scrollTop = 0; - return; + const lower = fileType.toLocaleLowerCase(); + + if (fileType.includes("/")) { + return lower; + } else if (fileType.includes(".")) { + return "." + lower.split(".")[1]; + } else { + return "." + lower; } + }).filter(Boolean); // Remove null or undefined values - // show working spinner - puter.ui.showSpinner(); - // parse filetype_associations - filetype_associations = filetype_associations.split(',').map(element => element.trim()); - // disable submit button - $('.edit-app-save-btn').prop('disabled', true); + // error? + if (error) { + $("#edit-app-error").show(); + $("#edit-app-error").html(error); + document.body.scrollTop = document.documentElement.scrollTop = 0; + return; + } - let socialImageUrl = null; - if ($('#edit-app-social-image').attr('data-base64')) { - socialImageUrl = await handleSocialImageUpload(name, $('#edit-app-social-image').attr('data-base64')); - } else if ($('#edit-app-social-image').attr('data-url')) { - socialImageUrl = $('#edit-app-social-image').attr('data-url'); - } - - puter.apps.update(currently_editing_app.name, { - title: title, - name: name, - indexURL: index_url, - icon: icon, - description: description, - maximizeOnStart: $('#edit-app-maximize-on-start').is(":checked"), - background: $('#edit-app-background').is(":checked"), - metadata: { - fullpage_on_landing: $('#edit-app-fullpage-on-landing').is(":checked"), - social_image: socialImageUrl, - category: category || null, - 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"), - locked: $(`#edit-app-locked`).is(":checked") ?? false, - credentialless: $(`#edit-app-credentialless`).is(":checked") ?? true, + // show working spinner + puter.ui.showSpinner(); + + // disable submit button + $(".edit-app-save-btn").prop("disabled", true); + + let socialImageUrl = null; + if ($("#edit-app-social-image").attr("data-base64")) { + socialImageUrl = await handleSocialImageUpload( + name, + $("#edit-app-social-image").attr("data-base64") + ); + } else if ($("#edit-app-social-image").attr("data-url")) { + socialImageUrl = $("#edit-app-social-image").attr("data-url"); + } + + puter.apps + .update(currently_editing_app.name, { + title: title, + name: name, + indexURL: index_url, + icon: icon, + description: description, + maximizeOnStart: $("#edit-app-maximize-on-start").is(":checked"), + background: $("#edit-app-background").is(":checked"), + metadata: { + fullpage_on_landing: $("#edit-app-fullpage-on-landing").is(":checked"), + social_image: socialImageUrl, + category: category || null, + window_size: { + width: width ?? 800, + height: height ?? 600, }, filetypeAssociations: filetype_associations, }).then(async (app) => { @@ -1200,148 +1406,166 @@ $(document).on('click', '.open-app-btn', async function (e) { puter.ui.launchApp($(this).attr('data-app-name')) }) -$('#earn-money-c2a-close').click(async function (e) { - $('#earn-money').get(0).close(); - puter.kv.set('earn-money-c2a-closed', 'true') -}) +$(document).on("click", ".open-app-btn", async function(e) { + puter.ui.launchApp($(this).attr("data-app-name")); +}); -$('#earn-money::backdrop').click(async function (e) { - alert(); - $('#earn-money').get(0).close(); - puter.kv.set('earn-money-c2a-closed', 'true') -}) +$("#earn-money-c2a-close").click(async function(e) { + $("#earn-money").get(0).close(); + puter.kv.set("earn-money-c2a-closed", "true"); +}); -$(document).on('click', '.edit-app-open-app-btn', async function (e) { - puter.ui.launchApp($(this).attr('data-app-name')) -}) +$("#earn-money::backdrop").click(async function(e) { + alert(); + $("#earn-money").get(0).close(); + puter.kv.set("earn-money-c2a-closed", "true"); +}); -$(document).on('click', '.delete-app-settings', async function (e) { - let app_uid = $(this).attr('data-app-uid'); - let app_name = $(this).attr('data-app-name'); - let app_title = $(this).attr('data-app-title'); +$(document).on("click", ".edit-app-open-app-btn", async function(e) { + puter.ui.launchApp($(this).attr("data-app-name")); +}); - // check if app is locked - const app_data = await puter.apps.get(app_name); +$(document).on("click", ".delete-app-settings", async function(e) { + let app_uid = $(this).attr("data-app-uid"); + let app_name = $(this).attr("data-app-name"); + let app_title = $(this).attr("data-app-title"); - if(app_data.metadata?.locked){ - puter.ui.alert(`${app_data.title} is locked and cannot be deleted.`, [ - { - label: 'Ok', - }, - ], { - type: 'warning', - }); - return; - } + // check if app is locked + const app_data = await puter.apps.get(app_name); - // confirm delete - const alert_resp = await puter.ui.alert(`Are you sure you want to premanently delete ${html_encode(app_title)}?`, - [ - { - label: 'Yes, delete permanently', - value: 'delete', - type: 'danger', - }, - { - label: 'Cancel' - }, - ] + if (app_data.metadata?.locked) { + puter.ui.alert( + `${app_data.title} is locked and cannot be deleted.`, + [ + { + label: "Ok", + }, + ], + { + type: "warning", + } ); + return; + } + + // confirm delete + const alert_resp = await puter.ui.alert( + `Are you sure you want to premanently delete ${html_encode(app_title)}?`, + [ + { + label: "Yes, delete permanently", + value: "delete", + type: "danger", + }, + { + label: "Cancel", + }, + ] + ); + + if (alert_resp === "delete") { + let init_ts = Date.now(); + $(".deleting-app-modal")?.get(0)?.showModal(); + puter.apps + .delete(app_name) + .then(async (app) => { + setTimeout( + () => { + $(".deleting-app-modal")?.get(0)?.close(); + $(".back-to-main-btn").trigger("click"); + }, + // make sure the modal was shown for at least 2 seconds + Date.now() - init_ts > 2000 ? 1 : 2000 - (Date.now() - init_ts) + ); + // get app directory + puter.fs + .stat({ + path: `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, + returnSubdomains: true, + }) + .then(async (stat) => { + // delete subdomain associated with the app dir + puter.hosting.delete(stat.subdomains[0].subdomain); + // delete app directory + puter.fs.delete( + `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, + { recursive: true } + ); + }); + }) + .catch(async (err) => { + setTimeout( + () => { + $(".deleting-app-modal")?.get(0)?.close(); + puter.ui.alert(err?.message, [ + { + label: "Ok", + }, + ]); + }, + Date.now() - init_ts > 2000 ? 1 : 2000 - (Date.now() - init_ts) + ); + }); + } +}); - if (alert_resp === 'delete') { - let init_ts = Date.now(); - $('.deleting-app-modal')?.get(0)?.showModal(); - puter.apps.delete(app_name).then(async (app) => { - setTimeout(() => { - $('.deleting-app-modal')?.get(0)?.close(); - $('.back-to-main-btn').trigger('click'); - }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); - // get app directory - puter.fs.stat({ - path: `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, - returnSubdomains: true, - }).then(async (stat) => { - // delete subdomain associated with the app dir - puter.hosting.delete(stat.subdomains[0].subdomain) - // delete app directory - puter.fs.delete( - `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, - { recursive: true } - ) - }) - }).catch(async (err) => { - setTimeout(() => { - $('.deleting-app-modal')?.get(0)?.close(); - puter.ui.alert(err?.message, [ - { - label: 'Ok', - }, - ]); - }, - (Date.now() - init_ts) > 2000 ? 1 : (2000 - (Date.now() - init_ts))); - }) - } -}) - -$(document).on('click', '.edit-app', async function (e) { - $('#edit-app-uid').val($(this).attr('data-app-uid')); -}) - -$(document).on('click', '.back-to-main-btn', function (e) { - $('section:not(.sidebar)').hide(); - $('.tab-btn').removeClass('active'); - $('.tab-btn[data-tab="apps"]').addClass('active'); +$(document).on("click", ".edit-app", async function(e) { + $("#edit-app-uid").val($(this).attr("data-app-uid")); +}); - // get apps - $('#loading').show(); - setTimeout(function () { - puter.apps.list().then((apps_res) => { - // uncheck the select all checkbox - $('.select-all-apps').prop('checked', false); - - $('#loading').hide(); - apps = apps_res; - if (apps.length > 0) { - if (activeTab === 'apps') { - $('#no-apps-notice').hide(); - $('#app-list').show(); - } - $('.app-card').remove(); - apps.forEach(app => { - $('#app-list-table > tbody').append(generate_app_card(app)); - }); - count_apps(); - sort_apps(); - } else - $('#no-apps-notice').show(); - }) - }, 1000); -}) +$(document).on("click", ".back-to-main-btn", function(e) { + $("section:not(.sidebar)").hide(); + $(".tab-btn").removeClass("active"); + $('.tab-btn[data-tab="apps"]').addClass("active"); + + // get apps + $("#loading").show(); + setTimeout(function() { + puter.apps.list().then((apps_res) => { + // uncheck the select all checkbox + $(".select-all-apps").prop("checked", false); + + $("#loading").hide(); + apps = apps_res; + if (apps.length > 0) { + if (activeTab === "apps") { + $("#no-apps-notice").hide(); + $("#app-list").show(); + } + $(".app-card").remove(); + apps.forEach((app) => { + $("#app-list-table > tbody").append(generate_app_card(app)); + }); + count_apps(); + sort_apps(); + } else $("#no-apps-notice").show(); + }); + }, 1000); +}); function count_apps() { - let count = 0; - $('.app-card').each(function () { - count++; - }) - $('.app-count').html(count); - return count; + let count = 0; + $(".app-card").each(function() { + count++; + }); + $(".app-count").html(count); + return count; } // https://stackoverflow.com/a/43467144/1764493 function is_valid_url(string) { - let url; + let url; - try { - url = new URL(string); - } catch (_) { - return false; - } + try { + url = new URL(string); + } catch (_) { + return false; + } - return url.protocol === "http:" || url.protocol === "https:"; + return url.protocol === "http:" || url.protocol === "https:"; } + $(document).on('click', '#edit-app-icon-delete', async function (e) { $('#edit-app-icon').css('background-image', ``); $('#edit-app-icon').removeAttr('data-url'); @@ -1352,26 +1576,31 @@ $(document).on('click', '#edit-app-icon-delete', async function (e) { toggleResetButton(); }) -$(document).on('click', '#edit-app-icon', async function (e) { - const res2 = await puter.ui.showOpenFilePicker({ - accept: "image/*", - }); - const icon = await puter.fs.read(res2.path); - // convert blob to base64 - const reader = new FileReader(); - reader.readAsDataURL(icon); +$(document).on("click", "#edit-app-icon", async function(e) { + const res2 = await puter.ui.showOpenFilePicker({ + accept: "image/*", + }); - reader.onloadend = function () { - let image = reader.result; - // Get file extension - let fileExtension = res2.name.split('.').pop(); + const icon = await puter.fs.read(res2.path); + // convert blob to base64 + const reader = new FileReader(); + reader.readAsDataURL(icon); - // Get MIME type - let mimeType = getMimeType(fileExtension); + reader.onloadend = function() { + let image = reader.result; + // Get file extension + let fileExtension = res2.name.split(".").pop(); + + // Get MIME type + let mimeType = getMimeType(fileExtension); + + // Replace MIME type in the data URL + image = image.replace( + "data:application/octet-stream;base64", + `data:${mimeType};base64` + ); - // Replace MIME type in the data URL - image = image.replace('data:application/octet-stream;base64', `data:${mimeType};base64`); $('#edit-app-icon').css('background-image', `url(${image})`); $('#edit-app-icon').attr('data-base64', image); @@ -1382,30 +1611,35 @@ $(document).on('click', '#edit-app-icon', async function (e) { } }) + async function getBase64ImageFromUrl(imageUrl) { - var res = await fetch(imageUrl); - var blob = await res.blob(); - - return new Promise((resolve, reject) => { - var reader = new FileReader(); - reader.addEventListener("load", function () { - resolve(reader.result); - }, false); - - reader.onerror = () => { - return reject(this); - }; - reader.readAsDataURL(blob); - }) + var res = await fetch(imageUrl); + var blob = await res.blob(); + + return new Promise((resolve, reject) => { + var reader = new FileReader(); + reader.addEventListener( + "load", + function() { + resolve(reader.result); + }, + false + ); + + reader.onerror = () => { + return reject(this); + }; + reader.readAsDataURL(blob); + }); } /** * Generates HTML for an individual app card in the app list. - * + * * @param {Object} app - The app object containing details of the app. - * * + * * * @returns {string} HTML string representing the app card. - * + * * @description * This function creates an HTML string for an app card, which includes: * - Checkbox for app selection @@ -1414,115 +1648,115 @@ async function getBase64ImageFromUrl(imageUrl) { * - Display of app statistics (user count, open count) * - Creation date * - Incentive program status badge (if applicable) - * + * * The generated HTML is designed to be inserted into the app list table. - * It includes data attributes for various interactive features and + * It includes data attributes for various interactive features and * event handling. - * + * * @example * const appCardHTML = generate_app_card(myAppObject); * $('#app-list-table > tbody').append(appCardHTML); */ function generate_app_card(app) { - let h = ``; - h += `${number_format((app.stats.referral_count ?? 0) + app.stats.user_count)}`;
- h += `${number_format(app.stats.open_count)}`;
- h += `${number_format((app.stats.referral_count ?? 0) + app.stats.user_count)}`;
+ h += `${number_format(app.stats.open_count)}`;
+ h += `
You have no existing apps.
 : './img/app.svg'})
+ else {
+ for (let app of apps) {
+ $(".insta-deploy-existing-app-list").append(
+ `${number_format((app.stats.referral_count ?? 0) + app.stats.user_count)}
${number_format(app.stats.open_count)}
Ready to deploy 🚀
Cancel
`; - $('.drop-area').html(drop_area_content); +$(document).on("click", ".insta-deploy-existing-app-deploy-btn", function(e) { + $(".insta-deploy-existing-app-deploy-btn").addClass("disabled"); + $(".insta-deploy-existing-app-select")?.get(0)?.close(); + // load the 'App Settings' section + edit_app_section($(".insta-deploy-app-selector.active").attr("data-name")); - // deploy - deploy({ uid: $(e.target).attr('data-uid') }, source_path ?? dropped_items); - $('.insta-deploy-existing-app-list').html(''); -}) + $(".drop-area").removeClass("drop-area-hover"); + $(".drop-area").addClass("drop-area-ready-to-deploy"); + let drop_area_content = `Ready to deploy 🚀
Cancel
`; + $(".drop-area").html(drop_area_content); -$(document).on('click', '.insta-deploy-cancel', function (e) { - $(this).closest('dialog')?.get(0)?.close(); -}) -$(document).on('click', '.insta-deploy-existing-app-back', function (e) { - $('.insta-deploy-existing-app-select')?.get(0)?.close(); - $('.insta-deploy-modal')?.get(0)?.showModal(); - // disable deploy button - $('.insta-deploy-existing-app-deploy-btn').addClass('disabled'); + // deploy + deploy({ uid: $(e.target).attr("data-uid") }, source_path ?? dropped_items); + $(".insta-deploy-existing-app-list").html(""); +}); - // todo disable the 'an existing app' option if there are no existing apps -}) +$(document).on("click", ".insta-deploy-cancel", function(e) { + $(this).closest("dialog")?.get(0)?.close(); +}); +$(document).on("click", ".insta-deploy-existing-app-back", function(e) { + $(".insta-deploy-existing-app-select")?.get(0)?.close(); + $(".insta-deploy-modal")?.get(0)?.showModal(); + // disable deploy button + $(".insta-deploy-existing-app-deploy-btn").addClass("disabled"); + // todo disable the 'an existing app' option if there are no existing apps +}); -$(document).on('click', '.add-app-to-desktop', function (e) { - let app_title = $(this).attr('data-app-title'); - let app_uid = $(this).attr('data-app-uid'); +$(document).on("click", ".add-app-to-desktop", function(e) { + let app_title = $(this).attr("data-app-title"); + let app_uid = $(this).attr("data-app-uid"); - puter.fs.upload( - new File([], app_title), - `/${authUsername}/Desktop`, + puter.fs + .upload(new File([], app_title), `/${authUsername}/Desktop`, { + name: app_title, + dedupeName: true, + overwrite: false, + appUID: app_uid, + }) + .then(async (uploaded) => { + puter.ui.alert( + `${app_title} shortcut has been added to your desktop.`, + [ + { + label: "Ok", + type: "primary", + }, + ], { - name: app_title, - dedupeName: true, - overwrite: false, - appUID: app_uid, - }).then(async (uploaded) => { - puter.ui.alert(`${app_title} shortcut has been added to your desktop.`, [ - { - label: 'Ok', - type: 'primary', - }, - ], { - type: 'success', - }); - }) - -}) + type: "success", + } + ); + }); +}); function reset_drop_area() { - dropped_items = null; - $('.drop-area').html(drop_area_placeholder); - $('.drop-area').removeClass('drop-area-ready-to-deploy'); - $('.deploy-btn').addClass('disabled'); + dropped_items = null; + $(".drop-area").html(drop_area_placeholder); + $(".drop-area").removeClass("drop-area-ready-to-deploy"); + $(".deploy-btn").addClass("disabled"); } -$('body').on('dragover', function (event) { - // skip if the user is dragging something over the drop area - if ($(event.target).hasClass('drop-area')) - return; +$("body").on("dragover", function(event) { + // skip if the user is dragging something over the drop area + if ($(event.target).hasClass("drop-area")) return; - event.preventDefault(); // Prevent the default behavior - event.stopPropagation(); // Stop the event from propagating + event.preventDefault(); // Prevent the default behavior + event.stopPropagation(); // Stop the event from propagating }); // Developers can drop items anywhere on the page to deploy them -$('body').on('drop', async function (event) { - // skip if the user is dragging something over the drop area - if ($(event.target).hasClass('drop-area')) - return; - - // prevent default behavior - event.preventDefault(); - event.stopPropagation(); - - // retrieve puter items from the event - if (event.detail?.items?.length > 0) { - dropped_items = event.detail.items; - source_path = dropped_items[0].path; - // by deploying an existing Puter folder. So we create the app and deploy it. - if (source_path) { - // todo if there are no apps, go straight to creating a new app - $('.insta-deploy-modal').get(0).showModal(); - // set item name - $('.insta-deploy-item-name').html(html_encode(dropped_items[0].name)); - } - } - //----------------------------------------------------------------------------- - // Local items dropped - //----------------------------------------------------------------------------- - const e = event.originalEvent; - if (!e.dataTransfer || !e.dataTransfer.items || e.dataTransfer.items.length === 0) - return; - - // Get dropped items - dropped_items = await puter.ui.getEntriesFromDataTransferItems(e.dataTransfer.items); - - // Generate a flat array of full paths from the dropped items - let paths = []; - for (let item of dropped_items) { - paths.push('/' + (item.fullPath ?? item.filepath)); +$("body").on("drop", async function(event) { + // skip if the user is dragging something over the drop area + if ($(event.target).hasClass("drop-area")) return; + + // prevent default behavior + event.preventDefault(); + event.stopPropagation(); + + // retrieve puter items from the event + if (event.detail?.items?.length > 0) { + dropped_items = event.detail.items; + source_path = dropped_items[0].path; + // by deploying an existing Puter folder. So we create the app and deploy it. + if (source_path) { + // todo if there are no apps, go straight to creating a new app + $(".insta-deploy-modal").get(0).showModal(); + // set item name + $(".insta-deploy-item-name").html(html_encode(dropped_items[0].name)); } + } + //----------------------------------------------------------------------------- + // Local items dropped + //----------------------------------------------------------------------------- + const e = event.originalEvent; + if ( + !e.dataTransfer || + !e.dataTransfer.items || + e.dataTransfer.items.length === 0 + ) + return; - // Generate a directory tree from the paths - let tree = generateDirTree(paths); - - dropped_items = setRootDirTree(tree, dropped_items); - - // Alert if no index.html in root - if (!hasRootIndexHtml(tree)) { - puter.ui.alert(index_missing_error, [ - { - label: 'Ok', - }, - ]); - $('.drop-area').removeClass('drop-area-ready-to-deploy'); - $('.deploy-btn').addClass('disabled'); - dropped_items = []; - return; - } - - // Get all keys (directories and files) in the root - const rootKeys = Object.keys(tree); - - // Generate a list of items in the root in the form of a string (e.g. /index.html, /css/style.css) with maximum of 3 items - let rootItems = ''; - - if (rootKeys.length === 1) - rootItems = rootKeys[0]; - else if (rootKeys.length === 2) - rootItems = rootKeys[0] + ', ' + rootKeys[1]; - else if (rootKeys.length === 3) - rootItems = rootKeys[0] + ', ' + rootKeys[1] + ', and' + rootKeys[1]; - else if (rootKeys.length > 3) - rootItems = rootKeys[0] + ', ' + rootKeys[1] + ', and ' + (rootKeys.length - 2) + ' more item' + (rootKeys.length - 2 > 1 ? 's' : ''); - - // Show insta-deploy modal - $('.insta-deploy-modal').get(0)?.showModal(); - - // Set item name - $('.insta-deploy-item-name').html(html_encode(rootItems)); + // Get dropped items + dropped_items = await puter.ui.getEntriesFromDataTransferItems( + e.dataTransfer.items + ); + + // Generate a flat array of full paths from the dropped items + let paths = []; + for (let item of dropped_items) { + paths.push("/" + (item.fullPath ?? item.filepath)); + } + + // Generate a directory tree from the paths + let tree = generateDirTree(paths); + + dropped_items = setRootDirTree(tree, dropped_items); + + // Alert if no index.html in root + if (!hasRootIndexHtml(tree)) { + puter.ui.alert(index_missing_error, [ + { + label: "Ok", + }, + ]); + $(".drop-area").removeClass("drop-area-ready-to-deploy"); + $(".deploy-btn").addClass("disabled"); + dropped_items = []; + return; + } + + // Get all keys (directories and files) in the root + const rootKeys = Object.keys(tree); + + // Generate a list of items in the root in the form of a string (e.g. /index.html, /css/style.css) with maximum of 3 items + let rootItems = ""; + + if (rootKeys.length === 1) rootItems = rootKeys[0]; + else if (rootKeys.length === 2) rootItems = rootKeys[0] + ", " + rootKeys[1]; + else if (rootKeys.length === 3) + rootItems = rootKeys[0] + ", " + rootKeys[1] + ", and" + rootKeys[1]; + else if (rootKeys.length > 3) + rootItems = + rootKeys[0] + + ", " + + rootKeys[1] + + ", and " + + (rootKeys.length - 2) + + " more item" + + (rootKeys.length - 2 > 1 ? "s" : ""); + + // Show insta-deploy modal + $(".insta-deploy-modal").get(0)?.showModal(); + + // Set item name + $(".insta-deploy-item-name").html(html_encode(rootItems)); }); -$('.insta-deploy-existing-app-select').on('close', function (e) { - $('.insta-deploy-existing-app-list').html(''); -}) +$(".insta-deploy-existing-app-select").on("close", function(e) { + $(".insta-deploy-existing-app-list").html(""); +}); -$('.refresh-app-list').on('click', function (e) { - $('.loading-modal').get(0)?.showModal(); +$(".refresh-app-list").on("click", function(e) { + $(".loading-modal").get(0)?.showModal(); - puter.apps.list().then((resp) => { - setTimeout(() => { - apps = resp; + puter.apps.list().then((resp) => { + setTimeout(() => { + apps = resp; - $('.app-card').remove(); - apps.forEach(app => { - $('#app-list-table > tbody').append(generate_app_card(app)); - }); + $(".app-card").remove(); + apps.forEach((app) => { + $("#app-list-table > tbody").append(generate_app_card(app)); + }); - count_apps(); + count_apps(); - // preserve search query - if (search_query) { - // show apps that match search_query and hide apps that don't - apps.forEach((app) => { - if (app.title.toLowerCase().includes(search_query.toLowerCase())) { - $(`.app-card[data-name="${app.name}"]`).show(); - } else { - $(`.app-card[data-name="${app.name}"]`).hide(); - } - }) - } + // preserve search query + if (search_query) { + // show apps that match search_query and hide apps that don't + apps.forEach((app) => { + if (app.title.toLowerCase().includes(search_query.toLowerCase())) { + $(`.app-card[data-name="${app.name}"]`).show(); + } else { + $(`.app-card[data-name="${app.name}"]`).hide(); + } + }); + } - // preserve sort - sort_apps(); + // preserve sort + sort_apps(); - $('.loading-modal').get(0).close(); - }, 1000); - }) -}) + $(".loading-modal").get(0).close(); + }, 1000); + }); +}); -$(document).on('click', '.search', function (e) { - e.stopPropagation(); - e.preventDefault(); - // don't let click bubble up to window - e.stopImmediatePropagation(); -}) +$(document).on("click", ".search", function(e) { + e.stopPropagation(); + e.preventDefault(); + // don't let click bubble up to window + e.stopImmediatePropagation(); +}); -$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) { +$(document).on( + "input change keyup keypress keydown paste cut", + ".search", + function(e) { // search apps for query search_query = $(this).val().toLowerCase(); - if (search_query === '') { - // hide 'clear search' button - $('.search-clear').hide(); - // show all apps again - $(`.app-card`).show(); + if (search_query === "") { + // hide 'clear search' button + $(".search-clear").hide(); + // show all apps again + $(`.app-card`).show(); } else { - // show 'clear search' button - $('.search-clear').show(); - // show apps that match search_query and hide apps that don't - apps.forEach((app) => { - if ( - app.title.toLowerCase().includes(search_query.toLowerCase()) - || app.name.toLowerCase().includes(search_query.toLowerCase()) - || app.description.toLowerCase().includes(search_query.toLowerCase()) - || app.uid.toLowerCase().includes(search_query.toLowerCase()) - ) - { - $(`.app-card[data-name="${app.name}"]`).show(); - } else { - $(`.app-card[data-name="${app.name}"]`).hide(); - } - }) + // show 'clear search' button + $(".search-clear").show(); + // show apps that match search_query and hide apps that don't + apps.forEach((app) => { + if ( + app.title.toLowerCase().includes(search_query.toLowerCase()) || + app.name.toLowerCase().includes(search_query.toLowerCase()) || + app.description.toLowerCase().includes(search_query.toLowerCase()) || + app.uid.toLowerCase().includes(search_query.toLowerCase()) + ) { + $(`.app-card[data-name="${app.name}"]`).show(); + } else { + $(`.app-card[data-name="${app.name}"]`).hide(); + } + }); } -}) + } +); + +$(document).on("click", ".search-clear", function(e) { + $(".search").val(""); + $(".search").trigger("change"); + $(".search").focus(); + search_query = ""; +}); -$(document).on('click', '.search-clear', function (e) { - $('.search').val(''); - $('.search').trigger('change'); - $('.search').focus(); - search_query = ''; -}) +$(document).on("change", ".app-checkbox", function(e) { + // determine if select-all checkbox should be checked, indeterminate, or unchecked + if ($(".app-checkbox:checked").length === $(".app-checkbox").length) { + $(".select-all-apps").prop("indeterminate", false); + $(".select-all-apps").prop("checked", true); + } else if ($(".app-checkbox:checked").length > 0) { + $(".select-all-apps").prop("indeterminate", true); + $(".select-all-apps").prop("checked", false); + } else { + $(".select-all-apps").prop("indeterminate", false); + $(".select-all-apps").prop("checked", false); + } + + // activate row + if ($(this).is(":checked")) $(this).closest("tr").addClass("active"); + else $(this).closest("tr").removeClass("active"); + + // enable delete button if at least one checkbox is checked + if ($(".app-checkbox:checked").length > 0) + $(".delete-apps-btn").removeClass("disabled"); + else $(".delete-apps-btn").addClass("disabled"); +}); -$(document).on('change', '.app-checkbox', function (e) { - // determine if select-all checkbox should be checked, indeterminate, or unchecked - if ($('.app-checkbox:checked').length === $('.app-checkbox').length) { - $('.select-all-apps').prop('indeterminate', false); - $('.select-all-apps').prop('checked', true); - } else if ($('.app-checkbox:checked').length > 0) { - $('.select-all-apps').prop('indeterminate', true); - $('.select-all-apps').prop('checked', false); - } - else { - $('.select-all-apps').prop('indeterminate', false); - $('.select-all-apps').prop('checked', false); +$(document).on("click", ".delete-apps-btn", async function(e) { + // show confirmation alert + let resp = await puter.ui.alert( + `Are you sure you want to delete the selected apps?`, + [ + { + label: "Delete", + type: "danger", + value: "delete", + }, + { + label: "Cancel", + }, + ], + { + type: "warning", } + ); - // activate row - if ($(this).is(':checked')) - $(this).closest('tr').addClass('active'); - else - $(this).closest('tr').removeClass('active'); + if (resp === "delete") { + // disable delete button + // $('.delete-apps-btn').addClass('disabled'); - // enable delete button if at least one checkbox is checked - if ($('.app-checkbox:checked').length > 0) - $('.delete-apps-btn').removeClass('disabled'); - else - $('.delete-apps-btn').addClass('disabled'); - -}) + // show 'deleting' modal + $(".deleting-app-modal")?.get(0)?.showModal(); -$(document).on('click', '.delete-apps-btn', async function (e) { - // show confirmation alert - let resp = await puter.ui.alert(`Are you sure you want to delete the selected apps?`, [ - { - label: 'Delete', - type: 'danger', - value: 'delete', - }, - { - label: 'Cancel', - }, - ], { - type: 'warning', - }); - - if (resp === 'delete') { - // disable delete button - // $('.delete-apps-btn').addClass('disabled'); - - // show 'deleting' modal - $('.deleting-app-modal')?.get(0)?.showModal(); - - let start_ts = Date.now(); - const apps = $('.app-checkbox:checked').toArray(); - - // delete all checked apps - for (let app of apps) { - // get app uid - const app_uid = $(app).attr('data-app-uid'); - const app_name = $(app).attr('data-app-name'); - - // get app - const app_data = await puter.apps.get(app_name); + let start_ts = Date.now(); + const apps = $(".app-checkbox:checked").toArray(); + + // delete all checked apps + for (let app of apps) { + // get app uid + const app_uid = $(app).attr("data-app-uid"); + const app_name = $(app).attr("data-app-name"); + + // get app + const app_data = await puter.apps.get(app_name); + + if (app_data.metadata?.locked) { + if (apps.length === 1) { + puter.ui.alert( + `${app_data.title} is locked and cannot be deleted.`, + [ + { + label: "Ok", + }, + ], + { + type: "warning", + } + ); - if(app_data.metadata?.locked){ - if(apps.length === 1){ - puter.ui.alert(`${app_data.title} is locked and cannot be deleted.`, [ - { - label: 'Ok', - }, - ], { - type: 'warning', - }); + break; + } - break; - } + let resp = await puter.ui.alert( + `${app_data.title} is locked and cannot be deleted.`, + [ + { + label: "Skip and Continue", + value: "Continue", + type: "primary", + }, + { + label: "Cancel", + }, + ], + { + type: "warning", + } + ); - let resp = await puter.ui.alert(`${app_data.title} is locked and cannot be deleted.`, [ - { - label: 'Skip and Continue', - value: 'Continue', - type: 'primary' - }, - { - label: 'Cancel', - }, - ], { - type: 'warning', - }); - - if(resp === 'Cancel') - break; - else if(resp === 'Continue') - continue; - else - continue; - } + if (resp === "Cancel") break; + else if (resp === "Continue") continue; + else continue; + } - // delete app - await puter.apps.delete(app_name) + // delete app + await puter.apps.delete(app_name); - // remove app card - $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) { - $(this).remove(); - if ($(`.app-card`).length === 0) { - $('section:not(.sidebar)').hide(); - $('#no-apps-notice').show(); - } else { - $('section:not(.sidebar)').hide(); - $('#app-list').show(); - } - count_apps(); - }); - - try{ - // get app directory - const stat = await puter.fs.stat({ - path: `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, - returnSubdomains: true - }); - // delete subdomain associated with the app directory - if(stat?.subdomains[0]?.subdomain){ - await puter.hosting.delete(stat.subdomains[0].subdomain) - } - // delete app directory - await puter.fs.delete( - `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, - { recursive: true } - ) - count_apps(); - } catch(err) { - console.log(err); - } + // remove app card + $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) { + $(this).remove(); + if ($(`.app-card`).length === 0) { + $("section:not(.sidebar)").hide(); + $("#no-apps-notice").show(); + } else { + $("section:not(.sidebar)").hide(); + $("#app-list").show(); } - - // close 'deleting' modal - setTimeout(() => { - $('.deleting-app-modal')?.get(0)?.close(); - if($('.app-checkbox:checked').length === 0){ - // disable delete button - $('.delete-apps-btn').addClass('disabled'); - // reset the 'select all' checkbox - $('.select-all-apps').prop('indeterminate', false); - $('.select-all-apps').prop('checked', false); - } - }, (start_ts - Date.now()) > 500 ? 0 : 500); + count_apps(); + }); + + try { + // get app directory + const stat = await puter.fs.stat({ + path: `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, + returnSubdomains: true, + }); + // delete subdomain associated with the app directory + if (stat?.subdomains[0]?.subdomain) { + await puter.hosting.delete(stat.subdomains[0].subdomain); + } + // delete app directory + await puter.fs.delete( + `/${authUsername}/AppData/${dev_center_uid}/${app_uid}`, + { recursive: true } + ); + count_apps(); + } catch (err) { + console.log(err); + } } -}) -$(document).on('change', '.select-all-apps', function (e) { - if ($(this).is(':checked')) { - $('.app-checkbox').prop('checked', true); - $('.app-card').addClass('active'); - $('.delete-apps-btn').removeClass('disabled'); - } else { - $('.app-checkbox').prop('checked', false); - $('.app-card').removeClass('active'); - $('.delete-apps-btn').addClass('disabled'); - } -}) + // close 'deleting' modal + setTimeout( + () => { + $(".deleting-app-modal")?.get(0)?.close(); + if ($(".app-checkbox:checked").length === 0) { + // disable delete button + $(".delete-apps-btn").addClass("disabled"); + // reset the 'select all' checkbox + $(".select-all-apps").prop("indeterminate", false); + $(".select-all-apps").prop("checked", false); + } + }, + start_ts - Date.now() > 500 ? 0 : 500 + ); + } +}); + +$(document).on("change", ".select-all-apps", function(e) { + if ($(this).is(":checked")) { + $(".app-checkbox").prop("checked", true); + $(".app-card").addClass("active"); + $(".delete-apps-btn").removeClass("disabled"); + } else { + $(".app-checkbox").prop("checked", false); + $(".app-card").removeClass("active"); + $(".delete-apps-btn").addClass("disabled"); + } +}); /** * Get the MIME type for a given file extension. @@ -2402,105 +2676,131 @@ $(document).on('change', '.select-all-apps', function (e) { * @returns {string} The corresponding MIME type, or 'application/octet-stream' if not found. */ function getMimeType(extension) { - const mimeTypes = { - jpg: 'image/jpeg', - jpeg: 'image/jpeg', - png: 'image/png', - gif: 'image/gif', - bmp: 'image/bmp', - webp: 'image/webp', - svg: 'image/svg+xml', - tiff: 'image/tiff', - ico: 'image/x-icon' - }; - - // Remove leading dot if present and convert to lowercase - const cleanExtension = extension.replace(/^\./, '').toLowerCase(); - - // Return the MIME type if found, otherwise return 'application/octet-stream' - return mimeTypes[cleanExtension] || 'application/octet-stream'; + const mimeTypes = { + jpg: "image/jpeg", + jpeg: "image/jpeg", + png: "image/png", + gif: "image/gif", + bmp: "image/bmp", + webp: "image/webp", + svg: "image/svg+xml", + tiff: "image/tiff", + ico: "image/x-icon", + }; + + // Remove leading dot if present and convert to lowercase + const cleanExtension = extension.replace(/^\./, "").toLowerCase(); + + // 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); - } -}) +$(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); + } +}); -$(document).on('change', '#edit-app-background', function (e) { - if($('#edit-app-background').is(":checked")){ - disable_window_settings() - }else{ - enable_window_settings() - } -}) +$(document).on("change", "#edit-app-background", function(e) { + if ($("#edit-app-background").is(":checked")) { + disable_window_settings(); + } else { + enable_window_settings(); + } +}); -function disable_window_settings(){ - $('#edit-app-maximize-on-start').prop('disabled', true); - $('#edit-app-fullpage-on-landing').prop('disabled', true); - $('#edit-app-window-width, #edit-app-window-height').prop('disabled', true); - $('#edit-app-window-top, #edit-app-window-left').prop('disabled', true); - $('#edit-app-window-resizable').prop('disabled', true); - $('#edit-app-hide-titlebar').prop('disabled', true); +function disable_window_settings() { + $("#edit-app-maximize-on-start").prop("disabled", true); + $("#edit-app-fullpage-on-landing").prop("disabled", true); + $("#edit-app-window-width, #edit-app-window-height").prop("disabled", true); + $("#edit-app-window-top, #edit-app-window-left").prop("disabled", true); + $("#edit-app-window-resizable").prop("disabled", true); + $("#edit-app-hide-titlebar").prop("disabled", true); } -function enable_window_settings(){ - $('#edit-app-maximize-on-start').prop('disabled', false); - $('#edit-app-fullpage-on-landing').prop('disabled', false); - $('#edit-app-window-width, #edit-app-window-height').prop('disabled', false); - $('#edit-app-window-top, #edit-app-window-left').prop('disabled', false); - $('#edit-app-window-resizable').prop('disabled', false); - $('#edit-app-hide-titlebar').prop('disabled', false); +function enable_window_settings() { + $("#edit-app-maximize-on-start").prop("disabled", false); + $("#edit-app-fullpage-on-landing").prop("disabled", false); + $("#edit-app-window-width, #edit-app-window-height").prop("disabled", false); + $("#edit-app-window-top, #edit-app-window-left").prop("disabled", false); + $("#edit-app-window-resizable").prop("disabled", false); + $("#edit-app-hide-titlebar").prop("disabled", false); } -$(document).on('click', '.reset-deploy', function (e) { - reset_drop_area(); -}) +$(document).on("click", ".reset-deploy", function(e) { + reset_drop_area(); +}); -$(document).on('click', '.sidebar-toggle', function (e) { - $('.sidebar').toggleClass('open'); - $('body').toggleClass('sidebar-open'); -}) +$(document).on("click", ".sidebar-toggle", function(e) { + $(".sidebar").toggleClass("open"); + $("body").toggleClass("sidebar-open"); +}); async function initializeAssetsDirectory() { - try { - // Check if assets_url exists - const existingURL = await puter.kv.get('assets_url'); - if (!existingURL) { - // Create assets directory - const assetsDir = await puter.fs.mkdir( - `/${authUsername}/AppData/${dev_center_uid}/assets`, - { overwrite: false } - ); - - // Publish the directory - const hostname = `assets-${Math.random().toString(36).substring(2)}`; - const route = await puter.hosting.create(hostname, assetsDir.path); - - // Store the URL - await puter.kv.set('assets_url', `https://${hostname}.puter.site`); - } - } catch (err) { - console.error('Error initializing assets directory:', err); + try { + // Check if assets_url exists + const existingURL = await puter.kv.get("assets_url"); + if (!existingURL) { + // Create assets directory + const assetsDir = await puter.fs.mkdir( + `/${authUsername}/AppData/${dev_center_uid}/assets`, + { overwrite: false } + ); + + // Publish the directory + const hostname = `assets-${Math.random().toString(36).substring(2)}`; + const route = await puter.hosting.create(hostname, assetsDir.path); + + // Store the URL + await puter.kv.set("assets_url", `https://${hostname}.puter.site`); } + } catch (err) { + console.error("Error initializing assets directory:", err); + } } function generateSocialImageSection(app) { - return ` + return ` - + `; } +$(document).on("click", "#edit-app-social-image", async function(e) { + const res = await puter.ui.showOpenFilePicker({ + accept: "image/*", + }); + + const socialImage = await puter.fs.read(res.path); + // Convert blob to base64 for preview + const reader = new FileReader(); + reader.readAsDataURL(socialImage); + + reader.onloadend = function() { + let image = reader.result; + // Get file extension + let fileExtension = res.name.split(".").pop(); + // Get MIME type + let mimeType = getMimeType(fileExtension); + // Replace MIME type in the data URL + image = image.replace( + "data:application/octet-stream;base64", + `data:image/${mimeType};base64` + ); + $(document).on('click', '#edit-app-social-image', async function(e) { const res = await puter.ui.showOpenFilePicker({ @@ -2528,39 +2828,40 @@ $(document).on('click', '#edit-app-social-image', async function(e) { toggleSaveButton(); toggleResetButton(); } + }); -$(document).on('click', '#edit-app-social-image-delete', async function(e) { - $('#edit-app-social-image').css('background-image', ''); - $('#edit-app-social-image').removeAttr('data-url'); - $('#edit-app-social-image').removeAttr('data-base64'); - $('#edit-app-social-image-delete').hide(); +$(document).on("click", "#edit-app-social-image-delete", async function(e) { + $("#edit-app-social-image").css("background-image", ""); + $("#edit-app-social-image").removeAttr("data-url"); + $("#edit-app-social-image").removeAttr("data-base64"); + $("#edit-app-social-image-delete").hide(); }); async function handleSocialImageUpload(app_name, socialImageData) { - if (!socialImageData) return null; - - try { - const assets_url = await puter.kv.get('assets_url'); - if (!assets_url) throw new Error('Assets URL not found'); - - // Convert base64 to blob - const base64Response = await fetch(socialImageData); - const blob = await base64Response.blob(); - - // Get assets directory path - const assetsDir = `/${authUsername}/AppData/${dev_center_uid}/assets`; - - // Upload new image - await puter.fs.upload( - new File([blob], `${app_name}.png`, { type: 'image/png' }), - assetsDir, - { overwrite: true } - ); + if (!socialImageData) return null; - return `${assets_url}/${app_name}.png`; - } catch (err) { - console.error('Error uploading social image:', err); - throw err; - } + try { + const assets_url = await puter.kv.get("assets_url"); + if (!assets_url) throw new Error("Assets URL not found"); + + // Convert base64 to blob + const base64Response = await fetch(socialImageData); + const blob = await base64Response.blob(); + + // Get assets directory path + const assetsDir = `/${authUsername}/AppData/${dev_center_uid}/assets`; + + // Upload new image + await puter.fs.upload( + new File([blob], `${app_name}.png`, { type: "image/png" }), + assetsDir, + { overwrite: true } + ); + + return `${assets_url}/${app_name}.png`; + } catch (err) { + console.error("Error uploading social image:", err); + throw err; + } } diff --git a/src/dev-center/js/html-entities.js b/src/dev-center/js/html-entities.js index c233cb01ee..150e74d0b8 100644 --- a/src/dev-center/js/html-entities.js +++ b/src/dev-center/js/html-entities.js @@ -1 +1,4611 @@ -(()=>{"use strict";var r,e={563:function(r,e,a){var t=this&&this.__assign||function(){return(t=Object.assign||function(r){for(var e,a=1,t=arguments.length;a