Fipamo/src/com/controllers/PageEditor.js

//TOOLS
import FipamoAdminAPI, {
  TASK_PAGE_CREATE,
  TASK_PAGE_EDIT,
  TASK_PAGE_DELETE
} from "../../libraries/FipamoAdminAPI";
import Maintenance from "./MaintenanceManager";
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(null);
    this.mm = new Maintenance();
    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);

    self.mm
      .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);
        } else {
          notify.alert("Uh oh. Image not added", false);
        }
      })
      .catch(() => {
        notify.alert("Uh oh. Image not added", false);
        //console.log('ERROR', err);
      });
  }
}
PostEditor.uploadFiles = [];