comfy_middle_seat 3.2.0

data/app/assets/javascripts/comfy/admin/cms/file_link.js

@@ -0,0 +1,96 @@
+import jQuery from "jquery";
+import Popover from "bootstrap/js/src/popover";
+
+(() => {
+  const isFirefox = /\bFirefox\//.test(navigator.userAgent);
+
+  class FileLink {
+    constructor(link) {
+      this.link = link;
+      this.isImage = !!link.dataset.cmsFileThumbUrl;
+      this.cleanupFns = [];
+      this.on("dragstart", (evt) => {
+        evt.dataTransfer.setData(
+          "text/plain",
+          this.link.dataset.cmsFileLinkTag
+        );
+      });
+
+      if (this.isImage) {
+        new Popover(link, {
+          container: link.parentElement,
+          trigger: "hover",
+          placement: "top",
+          content: this.buildFileThumbnail(),
+          html: true,
+        });
+
+        this.on("dragstart", (evt) => {
+          evt.dataTransfer.setDragImage(this.buildFileThumbnail(), 4, 2);
+          this.getPopover()?.hide();
+        });
+
+        this.workAroundFirefoxPopoverGlitch();
+      }
+    }
+
+    destroy() {
+      for (const cleanupFn of this.cleanupFns.splice(0)) {
+        cleanupFn();
+      }
+      this.getPopover()?.dispose();
+    }
+
+    on(eventName, handler) {
+      this.link.addEventListener(eventName, handler);
+      this.cleanupFns.push(() => {
+        this.link.removeEventListener(eventName, handler);
+      });
+    }
+
+    buildFileThumbnail() {
+      const img = new Image();
+      img.src = this.link.dataset.cmsFileThumbUrl;
+      return img;
+    }
+
+    // To work around a Firefox bug causing the popover to re-appear after the drop:
+    // https://github.com/comfy/comfortable-mexican-sofa/pull/799#issuecomment-369124161
+    //
+    // Possibly related to:
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+    workAroundFirefoxPopoverGlitch() {
+      if (!isFirefox) return;
+      this.on("dragstart", () => {
+        this.getPopover()?.disable();
+      });
+      this.on("dragend", () => {
+        setTimeout(() => {
+          const popover = this.getPopover();
+          popover?.enable();
+          popover?.hide();
+        }, 300);
+      });
+    }
+
+    // We can't keep a reference to the Popover object, because Bootstrap re-creates it internally.
+    getPopover() {
+      return jQuery(this.link).data(Popover.DATA_KEY);
+    }
+  }
+
+  const fileLinks = new Map();
+  const initFileLinks = (root = document) => {
+    for (const link of root.querySelectorAll("[data-cms-file-link-tag]")) {
+      if (!fileLinks.has(link)) fileLinks.set(link, new FileLink(link));
+    }
+  };
+  initFileLinks.dispose = (root = null) => {
+    for (const [link, fileLink] of fileLinks) {
+      if (root !== null && link !== root && !root.contains(link)) continue;
+      fileLink.destroy();
+      fileLinks.delete(link);
+    }
+  };
+  window.CMS.fileLinks = initFileLinks;
+})();

data/app/assets/javascripts/comfy/admin/cms/file_upload.js

