fipamo/src/com/controllers/PageEditor.js

//TOOLS
import ApiUtils, { REQUEST_TYPE_POST, CONTENT_TYPE_FORM } from '../utils/APIUtils';
import * as DataEvent from '../events/DataEvent';
import PageActions from '../actions/PageActions';
import * as EditorEvent from '../events/EditorEvent';
import TinyDatePicker from 'tiny-date-picker';
import TextEditor from '../ui/TextEditor';
import Notfications from '../ui/Notifications';
const api = new ApiUtils();
const notify = new Notfications();
export default class PostEditor {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {
		let self = this;
		this.urlPieces = document.URL.split('/');
		this.post = [];
		this.postID = null;
		api.authStatus();
		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() {
					//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-menu-pin':
				currentOption = document.getElementById('option-menu-pin');
				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:
				var apiUrl = '';
				e === EditorEvent.EDITOR_SAVE
					? (apiUrl = '/api/v1/page/write/new')
					: (apiUrl = '/api/v1/page/write');
				new PageActions()
					.collectInfo(document.getElementById('featured-image-upload').files[0])

					.then(page => {
						api.request(
							apiUrl,
							DataEvent.API_PAGE_WRITE,
							REQUEST_TYPE_POST,
							CONTENT_TYPE_FORM,
							page
						)
							.then(response => {
								let r = JSON.parse(response.request['response']);
								if (r.type === DataEvent.PAGE_ERROR) {
									notify.alert(r.message, false);
								} else {
									if (r.type === DataEvent.PAGE_UPDATED) {
										notify.alert(r.message, true);
									} else {
										notify.alert(r.message, true);
										window.location = '/@/dashboard/page/edit/' + r.id;
									}
								}
							})
							.catch(err => {
								notify.alert(err, false);
							});
					});
				break;
			case EditorEvent.EDITOR_DELETE:
				if (confirm("AYE! You know you're deleting this post, right?")) {
					new PageActions()
						.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);
				}
		}
	}
	handleImageUpload(type, files) {
		let url = '/api/v1/page/add-post-image';
		let eventType = DataEvent.API_IMAGES_UPLOAD;
		let self = this;
		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;
			}
			imageData.append('post_image', file, file.name);
		}
		api.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData)
			.then(response => {
				let r = JSON.parse(response.request['response']);
				if (r.type == DataEvent.POST_IMAGE_ADDED)
					self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url);
			})
			.catch(() => {
				//console.log(err)
			});
	}
}
PostEditor.uploadFiles = [];