/**
* Add drag-n-drop handling
* @class Droppable
*/
class Droppable
{
/**
* @constructor
* @param {HTMLElement} node Element to listen on
* @param {Function} callback Callback when complete
*/
constructor(node, callback)
{
node.addEventListener('dragenter', (ev) =>
{
ev.preventDefault();
node.className = Droppable.CLASS_NAME;
});
node.addEventListener('dragover', (ev) =>
{
ev.preventDefault();
if (node.className !== Droppable.CLASS_NAME)
{
node.className = Droppable.CLASS_NAME;
}
});
node.addEventListener('dragleave', (ev) =>
{
ev.preventDefault();
node.className = '';
});
node.addEventListener('drop', (ev) =>
{
ev.preventDefault();
node.className = '';
const fileList = ev.dataTransfer.files;
if (fileList.length > 1)
{
callback(new Error('Only one file at a time.'));
}
else
{
const file = fileList[0];
callback(null, file.path);
}
});
}
/**
* The name of the class to add to the HTML node
* @static
* @property {String} CLASS_NAME
*/
static get CLASS_NAME()
{
return 'dragging';
}
}
module.exports = Droppable;