267 lines
8.7 KiB
JavaScript
267 lines
8.7 KiB
JavaScript
//TOOLS
|
|
import FipamoAdminAPI, {
|
|
TASK_PAGE_CREATE,
|
|
TASK_PAGE_EDIT,
|
|
TASK_PAGE_DELETE
|
|
} from "../../libraries/FipamoAdminAPI";
|
|
import FipamoUtilityAPI from "../../libraries/FipamoUtilityAPI";
|
|
import * as DataEvent from "../events/DataEvent";
|
|
import PageActions from "../actions/PageActions";
|
|
import * as EditorEvent from "../events/EditorEvent";
|
|
//import TinyDatePicker from 'tiny-date-picker'; TODO: Reactivate for scheduled publishing
|
|
import TextEditor from "../ui/TextEditor";
|
|
import Notfications from "../ui/Notifications";
|
|
const notify = new Notfications();
|
|
export default class PostEditor {
|
|
//--------------------------
|
|
// constructor
|
|
//--------------------------
|
|
constructor() {
|
|
this.processing = false;
|
|
let self = this;
|
|
this.admin = new FipamoAdminAPI();
|
|
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");
|
|
this.postLayout = document
|
|
.getElementById("post-edit-index")
|
|
.getAttribute("data-layout");
|
|
}
|
|
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) {
|
|
if (this.processing) return;
|
|
let self = this;
|
|
switch (e) {
|
|
case EditorEvent.EDITOR_SAVE:
|
|
case EditorEvent.EDITOR_UPDATE:
|
|
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) => {
|
|
self.processing = true;
|
|
notify.alert("Writing down changes", null);
|
|
self.admin
|
|
.pageActions(task, page)
|
|
.then((r) => {
|
|
self.processing = false;
|
|
if (
|
|
r.type === DataEvent.PAGE_ERROR ||
|
|
r.type === DataEvent.API_REQUEST_LAME
|
|
) {
|
|
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) => {
|
|
self.processing = false;
|
|
notify.alert(err, false);
|
|
});
|
|
});
|
|
break;
|
|
case EditorEvent.EDITOR_DELETE:
|
|
if (this.postLayout === "index") {
|
|
notify.alert("Index cannot be deleted", false);
|
|
return;
|
|
}
|
|
if (confirm("AYE! You know you're deleting this post, right?")) {
|
|
let id = { id: this.postUUID };
|
|
self.processing = true;
|
|
this.admin
|
|
.pageActions(TASK_PAGE_DELETE, id)
|
|
.then(() => {
|
|
self.processing = false;
|
|
window.location = "/dashboard/pages";
|
|
})
|
|
.catch((err) => {
|
|
self.processing = false;
|
|
notify.alert(err, false);
|
|
});
|
|
} 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 self = this;
|
|
notify.alert("Uploading Image", null);
|
|
let utils = new FipamoUtilityAPI();
|
|
utils
|
|
.imageUpload(type, files)
|
|
.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);
|
|
})
|
|
.catch(() => {
|
|
notify.alert("Uh oh. Image not added", false);
|
|
//console.log('ERROR', err);
|
|
});
|
|
}
|
|
}
|
|
PostEditor.uploadFiles = [];
|