panda_cms 0.5.10 → 0.6.0

data/public/panda-cms-assets/javascripts/embed/editable.js

@@ -1,358 +0,0 @@
-/**
- * Represents a controller for managing editable content within an iframe.
- * @class
- */
-class EditableController {
-  /**
-   * Represents the constructor for the Editable class.
-   * @param {HTMLIFrameElement} frame - The iFrame element to be used for editing.
-   */
-  constructor(pageId, frame) {
-    this.pageId = pageId;
-    this.frame = frame;
-    this.frame.style.display = "none";
-    this.csrfToken = document.querySelector('meta[name="csrf-token"]').content;
-
-    this.frame.addEventListener("load", () => {
-      this.frameDocument =
-        this.frame.contentDocument || this.frame.contentWindow.document;
-      this.body = this.frameDocument.body;
-      this.head = this.frameDocument.head;
-      this.loadEvents();
-    });
-  }
-
-  /**
-   * Load events for the editable iFrame
-   */
-  loadEvents() {
-    console.debug("[Panda CMS] iFrame loaded...");
-
-    this.embedPlainTextEditors();
-
-    this.embedRichTextEditor();
-  }
-
-  setFrameVisible() {
-    console.log("[Panda CMS] Setting iFrame to visible...");
-    this.frame.style.display = "";
-  }
-
-  stylePlainTextEditor(element, status) {
-    console.log(
-      `[Panda CMS] Styling plain text editor ${element.id} as ${status}...`
-    );
-
-    if (status == "initial") {
-      element.style.border = "1px dashed #ccc";
-      element.style.outline = "none";
-      element.style.cursor = "pointer";
-      element.style.transition = "background 500ms linear";
-      element.style.backgroundColor = "inherit";
-    } else if (status == "success") {
-      element.style.backgroundColor = "#66bd6a50";
-    } else if (status == "error") {
-      element.style.backgroundColor = "#dc354550";
-    }
-  }
-
-  embedPlainTextEditors() {
-    var elements = this.body.querySelectorAll(
-      '[data-editable-kind="plain_text"]'
-    );
-
-    if (elements.length == 0) {
-      return;
-    }
-
-    elements.forEach((element) => {
-      this.stylePlainTextEditor(element, "initial");
-
-      // TODO: If content hasn't changed, don't call save
-      // Bind initial click handler and then auto-save on blur?
-
-      // This binds auto-save...
-      element.addEventListener("blur", (event) => {
-        var target = event.target;
-        var pageId = target.getAttribute("data-editable-page-id");
-        var blockContentId = target.getAttribute(
-          "data-editable-block-content-id"
-        );
-
-        fetch(`/admin/pages/${pageId}/block_contents/${blockContentId}`, {
-          method: "PATCH",
-          headers: {
-            "Content-Type": "application/json",
-            "X-CSRF-Token": document
-              .querySelector('meta[name="csrf-token"]')
-              .getAttribute("content"),
-          },
-          body: JSON.stringify({ content: target.innerHTML }),
-        })
-          .then((response) => response.json())
-          .then((data) => {
-            this.stylePlainTextEditor(target, "success");
-            setTimeout(() => {
-              this.stylePlainTextEditor(target, "initial");
-            }, 1000);
-          })
-          .catch((error) => {
-            this.stylePlainTextEditor(target, "error");
-            setTimeout(() => {
-              this.stylePlainTextEditor(target, "initial");
-            }, 1000);
-            alert("Error:", error);
-            console.log(error);
-          });
-      });
-    });
-
-    console.debug(
-      "[Panda CMS] Dispatching event: pandaCmsPlainTextEditorLoaded"
-    );
-
-    // Let the parent know that the external resources have been loaded
-    this.frameDocument.dispatchEvent(
-      new Event("pandaCmsPlainTextEditorLoaded")
-    );
-  }
-
-  embedRichTextEditor() {
-    if (this.body.getElementsByClassName("content-rich-text").length == 0) {
-      this.setFrameVisible();
-      return;
-    }
-
-    console.debug("[Panda CMS] Loading Quill rich text editor...");
-
-    this.addStylesheet(
-      this.frameDocument,
-      this.head,
-      "/panda-cms-assets/javascripts/embed/rich_text.css?ver=1.0.0"
-    );
-
-    var style = this.frameDocument.createElement("style");
-    // TODO: Base these on "default" set styles
-    style.innerHTML = `
-      .ql-snow .ql-editor h2 {
-        font-size: 1.5em
-      }
-
-      .ql-snow .ql-editor h3 {
-        font-size: 1.17em
-      }
-
-      .ql-snow .ql-editor h4 {
-        font-size: 1em
-      }
-
-      .ql-snow .ql-editor h5 {
-        font-size: .83em
-      }
-
-      .ql-snow .ql-editor h6 {
-        font-size: .67em
-      }
-
-      .ql-snow .ql-editor a {
-        text-decoration: underline
-      }
-
-      .ql-snow .ql-editor blockquote {
-        border-left: 4px solid #ccc;
-        margin-bottom: 5px;
-        margin-top: 5px;
-        padding-left: 16px
-      }
-
-      .ql-snow .ql-editor code,
-      .ql-snow .ql-editor .ql-code-block-container {
-        background-color: #f0f0f0;
-        border-radius: 3px
-      }
-
-      .ql-snow .ql-editor .ql-code-block-container {
-        margin-bottom: 5px;
-        margin-top: 5px;
-        padding: 5px 10px
-      }
-
-      .ql-snow .ql-editor code {
-        font-size: 85%;
-        padding: 2px 4px
-      }
-
-      .ql-snow .ql-editor .ql-code-block-container {
-        background-color: #23241f;
-        color: #f8f8f2;
-        overflow: visible
-      }
-
-      .ql-snow .ql-editor img {
-        max-width: 100%
-      }
-`;
-    this.head.append(style);
-
-    this.loadScript(
-      this.frameDocument,
-      this.head,
-      "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"
-    )
-      .then(() => {
-        return this.loadScript(
-          this.frameDocument,
-          this.head,
-          "https://unpkg.com/quill-image-compress@1.2.11/dist/quill.imageCompressor.min.js"
-        );
-      })
-      .then(() => {
-        return this.loadScript(
-          this.frameDocument,
-          this.head,
-          "https://unpkg.com/quill-magic-url@3.0.0/dist/index.js"
-        );
-      })
-      // .then(() => {
-      //   return this.loadScript(
-      //     this.frameDocument,
-      //     this.head,
-      //     "https://cdn.jsdelivr.net/npm/quill-markdown-shortcuts@latest/dist/markdownShortcuts.js"
-      //   );
-      // })
-      .then(() => {
-        this.styleRichTextEditor();
-
-        console.debug(
-          "[Panda CMS] Dispatching event: pandaCmsRichTextEditorLoaded"
-        );
-
-        // Let the parent know that the external resources have been loaded
-        this.frameDocument.dispatchEvent(
-          new Event("pandaCmsRichTextEditorLoaded")
-        );
-
-        // Autosave the editable elements
-        this.enableRichTextEditorAutoSave();
-
-        // This prevents the flash of content before the iFrame is ready
-        this.setFrameVisible();
-      });
-  }
-
-  /**
-   * Autosave the editable elements in the iFrame
-   * @todo #TODO Only do this when we have "autosave" mode enabled?
-   */
-  enableRichTextEditorAutoSave() {
-    // Grab each element that's editable and append a save handler to it
-    var elements = this.frameDocument.querySelectorAll(".ql-editor");
-    elements.forEach((element) => {
-      element.addEventListener("blur", (event) => {
-        var target = event.target;
-        var blockContentId = target.parentElement.getAttribute(
-          "data-block-content-id"
-        );
-
-        this.bindSaveHandler(blockContentId, target.innerHTML);
-      });
-    });
-  }
-
-  /**
-   * Styles the Quill rich text editor elements in the iFrame
-   */
-  styleRichTextEditor() {
-    if (this.body.getElementsByClassName("ql-editor").length == 0) {
-      return;
-    }
-
-    var style = this.frameDocument.createElement("style");
-    style.innerHTML = `.ql-editor:hover, .ql-container:hover {
-      cursor: pointer !important;
-    }
-
-    .ql-container.ql-snow {
-      margin-top: 0 important;
-    }
-
-    .ql-editor:hover, .ql-editor:focus, .ql-editor:active {
-      background-color: #e1effa;
-      cursor: pointer !important;
-      -webkit-transition: background-color 500ms linear;
-      -ms-transition: background-color 500ms linear;
-      transition: background-color 500ms linear;
-    }
-
-    .ql-editor.success {
-      background-color: #66bd6a50 !important;
-      -webkit-transition: background-color 1000ms linear;
-      -ms-transition: background-color 1000ms linear;
-      transition: background-color 1000ms linear;
-    }`;
-
-    this.head.append(style);
-    console.log("Appended styles to head");
-  }
-
-  bindSaveHandler(blockContentId, content) {
-    console.debug(`[Panda CMS] Calling save handler for ${blockContentId}...`);
-    fetch(`/admin/pages/${this.pageId}/block_contents/${blockContentId}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": this.csrfToken,
-      },
-      body: JSON.stringify({ content: content }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        var editableBlock = this.frameDocument.querySelector(
-          `[data-block-content-id="${blockContentId}"] .ql-editor`
-        );
-        editableBlock.classList.add("success");
-        setTimeout(() => {
-          editableBlock.classList.remove("success");
-        }, 1500);
-      })
-      .catch((error) => {
-        console.log(error);
-        alert("Error updating. Please contact the support team!", error);
-      });
-  }
-
-  addStylesheet(frameDocument, head, href) {
-    return new Promise(function (resolve, reject) {
-      let link = frameDocument.createElement("link");
-      link.rel = "stylesheet";
-      link.href = href;
-      link.media = "none";
-      head.append(link);
-
-      link.onload = () => {
-        if (link.media != "all") {
-          link.media = "all";
-        }
-        console.debug(`[Panda CMS] Stylesheet loaded: ${href}`);
-        resolve(link);
-      };
-      link.onerror = () =>
-        reject(new Error(`[Panda CMS] Stylesheet load error for ${href}`));
-    });
-  }
-
-  loadScript(frameDocument, head, src) {
-    return new Promise(function (resolve, reject) {
-      let script = frameDocument.createElement("script");
-      script.src = src;
-      head.append(script);
-
-      script.onload = () => {
-        console.debug(`[Panda CMS] Script loaded: ${src}`);
-        resolve(script);
-      };
-      script.onerror = () =>
-        reject(new Error(`[Panda CMS] Script load error for ${src}`));
-    });
-  }
-}