|
|
|
@ -1,74 +1,78 @@
|
|
|
|
|
//TOOLS
|
|
|
|
|
import DataUtils,
|
|
|
|
|
{
|
|
|
|
|
REQUEST_TYPE_GET,
|
|
|
|
|
REQUEST_TYPE_PUT,
|
|
|
|
|
import DataUtils, {
|
|
|
|
|
REQUEST_TYPE_POST,
|
|
|
|
|
REQUEST_TYPE_DELETE,
|
|
|
|
|
CONTENT_TYPE_JSON,
|
|
|
|
|
CONTENT_TYPE_FORM
|
|
|
|
|
}
|
|
|
|
|
from '../../../../../brain/tools/utilities/DataUtils';
|
|
|
|
|
} from '../../../../../brain/tools/utilities/DataUtils';
|
|
|
|
|
import * as DataEvent from '../../../../../brain/tools/events/DataEvent';
|
|
|
|
|
import PostActions from '../actions/PostActions';
|
|
|
|
|
import * as EditorEvent from '../../../../../brain/tools/events/EditorEvent';
|
|
|
|
|
import TinyDatePicker from 'tiny-date-picker';
|
|
|
|
|
import DateUtils from '../../../../../brain/tools/utilities/DateUtils';
|
|
|
|
|
import TextEditor from '../../../../../brain/tools/ui/TextEditor';
|
|
|
|
|
import DBUtils,
|
|
|
|
|
{
|
|
|
|
|
FINAL_KEY
|
|
|
|
|
}
|
|
|
|
|
from '../../../../../brain/tools/utilities/DBUtils';
|
|
|
|
|
export default class PostEditor
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
import DBUtils, { FINAL_KEY } from '../../../../../brain/tools/utilities/DBUtils';
|
|
|
|
|
export default class PostEditor {
|
|
|
|
|
//TODO - FIX POST FEATURE URLS IN DB
|
|
|
|
|
|
|
|
|
|
//--------------------------
|
|
|
|
|
// constructor
|
|
|
|
|
//--------------------------
|
|
|
|
|
constructor()
|
|
|
|
|
{
|
|
|
|
|
constructor() {
|
|
|
|
|
let self = this;
|
|
|
|
|
this.dataUtils = new DataUtils();
|
|
|
|
|
this.dateUtils = new DateUtils();
|
|
|
|
|
this.urlPieces = document.URL.split("/");
|
|
|
|
|
this.urlPieces = document.URL.split('/');
|
|
|
|
|
this.dbUtils = new DBUtils();
|
|
|
|
|
this.post = [];
|
|
|
|
|
this.postID = null;
|
|
|
|
|
if (document.getElementById('post-edit-index').getAttribute('data-index'))
|
|
|
|
|
{
|
|
|
|
|
if (document.getElementById('post-edit-index').getAttribute('data-index')) {
|
|
|
|
|
this.postID = document.getElementById('post-edit-index').getAttribute('data-index');
|
|
|
|
|
this.dbUtils.getPost(this.postID).then(body =>
|
|
|
|
|
{
|
|
|
|
|
this.dbUtils
|
|
|
|
|
.getPost(this.postID)
|
|
|
|
|
.then(body => {
|
|
|
|
|
self.post = body.post;
|
|
|
|
|
this.start()
|
|
|
|
|
}).catch(err =>
|
|
|
|
|
{
|
|
|
|
|
//console.log(err)
|
|
|
|
|
this.start();
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
this.start()
|
|
|
|
|
}
|
|
|
|
|
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-upload').addEventListener('change', e =>
|
|
|
|
|
{
|
|
|
|
|
.catch();
|
|
|
|
|
} else {
|
|
|
|
|
this.start();
|
|
|
|
|
}
|
|
|
|
|
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'),
|
|
|
|
|
{
|
|
|
|
|
},
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
TinyDatePicker(document.getElementById('post-date'), {
|
|
|
|
|
mode: 'dp-below',
|
|
|
|
|
format(date)
|
|
|
|
|
{
|
|
|
|
|
format(date) {
|
|
|
|
|
return self.dateUtils.getDate('origin', date);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
@ -77,24 +81,24 @@ export default class PostEditor
|
|
|
|
|
//--------------------------
|
|
|
|
|
// methods
|
|
|
|
|
//--------------------------
|
|
|
|
|
start()
|
|
|
|
|
{
|
|
|
|
|
let self = this;
|
|
|
|
|
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', e =>
|
|
|
|
|
{
|
|
|
|
|
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++)
|
|
|
|
|
{
|
|
|
|
|
for (var i = 0, length = optionButtons.length; i < length; i++) {
|
|
|
|
|
optionButtons[i].addEventListener('click', e => this.handlePostOptions(e), false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -102,72 +106,65 @@ export default class PostEditor
|
|
|
|
|
//--------------------------
|
|
|
|
|
// event handlers
|
|
|
|
|
//--------------------------
|
|
|
|
|
handlePostOptions(e)
|
|
|
|
|
{
|
|
|
|
|
handlePostOptions(e) {
|
|
|
|
|
let currentOption;
|
|
|
|
|
switch (e.target.id)
|
|
|
|
|
{
|
|
|
|
|
case "option-page-icon":
|
|
|
|
|
case "option-page":
|
|
|
|
|
switch (e.target.id) {
|
|
|
|
|
case 'option-page-icon':
|
|
|
|
|
case 'option-page':
|
|
|
|
|
currentOption = document.getElementById('option-page');
|
|
|
|
|
break;
|
|
|
|
|
case "option-feature-icon":
|
|
|
|
|
case "option-feature":
|
|
|
|
|
case 'option-feature-icon':
|
|
|
|
|
case 'option-feature':
|
|
|
|
|
currentOption = document.getElementById('option-feature');
|
|
|
|
|
break;
|
|
|
|
|
case "option-published-icon":
|
|
|
|
|
case "option-published":
|
|
|
|
|
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')
|
|
|
|
|
active == 'false'
|
|
|
|
|
? currentOption.setAttribute('data-active', 'true')
|
|
|
|
|
: currentOption.setAttribute('data-active', 'false');
|
|
|
|
|
}
|
|
|
|
|
handleEditorOptions(e)
|
|
|
|
|
{
|
|
|
|
|
handleEditorOptions(e) {
|
|
|
|
|
let self = this;
|
|
|
|
|
switch (e)
|
|
|
|
|
{
|
|
|
|
|
switch (e) {
|
|
|
|
|
case EditorEvent.EDITOR_SAVE:
|
|
|
|
|
new PostActions().update(this.postID, this.post, PostEditor.uploadFiles, FINAL_KEY).then(response =>
|
|
|
|
|
{
|
|
|
|
|
setTimeout(f =>
|
|
|
|
|
{
|
|
|
|
|
self.dbUtils.getPost(Number(response.response.newPost)).then(r =>
|
|
|
|
|
{
|
|
|
|
|
window.location = "/@/dashboard/posts/edit/" + r.post.uuid;
|
|
|
|
|
})
|
|
|
|
|
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(err =>
|
|
|
|
|
{
|
|
|
|
|
//console.log("ERROR", err)
|
|
|
|
|
})
|
|
|
|
|
break
|
|
|
|
|
.catch(() => {
|
|
|
|
|
//console.log("ERROR", err)
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case EditorEvent.EDITOR_UPDATE:
|
|
|
|
|
new PostActions().update(this.postID, this.post, PostEditor.uploadFiles, FINAL_KEY).then(response =>
|
|
|
|
|
{
|
|
|
|
|
new PostActions()
|
|
|
|
|
.update(this.postID, this.post, PostEditor.uploadFiles, FINAL_KEY)
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.editor.notify(DataEvent.POST_UPDATED, this.postID);
|
|
|
|
|
}).catch(err =>
|
|
|
|
|
{
|
|
|
|
|
//console.log("ERRORZ", err)
|
|
|
|
|
})
|
|
|
|
|
.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((response) =>
|
|
|
|
|
{
|
|
|
|
|
setTimeout(f =>
|
|
|
|
|
{
|
|
|
|
|
window.location = "/@/dashboard/posts/"
|
|
|
|
|
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((err) =>
|
|
|
|
|
{
|
|
|
|
|
console.log(err)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
} else {
|
|
|
|
|
// Do nothing!
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
@ -176,40 +173,38 @@ export default class PostEditor
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
handleImageActions(e)
|
|
|
|
|
{
|
|
|
|
|
handleImageActions(e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
var self = this;
|
|
|
|
|
switch (e.type)
|
|
|
|
|
{
|
|
|
|
|
case "dragover":
|
|
|
|
|
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++)
|
|
|
|
|
{
|
|
|
|
|
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.*'))
|
|
|
|
|
{
|
|
|
|
|
if (!f.type.match('image.*')) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
// Closure to capture the file information.
|
|
|
|
|
reader.onload = (function(theFile)
|
|
|
|
|
{
|
|
|
|
|
return function(f)
|
|
|
|
|
{
|
|
|
|
|
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), '"/>'
|
|
|
|
|
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);
|
|
|
|
@ -218,36 +213,42 @@ export default class PostEditor
|
|
|
|
|
// 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);
|
|
|
|
|
if (e.target.id == 'featured-image-upload')
|
|
|
|
|
this.handleImageUpload(e.target.id, PostEditor.uploadFiles);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
handleImageUpload(type, files)
|
|
|
|
|
{
|
|
|
|
|
let url = ""
|
|
|
|
|
let eventType = "";
|
|
|
|
|
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
|
|
|
|
|
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++)
|
|
|
|
|
{
|
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
|
|
var file = files[i];
|
|
|
|
|
// Check the file type.
|
|
|
|
|
if (!file.type.match('image.*'))
|
|
|
|
|
{
|
|
|
|
|
if (!file.type.match('image.*')) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
(type == "featured-image-upload") ? imageData.append('feature_image', file, file.name): imageData.append('post_image', file, file.name);
|
|
|
|
|
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) =>
|
|
|
|
|
{
|
|
|
|
|
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((err) =>
|
|
|
|
|
{
|
|
|
|
|
//console.log(err)
|
|
|
|
|
if (r.message == DataEvent.POST_IMAGE_ADDED)
|
|
|
|
|
self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url);
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
//console.log(err)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
PostEditor.uploadFiles = [];
|