//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
}