kcy1 1.0

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

@@ -0,0 +1,46 @@
+(() => {
+  if (!window.CMS) window.CMS = {};
+  const CMS = window.CMS;
+
+  // TODO(glebm): Use the battle-tested universal onPageLoad code and enable Turbolinks+async in the demo app.
+  // See: https://gist.github.com/glebm/2496daf445877055447a6fac46509d9a
+  const isTurbolinks = 'Turbolinks' in window && window.Turbolinks.supported;
+  if (isTurbolinks) {
+    document.addEventListener('turbolinks:load', () => {
+      window.CMS.init();
+    });
+    document.addEventListener('turbolinks:before-cache', () => {
+      window.CMS.dispose();
+    });
+  } else {
+    document.addEventListener('DOMContentLoaded', () => {
+      window.CMS.init();
+    });
+  }
+
+  CMS.init = () => {
+    CMS.current_path = window.location.pathname;
+    CMS.slugify();
+    CMS.codemirror.init();
+    CMS.wysiwyg.init();
+    CMS.sortableList.init();
+    CMS.timepicker.init();
+    CMS.pageFragments();
+    CMS.categories();
+    CMS.files.init();
+    CMS.fileLinks();
+    CMS.fileUpload.init();
+    CMS.diff();
+  };
+
+  CMS.dispose = () => {
+    CMS.codemirror.dispose();
+    CMS.wysiwyg.dispose();
+    CMS.files.dispose();
+    CMS.fileUpload.dispose();
+    CMS.sortableList.dispose();
+    CMS.timepicker.dispose();
+  };
+
+  CMS.getLocale = () => document.querySelector('meta[name="cms-locale"]').content;
+})();

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

@@ -0,0 +1,17 @@
+(() => {
+  window.CMS.categories = (root = document) => {
+    const widget = root.querySelector('.categories-widget');
+    if (widget === null) return;
+    const readSection = widget.querySelector('.read');
+    const editSection = widget.querySelector('.editable');
+    widget.querySelector('.read button.toggle-cat-edit').addEventListener('click', () => {
+      readSection.style.display = 'none';
+      editSection.style.display = 'block';
+    });
+    widget.querySelector('.editable button.toggle-cat-edit').addEventListener('click', () => {
+      editSection.style.display = 'none';
+      readSection.style.display = 'block';
+    });
+  };
+})();
+

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

@@ -0,0 +1,31 @@
+(() => {
+  const codeMirrorInstances = [];
+  window.CMS.codemirror = {
+    init(root = document) {
+      for (const textarea of root.querySelectorAll('textarea[data-cms-cm-mode]')) {
+        const codemirror = CodeMirror.fromTextArea(textarea, {
+          mode: textarea.dataset.cmsCmMode,
+          tabSize: 2,
+          lineWrapping: true,
+          autoCloseTags: true,
+          lineNumbers: true,
+          viewportMargin: Infinity
+        });
+        codeMirrorInstances.push(codemirror);
+      }
+
+      const tabsRoot = root.id === 'form-fragments' ? root : root.querySelector('#form-fragments');
+      jQuery(tabsRoot).find('a[data-toggle="tab"]').on('shown.bs.tab', () => {
+        for (const codemirror of codeMirrorInstances) {
+          codemirror.refresh();
+        }
+      });
+    },
+    dispose() {
+      for (const codemirror of codeMirrorInstances) {
+        codemirror.toTextArea();
+      }
+      codeMirrorInstances.length = 0;
+    }
+}
+})();

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

@@ -0,0 +1 @@
+// Custom JS for the admin area

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

@@ -0,0 +1,10 @@
+(() => {
+  window.CMS.diff = () => {
+    jQuery('.revision').prettyTextDiff({
+      cleanup: true,
+      originalContainer: '.original',
+      changedContainer: '.current',
+      diffContainer: '.diff .content',
+    });
+  }
+})();

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);
+    });
+  };
+})();