|
|
|
|
@ -2,14 +2,14 @@
|
|
|
|
|
import FipamoAdminAPI, {
|
|
|
|
|
TASK_PAGE_CREATE,
|
|
|
|
|
TASK_PAGE_EDIT,
|
|
|
|
|
TASK_PAGE_DELETE
|
|
|
|
|
} from '../../libraries/FipamoAdminAPI';
|
|
|
|
|
import * as DataEvent from '../events/DataEvent';
|
|
|
|
|
import PageActions from '../actions/PageActions';
|
|
|
|
|
import * as EditorEvent from '../events/EditorEvent';
|
|
|
|
|
TASK_PAGE_DELETE,
|
|
|
|
|
} from "../../libraries/FipamoAdminAPI";
|
|
|
|
|
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';
|
|
|
|
|
import TextEditor from "../ui/TextEditor";
|
|
|
|
|
import Notfications from "../ui/Notifications";
|
|
|
|
|
const admin = new FipamoAdminAPI();
|
|
|
|
|
const notify = new Notfications();
|
|
|
|
|
export default class PostEditor {
|
|
|
|
|
@ -18,24 +18,28 @@ export default class PostEditor {
|
|
|
|
|
//--------------------------
|
|
|
|
|
constructor() {
|
|
|
|
|
let self = this;
|
|
|
|
|
this.urlPieces = document.URL.split('/');
|
|
|
|
|
this.urlPieces = document.URL.split("/");
|
|
|
|
|
this.post = [];
|
|
|
|
|
this.postID = null;
|
|
|
|
|
this.postUUID = null;
|
|
|
|
|
this.postLayout = null;
|
|
|
|
|
if (document.getElementById('post-edit-index').getAttribute('data-index')) {
|
|
|
|
|
this.postID = document.getElementById('post-edit-index').getAttribute('data-index');
|
|
|
|
|
this.postUUID = document.getElementById('post-edit-index').getAttribute('data-uuid');
|
|
|
|
|
if (document.getElementById("post-edit-index").getAttribute("data-index")) {
|
|
|
|
|
this.postID = document
|
|
|
|
|
.getElementById("post-edit-index")
|
|
|
|
|
.getAttribute("data-index");
|
|
|
|
|
this.postUUID = document
|
|
|
|
|
.getElementById("post-edit-index")
|
|
|
|
|
.getAttribute("data-uuid");
|
|
|
|
|
this.postLayout = document
|
|
|
|
|
.getElementById('post-edit-index')
|
|
|
|
|
.getAttribute('data-layout');
|
|
|
|
|
.getElementById("post-edit-index")
|
|
|
|
|
.getAttribute("data-layout");
|
|
|
|
|
}
|
|
|
|
|
if (document.getElementById('edit-post-text')) {
|
|
|
|
|
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
|
|
|
|
|
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,
|
|
|
|
|
@ -57,9 +61,9 @@ export default class PostEditor {
|
|
|
|
|
() => this.handleEditorOptions(EditorEvent.EDITOR_SAVE),
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
document.getElementById('post-image-upload').addEventListener(
|
|
|
|
|
'change',
|
|
|
|
|
e => {
|
|
|
|
|
document.getElementById("post-image-upload").addEventListener(
|
|
|
|
|
"change",
|
|
|
|
|
(e) => {
|
|
|
|
|
self.handleImageUpload(e.target.id, e.target.files);
|
|
|
|
|
},
|
|
|
|
|
false
|
|
|
|
|
@ -80,24 +84,30 @@ export default class PostEditor {
|
|
|
|
|
// methods
|
|
|
|
|
//--------------------------
|
|
|
|
|
start() {
|
|
|
|
|
if (document.getElementById('featured-image-drop')) {
|
|
|
|
|
if (document.getElementById("featured-image-drop")) {
|
|
|
|
|
document
|
|
|
|
|
.getElementById('featured-image-drop')
|
|
|
|
|
.addEventListener('dragover', this.handleImageActions, false);
|
|
|
|
|
.getElementById("featured-image-drop")
|
|
|
|
|
.addEventListener("dragover", this.handleImageActions, false);
|
|
|
|
|
document
|
|
|
|
|
.getElementById('featured-image-drop')
|
|
|
|
|
.addEventListener('drop', this.handleImageActions, false);
|
|
|
|
|
.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();
|
|
|
|
|
.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');
|
|
|
|
|
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);
|
|
|
|
|
optionButtons[i].addEventListener(
|
|
|
|
|
"click",
|
|
|
|
|
(e) => this.handlePostOptions(e),
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -107,37 +117,41 @@ export default class PostEditor {
|
|
|
|
|
handlePostOptions(e) {
|
|
|
|
|
let currentOption;
|
|
|
|
|
switch (e.target.id) {
|
|
|
|
|
case 'option-page-icon':
|
|
|
|
|
case 'option-menu-pin':
|
|
|
|
|
currentOption = document.getElementById('option-menu-pin');
|
|
|
|
|
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');
|
|
|
|
|
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');
|
|
|
|
|
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');
|
|
|
|
|
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 task = '';
|
|
|
|
|
e === EditorEvent.EDITOR_SAVE ? (task = TASK_PAGE_CREATE) : (task = TASK_PAGE_EDIT);
|
|
|
|
|
var task = "";
|
|
|
|
|
e === EditorEvent.EDITOR_SAVE
|
|
|
|
|
? (task = TASK_PAGE_CREATE)
|
|
|
|
|
: (task = TASK_PAGE_EDIT);
|
|
|
|
|
new PageActions()
|
|
|
|
|
.collectInfo(document.getElementById('featured-image-upload').files[0])
|
|
|
|
|
.then(page => {
|
|
|
|
|
notify.alert('Writing down changes', null);
|
|
|
|
|
.collectInfo(
|
|
|
|
|
document.getElementById("featured-image-upload").files[0]
|
|
|
|
|
)
|
|
|
|
|
.then((page) => {
|
|
|
|
|
notify.alert("Writing down changes", null);
|
|
|
|
|
admin
|
|
|
|
|
.pageActions(task, page)
|
|
|
|
|
.then(r => {
|
|
|
|
|
.then((r) => {
|
|
|
|
|
if (
|
|
|
|
|
r.type === DataEvent.PAGE_ERROR ||
|
|
|
|
|
r.type === DataEvent.API_REQUEST_LAME
|
|
|
|
|
@ -148,18 +162,18 @@ export default class PostEditor {
|
|
|
|
|
notify.alert(r.message, true);
|
|
|
|
|
} else {
|
|
|
|
|
notify.alert(r.message, true);
|
|
|
|
|
window.location = '/@/dashboard/page/edit/' + r.id;
|
|
|
|
|
window.location = "/@/dashboard/page/edit/" + r.id;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
notify.alert(err, false);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case EditorEvent.EDITOR_DELETE:
|
|
|
|
|
if (this.postLayout === 'index') {
|
|
|
|
|
notify.alert('Index cannot be deleted', false);
|
|
|
|
|
if (this.postLayout === "index") {
|
|
|
|
|
notify.alert("Index cannot be deleted", false);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (confirm("AYE! You know you're deleting this post, right?")) {
|
|
|
|
|
@ -167,9 +181,9 @@ export default class PostEditor {
|
|
|
|
|
admin
|
|
|
|
|
.pageActions(TASK_PAGE_DELETE, id)
|
|
|
|
|
.then(() => {
|
|
|
|
|
window.location = '/@/dashboard/page/list/';
|
|
|
|
|
window.location = "/dashboard/pages";
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
notify.alert(err, false);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
@ -177,7 +191,7 @@ export default class PostEditor {
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
|
|
|
|
|
document.getElementById('post-image-upload').click();
|
|
|
|
|
document.getElementById("post-image-upload").click();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -185,17 +199,17 @@ export default class PostEditor {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
switch (e.type) {
|
|
|
|
|
case 'dragover':
|
|
|
|
|
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
|
|
|
|
case "dragover":
|
|
|
|
|
e.dataTransfer.dropEffect = "copy"; // Explicitly show this is a copy.
|
|
|
|
|
break;
|
|
|
|
|
case 'change':
|
|
|
|
|
case 'drop':
|
|
|
|
|
e.type == 'drop'
|
|
|
|
|
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();
|
|
|
|
|
@ -203,19 +217,19 @@ export default class PostEditor {
|
|
|
|
|
reader.onload = (function (theFile) {
|
|
|
|
|
return function (f) {
|
|
|
|
|
// Render thumbnail.
|
|
|
|
|
var image = document.createElement('img');
|
|
|
|
|
var image = document.createElement("img");
|
|
|
|
|
image.src = f.target.result;
|
|
|
|
|
image.title = escape(theFile.name);
|
|
|
|
|
var span = document.createElement('div');
|
|
|
|
|
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);
|
|
|
|
|
'"/>',
|
|
|
|
|
].join("");
|
|
|
|
|
document.getElementById("featured-image-drop").innerHTML = "";
|
|
|
|
|
document.getElementById("featured-image-drop").appendChild(image);
|
|
|
|
|
};
|
|
|
|
|
})(f);
|
|
|
|
|
// Read in the image file as a data URL.
|
|
|
|
|
@ -225,16 +239,16 @@ export default class PostEditor {
|
|
|
|
|
}
|
|
|
|
|
handleImageUpload(type, files) {
|
|
|
|
|
let self = this;
|
|
|
|
|
notify.alert('Uploading Image', null);
|
|
|
|
|
notify.alert("Uploading Image", null);
|
|
|
|
|
admin
|
|
|
|
|
.imageUpload(type, files)
|
|
|
|
|
.then(r => {
|
|
|
|
|
.then((r) => {
|
|
|
|
|
if (r.type == DataEvent.POST_IMAGE_ADDED)
|
|
|
|
|
self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url);
|
|
|
|
|
notify.alert('Image Added to Entry', true);
|
|
|
|
|
notify.alert("Image Added to Entry", true);
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
notify.alert('Uh oh. Image not added', false);
|
|
|
|
|
notify.alert("Uh oh. Image not added", false);
|
|
|
|
|
//console.log('ERROR', err);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
Ro
4 years ago