@@ -0,0 +1,229 @@
+import plupload from "plupload";
+
+(() => {
+  const DROP_TARGET_ACTIVE_CLASS = "cms-uploader-drag-drop-target-active";
+
+  class FileUpload {
+    constructor(container, settings) {
+      if (!container.id) container.id = plupload.guid();
+      settings = Object.assign(
+        FileUpload.defaultUploaderSettings(container.id),
+        settings
+      );
+      this.ui = {
+        container,
+        list: container.querySelector(".cms-uploader-filelist"),
+        dropElement: container.querySelector(`#${settings.drop_element}`),
+      };
+      this.cleanupFns = [];
+      this.uploader = new plupload.Uploader(settings);
+      this.uploader.bind("PostInit", () => this.onUploaderPostInit());
+      this.uploader.bind("Error", (_uploader, error) =>
+        this.onUploaderError(error)
+      );
+      this.uploader.bind("FilesAdded", (_uploader, files) =>
+        this.onUploaderFilesAdded(files)
+      );
+      this.uploader.bind("UploadProgress", (_uploader, file) =>
+        this.onUploaderUploadProgress(file)
+      );
+      this.uploader.bind("FileUploaded", (_uploader, file, info) =>
+        this.onUploaderFileUploaded(file, info)
+      );
+      this.uploader.bind("FilesRemoved", (_uploader, files) =>
+        this.onUploaderFilesRemoved(files)
+      );
+      this.uploader.init();
+      if (settings.setup) {
+        settings.setup(this.uploader);
+      }
+    }
+
+    destroy() {
+      this.uploader.destroy();
+      for (const cleanupFn of this.cleanupFns.splice(0)) {
+        cleanupFn();
+      }
+    }
+
+    addCleanup(cleanupFn) {
+      this.cleanupFns.push(cleanupFn);
+    }
+
+    onUploaderPostInit() {
+      // Show drag and drop info and attach events only if drag and drop is enabled and supported.
+      if (
+        !this.uploader.settings.dragdrop ||
+        !this.uploader.features.dragdrop
+      ) {
+        this.ui.container.querySelector(
+          ".cms-uploader-drag-drop-info"
+        ).style.display = "none";
+        return;
+      }
+      // When dragging over the document add a class to the drop target that puts it on top of every element and remove
+      // that class when dropping or leaving the drop target. Otherwise the dragleave event would fire whenever we drag
+      // over a child element inside the drop target such as text nodes.
+      const onDragEnter = (e) => {
+        // Only react to drag'n'drops that contain a file. See:
+        // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
+        if (e.dataTransfer.types.includes("Files")) {
+          this.ui.dropElement.classList.add(DROP_TARGET_ACTIVE_CLASS);
+        }
+      };
+      document.addEventListener("dragenter", onDragEnter);
+      this.addCleanup(() => {
+        document.removeEventListener("dragenter", onDragEnter);
+      });
+      const onDragEnd = () => {
+        this.ui.dropElement.classList.remove(DROP_TARGET_ACTIVE_CLASS);
+      };
+      for (const eventName of ["drop", "dragleave"]) {
+        this.ui.dropElement.addEventListener(eventName, onDragEnd);
+        this.addCleanup(() => {
+          this.ui.dropElement.removeEventListener(eventName, onDragEnd);
+        });
+      }
+    }
+
+    onUploaderError(error) {
+      if (error.code === plupload.INIT_ERROR) {
+        window.alert("Error: Initialisation error. Reload to try again.");
+        return;
+      }
+      const file = error.file;
+      if (!file) return;
+      // Get error message from the server response. Not all runtimes support this.
+      let message = error.response;
+      // If no error message is in the server response get standard plupload error messages.
+      // This will have descriptive error message for something like file size or file format errors but for
+      // server errors it will only display a general error message.
+      if (!message) {
+        message = error.message;
+        if (error.details) message += ` (${error.details})`;
+      }
+      file.status = plupload.FAILED;
+      file.error_message = message;
+      this.updateFileStatus(file);
+    }
+
+    onUploaderFilesAdded(files) {
+      for (const file of files) {
+        this.addFile(file);
+      }
+      // Auto start upload when files are added.
+      this.uploader.start();
+    }
+
+    onUploaderUploadProgress(file) {
+      this.updateFileStatus(file);
+    }
+
+    onUploaderFileUploaded(file, info) {
+      // Replace the dummy file entry in the file list with the the entry from the server response.
+      const template = document.createElement("template");
+      template.innerHTML = info.response;
+      const newListItem = template.content.firstElementChild;
+      this.ui.list.replaceChild(newListItem, this.fileListItem(file));
+      window.CMS.fileLinks(newListItem);
+    }
+
+    onUploaderFilesRemoved(files) {
+      for (const file of files) {
+        this.removeFile(file);
+      }
+    }
+
+    addFile(file) {
+      const listItem = FileUpload.buildListItem(file);
+      this.ui.list.prepend(listItem);
+      listItem
+        .querySelector(".cms-uploader-file-delete")
+        .addEventListener("click", (evt) => {
+          evt.preventDefault();
+          this.uploader.removeFile(file);
+        });
+      this.updateFileStatus(file);
+    }
+
+    removeFile(file) {
+      this.fileListItem(file).remove();
+    }
+
+    updateFileStatus(file) {
+      const progressBar =
+        this.fileListItem(file).querySelector(".progress-bar");
+      switch (file.status) {
+        case plupload.UPLOADING:
+          progressBar.style.width = `${file.percent}%`;
+          break;
+        case plupload.FAILED:
+          progressBar.style.width = "100%";
+          progressBar.classList.add("progress-bar-danger");
+          progressBar.querySelector("span").textContent = file.error_message;
+          break;
+      }
+    }
+
+    fileListItem({ id }) {
+      return this.ui.container.querySelector(`#${id}`);
+    }
+
+    static buildListItem({ id, name }) {
+      const listItem = document.createElement("li");
+      listItem.id = id;
+      listItem.className = "row temp";
+      listItem.innerHTML = `<div class='col-md-9 d-flex align-items-center'>
+        <div class='progress'>
+          <div class='progress-bar progress-bar-striped progress-bar-animated'>
+            <span></span>
+          </div>
+        </div>
+      </div>
+      <div class='col-md-3 d-flex align-items-center justify-content-md-end'>
+        <a class='btn btn-sm btn-danger float-right cms-uploader-file-delete' href='#'>Delete</a>
+      </div>`;
+      listItem.querySelector("span").textContent = name;
+      return listItem;
+    }
+
+    static defaultUploaderSettings(id) {
+      return {
+        runtimes: "html5,browserplus,silverlight,flash,gears",
+        dragdrop: true,
+        drop_element: `${id}-drag-drop-target`,
+        browse_button: `${id}-browse`,
+        container: id,
+        file_data_name: "file[file]",
+      };
+    }
+  }
+
+  const uploaders = new Map();
+  window.CMS.fileUpload = {
+    init(root = document) {
+      const el = root.matches?.("#cms-uploader")
+        ? root
+        : root.querySelector("#cms-uploader");
+      if (el === null || uploaders.has(el)) return;
+      uploaders.set(
+        el,
+        new FileUpload(el, {
+          url: el.dataset.cmsUploaderUrl,
+          multipart_params: {
+            [el.dataset.cmsUploaderTokenName]: el.dataset.cmsUploaderTokenValue,
+            [el.dataset.cmsUploaderSessionName]:
+              el.dataset.cmsUploaderSessionValue,
+          },
+        })
+      );
+    },
+    dispose(root = null) {
+      for (const [el, uploader] of uploaders) {
+        if (root !== null && el !== root && !root.contains(el)) continue;
+        uploader.destroy();
+        uploaders.delete(el);
+      }
+    },
+  };
+})();

