fipamo/themes/dash/src/com/controllers/DashEntry.jsx

//TOOLS
import DataUtils, {
    REQUEST_TYPE_GET,
    REQUEST_TYPE_PUT,
    REQUEST_TYPE_POST,
    REQUEST_TYPE_DELETE,
    CONTENT_TYPE_JSON,
    CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils';
import * as DataEvent from '../tools/events/DataEvent';
import Animate from '../tools/effects/Animate';
import * as Ease from '../tools/effects/Animate';
import TextEffects from '../tools/effects/TextEffects';
import EntryTasks from '../tasks/EntryTasks';
import TextEditor from '../tools/utilities/TextEditor';
import TinyDatePicker from 'tiny-date-picker';


class Entry {
    //--------------------------
    // constructor
    //--------------------------
    constructor() {
        reframe('iframe');
        this.uploadFiles;
        this.start();
        this.editor = new TextEditor();

        TinyDatePicker(document.getElementById('entry-date'), {
            mode: 'dp-below',
            format(date) {
                //return date;
                return self.dateUtils.getDate('origin', date);
            }
        });
    }
    //--------------------------
    // methods
    //--------------------------
    start() {
        let self = this;
        new Animate().object({
            targets: document.getElementById('loader'),
            duration: 300,
            opacity: 0,
            easing: 'easeInOutQuad',
            complete: function () {
                document.getElementById('loader').style.display = 'none';
                document.getElementById('loader').style.visibility = 'hidden';
                new Animate().object({
                    targets: document.getElementById('header'),
                    duration: 10,
                    opacity: 1,
                    easing: 'easeInOutQuad',
                    complete: function () {
                        if (document.getElementById('the-intro'))
                            document.getElementById('the-intro').style.opacity = 1;
                        if (document.getElementById('blog-entry'))
                            document.getElementById('blog-entry').style.opacity = 1;
                    }
                });
            }
        });

        if (document.getElementById('featured-image-drop')) {
            document.getElementById('featured-image-drop').addEventListener('dragover', this.handleDragOver, false);
            document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
            document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);

            if (document.getElementById('new-upload-link')) {
                document.getElementById('new-upload-link').addEventListener('click', e => {
                    document.getElementById('featured-click').click();
                })
            }
            document.getElementById("post-sumbit-btn").addEventListener('click', f => {
                f.preventDefault();
                let edit = false;
                if (f.target.getAttribute('data-action') == 'blog-update')
                    edit = true;
                new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
                    let note = JSON.parse(response['response']['request'].response);
                    self.editor.notify(note.message);
                }).catch((err) => {
                    console.log(err)
                });
            });
        }
    }

    //--------------------------
    // event handlers
    //--------------------------
    handleDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }
    handleClicked(e) {
        e.stopPropagation();
        e.preventDefault();
        //console.log("IMAGES " + e.target.files);
        Entry.uploadFiles = e.target.files;
        for (var i = 0, f; f = Entry.uploadFiles[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (f) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = [
                        '<img src="',
                        f.target.result,
                        '" title="',
                        escape(theFile.name),
                        '"/>'
                    ].join('');
                    //document.getElementById('featured-image-drop').insertBefore(span, null);
                    document.getElementById('featured-image-drop').innerHTML = '';
                    document.getElementById('featured-image-drop').appendChild(span);
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }

    }

    handleDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        Entry.uploadFiles = e.dataTransfer.files;
        //console.log(MemberArea.uploadFiles.length);
        for (var i = 0, f; f = Entry.uploadFiles[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (f) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = [
                        '<img src="',
                        f.target.result,
                        '" title="',
                        escape(theFile.name),
                        '"/>'
                    ].join('');
                    //document.getElementById('featured-image-drop').insertBefore(span, null);
                    document.getElementById('featured-image-drop').innerHTML = '';
                    document.getElementById('featured-image-drop').appendChild(span);
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

}
Entry.uploadFiles = [];
export {
    Entry as
    default
}