comfortable_media_surfer 3.0.0

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

@@ -0,0 +1,67 @@
+(() => {
+  const isFirefox = /\bFirefox\//.test(navigator.userAgent);
+
+  class FileLink {
+    constructor(link) {
+      this.link = link;
+      this.isImage = !!link.dataset.cmsFileThumbUrl;
+
+      link.addEventListener('dragstart', (evt) => {
+        evt.dataTransfer.setData('text/plain', this.link.dataset.cmsFileLinkTag);
+      });
+
+      if (this.isImage) {
+        new bootstrap.Popover(link, {
+          container: link.parentElement,
+          trigger: 'hover',
+          placement: 'top',
+          content: this.buildFileThumbnail(),
+          html: true
+        });
+
+        link.addEventListener('dragstart', (evt) => {
+          evt.dataTransfer.setDragImage(this.buildFileThumbnail(), 4, 2);
+          this.getPopover().hide();
+        });
+
+        this.workAroundFirefoxPopoverGlitch();
+      }
+    }
+
+    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.link.addEventListener('dragstart', () => {
+        this.getPopover().disable();
+      });
+      this.link.addEventListener('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(bootstrap.Popover.DATA_KEY);
+    }
+  }
+
+  window.CMS.fileLinks = (root = document) => {
+    for (const link of root.querySelectorAll('[data-cms-file-link-tag]')) {
+      new FileLink(link);
+    }
+  };
+})();

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

@@ -0,0 +1,194 @@
+//= require comfy/vendor/moxie.min
+//= require comfy/vendor/plupload.dev
+
+(() => {
+  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) {
+        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);
+      });
+      for (const eventName of ['drop', 'dragleave']) {
+        this.ui.dropElement.addEventListener(eventName, () => {
+          this.ui.dropElement.classList.remove(DROP_TARGET_ACTIVE_CLASS);
+        });
+      }
+    }
+
+    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) {
+      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);
+    }
+
+    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').innerHTML = file.error_message;
+          break;
+      }
+    }
+
+    fileListItem({id}) {
+      return this.ui.container.querySelector(`#${id}`);
+    }
+
+    static buildListItemHTML({id, name}) {
+      return `<li id='${id}' class='row temp'>
+        <div class='col-md-9 d-flex align-items-center'>
+          <div class='progress'>
+            <div class='progress-bar progress-bar-striped progress-bar-animated'>
+              <span>${name}</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>
+      </li>`;
+    }
+
+    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 = [];
+  window.CMS.fileUpload = {
+    init(root = document) {
+      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
+        }
+      }));
+    },
+    dispose() {
+      for (const uploader of uploader) {
+        uploader.dispose();
+      }
+      uploaders.length = 0;
+    }
+  };
+})();

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

@@ -0,0 +1,40 @@
+// Site files modal.
+(() => {
+  let modal = null;
+
+  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) {
+        modal.hide();
+      }
+    });
+  };
+
+  window.CMS.files = {
+    init() {
+      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) => {
+        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);
+        modal.show();
+      });
+    },
+    dispose() {
+      if (modal !== null) {
+        modal.hide();
+        modal.dispose();
+        modal = null;
+      }
+    }
+  };
+})();

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,40 @@
+(() => {
+  const Rails = window.Rails;
+  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,30 @@
+(() => {
+  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,72 @@
+(() => {
+  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 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;
+    }
+  }
+})();
+
+