fipamo/src/com/controllers/PostEditor.js

//TOOLS
import DataUtils, { REQUEST_TYPE_POST, CONTENT_TYPE_FORM } from '../../../src/com/utils/DataUtils';
import * as DataEvent from '../../../src/com/events/DataEvent';
import PostActions from '../actions/PostActions';
import * as EditorEvent from '../../../src/com/events/EditorEvent';
import TinyDatePicker from 'tiny-date-picker';
import TextEditor from '../../../src/com/ui/TextEditor';
export default class PostEditor {
	//TODO - FIX POST FEATURE URLS IN DB

	//--------------------------
	// constructor
	//--------------------------
	constructor() {
		let self = this;
		this.urlPieces = document.URL.split('/');
		this.post = [];
		this.postID = null;
		if (document.getElementById('post-edit-index').getAttribute('data-index')) {
			this.postID = document.getElementById('post-edit-index').getAttribute('data-index');
		}
		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,
				() => this.handleEditorOptions(EditorEvent.EDITOR_DELETE),
				false
			);
			this.editor.addListener(
				EditorEvent.EDITOR_UPLOAD_POST_IMAGE,
				() => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE),
				false
			);
			this.editor.addListener(
				EditorEvent.EDITOR_UPDATE,
				() => this.handleEditorOptions(EditorEvent.EDITOR_UPDATE),
				false
			);
			this.editor.addListener(
				EditorEvent.EDITOR_SAVE,
				() => this.handleEditorOptions(EditorEvent.EDITOR_SAVE),
				false
			);
			document.getElementById('post-image-upload').addEventListener(
				'change',
				e => {
					self.handleImageUpload(e.target.id, e.target.files);
				},
				false
			);
			TinyDatePicker(document.getElementById('post-date'), {
				mode: 'dp-below',
				format(date) {
					return self.dateUtils.getDate('origin', date);
				}
			});

			this.start();
		}
	}
	//--------------------------
	// methods
	//--------------------------
	start() {
		if (document.getElementById('featured-image-drop')) {
			document
				.getElementById('featured-image-drop')
				.addEventListener('dragover', this.handleImageActions, false);
			document
				.getElementById('featured-image-drop')
				.addEventListener('drop', this.handleImageActions, false);
			document
				.getElementById('featured-image-upload')
				.addEventListener('change', e => this.handleImageActions(e), false);
			if (document.getElementById('new-feature-upload')) {
				document.getElementById('new-feature-upload').addEventListener('click', () => {
					document.getElementById('featured-image-upload').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) {
		let self = this;
		switch (e) {
			case EditorEvent.EDITOR_SAVE:
				new PostActions()
					.update(this.postID, this.post, PostEditor.uploadFiles, FINAL_KEY)
					.then(response => {
						setTimeout(() => {
							self.dbUtils.getPost(Number(response.response.newPost)).then(r => {
								window.location = '/@/dashboard/posts/edit/' + r.post.uuid;
							});
						}, 100);
					})
					.catch(() => {
						//console.log("ERROR", err)
					});
				break;
			case EditorEvent.EDITOR_UPDATE:
				new PostActions()
					.update(this.postID, this.post, PostEditor.uploadFiles, FINAL_KEY)
					.then(() => {
						this.editor.notify(DataEvent.POST_UPDATED, this.postID);
					})
					.catch(() => {
						//console.log("ERRORZ", err)
					});
				break;
			case EditorEvent.EDITOR_DELETE:
				if (confirm("Aye! You know you're deleting this post, right?")) {
					new PostActions()
						.deletePost(this.postID, this.post)
						.then(() => {
							setTimeout(() => {
								window.location = '/@/dashboard/posts/';
							}, 100);
						})
						.catch(() => {});
				} else {
					// Do nothing!
				}
				break;
			case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
				document.getElementById('post-image-upload').click();
				break;
		}
	}
	handleImageActions(e) {
		e.stopPropagation();
		e.preventDefault();
		switch (e.type) {
			case 'dragover':
				e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
				break;
			case 'change':
			case 'drop':
				e.type == 'drop'
					? (PostEditor.uploadFiles = e.dataTransfer.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').innerHTML = '';
							document.getElementById('featured-image-drop').appendChild(image);
						};
					})(f);
					// Read in the image file as a data URL.
					reader.readAsDataURL(f);
				}
				if (e.target.id == 'featured-image-upload')
					this.handleImageUpload(e.target.id, PostEditor.uploadFiles);
				break;
		}
	}
	handleImageUpload(type, files) {
		let url = '';
		let eventType = '';
		let self = this;
		type == 'featured-image-upload'
			? (url = '/api/post/add-feature-image')
			: (url = '/api/post/add-post-image');
		type == 'featured-image-upload'
			? (eventType = DataEvent.FEATURE_IMAGE_ADDED)
			: (eventType = DataEvent.POST_IMAGE_ADDED);
		var imageData = new FormData();
		for (var i = 0; i < files.length; i++) {
			var file = files[i];
			// Check the file type.
			if (!file.type.match('image.*')) {
				continue;
			}
			type == 'featured-image-upload'
				? imageData.append('feature_image', file, file.name)
				: imageData.append('post_image', file, file.name);
		}
		this.dataUtils
			.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData)
			.then(response => {
				let r = JSON.parse(response.request['response']);
				if (r.message == DataEvent.POST_IMAGE_ADDED)
					self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url);
			})
			.catch(() => {
				//console.log(err)
			});
	}
}
PostEditor.uploadFiles = [];