thredded 0.12.4 → 0.13.0

data/app/assets/javascripts/thredded/components/topics.es6

@@ -1,8 +1,12 @@
-(($) => {
-  const COMPONENT_SELECTOR = '[data-thredded-topics]';
+//= require thredded/core/on_page_load
+//= require thredded/core/serialize_form
+
+// Makes topics in the list appear read as soon as the topic link is clicked,
+// iff the topic link leads to the last page of the topic.
+(() => {
+  const Thredded = window.Thredded;
 
-  const TOPIC_SELECTOR = 'article';
-  const TOPIC_LINK_SELECTOR = 'h1 a';
+  const COMPONENT_SELECTOR = '[data-thredded-topics]';
   const TOPIC_UNREAD_CLASS = 'thredded--topic-unread';
   const TOPIC_READ_CLASS = 'thredded--topic-read';
   const POSTS_COUNT_SELECTOR = '.thredded--topics--posts-count';
@@ -17,21 +21,26 @@
     return Math.ceil(numPosts / POSTS_PER_PAGE);
   }
 
-  class ThreddedTopics {
-    init($nodes) {
-      $nodes.on('click', TOPIC_LINK_SELECTOR, (evt) => {
-        const $topic = $(evt.target).closest(TOPIC_SELECTOR);
-        if (pageNumber($topic.find('a').prop('href')) == totalPages(+$topic.find(POSTS_COUNT_SELECTOR).text())) {
-          $topic.addClass(TOPIC_READ_CLASS).removeClass(TOPIC_UNREAD_CLASS);
-        }
-      });
-    }
+  function getTopicNode(node) {
+    do {
+      node = node.parentNode;
+    } while (node && node.tagName !== 'ARTICLE');
+    return node;
+  }
+
+  function initTopicsList(topicsList) {
+    topicsList.addEventListener('click', (evt) => {
+      const link = evt.target;
+      if (link.tagName !== 'A' || link.parentNode.tagName !== 'H1') return;
+      const topic = getTopicNode(link);
+      if (pageNumber(link.href) === totalPages(+topic.querySelector(POSTS_COUNT_SELECTOR).textContent)) {
+        topic.classList.add(TOPIC_READ_CLASS);
+        topic.classList.remove(TOPIC_UNREAD_CLASS);
+      }
+    });
   }
 
-  window.Thredded.onPageLoad(() => {
-    const $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      new ThreddedTopics().init($nodes);
-    }
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), initTopicsList);
   });
-})(jQuery);
+})();

data/app/assets/javascripts/thredded/components/turboforms.es6

@@ -1,15 +1,25 @@
+//= require thredded/core/on_page_load
+//= require thredded/core/serialize_form
+
 // Submit GET forms with turbolinks
