comfortable_media_surfer 3.0.0 → 3.1.2

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

@@ -1,3 +1,6 @@
+import jQuery from "jquery";
+import Popover from "bootstrap/js/src/popover";
+
 (() => {
   const isFirefox = /\bFirefox\//.test(navigator.userAgent);
 
@@ -6,20 +9,23 @@
       this.link = link;
       this.isImage = !!link.dataset.cmsFileThumbUrl;
 
-      link.addEventListener('dragstart', (evt) => {
-        evt.dataTransfer.setData('text/plain', this.link.dataset.cmsFileLinkTag);
+      link.addEventListener("dragstart", (evt) => {
+        evt.dataTransfer.setData(
+          "text/plain",
+          this.link.dataset.cmsFileLinkTag
+        );
       });
 
       if (this.isImage) {
-        new bootstrap.Popover(link, {
+        new Popover(link, {
           container: link.parentElement,
-          trigger: 'hover',
-          placement: 'top',
+          trigger: "hover",
+          placement: "top",
           content: this.buildFileThumbnail(),
-          html: true
+          html: true,
         });
 
-        link.addEventListener('dragstart', (evt) => {
+        link.addEventListener("dragstart", (evt) => {
           evt.dataTransfer.setDragImage(this.buildFileThumbnail(), 4, 2);
           this.getPopover().hide();
         });
@@ -41,10 +47,10 @@
     // https://bugzilla.mozilla.org/show_bug.cgi?id=505521
     workAroundFirefoxPopoverGlitch() {
       if (!isFirefox) return;
-      this.link.addEventListener('dragstart', () => {
+      this.link.addEventListener("dragstart", () => {
         this.getPopover().disable();
       });
-      this.link.addEventListener('dragend', () => {
+      this.link.addEventListener("dragend", () => {
         setTimeout(() => {
           const popover = this.getPopover();
           popover.enable();
@@ -55,12 +61,12 @@
 
     // We can't keep a reference to the Popover object, because Bootstrap re-creates it internally.
     getPopover() {
-      return jQuery(this.link).data(bootstrap.Popover.DATA_KEY);
+      return jQuery(this.link).data(Popover.DATA_KEY);
     }
   }
 
   window.CMS.fileLinks = (root = document) => {
-    for (const link of root.querySelectorAll('[data-cms-file-link-tag]')) {
+    for (const link of root.querySelectorAll("[data-cms-file-link-tag]")) {
       new FileLink(link);
     }
   };

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

@@ -1,26 +1,38 @@
-//= require comfy/vendor/moxie.min
-//= require comfy/vendor/plupload.dev
+import plupload from "plupload";
 
 (() => {
-  const DROP_TARGET_ACTIVE_CLASS = 'cms-uploader-drag-drop-target-active';
+  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);
+      settings = Object.assign(
+        FileUpload.defaultUploaderSettings(container.id),
+        settings
+      );
       this.ui = {
         container,
-        list: container.querySelector('.cms-uploader-filelist'),
+        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.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);
@@ -40,8 +52,13 @@
 
     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';
+      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
@@ -50,15 +67,15 @@
       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')) {
+        if (e.dataTransfer.types.includes("Files")) {
           this.ui.dropElement.classList.add(DROP_TARGET_ACTIVE_CLASS);
         }
       };
-      document.addEventListener('dragenter', onDragEnter);
+      document.addEventListener("dragenter", onDragEnter);
       this.addCleanup(() => {
-        document.removeEventListener('dragenter', onDragEnter);
+        document.removeEventListener("dragenter", onDragEnter);
       });
-      for (const eventName of ['drop', 'dragleave']) {
+      for (const eventName of ["drop", "dragleave"]) {
         this.ui.dropElement.addEventListener(eventName, () => {
           this.ui.dropElement.classList.remove(DROP_TARGET_ACTIVE_CLASS);
         });
@@ -67,7 +84,7 @@
 
     onUploaderError(error) {
       if (error.code === plupload.INIT_ERROR) {
-        window.alert('Error: Initialisation error. Reload to try again.');
+        window.alert("Error: Initialisation error. Reload to try again.");
         return;
       }
       const file = error.file;
@@ -100,7 +117,7 @@
 
     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');
+      const template = document.createElement("template");
       template.innerHTML = info.response;
       const newListItem = template.content.firstElementChild;
       this.ui.list.replaceChild(newListItem, this.fileListItem(file));
@@ -114,11 +131,16 @@
     }
 
     addFile(file) {
-      this.ui.list.insertAdjacentHTML('afterbegin', FileUpload.buildListItemHTML(file));
-      this.fileListItem(file).querySelector('.cms-uploader-file-delete').addEventListener('click', (evt) => {
-        evt.preventDefault();
-        this.uploader.removeFile(file);
-      });
+      this.ui.list.insertAdjacentHTML(
+        "afterbegin",
+        FileUpload.buildListItemHTML(file)
+      );
+      this.fileListItem(file)
+        .querySelector(".cms-uploader-file-delete")
+        .addEventListener("click", (evt) => {
+          evt.preventDefault();
+          this.uploader.removeFile(file);
+        });
       this.updateFileStatus(file);
     }
 
@@ -127,24 +149,25 @@
     }
 
     updateFileStatus(file) {
-      const progressBar = this.fileListItem(file).querySelector('.progress-bar');
+      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').innerHTML = file.error_message;
+          progressBar.style.width = "100%";
+          progressBar.classList.add("progress-bar-danger");
+          progressBar.querySelector("span").innerHTML = file.error_message;
           break;
       }
     }
 
-    fileListItem({id}) {
+    fileListItem({ id }) {
       return this.ui.container.querySelector(`#${id}`);
     }
 
-    static buildListItemHTML({id, name}) {
+    static buildListItemHTML({ id, name }) {
       return `<li id='${id}' class='row temp'>
         <div class='col-md-9 d-flex align-items-center'>
           <div class='progress'>
@@ -161,12 +184,12 @@
 
     static defaultUploaderSettings(id) {
       return {
-        runtimes: 'html5,browserplus,silverlight,flash,gears',
+        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]',
+        file_data_name: "file[file]",
       };
     }
   }
@@ -174,21 +197,24 @@
   const uploaders = [];
   window.CMS.fileUpload = {
     init(root = document) {
-      const el = root.querySelector('#cms-uploader');
+      const el = root.querySelector("#cms-uploader");
       if (el === null) return;
-      uploaders.push(new FileUpload(el, {
-        url: el.dataset.cmsUploaderUrl,
-        multipart_params: {
-          [el.dataset.cmsUploaderTokenName]: el.dataset.cmsUploaderTokenValue,
-          [el.dataset.cmsUploaderSessionName]: el.dataset.cmsUploaderSessionValue
-        }
-      }));
+      uploaders.push(
+        new FileUpload(el, {
+          url: el.dataset.cmsUploaderUrl,
+          multipart_params: {
+            [el.dataset.cmsUploaderTokenName]: el.dataset.cmsUploaderTokenValue,
+            [el.dataset.cmsUploaderSessionName]:
+              el.dataset.cmsUploaderSessionValue,
+          },
+        })
+      );
     },
     dispose() {
       for (const uploader of uploader) {
         uploader.dispose();
       }
       uploaders.length = 0;
-    }
+    },
   };
 })();

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

@@ -1,3 +1,5 @@
+import Modal from "bootstrap/js/src/popover";
+
 // Site files modal.
 (() => {
   let modal = null;
@@ -5,9 +7,12 @@
   const initModalContent = (modalContent) => {
     window.CMS.fileUpload.init(modalContent);
     window.CMS.fileLinks(modalContent);
-    modalContent.addEventListener('dragstart', (evt) => {
-      if (evt.target.nodeType === Node.ELEMENT_NODE &&
-          evt.target.matches('.cms-uploader-filelist .item-title a') && modal != null) {
+    modalContent.addEventListener("dragstart", (evt) => {
+      if (
+        evt.target.nodeType === Node.ELEMENT_NODE &&
+        evt.target.matches(".cms-uploader-filelist .item-title a") &&
+        modal != null
+      ) {
         modal.hide();
       }
     });
@@ -15,17 +20,19 @@
 
   window.CMS.files = {
     init() {
-      const modalToggle = document.querySelector('.cms-files-open-modal');
-      const modalContainer = document.querySelector('.cms-files-modal');
+      const modalToggle = document.querySelector(".cms-files-open-modal");
+      const modalContainer = document.querySelector(".cms-files-modal");
       if (modalToggle === null || modalContainer === null) return;
-      const modalContent = modalContainer.querySelector('.modal-content');
-      modalToggle.addEventListener('click', (evt) => {
+      const modalContent = modalContainer.querySelector(".modal-content");
+      modalToggle.addEventListener("click", (evt) => {
         evt.preventDefault();
-        fetch(modalContainer.dataset.url, {credentials: 'same-origin'}).then((resp) => resp.text()).then((html) => {
-          modalContent.innerHTML = `<div class="modal-body">${html}</div>`;
-          initModalContent(modalContent);
-        });
-        modal = modal || new bootstrap.Modal(modalContainer);
+        fetch(modalContainer.dataset.url, { credentials: "same-origin" })
+          .then((resp) => resp.text())
+          .then((html) => {
+            modalContent.innerHTML = `<div class="modal-body">${html}</div>`;
+            initModalContent(modalContent);
+          });
+        modal = modal || new Modal(modalContainer);
         modal.show();
       });
     },
@@ -35,6 +42,6 @@
         modal.dispose();
         modal = null;
       }
-    }
+    },
   };
 })();

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

@@ -1,33 +1,42 @@
+import Sortable from "sortablejs";
+import Rails from "@rails/ujs";
+
 (() => {
-  const Rails = window.Rails;
-  const DATA_ID_ATTRIBUTE = 'data-id';
+  const DATA_ID_ATTRIBUTE = "data-id";
 
   const sortableStore = {
     get(sortable) {
-      return Array.from(sortable.el.children, (el) => el.getAttribute(DATA_ID_ATTRIBUTE));
+      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',
+        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')
-        }));
+      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() {
@@ -35,6 +44,6 @@
         sortable.destroy();
       }
       sortableInstances.length = 0;
-    }
-  }
+    },
+  };
 })();

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

@@ -1,23 +1,31 @@
+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]');
+      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,
-        }));
+        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,
-        }));
+        flatpickrInstances.push(
+          flatpickr(date, {
+            format: "yyyy-mm-dd",
+            locale: locale,
+          })
+        );
       }
     },
     dispose() {
@@ -25,6 +33,6 @@
         flatpickrInstance.destroy();
       }
       flatpickrInstances.length = 0;
-    }
+    },
   };
 })();

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

@@ -1,38 +1,57 @@
+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 Rails = window.Rails;
   const buildRedactorOptions = () => {
-    const fileUploadPath = document.querySelector('meta[name="cms-file-upload-path"]').content;
-    const pagesPath = document.querySelector('meta[name="cms-pages-path"]').content;
+    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("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');
+    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("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');
+    fileManagerJson.searchParams.set("source", "redactor");
+    fileManagerJson.searchParams.set("type", "file");
 
     const definedLinks = new URL(pagesPath, document.location.href);
-    definedLinks.searchParams.set('source', 'redactor');
+    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'],
+      formatting: ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
+      plugins: [
+        "imagemanager",
+        "filemanager",
+        "table",
+        "video",
+        "definedlinks",
+      ],
       lang: CMS.getLocale(),
       convertDivs: false,
       imageUpload,
@@ -46,14 +65,16 @@
       removeComments: false,
       removeNewLines: false,
       deniedTags: [],
-      replaceDivs: false
+      replaceDivs: false,
     };
   };
 
   const redactorInstances = [];
   window.CMS.wysiwyg = {
     init(root = document) {
-      const textareas = root.querySelectorAll('textarea.rich-text-editor, textarea[data-cms-rich-text]');
+      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) {
@@ -65,8 +86,6 @@
         redactor.core.destroy();
       }
       redactorInstances.length = 0;
-    }
-  }
+    },
+  };
 })();
-
-

data/app/assets/javascripts/comfy/vendor/diff/pretty_text_diff.js

@@ -5,29 +5,31 @@
 See https://github.com/arnab/jQuery.PrettyTextDiff/
  */
 
-(function() {
+import jQuery from "jquery";
+
+(function () {
   var $;
 
   $ = jQuery;
 
   $.fn.extend({
-    prettyTextDiff: function(options) {
+    prettyTextDiff: function (options) {
       var dmp, settings;
       settings = {
         originalContainer: ".original",
         changedContainer: ".changed",
         diffContainer: ".diff",
         cleanup: true,
-        debug: false
+        debug: false,
       };
       settings = $.extend(settings, options);
       $.fn.prettyTextDiff.debug("Options: ", settings, settings);
       dmp = new diff_match_patch();
-      return this.each(function() {
+      return this.each(function () {
         var changed, diff_as_html, diffs, original;
         if (settings.originalContent && settings.changedContent) {
-          original = $('<div />').html(settings.originalContent).text();
-          changed = $('<div />').html(settings.changedContent).text();
+          original = $("<div />").html(settings.originalContent).text();
+          changed = $("<div />").html(settings.changedContent).text();
         } else {
           original = $(settings.originalContainer, this).text();
           changed = $(settings.changedContainer, this).text();
@@ -39,38 +41,48 @@ See https://github.com/arnab/jQuery.PrettyTextDiff/
           dmp.diff_cleanupSemantic(diffs);
         }
         $.fn.prettyTextDiff.debug("Diffs: ", diffs, settings);
-        diff_as_html = $.map(diffs, function(diff) {
+        diff_as_html = $.map(diffs, function (diff) {
           return $.fn.prettyTextDiff.createHTML(diff);
         });
-        $(settings.diffContainer, this).html(diff_as_html.join(''));
+        $(settings.diffContainer, this).html(diff_as_html.join(""));
         return this;
       });
-    }
+    },
   });
 
-  $.fn.prettyTextDiff.debug = function(message, object, settings) {
+  $.fn.prettyTextDiff.debug = function (message, object, settings) {
     if (settings.debug) {
       return console.log(message, object);
     }
   };
 
-  $.fn.prettyTextDiff.createHTML = function(diff) {
-    var data, html, operation, pattern_amp, pattern_gt, pattern_lt, pattern_para, text;
+  $.fn.prettyTextDiff.createHTML = function (diff) {
+    var data,
+      html,
+      operation,
+      pattern_amp,
+      pattern_gt,
+      pattern_lt,
+      pattern_para,
+      text;
     html = [];
     pattern_amp = /&/g;
     pattern_lt = /</g;
     pattern_gt = />/g;
     pattern_para = /\n/g;
-    operation = diff[0], data = diff[1];
-    text = data.replace(pattern_amp, '&amp;').replace(pattern_lt, '&lt;').replace(pattern_gt, '&gt;').replace(pattern_para, '<br>');
+    (operation = diff[0]), (data = diff[1]);
+    text = data
+      .replace(pattern_amp, "&amp;")
+      .replace(pattern_lt, "&lt;")
+      .replace(pattern_gt, "&gt;")
+      .replace(pattern_para, "<br>");
     switch (operation) {
       case DIFF_INSERT:
-        return '<ins>' + text + '</ins>';
+        return "<ins>" + text + "</ins>";
       case DIFF_DELETE:
-        return '<del>' + text + '</del>';
+        return "<del>" + text + "</del>";
       case DIFF_EQUAL:
-        return '<span>' + text + '</span>';
+        return "<span>" + text + "</span>";
     }
   };
-
 }).call(this);