moebius-web

tools/loadreference.js

function loadReferenceTool(editor, toolbar) {
    "use strict";

    function init() {
        var modal, divFileZone, paragraph;

        divFileZone = ElementHelper.create("div", {"className": "file-zone"});
        paragraph = ElementHelper.create("p", {"textContent": "Drag and drop an image here."});

        function dismiss() {
            modal.remove();
            editor.startListening();
            toolbar.startListening();
        }

        divFileZone.addEventListener('dragover', function (evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = "copy";
        }, false);

        divFileZone.addEventListener('drop', function (evt) {
            var reader, loadImageEvt;
            evt.stopPropagation();
            evt.preventDefault();
            if (evt.dataTransfer.files.length) {
                reader = new FileReader();
                reader.onload = function (data) {
                    loadImageEvt = new CustomEvent("referenceImage", {"detail": data.target.result});
                    editor.canvas.dispatchEvent(loadImageEvt);
                };
                reader.readAsDataURL(evt.dataTransfer.files[0]);
                dismiss();
            }
        }, false);

        modal = modalBox();
        divFileZone.appendChild(paragraph);
        modal.addPanel(divFileZone);
        modal.addButton("cancel", {"textContent": "Cancel", "href": "#", "onclick": function (evt) {
            evt.preventDefault();
            dismiss();
        }});

        editor.stopListening();
        toolbar.stopListening();
        modal.init();

        return false;
    }

    function toString() {
        return "Load Reference Image";
    }

    return {
        "init": init,
        "toString": toString,
        "uid": "loadreference"
    };
}

AnsiEditController.addTool(loadReferenceTool, "tools-left");