cordis/client/webapp/elements/overlay-upload-drop-target.ts
2021-11-01 23:29:24 -05:00

56 lines
2.1 KiB
TypeScript

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);
import Elements from '../elements';
import { Channel } from '../data-types';
import BaseElements from './require/base-elements';
import IState from './require/elements-state';
import { $, $$, $$$, $$$$ } from './require/q-module';
import ClientController from '../client-controller';
export default function createUploadDropTarget(state: IState, server?: ClientController, channel?: Channel): HTMLElement | null {
const { document } = state;
$.setDocument(document);
if (!server || !channel) return null;
let element = BaseElements.createOverlay(document, { class: 'content drop-target', content: [
// TODO: icon?
{ class: 'message', content: 'Upload to #' + channel.name }
] });
element.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
element.addEventListener('dragleave', (e) => {
e.preventDefault();
e.stopPropagation();
if (element.parentElement) {
element.parentElement.removeChild(element);
}
});
element.addEventListener('drop', (e) => {
e.preventDefault();
element.parentElement?.removeChild(element);
let fileTransferItem: DataTransferItem | null = null;
for (let item of e.dataTransfer?.items ?? []) {
if (item.kind == 'file') {
e.preventDefault(); // don't continue the paste
fileTransferItem = item;
break;
}
}
if (fileTransferItem) {
let element = Elements.createUploadOverlayFromDataTransferItem(server, channel, fileTransferItem);
document.body.appendChild(element);
$$$(element, '.text-input').focus();
} else {
LOG.debug('dropped non-file');
}
});
return element;
}