data/app/assets/javascripts/comfy/admin/cms/files_modal.js

@@ -0,0 +1,97 @@
+import Modal from "bootstrap/js/src/modal";
+
+// Site files modal.
+(() => {
+  let modal = null;
+  let modalToggle = null;
+  let modalContainer = null;
+  let modalContent = null;
+  let onModalToggle = null;
+  let onModalContentDragStart = null;
+  let requestId = 0;
+
+  const initModalContent = () => {
+    window.CMS.fileUpload.init(modalContent);
+    window.CMS.fileLinks(modalContent);
+  };
+
+  const dispose = () => {
+    requestId += 1;
+    if (modalToggle !== null && onModalToggle !== null) {
+      modalToggle.removeEventListener("click", onModalToggle);
+    }
+    if (modalContent !== null && onModalContentDragStart !== null) {
+      modalContent.removeEventListener("dragstart", onModalContentDragStart);
+      window.CMS.fileUpload.dispose(modalContent);
+      window.CMS.fileLinks.dispose(modalContent);
+    }
+    if (modal !== null) {
+      const wasAnimated = modalContainer.classList.contains("fade");
+      modalContainer.classList.remove("fade");
+      modal.hide();
+      if (wasAnimated) modalContainer.classList.add("fade");
+      modal.dispose();
+    }
+    modal = null;
+    modalToggle = null;
+    modalContainer = null;
+    modalContent = null;
+    onModalToggle = null;
+    onModalContentDragStart = null;
+  };
+
+  window.CMS.files = {
+    init() {
+      const nextModalToggle = document.querySelector(".cms-files-open-modal");
+      const nextModalContainer = document.querySelector(".cms-files-modal");
+      if (nextModalToggle === null || nextModalContainer === null) return;
+      if (
+        modalToggle === nextModalToggle &&
+        modalContainer === nextModalContainer
+      ) {
+        return;
+      }
+
+      dispose();
+      modalToggle = nextModalToggle;
+      modalContainer = nextModalContainer;
+      modalContent = modalContainer.querySelector(".modal-content");
+      onModalContentDragStart = (evt) => {
+        if (
+          evt.target.nodeType === Node.ELEMENT_NODE &&
+          evt.target.matches(".cms-uploader-filelist .item-title a") &&
+          modal !== null
+        ) {
+          modal.hide();
+        }
+      };
+      modalContent.addEventListener("dragstart", onModalContentDragStart);
+      onModalToggle = (evt) => {
+        evt.preventDefault();
+        const currentRequestId = ++requestId;
+        const currentModalContent = modalContent;
+        const url = new URL(modalContainer.dataset.url, document.location.href);
+        url.username = "";
+        url.password = "";
+        fetch(url, { credentials: "same-origin" })
+          .then((resp) => resp.text())
+          .then((html) => {
+            if (
+              currentRequestId !== requestId ||
+              currentModalContent !== modalContent
+            ) {
+              return;
+            }
+            window.CMS.fileUpload.dispose(modalContent);
+            window.CMS.fileLinks.dispose(modalContent);
+            modalContent.innerHTML = `<div class="modal-body">${html}</div>`;
+            initModalContent();
+          });
+        modal = modal || new Modal(modalContainer);
+        modal.show();
+      };
+      modalToggle.addEventListener("click", onModalToggle);
+    },
+    dispose,
+  };
+})();

