mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

show the share dialog when items are dropped on a username in the sidebar

Browse Source
This commit is contained in:
Nariman Jelveh 2024-06-19 12:11:05 -07:00
parent c67674c889
commit bd958b3820
2 changed files with 91 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/UI/UIWindow.js
View File

@ -29,6 +29,7 @@ import refresh_item_container from '../helpers/refresh_item_container.js';
import UIWindowSaveAccount from './UIWindowSaveAccount.js';
import UIWindowEmailConfirmationRequired from './UIWindowEmailConfirmationRequired.js';
import launch_app from "../helpers/launch_app.js"
import UIWindowShare from './UIWindowShare.js';
const el_body = document.getElementsByTagName('body')[0];
@ -350,7 +351,6 @@ async function UIWindow(options) {
const components = options.path.slice(1).split('/');
console.log('components???', components);
if ( components.length === 2 && components[1] === 'Public' ) {
const username = components[0];
h += `<iframe
@ -1045,13 +1045,97 @@ async function UIWindow(options) {
continue;
ht += `<div class="window-sidebar-item disable-user-select ${options.path === shared_user.path ? 'window-sidebar-item-active' : ''}"
data-path="${shared_user.path}"
data-sharing-username="${html_encode(shared_user.name)}"
title="${html_encode(shared_user.name)}"
data-is_shared="1">
<img class="window-sidebar-item-icon" src="${html_encode(window.icons['shared-outline.svg'])}">${shared_user.name}
</div>`;
}
}
$(el_window).find('.window-sidebar').append(ht);
$(el_window).find('.window-sidebar').append(ht);
$(el_window).find('.window-sidebar-item:not(.ui-droppable)').droppable({
accept: '.item',
tolerance: 'pointer',
drop: function( event, ui ) {
// check if item was actually dropped on this navbar path
if($(window.mouseover_window).attr('data-id') !== $(el_window).attr('data-id')){
return;
}
const items_to_share = []
// first item
items_to_share.push({
path: $(ui.draggable).attr('data-path'),
icon: $(ui.draggable).find('.item-icon img').attr('src'),
name: $(ui.draggable).find('.item-name').text(),
});
// all subsequent items
const cloned_items = document.getElementsByClassName('item-selected-clone');
for(let i =0; i<cloned_items.length; i++){
const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
if(!source_item) continue;
items_to_share.push({
path: $(source_item).attr('data-path'),
icon: $(source_item).find('.item-icon img').attr('src'),
name: $(source_item).find('.item-name').text(),
})
}
// if alt key is down, create shortcut items
if(event.altKey){
items_to_share.forEach((item_to_move) => {
window.create_shortcut(
path.basename($(item_to_move).attr('data-path')),
$(item_to_move).attr('data-is_dir') === '1',
$(this).attr('data-path'),
null,
$(item_to_move).attr('data-shortcut_to') === '' ? $(item_to_move).attr('data-uid') : $(item_to_move).attr('data-shortcut_to'),
$(item_to_move).attr('data-shortcut_to_path') === '' ? $(item_to_move).attr('data-path') : $(item_to_move).attr('data-shortcut_to_path'),
);
});
}
// move items
else{
UIWindowShare(items_to_share, $(this).attr('data-sharing-username'));
}
$('.item-container').droppable('enable')
$(this).removeClass('window-sidebar-item-drag-active');
return false;
},
over: function(event, ui){
// check if item was actually hovered over this window
if($(window.mouseover_window).attr('data-id') !== $(el_window).attr('data-id'))
return;
// Don't do anything if the dragged item is NOT a UIItem
if(!$(ui.draggable).hasClass('item'))
return;
// highlight this item
$(this).addClass('window-sidebar-item-drag-active');
$('.ui-draggable-dragging').css('opacity', 0.2)
$('.item-selected-clone').css('opacity', 0.2)
// disable all window bodies
$('.item-container').droppable( 'disable' )
},
out: function(event, ui){
// Don't do anything if the dragged element is NOT a UIItem
if(!$(ui.draggable).hasClass('item'))
return;
// unselect item if item is dragged out
$(this).removeClass('window-sidebar-item-drag-active');
$('.ui-draggable-dragging').css('opacity', 'initial')
$('.item-selected-clone').css('opacity', 'initial')
$('.item-container').droppable( 'enable' )
}
});
}).catch(function(err){
console.error(err);
})

10
src/UI/UIWindowShare.js
View File

@ -1,6 +1,6 @@
import UIWindow from './UIWindow.js'
async function UIWindowShare(items){
async function UIWindowShare(items, recipient){
return new Promise(async (resolve) => {
let h = '';
h += `<div style="padding: 30px 40px 20px; border-bottom: 1px solid #ced7e1;">`;
@ -10,7 +10,7 @@ async function UIWindowShare(items){
h += `<img src="${items[0].icon}" style="width:70px; height:70px; display: block; margin: 10px auto 0;">`;
// name
h += `<h2 style="font-size: 17px; margin-top:0; text-align:center; margin-bottom: 40px; font-weight: 400; color: #303d49; text-shadow: 1px 1px white;">${items.length > 1 ? `Share ${items.length} items` : `${items[0].name}`}</h2>`;
h += `<h2 style="font-size: 17px; margin-top:0; text-align:center; margin-bottom: 40px; font-weight: 400; color: #303d49; text-shadow: 1px 1px white;">${items.length > 1 ? `Share ${items.length} items` : `${html_encode(items[0].name)}`}</h2>`;
// form
h += `<form class="window-give-item-access-form">`;
@ -21,9 +21,9 @@ async function UIWindowShare(items){
h += `<label style="font-size: 16px; font-weight: 600;">Share with:</label>`;
h += `<div style="display: flex;">`;
// Username/email
h += `<input placeholder="username" class="access-recipient" style="border-right: none; margin-bottom: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0;" type="text" autocomplete="recipient_email_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
h += `<input placeholder="username" class="access-recipient" value="${html_encode(recipient ?? '')}" style="border-right: none; margin-bottom: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0;" type="text" autocomplete="recipient_email_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false"/>`;
// Share
h += `<button class="give-access-btn button button-primary button-normal" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" disabled>Share</button>`
h += `<button class="give-access-btn button button-primary button-normal" style="border-top-left-radius: 0; border-bottom-left-radius: 0;" ${!recipient ? 'disabled' : ''}>Share</button>`
h += `</div>`;
h += `</div>`;
h += `</form>`;
@ -127,7 +127,7 @@ async function UIWindowShare(items){
$(el_window).find('.share-recipients').append(`${perm_list}`);
}).
catch((err) => {
console.error(err);
// console.error(err);
})
}