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

src/UI/UIWindow.js

@@ -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);
             })

src/UI/UIWindowShare.js

@@ -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);
             })
         }