data/app/assets/javascripts/comfy/admin/cms/page_fragments.js

@@ -0,0 +1,22 @@
+window.CMS.pageFragments = () => {
+  const toggle = document.querySelector('select#fragments-toggle');
+  if (toggle === null) return;
+  const url = new URL(toggle.dataset.url, document.location.href);
+  toggle.addEventListener('change', () => {
+    url.searchParams.set('layout_id', toggle.value);
+    fetch(url, {credentials: 'same-origin'}).then((resp) => resp.text()).then((html) => {
+      const container = document.querySelector('#form-fragments-container');
+      container.innerHTML = html;
+      // TODO: Only dispose of the widgets that were within the fragment.
+      CMS.wysiwyg.dispose();
+      CMS.timepicker.dispose();
+      CMS.codemirror.dispose();
+
+      CMS.fileLinks(container);
+      // TODO: Container should also be passed here once the TODO above is addressed.
+      CMS.wysiwyg.init();
+      CMS.timepicker.init();
+      CMS.codemirror.init();
+    });
+  });
+};

data/app/assets/javascripts/comfy/admin/cms/slugify.js

@@ -0,0 +1,34 @@
+(() => {
+  const SLUGIFY_REPLACEMENTS = [
+    [/[àáâã]/g, 'a'],
+    [/ä/g, 'ae'],
+    [/[èéëê]/g, 'e'],
+    [/[ìíïî]/g, 'i'],
+    [/[òóôõ]/g, 'o'],
+    [/ö/g, 'oe'],
+    [/[ùúû]/g, 'u'],
+    [/ü/g, 'ue'],
+    [/ñ/g, 'n'],
+    [/ç/g, 'c'],
+    [/ß/g, 'ss'],
+    [/[·\/,:;_ ]/g, '-']
+  ];
+
+  const slugifyValue = (value) => {
+    let slug = value.trim().toLowerCase();
+    for (const [from, to] of SLUGIFY_REPLACEMENTS) {
+      slug = slug.replace(from, to);
+    }
+    // Remove any other URL incompatible characters and replace multiple dashes with just a single one.
+    return slug.replace(/[^a-z0-9-]/g, '').replace(/-+/g, '-');
+  };
+
+  window.CMS.slugify = () => {
+    const input = document.querySelector('input[data-slugify=true]');
+    const slugInput = document.querySelector('input[data-slug]');
+    if (input === null || slugInput === null) return;
+    input.addEventListener('input', () => {
+      slugInput.value = slugifyValue(input.value);
+    });
+  };
+})();

data/app/assets/javascripts/comfy/admin/cms/sortable_list.js

@@ -0,0 +1,49 @@
+import Sortable from "sortablejs";
+import Rails from "@rails/ujs";
+
+(() => {
+  const DATA_ID_ATTRIBUTE = "data-id";
+
+  const sortableStore = {
+    get(sortable) {
+      return Array.from(sortable.el.children, (el) =>
+        el.getAttribute(DATA_ID_ATTRIBUTE)
+      );
+    },
+    set(sortable) {
+      fetch(`${CMS.current_path}/reorder`, {
+        body: JSON.stringify({ order: sortable.toArray() }),
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": Rails.csrfToken(),
+        },
+        credentials: "same-origin",
+        method: "PUT",
+      });
+    },
+  };
+
+  const sortableInstances = [];
+  window.CMS.sortableList = {
+    init(root = document) {
+      for (const sortableRoot of root.querySelectorAll(".sortable")) {
+        sortableInstances.push(
+          Sortable.create(sortableRoot, {
+            handle: ".dragger",
+            draggable: "li",
+            dataIdAttr: DATA_ID_ATTRIBUTE,
+            store: sortableStore,
+            onStart: (evt) => evt.from.classList.add("sortable-active"),
+            onEnd: (evt) => evt.from.classList.remove("sortable-active"),
+          })
+        );
+      }
+    },
+    dispose() {
+      for (const sortable of sortableInstances) {
+        sortable.destroy();
+      }
+      sortableInstances.length = 0;
+    },
+  };
+})();