-(function($) {
-  if (window.Turbolinks && window.Turbolinks.supported) {
-    window.Thredded.onPageLoad(() => {
-      $('[data-thredded-turboform]').on('submit', function(evt) {
-        evt.preventDefault();
-        Turbolinks.visit(this.action + (this.action.indexOf('?') === -1 ? '?' : '&') + $(this).serialize());
-
-        // On mobile the soft keyboard doesn't won't go away after the submit since we're submitting with
-        // Turbolinks. Hide it:
-        window.Thredded.hideSoftKeyboard();
-      });
+(() => {
+  const Thredded = window.Thredded;
+  const Turbolinks = window.Turbolinks;
+
+  Thredded.onPageLoad(() => {
+    if (!Turbolinks || !Turbolinks.supported) return;
+    Array.prototype.forEach.call(document.querySelectorAll('[data-thredded-turboform]'), (form) => {
+      form.addEventListener('submit', handleSubmit);
     });
-  }
-})(jQuery);
+  });
+
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    const form = evt.currentTarget;
+    Turbolinks.visit(form.action + (form.action.indexOf('?') === -1 ? '?' : '&') + Thredded.serializeForm(form));
+
+    // On mobile the soft keyboard doesn't won't go away after the submit since we're submitting with
+    // Turbolinks. Hide it:
+    Thredded.hideSoftKeyboard();
+  };
+})();

data/app/assets/javascripts/thredded/components/user_preferences_form.es6

@@ -1,64 +1,66 @@
-(($) => {
+//= require thredded/core/on_page_load
+
+// Reflects the logic of user preference settings by enabling/disabling certain inputs.
+(() => {
+  const Thredded = window.Thredded;
+
   const COMPONENT_SELECTOR = '[data-thredded-user-preferences-form]';
   const BOUND_MESSAGEBOARD_NAME = 'data-thredded-bound-messageboard-pref';
   const UPDATE_ON_CHANGE_NAME = 'data-thredded-update-checkbox-on-change';
 
   class MessageboardPreferenceBinding {
-    constructor($form, genericCheckboxName, messageboardCheckboxName) {
-      this.$genericCheckbox = $form.find(`:checkbox[name="${genericCheckboxName}"]`);
-      this.$messageboardCheckbox = $form.find(`:checkbox[name="${messageboardCheckboxName}"]`);
-      this.$messageboardCheckbox.on('change', () => {
+    constructor(form, genericCheckboxName, messageboardCheckboxName) {
+      this.messageboardCheckbox = form.querySelector(`[type="checkbox"][name="${messageboardCheckboxName}"]`);
+      if (!this.messageboardCheckbox) {
+        return;
+      }
+      this.messageboardCheckbox.addEventListener('change', () => {
         this.rememberMessageboardChecked();
       });
       this.rememberMessageboardChecked();
-      this.$genericCheckbox.on('change', () => {
+
+      this.genericCheckbox = form.querySelector(`[type="checkbox"][name="${genericCheckboxName}"]`);
+      this.genericCheckbox.addEventListener('change', () => {
         this.updateMessageboardCheckbox();
       });
       this.updateMessageboardCheckbox();
     }
 
     rememberMessageboardChecked() {
-      this.messageboardCheckedWas = this.$messageboardCheckbox.filter(':checkbox').prop('checked');
+      this.messageboardCheckedWas = this.messageboardCheckbox.checked;
     }
 
     updateMessageboardCheckbox() {
-      const enabled = this.$genericCheckbox.prop('checked');
-      this.$messageboardCheckbox
-        .prop('disabled', !enabled)
-        .filter(':checkbox').prop('checked', enabled ? this.messageboardCheckedWas : false);
+      const enabled = this.genericCheckbox.checked;
+      this.messageboardCheckbox.disabled = !enabled;
+      this.messageboardCheckbox.checked = enabled ? this.messageboardCheckedWas : false;
     }
   }
 
   class UpdateOnChange {
-    constructor($form, $sourceElement, targetName) {
-      const $target = $form.find(`:checkbox[name="${targetName}"]`);
-      if (!$target.length) return;
-      $sourceElement.on('change', () => {
-        $target.prop('checked', $sourceElement.prop('checked'));
+    constructor(form, sourceElement, targetName) {
+      const target = form.querySelector(`[type="checkbox"][name="${targetName}"]`);
+      if (!target) return;
+      sourceElement.addEventListener('change', () => {
+        target.checked = sourceElement.checked;
       });
     }
   }
 
   class UserPreferencesForm {
     constructor(form) {
-      const $form = $(form);
-      $form.find(`input[${BOUND_MESSAGEBOARD_NAME}]`).each((index, element) => {
-        const $elem = $(element);
-        new MessageboardPreferenceBinding($form, $elem.attr('name'), $elem.attr(BOUND_MESSAGEBOARD_NAME));
+      Array.prototype.forEach.call(form.querySelectorAll(`input[${BOUND_MESSAGEBOARD_NAME}]`), (element) => {
+        new MessageboardPreferenceBinding(form, element.name, element.getAttribute(BOUND_MESSAGEBOARD_NAME));
       });
-      $form.find(`input[${UPDATE_ON_CHANGE_NAME}]`).each((index, element) => {
-        const $elem = $(element);
-        new UpdateOnChange($form, $elem, $elem.attr(UPDATE_ON_CHANGE_NAME))
+      Array.prototype.forEach.call(form.querySelectorAll(`input[${UPDATE_ON_CHANGE_NAME}]`), (element) => {
+        new UpdateOnChange(form, element, element.getAttribute(UPDATE_ON_CHANGE_NAME));
       });
     }
   }
 
-  window.Thredded.onPageLoad(() => {
-    const $forms = $(COMPONENT_SELECTOR);
-    if ($forms.length) {
-      $forms.each(function() {
-        new UserPreferencesForm(this);
-      });
-    }
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (form) => {
+      new UserPreferencesForm(form);
+    });
   });
-})(jQuery);
+})();

data/app/assets/javascripts/thredded/components/user_textcomplete.es6

@@ -0,0 +1,47 @@
+//= require thredded/core/thredded
+//= require thredded/core/escape_html
+
+(() => {
+  const Thredded = window.Thredded;
+
+  Thredded.UserTextcomplete = {
+    DROPDOWN_CLASS_NAME: 'thredded--textcomplete-dropdown',
+
+    formatUser({avatar_url, name}) {
+      return "<div class='thredded--textcomplete-user-result'>" +
+        `<img class='thredded--textcomplete-user-result__avatar' src='${Thredded.escapeHtml(avatar_url)}' >` +
+        `<span class='thredded--textcomplete-user-result__name'>${Thredded.escapeHtml(name)}</span>` +
+        '</div>';
+    },
+
+    searchFn({url, autocompleteMinLength}) {
+      return function search(term, callback, match) {
+        if (term.length < autocompleteMinLength) {
+          callback([]);
+          return;
+        }
+        const request = new XMLHttpRequest();
+        request.open('GET', `${url}?q=${term}`, /* async */ true);
+        request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+        request.onload = () => {
+          // Ignore errors
+          if (request.status < 200 || request.status >= 400) {
+            callback([]);
+            return;
+          }
+          callback(JSON.parse(request.responseText).results.map(({avatar_url, id, name}) => {
+            return {avatar_url, id, name, match};
+          }));
+        };
+        request.send();
+      }
+    }
+  };
+
+  document.addEventListener('turbolinks:before-cache', () => {
+    Array.prototype.forEach.call(
+      document.getElementsByClassName(Thredded.UserTextcomplete.DROPDOWN_CLASS_NAME), (node) => {
+        node.parentNode.removeChild(node);
+      });
+  });
+})();

data/app/assets/javascripts/thredded/components/users_select.es6

@@ -1,72 +1,122 @@
-($ => {
-  const COMPONENT_SELECTOR = '[data-thredded-users-select]';
+//= require thredded/core/on_page_load
+//= require thredded/components/user_textcomplete
+//= require autosize
 
+(() => {
+  const Thredded = window.Thredded;
+  const autosize = window.autosize;
 
-  let formatUser = (user, container, query, escapeHtml) => {
-    if (user.loading) return user.text;
-    return "<div class='thredded--select2-user-result'>" +
-      `<img class='thredded--select2-user-result__avatar' src='${escapeHtml(user.avatar_url)}' >` +
-      `<span class='thredded--select2-user-result__name'>${escapeHtml(user.name)}</span>` +
-      '</div>';
-  };
+  const COMPONENT_SELECTOR = '[data-thredded-users-select]';
 
-  let formatUserSelection = (user, container, escapeHtml) => {
-    return `<span class='thredded--select2-user-selection'>` +
-      `<img class='thredded--select2-user-selection__avatar' src='${escapeHtml(user.avatar_url)}' >` +
-      `<span class='thredded--select2-user-selection__name'>${escapeHtml(user.name)}</span>` +
-      '</span>';
+  Thredded.UsersSelect = {
+    DROPDOWN_MAX_COUNT: 6,
   };
 
-  let initSelection = ($el, callback) => {
-    let ids = ($el.val() || '').split(',');
-    if (ids.length && ids[0] != '') {
-      $.ajax(`${$el.data('autocompleteUrl')}?ids=${ids.join(',')}`, {dataType: 'json'}).done(data => callback(data.results));
-    } else {
-      callback([]);
+  function parseNames(text) {
+    const result = [];
+    let current = [];
+    let currentIndex = 0;
+    let inQuoted = false;
+    let inName = false;
+    for (let i = 0; i < text.length; ++i) {
+      const char = text.charAt(i);
+      switch (char) {
+        case '"':
+          inQuoted = !inQuoted;
+          break;
+        case ' ':
+          if (inName) current.push(char);
+          break;
+        case ',':
+          if (inQuoted) {
+            current.push(char);
+          } else {
+            inName = false;
+            if (current.length) {
+              result.push({name: current.join(''), index: currentIndex});
+              current.length = 0;
+            }
+          }
+          break;
+        default:
+          if (!inName) currentIndex = i;
+          inName = true;
+          current.push(char);
+      }
     }
-  };
+    if (current.length) result.push({name: current.join(''), index: currentIndex});
+    return result;
+  }
 
-  let initOne = $el => {
-    $el.select2({
-      ajax: {
-        cache: true,
-        data: query => ({q: query}),
-        results: data => data,
-        dataType: 'json',
-        url: $el.data('autocompleteUrl')
+  const initUsersSelect = (textarea) => {
+    autosize(textarea);
+    // Prevent multiple lines
+    textarea.addEventListener('keypress', (evt) => {
+      if (evt.keyCode === 13 || evt.keyCode === 10) {
+        evt.preventDefault()
+      }
+    });
+    const editor = new Textcomplete.editors.Textarea(textarea);
+    const textcomplete = new Textcomplete(editor, {
+      dropdown: {
+        className: Thredded.UserTextcomplete.DROPDOWN_CLASS_NAME,
+        maxCount: Thredded.UsersSelect.DROPDOWN_MAX_COUNT,
       },
-      containerCssClass: 'thredded--select2-container',
-      dropdownCssClass: 'thredded--select2-drop',
-      initSelection: initSelection,
-      minimumInputLength: $el.data('autocompleteMinLength'),
-      multiple: true,
-      formatResult: formatUser,
-      formatSelection: formatUserSelection
     });
-  };
 
-  let init = () => {
-    $(COMPONENT_SELECTOR).each(function() {
-      initOne($(this));
+    const searchFn = Thredded.UserTextcomplete.searchFn({
+      url: textarea.getAttribute('data-autocomplete-url'),
+      autocompleteMinLength: parseInt(textarea.getAttribute('data-autocomplete-min-length'), 10)
     });
-  };
-
-  let destroy = () => {
-    $(COMPONENT_SELECTOR).each(function() {
-      $(this).select2('destroy');
+    textcomplete.on('rendered', function() {
+      if (textcomplete.dropdown.items.length) {
+        textcomplete.dropdown.items[0].activate();
+      }
     });
-    $('.select2-drop, .select2-drop-mask').remove();
+    textcomplete.register([{
+      index: 0,
+      match: (text) => {
+        const names = parseNames(text);
+        if (names.length) {
+          const {name, index} = names[names.length - 1];
+          const matchData = [name];
+          matchData.index = index;
+          return matchData;
+        } else {
+          return null;
+        }
+      },
+      search (term, callback, match) {
+        searchFn(term, function(results) {
+          const names = parseNames(textarea.value).map(({name}) => name);
+          callback(results.filter((result) => names.indexOf(result.name) === -1));
+        }, match);
+      },
+      template: Thredded.UserTextcomplete.formatUser,
+      replace  ({name}) {
+        if (/,/.test(name)) {
+          return `"${name}", `
+        } else {
+          return `${name}, `
+        }
+      }
+    }]);
   };
 
+  function destroyUsersSelect(textarea) {
+    autosize.destroy(textarea);
+  }
+
   window.Thredded.onPageLoad(() => {
-    init()
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initUsersSelect(node);
+    });
   });
 
   document.addEventListener('turbolinks:before-cache', () => {
-    // Turbolinks 5 clones the body node for caching, losing all the bound
-    // events. Undo the select2 transformation before storing to cache,
-    // so that it applies cleanly on restore.
-    destroy()
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      destroyUsersSelect(node);
+    });
   });
 
-})(jQuery);
+})();

data/app/assets/javascripts/thredded/core/debounce.es6

@@ -1,4 +1,4 @@
-//= require ./thredded
+//= require thredded/core/thredded
 
 /**
  * Return a function, that, as long as it continues to be invoked, will

data/app/assets/javascripts/thredded/core/escape_html.es6

@@ -0,0 +1,7 @@
+//= require thredded/core/thredded
+
+window.Thredded.escapeHtml = function(text) {
+  const node = document.createElement('div');
+  node.textContent = text;
+  return node.innerHTML;
+};

data/app/assets/javascripts/thredded/core/hide_soft_keyboard.es6

@@ -1,4 +1,4 @@
-//= require ./thredded
+//= require thredded/core/thredded
 
 window.Thredded.hideSoftKeyboard = () => {
   const activeElement = document.activeElement;

data/app/assets/javascripts/thredded/core/on_page_load.es6

@@ -1,4 +1,4 @@
-//= require ./thredded
+//= require thredded/core/thredded
 
 (() => {
   const isTurbolinks = 'Turbolinks' in window && window.Turbolinks.supported;

data/app/assets/javascripts/thredded/core/serialize_form.es6

@@ -0,0 +1,9 @@
+//= require thredded/core/thredded
+
+window.Thredded.serializeForm = (form) => {
+  // Can't use new FormData(form).entries() because it's not supported on any IE
+  // The below is not a full replacement, but enough for Thredded's purposes.
+  return Array.prototype.map.call(form.querySelectorAll('[name]'), (e) => {
+    return `${encodeURIComponent(e.name)}=${encodeURIComponent(e.value)}`;
+  }).join('&');
+};