Newer
Older
pixi.js / tools / renders / app / droppable.js
@Matt Karl Matt Karl on 31 Oct 2017 1 KB Next Restructure for v5 (#4387)
/**
 * 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;