data/app/assets/javascripts/comfy/admin/cms/timepicker.js

@@ -0,0 +1,38 @@
+import flatpickr from "flatpickr";
+
+(() => {
+  const flatpickrInstances = [];
+  window.CMS.timepicker = {
+    init(root = document) {
+      const datetimes = root.querySelectorAll(
+        "input[type=text][data-cms-datetime]"
+      );
+      const dates = root.querySelectorAll("input[type=text][data-cms-date]");
+      if (datetimes.length === 0 && dates.length === 0) return;
+      const locale = CMS.getLocale();
+      for (const datetime of datetimes) {
+        flatpickrInstances.push(
+          flatpickr(datetime, {
+            format: "yyyy-mm-dd hh:ii",
+            enableTime: true,
+            locale: locale,
+          })
+        );
+      }
+      for (const date of dates) {
+        flatpickrInstances.push(
+          flatpickr(date, {
+            format: "yyyy-mm-dd",
+            locale: locale,
+          })
+        );
+      }
+    },
+    dispose() {
+      for (const flatpickrInstance of flatpickrInstances) {
+        flatpickrInstance.destroy();
+      }
+      flatpickrInstances.length = 0;
+    },
+  };
+})();

data/app/assets/javascripts/comfy/admin/cms/wysiwyg.js

@@ -0,0 +1,91 @@
+import jQuery from "jquery";
+import Rails from "@rails/ujs";
+
+import "../../vendor/redactor";
+import "../../vendor/redactor/filemanager";
+import "../../vendor/redactor/imagemanager";
+import "../../vendor/redactor/definedlinks";
+import "../../vendor/redactor/table";
+import "../../vendor/redactor/video";
+
+(() => {
+  const buildRedactorOptions = () => {
+    const fileUploadPath = document.querySelector(
+      'meta[name="cms-file-upload-path"]'
+    ).content;
+    const pagesPath = document.querySelector(
+      'meta[name="cms-pages-path"]'
+    ).content;
+    const csrfParam = Rails.csrfParam();
+    const csrfToken = Rails.csrfToken();
+
+    const imageUpload = new URL(fileUploadPath, document.location.href);
+    imageUpload.searchParams.set("source", "redactor");
+    imageUpload.searchParams.set("type", "image");
+    imageUpload.searchParams.set(csrfParam, csrfToken);
+
+    const imageManagerJson = new URL(fileUploadPath, document.location.href);
+    imageManagerJson.searchParams.set("source", "redactor");
+    imageManagerJson.searchParams.set("type", "image");
+
+    const fileUpload = new URL(fileUploadPath, document.location.href);
+    fileUpload.searchParams.set("source", "redactor");
+    fileUpload.searchParams.set("type", "file");
+    fileUpload.searchParams.set(csrfParam, csrfToken);
+
+    const fileManagerJson = new URL(fileUploadPath, document.location.href);
+    fileManagerJson.searchParams.set("source", "redactor");
+    fileManagerJson.searchParams.set("type", "file");
+
+    const definedLinks = new URL(pagesPath, document.location.href);
+    definedLinks.searchParams.set("source", "redactor");
+
+    return {
+      minHeight: 160,
+      autoresize: true,
+      buttonSource: true,
+      formatting: ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
+      plugins: [
+        "imagemanager",
+        "filemanager",
+        "table",
+        "video",
+        "definedlinks",
+      ],
+      lang: CMS.getLocale(),
+      convertDivs: false,
+      imageUpload,
+      imageManagerJson,
+      fileUpload,
+      fileManagerJson,
+      definedLinks,
+      // allow unsafe tags and the like (prevent redactor stripping divs and other elements)
+      cleanOnEnter: false,
+      replaceTags: false,
+      removeComments: false,
+      removeNewLines: false,
+      deniedTags: [],
+      replaceDivs: false,
+    };
+  };
+
+  const redactorInstances = [];
+  window.CMS.wysiwyg = {
+    init(root = document) {
+      const textareas = root.querySelectorAll(
+        "textarea.rich-text-editor, textarea[data-cms-rich-text]"
+      );
+      if (textareas.length === 0) return;
+      const redactorOptions = buildRedactorOptions();
+      for (const textarea of textareas) {
+        redactorInstances.push(new jQuery.Redactor(textarea, redactorOptions));
+      }
+    },
+    dispose() {
+      for (const redactor of redactorInstances) {
+        redactor.core.destroy();
+      }
+      redactorInstances.length = 0;
+    },
+  };
+})();