thredded 0.12.4 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 86b9c121f8dce31cb5c0bf7faa2f9e5b9e0b23bf
-  data.tar.gz: e1d798dfa2ca61bca551b052cbc23b4e91ba66c4
+  metadata.gz: 633ce6690d9ffc55e74596d44c9c6547778700e6
+  data.tar.gz: ab7417716f223e806bf189263da331ebe9b1635f
 SHA512:
-  metadata.gz: 63e6821ccfc2a24cc7e2c3fd5ec5a1f080523b2eaaa4c64c8e4898101742f51c69e5d9946b419824f22dfe4a3e7593732b15036ff3257c38c1df688d900e4ee9
-  data.tar.gz: 10dc01b049b0e019b807e76a30b597ca2bec14746eb5ac8e3c005baa2f25d975eecec5cae7d667e942a2bda0d6b7f35f27cb8cdf4f3a1e1f7cd655cf557c7fc8
+  metadata.gz: a513cd6fd50b5b1e3dc4f3af5a3d81719b942df9ef66f27f32c9e874ea1784ec39bd41752c94694bdf80b59fa24b1d203dcb31322d7294f43d1aefd79781197a
+  data.tar.gz: 6ff341b70414e6fdbcb79faf28c97290dae8cedb4be683171ef33fad0453d7b3ac012447d535f460d12cb52f9f3b01a6dfcc09a02f2b875237d56baab00479e1

data/README.md

