fipamo/themes/dash/src/com/controllers/PostEditor.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 PostActions from '../actions/PostActions';
import * as EditorEvent from '../tools/events/EditorEvent';
import TextEditor from '../tools/utilities/TextEditor';
import TinyDatePicker from 'tiny-date-picker';
import DateUtils from '../tools/utilities/DateUtils';


class PostEditor {
    //--------------------------
    // constructor
    //--------------------------
    constructor() {
        reframe('iframe');
        let self = this;
        this.uploadFiles;
        this.dataUtils = new DataUtils();
        this.dateUtils = new DateUtils();
        if (document.getElementById('edit-post-text')) {
            this.editor = new TextEditor(document.getElementById('edit-post-text'),
                document.getElementById('header').offsetHeight +
                document.getElementById('post-header').offsetHeight +
                document.getElementById('post-feature').offsetHeight
            );
            this.editor.addListener(EditorEvent.EDITOR_DELETE, f => this.handleEditorOptions(EditorEvent.EDITOR_DELETE), false)
            this.editor.addListener(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, f => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE), false)
            this.editor.addListener(EditorEvent.EDITOR_UPDATE, f => this.handleEditorOptions(EditorEvent.EDITOR_UPDATE), false)
            this.editor.addListener(EditorEvent.EDITOR_SAVE, f => this.handleEditorOptions(EditorEvent.EDITOR_SAVE), false)
            document.getElementById('post-image').addEventListener('change', e => this.handlePostImageAdd(e), false);
            TinyDatePicker(document.getElementById('post-date'), {
                mode: 'dp-below',
                format(date) {
                    //return date;
                    return self.dateUtils.getDate('origin', date);
                }
            });
        }
        this.start();
    }
    //--------------------------
    // 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();
                })
            }

            var optionButtons = document.querySelectorAll('.post-option-btn');
            for (var i = 0, length = optionButtons.length; i < length; i++) {
                optionButtons[i].addEventListener('click', e => this.handlePostOptions(e), false);
            }
        }
    }

    //--------------------------
    // event handlers
    //--------------------------
    handlePostOptions(e) {

        let currentOption;
        switch (e.target.id) {
            case "option-page-icon":
            case "option-page":
                currentOption = document.getElementById('option-page');
                break;
            case "option-feature-icon":
            case "option-feature":
                currentOption = document.getElementById('option-feature');
                break;
            case "option-published-icon":    
            case "option-published":
                currentOption = document.getElementById('option-published');
                break;
        }

        let active = currentOption.getAttribute('data-active');

        (active == 'false') ? currentOption.setAttribute('data-active', 'true')  : currentOption.setAttribute('data-active', 'false')  

    }
    handleEditorOptions(e) {
        switch (e) {
            case EditorEvent.EDITOR_SAVE:
            case EditorEvent.EDITOR_UPDATE:
                let edit = false;
                if (e == EditorEvent.EDITOR_UPDATE)
                    edit = true;
                new PostActions().submitPost(edit, PostEditor.uploadFiles).then((response) => {
                    let note = JSON.parse(response['response']['request'].response);
                    this.editor.notify(note.message, note.postID);
                    if (note.message == DataEvent.POST_ADDED)
                        window.location = "/@/dashboard/posts/edit/" + note.postID;
                }).catch((err) => {
                    console.log(err)
                });
                break;

            case EditorEvent.EDITOR_DELETE:

                if (confirm('Aye! You know you\'re deleting this post, right?')) {
                    new PostActions().deletePost().then((response) => {
                        let note = JSON.parse(response['response']['request'].response);
                        window.location = "/@/dashboard/posts/";
                        //console.log(note);
                    }).catch((err) => {
                        console.log(err)
                    });
                } else {
                    // Do nothing!
                }
                break;

            case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
                document.getElementById('post-image').click();
                break;
        }
    }

    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);
        PostEditor.uploadFiles = e.target.files;
        for (var i = 0, f; f = PostEditor.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 image = document.createElement('img');
                    image.src = f.target.result;
                    image.title = escape(theFile.name);
                    var span = document.createElement('div');
                    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(image);
                };
            })(f);
            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }

    }

    handleDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        PostEditor.uploadFiles = e.dataTransfer.files;
        //console.log(MemberArea.uploadFiles.length);
        for (var i = 0, f; f = PostEditor.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);
        }
    }

    handlePostImageAdd(e) {
        e.stopPropagation();
        e.preventDefault();
        let self = this;

        var postData = new FormData();
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            // Check the file type.
            if (!file.type.match('image.*')) {
                continue;
            }
            postData.append('post_image', file, file.name);
        }
        this.dataUtils.request("/api/blog/add-post-image", DataEvent.POST_IMAGE_ADDED, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, postData)
            .then((response) => {
                self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, JSON.parse(response.request['response']).url);
            }).catch((err) => {
                console.log(err)
            })
    }
}
PostEditor.uploadFiles = [];
export {
    PostEditor as
    default
}