@@ -47,7 +47,6 @@ Table of Contents
     * [Reference your paths so that Thredded can find them](#reference-your-paths-so-that-thredded-can-find-them)
     * [Add Thredded styles](#add-thredded-styles)
     * [Add Thredded JavaScripts](#add-thredded-javascripts)
-      * [jQuery version](#jquery-version)
   * [User profile page](#user-profile-page)
   * [Customizing views](#customizing-views)
     * [View hooks](#view-hooks)
@@ -99,7 +98,7 @@ Then, see the rest of this Readme for more information about using and customizi
 Add the gem to your Gemfile:
 
 ```ruby
-gem 'thredded', '~> 0.12.4'
+gem 'thredded', '~> 0.13.0'
 ```
 
 Add the Thredded [initializer] to your parent app by running the install generator.
@@ -230,27 +229,38 @@ Include thredded JavaScripts in your `application.js`:
 
 Thredded is fully compatible with deferred and async script loading.
 
-##### jQuery version
+##### Rails UJS version
 
-To use thredded with your application layout, you also need to ensure that your layout and thredded don't load different
-versions of jQuery. By default, Thredded loads jQuery v3 (via `//= require jquery3` from [jquery-rails]),
-but if you want to use jQuery v1 or v2, then you need to create a file at
-`app/assets/javascripts/thredded/dependencies/jquery.js` which contains just `//= require jquery`
-or `// require jquery2`. If you are not loading jQuery in your app, or if you are already using jQuery v3, then you don't need to do do this (You also don't need to worry about this if you are using the default ["Standalone" layout](#standalone-layout))
+By default, thredded loads `rails-ujs`. If you're using Rails before v5.1, you need to add `rails-ujs` to
+your Gemfile.
 
-[jquery-rails]: https://github.com/rails/jquery-rails
+If you'd like it to use `jquery_ujs` instead, run this command from your app directory:
 
-#### Rails UJS version
+```bash
+mkdir -p app/assets/javascripts/thredded/dependencies/
+printf '//= require jquery3\n//= require jquery_ujs\n' > app/assets/javascripts/thredded/dependencies/ujs.js
+```
 
-By default, thredded requires `jquery_ujs`. If you'd like to change that to `rails-ujs` (default since Rails v5.1),
-run this command from your app directory:
+##### Timeago version
+
+By default, thredded loads `timeago.js`.
+
+If you'd like to use `jquery.timeago` or `rails-timeago` instead, run this command from your app directory:
 
 ```bash
 mkdir -p app/assets/javascripts/thredded/dependencies/
-echo '//= require rails-ujs' > app/assets/javascripts/thredded/dependencies/ujs.js
+echo '//= require jquery.timeago' > app/assets/javascripts/thredded/dependencies/timeago.js
 ```
 
-The default UJS framework will change from `jquery_ujs` to `rails-ujs` in the upcoming Thredded v0.13.0 release.
+You will also need to adjust the `//= require` statements for timeago locales if your site is translated into multiple
+languages. For `jquery.timeago`, these need to be require after `thredded/dependencies` but before `thredded/thredded`.
+E.g. for Brazilian Portuguese with jquery.timeago:
+
+ ```js
+ //= require thredded/dependencies
+ //= require locales/jquery.timeago.pt-br
+ //= require thredded/thredded
+ ```
 
 #### Thredded page title and ID
 
@@ -334,21 +344,11 @@ $thredded-brand: #9c27b0;
 @import "thredded";
 ```
 
-The `@import "thredded"` directive above will import thredded styles and the [dependencies][thredded-scss-dependencies]
-(currently just "select2" from [select2-rails]). If you already include your own styles for any of thredded
-dependencies, you can import just the thredded styles alone like this:
-
-```scss
-// application.scss
-@import "thredded/thredded";
-```
-
 If you are writing a Thredded plugin, import the [`thredded/base`][thredded-scss-base] Sass package instead.
 The `base` package only defines variables, mixins, and %-placeholders, so it can be imported safely without producing
 any duplicate CSS.
 
 [thredded-scss-dependencies]: https://github.com/thredded/thredded/blob/master/app/assets/stylesheets/thredded/_dependencies.scss
-[select2-rails]: https://github.com/argerim/select2-rails
 [thredded-scss-base]: https://github.com/thredded/thredded/blob/master/app/assets/stylesheets/thredded/_base.scss
 
 ### Email and other notifications
@@ -384,13 +384,10 @@ Here are the steps to ensure the best support for your language if it isn't Engl
 
 1. Add `rails-i18n` and `kaminari-i18n` to your Gemfile.
 
-2. Require the translations for rails-timeago in your JavaScript before `thredded` but after `jquery.timeago`
-   (included in `thredded/dependencies`). E.g. for Brazilian Portuguese:
+2. Require the translations for timeago.js in your JavaScript. E.g. for Brazilian Portuguese:
 
    ```js
-   //= require thredded/dependencies
-   //= require locales/jquery.timeago.pt-br
-   //= require thredded/thredded
+   //= require timeago/locales/pt_BR
    ```
 
 3. To generate URL slugs for messageboards, categories, and topics with support for more language than English,
@@ -640,8 +637,8 @@ To achieve the above, all the Thredded code must register onload via
 
 ```js
 window.Thredded.onPageLoad(() => {
-  // Initialize widgets:
-  $('[data-thredded-select2]').select2();
+  // Initialize widgets
+  autosize('textarea');
 });
 ```
 
@@ -657,8 +654,8 @@ e.g.:
 
 ```js
 document.addEventListener('turbolinks:before-cache', () => {
-  // Destroy widgets:
-  $('[data-thredded-select2]').select2('destroy');
+  // Destroy widgets
+  autosize.destroy('textarea');
 });
 ```
 

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

@@ -1,25 +1,32 @@
-(($) => {
+//= require thredded/core/on_page_load
+
+(() => {
+  const Thredded = window.Thredded;
+
   const COMPONENT_SELECTOR = '[data-thredded-currently-online]';
+  const EXPANDED_CLASS = 'thredded--is-expanded';
+
+  const handleMouseEnter = (evt) => {
+    evt.target.classList.add(EXPANDED_CLASS);
+  };
+
+  const handleMouseLeave = (evt) => {
+    evt.target.classList.remove(EXPANDED_CLASS);
+  };
+
+  const handleTouchStart = (evt) => {
+    evt.target.classList.toggle(EXPANDED_CLASS);
+  };
 
-  class ThreddedCurrentlyOnline {
-    init($nodes) {
-      $($nodes).
-        on('mouseenter', function(e) {
-          $(this).addClass('thredded--is-expanded');
-        }).
-        on('mouseleave', function(e) {
-          $(this).removeClass('thredded--is-expanded');
-        }).
-        on('touchstart', function(e) {
-          $(this).toggleClass('thredded--is-expanded');
-        });
-    }
-  }
+  const initCurrentlyOnline = (node) => {
+    node.addEventListener('mouseenter', handleMouseEnter);
+    node.addEventListener('mouseleave', handleMouseLeave);
+    node.addEventListener('touchstart', handleTouchStart);
+  };
 
-  window.Thredded.onPageLoad(() => {
-    const $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      new ThreddedCurrentlyOnline().init($nodes);
-    }
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initCurrentlyOnline(node);
+    });
   });
-})(jQuery);
+})();

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

@@ -1,11 +1,9 @@
-(($) => {
+(() => {
   const COMPONENT_SELECTOR = '[data-thredded-flash-message]';
 
-  const destroy = () => {
-    $(COMPONENT_SELECTOR).remove();
-  };
-
   document.addEventListener('turbolinks:before-cache', () => {
-    destroy()
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      node.parentNode.removeChild(node);
+    });
   });
-})(jQuery);
+})();

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

@@ -0,0 +1,39 @@
+//= require thredded/components/user_textcomplete
+
+const ThreddedMentionAutocompletion = {
+  MATCH_RE: /(^@|\s@)"?([\w.,\- ()]+)$/,
+  DROPDOWN_MAX_COUNT: 6,
+
+  init(form, textarea) {
+    const editor = new Textcomplete.editors.Textarea(textarea);
+    const textcomplete = new Textcomplete(editor, {
+      dropdown: {
+        className: Thredded.UserTextcomplete.DROPDOWN_CLASS_NAME,
+        maxCount: ThreddedMentionAutocompletion.DROPDOWN_MAX_COUNT
+      },
+    });
+    textcomplete.on('rendered', function() {
+      if (textcomplete.dropdown.items.length) {
+        textcomplete.dropdown.items[0].activate();
+      }
+    });
+    textcomplete.register([{
+      match: ThreddedMentionAutocompletion.MATCH_RE,
+      search: Thredded.UserTextcomplete.searchFn({
+        url: form.getAttribute('data-autocomplete-url'),
+        autocompleteMinLength: parseInt(form.getAttribute('data-autocomplete-min-length'), 10)
+      }),
+      template: Thredded.UserTextcomplete.formatUser,
+      replace  ({name, match}) {
+        let prefix = match[1];
+        if (/[., ()]/.test(name)) {
+          return `${prefix}"${name}" `
+        } else {
+          return `${prefix}${name} `
+        }
+      }
+    }]);
+  }
+};
+
+window.ThreddedMentionAutocompletion = ThreddedMentionAutocompletion;

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

@@ -1,42 +1,37 @@
-//= require ./preview_area
+//= require autosize
+//= require thredded/core/on_page_load
+//= require thredded/components/mention_autocompletion
+//= require thredded/components/preview_area
 
-(($, autosize) => {
-  const COMPONENT_SELECTOR = '[data-thredded-post-form]';
-
-  class ThreddedPostForm {
-    constructor() {
-      this.textareaSelector = 'textarea';
-    }
+(() => {
+  const Thredded = window.Thredded;
+  const ThreddedMentionAutocompletion = window.ThreddedMentionAutocompletion;
+  const ThreddedPreviewArea = window.ThreddedPreviewArea;
+  const autosize = window.autosize;
 
-    init($nodes) {
-      let $textarea = $nodes.find(this.textareaSelector);
-      this.autosize($textarea);
-      $nodes.each(function() {
-        new ThreddedPreviewArea($(this));
-      });
-      new ThreddedMentionAutocompletion($).init($nodes);
-    }
+  const COMPONENT_SELECTOR = '[data-thredded-post-form]';
+  const CONTENT_TEXTAREA_SELECTOR = 'textarea[name$="[content]"]';
 
-    autosize($textarea) {
-      autosize($textarea)
-    }
+  const initPostForm = (form) => {
+    const textarea = form.querySelector(CONTENT_TEXTAREA_SELECTOR);
+    autosize(textarea);
+    new ThreddedPreviewArea(form, textarea);
+    ThreddedMentionAutocompletion.init(form, textarea);
+  };
 
-    destroy($nodes) {
-      autosize.destroy($nodes.find(this.textareaSelector));
-    }
-  }
+  const destroyPostForm = (form) => {
+    autosize.destroy(form.querySelector(CONTENT_TEXTAREA_SELECTOR));
+  };
 
-  window.Thredded.onPageLoad(() => {
-    const $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      new ThreddedPostForm().init($nodes);
-    }
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initPostForm(node);
+    });
   });
 
   document.addEventListener('turbolinks:before-cache', () => {
-    const $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      new ThreddedPostForm().destroy($nodes);
-    }
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      destroyPostForm(node);
+    });
   });
-})(jQuery, window.autosize);
+})();

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

@@ -1,28 +1,28 @@
-//= require ./preview_area
+//= require thredded/core/serialize_form
 
-(function($) {
+(() => {
   const PREVIEW_AREA_SELECTOR = '[data-thredded-preview-area]';
   const PREVIEW_AREA_POST_SELECTOR = '[data-thredded-preview-area-post]';
 
   class ThreddedPreviewArea {
 
-    constructor($form) {
-      const $preview = $form.find(PREVIEW_AREA_SELECTOR);
-      if (!$preview.length) return;
-      this.$form = $form;
-      const $textarea = $form.find('textarea');
-      this.textarea = $textarea.get(0);
-      this.preview = $preview.get(0);
-      this.previewPost = $form.find(PREVIEW_AREA_POST_SELECTOR).get(0);
+    constructor(form, textarea) {
+      const preview = form.querySelector(PREVIEW_AREA_SELECTOR);
+      if (!preview || !textarea) return;
+      this.form = form;
+      this.preview = preview;
+      this.previewPost = form.querySelector(PREVIEW_AREA_POST_SELECTOR);
       this.previewUrl = this.preview.getAttribute('data-thredded-preview-url');
 
+      let prevValue = null;
       const onChange = Thredded.debounce(() => {
-        this.updatePreview()
+        if (prevValue !== textarea.value) {
+          this.updatePreview();
+          prevValue = textarea.value;
+        }
       }, 200, false);
 
-      this.textarea.addEventListener('input', onChange, false);
-      // Listen to the jQuery change event as that's what is triggered by plugins such as jQuery.textcomplete.
-      $textarea.on('change', onChange);
+      textarea.addEventListener('input', onChange, false);
 
       this.requestId = 0;
     }
@@ -30,16 +30,20 @@
     updatePreview() {
       this.requestId++;
       const requestId = this.requestId;
-      $.ajax({
-        type: this.$form.attr('method'),
-        url: this.previewUrl,
-        data: this.$form.serialize(),
-      }).done((data) => {
-        if (requestId == this.requestId) {
+      const request = new XMLHttpRequest();
+      request.open(this.form.method, this.previewUrl, /* async */ true);
+      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+      request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      request.onload = () => {
+        if (
+          // Ignore server errors
+          request.status >= 200 && request.status < 400 &&
           // Ignore older responses received out-of-order
-          this.onPreviewResponse(data);
+          requestId === this.requestId) {
+          this.onPreviewResponse(request.responseText);
         }
-      });
+      };
+      request.send(Thredded.serializeForm(this.form));
     }
 
     onPreviewResponse(data) {
@@ -49,4 +53,4 @@
   }
 
   window.ThreddedPreviewArea = ThreddedPreviewArea;
-})(jQuery);
+})();

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

@@ -1,5 +1,9 @@
+//= require thredded/core/on_page_load
+
 (function() {
-  window.Thredded.onPageLoad(() => {
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
     Array.prototype.forEach.call(document.querySelectorAll('[data-thredded-quote-post]'), (el) => {
       el.addEventListener('click', onClick);
     });

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

@@ -1,10 +1,25 @@
-(($) => {
+(() => {
   const COMPONENT_SELECTOR = '#thredded--container [data-time-ago]';
-
-  window.Thredded.onPageLoad(() => {
-    const allowFutureWas = jQuery.timeago.settings.allowFuture;
-    $.timeago.settings.allowFuture = true;
-    $(COMPONENT_SELECTOR).timeago();
-    $.timeago.settings.allowFuture = allowFutureWas;
-  });
-})(jQuery);
+  const Thredded = window.Thredded;
+  if ('timeago' in window) {
+    const timeago = window.timeago;
+    Thredded.onPageLoad(() => {
+      const threddedContainer = document.querySelector('#thredded--container');
+      if (!threddedContainer) return;
+      timeago().render(
+        document.querySelectorAll(COMPONENT_SELECTOR),
+        threddedContainer.getAttribute('data-thredded-locale'));
+    });
+    document.addEventListener('turbolinks:before-cache', () => {
+      timeago.cancel();
+    });
+  } else if ('jQuery' in window && 'timeago' in jQuery.fn) {
+    const $ = window.jQuery;
+    Thredded.onPageLoad(() => {
+      const allowFutureWas = $.timeago.settings.allowFuture;
+      $.timeago.settings.allowFuture = true;
+      $(COMPONENT_SELECTOR).timeago();
+      $.timeago.settings.allowFuture = allowFutureWas;
+    });
+  }
+})();

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

@@ -1,69 +1,87 @@
-(($, autosize) => {
+//= require autosize
+//= require thredded/core/on_page_load
+//= require thredded/components/mention_autocompletion
+//= require thredded/components/preview_area
+
+(() => {
+  const Thredded = window.Thredded;
+  const ThreddedMentionAutocompletion = window.ThreddedMentionAutocompletion;
+  const ThreddedPreviewArea = window.ThreddedPreviewArea;
+  const autosize = window.autosize;
+
   const COMPONENT_SELECTOR = '[data-thredded-topic-form]';
-  class ThreddedTopicForm {
-    constructor() {
-      this.titleSelector = '[name$="topic[title]"]';
-      this.textareaSelector = 'textarea';
-      this.compactSelector = 'form.thredded--is-compact';
-      this.expandedSelector = 'form.thredded--is-expanded';
-      this.escapeElements = 'input, textarea';
-      this.escapeKeyCode = 27;
-    }
+  const TITLE_SELECTOR = '[name$="topic[title]"]';
+  const CONTENT_TEXTAREA_SELECTOR = 'textarea[name$="[content]"]';
+  const COMPACT_CLASS = 'thredded--is-compact';
+  const EXPANDED_CLASS = 'thredded--is-expanded';
+  const ESCAPE_KEY_CODE = 27;
 
-    toggleExpanded(child, expanded) {
-      jQuery(child).closest(expanded ? this.compactSelector : this.expandedSelector).toggleClass('thredded--is-compact thredded--is-expanded');
+  const initTopicForm = (form) => {
+    const textarea = form.querySelector(CONTENT_TEXTAREA_SELECTOR);
+    autosize(textarea);
+    new ThreddedPreviewArea(form, textarea);
+    ThreddedMentionAutocompletion.init(form, textarea);
+
+    if (!form.classList.contains(COMPACT_CLASS)) {
+      return;
     }
 
-    init($nodes) {
-      autosize($nodes.find(this.textareaSelector));
-      $nodes.each(function() {
-        new ThreddedPreviewArea($(this));
+    const title = form.querySelector(TITLE_SELECTOR);
+    title.addEventListener('focus', () => {
+      toggleExpanded(form, true);
+    });
+
+    [title, textarea].forEach((node) => {
+      // Un-expand on Escape key.
+      node.addEventListener('keydown', (evt) => {
+        if (evt.keyCode === ESCAPE_KEY_CODE) {
+          evt.target.blur();
+          toggleExpanded(form, false);
+        }
       });
-      new ThreddedMentionAutocompletion($).init($nodes);
-      $nodes.filter(this.compactSelector).
-        on('focus', this.titleSelector, e => {
-          this.toggleExpanded(e.target, true);
-        }).
-        on('keydown', this.escapeElements, e => {
-          if (e.keyCode == this.escapeKeyCode) {
-            this.toggleExpanded(e.target, false);
-            e.target.blur();
+
+      // Un-expand on blur if the new focus element is outside of the same form and
+      // all the form inputs are empty.
+      node.addEventListener('blur', () => {
+        // This listener will be fired right after the blur event has finished.
+        const listener = (evt) => {
+          if (!form.contains(evt.target) && !title.value && !textarea.value) {
+            toggleExpanded(form, false);
           }
-        }).
-        on('blur', this.escapeElements, e => {
-          var blurredEl = e.target;
-          $(document.body).one('mouseup touchend', e => {
-            var $blurredElForm = $(blurredEl).closest('form');
-            // Un-expand if the new focus element is outside of the same form and
-            // all the input elements are empty.
-            if (!$(e.target).closest('form').is($blurredElForm) &&
-              $blurredElForm.find(this.escapeElements).is(function() {
-                return !this.value;
-              })) {
-              this.toggleExpanded(blurredEl, false);
-            }
-          })
-        });
-    }
+          document.body.removeEventListener('touchend', listener);
+          document.body.removeEventListener('mouseup', listener);
+        };
+        document.body.addEventListener('mouseup', listener);
+        document.body.addEventListener('touchend', listener);
+      })
+    });
+  };
 
-    destroy($nodes) {
-      autosize.destroy($nodes.find(this.textareaSelector));
+  const toggleExpanded = (form, expand) => {
+    if (expand) {
+      form.classList.remove(COMPACT_CLASS);
+      form.classList.add(EXPANDED_CLASS);
+    } else {
+      form.classList.remove(EXPANDED_CLASS);
+      form.classList.add(COMPACT_CLASS);
     }
-  }
+  };
 
-  window.Thredded.onPageLoad(() => {
-    const $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      new ThreddedTopicForm().init($nodes);
-    }
+  const destroyTopicForm = (form) => {
+    autosize.destroy(form.querySelector(CONTENT_TEXTAREA_SELECTOR));
+  };
+
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initTopicForm(node);
+    });
   });
 
   document.addEventListener('turbolinks:before-cache', () => {
-    const $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      new ThreddedTopicForm().destroy($nodes);
-    }
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      destroyTopicForm(node);
+    });
   });
-})(jQuery, window.autosize);
+})();