thredded 0.7.0 → 0.8.2

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

@@ -26,7 +26,7 @@
     }
   };
 
-  let init = $el => {
+  let initOne = $el => {
     $el.select2({
       ajax: {
         cache: true,
@@ -38,19 +38,35 @@
       containerCssClass: 'thredded--select2-container',
       dropdownCssClass: 'thredded--select2-drop',
       initSelection: initSelection,
-      minimumInputLength: 2,
+      minimumInputLength: $el.data('autocompleteMinLength'),
       multiple: true,
       formatResult: formatUser,
       formatSelection: formatUserSelection
     });
   };
 
-  $(function() {
-    var $nodes = $(COMPONENT_SELECTOR);
-    if ($nodes.length) {
-      $nodes.each(function() {
-        init($(this));
-      });
-    }
+  let init = () => {
+    $(COMPONENT_SELECTOR).each(function() {
+      initOne($(this));
+    });
+  };
+
+  let destroy = () => {
+    $(COMPONENT_SELECTOR).each(function() {
+      $(this).select2('destroy');
+    });
+    $('.select2-drop, .select2-drop-mask').remove();
+  };
+
+  window.Thredded.onPageLoad(() => {
+    init()
   });
+
+  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()
+  });
+
 })(jQuery);

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

@@ -0,0 +1,6 @@
+window.Thredded = window.Thredded || {};
+window.Thredded.hideSoftKeyboard = () => {
+  const activeElement = document.activeElement;
+  if (!activeElement || !activeElement.blur) return;
+  activeElement.blur();
+};

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

@@ -0,0 +1,54 @@
+class ThreddedMentionAutocompletion {
+  constructor($) {
+    this.$ = $;
+    this.textareaSelector = 'textarea';
+  }
+  init($nodes){
+    const $textarea = $nodes.find(this.textareaSelector);
+    this.autocompleteMinLength = parseInt($nodes.data('autocompleteMinLength'), 10);
+    this.automentionCompletion($textarea, $nodes.data('autocompleteUrl'));
+  }
+
+  escapeHtml(text) {
+    return this.$('<div/>').text(text).html();
+  }
+
+  formatUser({avatar_url, name, escapeHtml}) {
+    return "<div class='thredded--select2-user-result'>" +
+      `<img class='thredded--select2-user-result__avatar' src='${this.escapeHtml(avatar_url)}' >` +
+      `<span class='thredded--select2-user-result__name'>${this.escapeHtml(name)}</span>` +
+      '</div>';
+  }
+
+
+  automentionCompletion($textarea, autocompleteUrl) {
+    let mentionAC = this;
+    $textarea.textcomplete([{
+      match: ThreddedMentionAutocompletion.MATCH_RE,
+      search (term, callback, match) {
+        if(term.length < this.autocompleteMinLength){
+          return callback({});
+        }
+        let termsUrl = `${autocompleteUrl}?q=${term}`;
+        $.ajax({url: termsUrl}).done(function (response) {
+          callback($.map(response.results, function ({avatar_url, id, name}) {
+            return {avatar_url, id, name, match};
+          }));
+        });
+      },
+      template ({avatar_url, name}) {
+        return mentionAC.formatUser({avatar_url, name});
+      },
+      replace  ({name, match}) {
+        let prefix = match[1];
+        if (name.indexOf(" ") > -1) {
+          return `${prefix}"${name}" `
+        } else {
+          return `${prefix}${name} `
+        }
+      }
+    }], {dropdownClassName: 'thredded--textcomplete-dropdown'});
+  }
+}
+
+ThreddedMentionAutocompletion.MATCH_RE = /(^@|\s@)"?((?:\w| )+)$/;

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

@@ -0,0 +1,46 @@
+(() => {
+  const isTurbolinks = 'Turbolinks' in window && window.Turbolinks.supported;
+  const isTurbolinks5 = isTurbolinks && 'clearCache' in window.Turbolinks;
+
+  let onPageLoadFiredOnce = false;
+  const pageLoadCallbacks = [];
+  const triggerOnPageLoad = () => {
+    pageLoadCallbacks.forEach((callback) => {
+      callback();
+    });
+    onPageLoadFiredOnce = true;
+  };
+
+  window.Thredded = window.Thredded || {};
+
+  // Fires the callback on DOMContentLoaded or a Turbolinks page load.
+  // If called from an async script on the first page load, and the DOMContentLoad event
+  // has already fired, will execute the callback immediately.
+  window.Thredded.onPageLoad = (callback) => {
+    pageLoadCallbacks.push(callback);
+    // With async script loading, a callback may be added after the DOMContentLoaded event has already triggered.
+    // This means we will receive neither a DOMContentLoaded event, nor a turbolinks:load event on Turbolinks 5.
+    if (!onPageLoadFiredOnce && window.Thredded.DOMContentLoadedFired) {
+      callback();
+    }
+  };
+
+  if (isTurbolinks5) {
+    document.addEventListener('turbolinks:load', () => {
+      triggerOnPageLoad();
+    });
+  } else {
+    // Turbolinks Classic (with or without jQuery.Turbolinks), or no Turbolinks:
+    if (!window.Thredded.DOMContentLoadedFired) {
+      document.addEventListener('DOMContentLoaded', () => {
+        triggerOnPageLoad();
+      });
+    }
+    if (isTurbolinks) {
+      document.addEventListener('page:load', () => {
+        triggerOnPageLoad();
+      })
+    }
+  }
+})();
+

data/app/assets/javascripts/thredded/dependencies.js

@@ -1,6 +1,7 @@
-//= require jquery
+//= require thredded/dependencies/jquery
 //= require jquery_ujs
 //= require jquery.autosize
+//= require jquery.textcomplete
 //= require rails-timeago
 //= require select2
 

data/app/assets/javascripts/thredded/dependencies/jquery.js

@@ -0,0 +1 @@
+//= require jquery3

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

@@ -1 +1,2 @@
+//= require_tree ./core
 //= require_tree ./components

data/app/assets/stylesheets/thredded/_thredded.scss

@@ -20,6 +20,7 @@
 @import "components/following";
 @import "components/form-list";
 @import "components/main-section";
+@import "components/mention-autocomplete";
 @import "components/messageboard";
 @import "components/pagination";
 @import "components/post";

data/app/assets/stylesheets/thredded/base/_alerts.scss

@@ -17,9 +17,13 @@
 %thredded--alert {
   border: solid 1px;
   border-radius: 3px;
-  margin-bottom: $thredded-base-spacing;
+  margin-bottom: $thredded-small-spacing;
   padding: $thredded-small-spacing;
   text-decoration: none;
+
+  @include thredded-media-desktop-and-up {
+    margin-bottom: $thredded-base-spacing;
+  }
 }
 
 %thredded--alert--success {

data/app/assets/stylesheets/thredded/base/_grid.scss

@@ -16,6 +16,14 @@
   }
 }
 
+@mixin thredded-media-tablet {
+  @include thredded-media-tablet-and-up {
+    @include thredded-media-tablet-and-down {
+      @content;
+    }
+  }
+}
+
 @mixin thredded-media-desktop-and-up {
   @media screen and (min-width: map-get($thredded-grid-breakpoint-max-widths, tablet) + 0.00001rem) {
     @content;

data/app/assets/stylesheets/thredded/base/_nav.scss

@@ -27,13 +27,8 @@
   border-bottom: $thredded-base-border;
   font-size: $thredded-font-size-small;
   margin-left: 0;
-  margin-bottom: 1rem;
   text-align: left;
   list-style-type: none;
-
-  @include thredded-media-tablet-and-up {
-    margin-bottom: 0;
-  }
 }
 
 %thredded--nav-tabs--item {

data/app/assets/stylesheets/thredded/components/_following.scss

@@ -5,9 +5,6 @@
   font-size: 1em;
   width: 1.4rem;
   height: 1.4rem;
-  position: absolute;
-  top: 0;
-  right: -1.6rem;
   opacity: 0.4;
 }
 

data/app/assets/stylesheets/thredded/components/_mention-autocomplete.scss

@@ -0,0 +1,35 @@
+ul.thredded--textcomplete-dropdown {
+  background: inherit;
+  border-color: $thredded-form-border-focus-color;
+  border-top: $thredded-base-border;
+  box-shadow: 0 1px 1px $thredded-form-border-focus-color;
+  font-family: $thredded-base-font-family;
+  font-size: $thredded-base-font-size;
+  line-height: $thredded-base-line-height;
+}
+
+ul.thredded--textcomplete-dropdown {
+
+  background: $thredded-form-background;
+  padding: 4px;
+  margin: 0;
+
+  li.textcomplete-item {
+    list-style: none;
+    a {
+      color: $thredded-text-color;
+    }
+
+    &.active {
+      background: $thredded-button-background;
+      a {
+        color: $thredded-button-color;
+      }
+    }
+
+    padding: $thredded-small-spacing;
+  }
+
+}
+
+

data/app/assets/stylesheets/thredded/components/_topic-header.scss

@@ -1,17 +1,21 @@
 .thredded--topic-header {
-  margin-bottom: $thredded-large-spacing;
-  margin-top: $thredded-base-spacing;
-  @include thredded-media-mobile {
-    margin-bottom: $thredded-small-spacing;
-    margin-top: 0;
+  margin-bottom: $thredded-small-spacing;
+  margin-top: 0;
+  @include thredded-media-desktop-and-up {
+    margin-bottom: $thredded-large-spacing;
+    margin-top: $thredded-small-spacing;
+    @include thredded--clearfix;
   }
 }
 
 .thredded--topic-header--title {
   @extend %thredded--heading;
-  font-size: 1.5rem; // 24px
+  font-size: 1.25rem;
   line-height: 1.2;
   margin-bottom: $thredded-small-spacing / 2;
+  @include thredded-media-tablet-and-up {
+    font-size: 1.5rem;
+  }
 }
 
 .thredded--topic-header--started-by {
@@ -30,18 +34,37 @@
 }
 
 .thredded--topic-header--follow-info {
-  float: right;
   color: $thredded-secondary-text-color;
   font-size: $thredded-font-size-small;
   font-style: normal;
-  max-width: 60%;
-  text-align: right;
+  @include thredded-media-desktop-and-up {
+    float: right;
+    text-align: right;
+    max-width: 25rem;
+    position: relative;
+    form {
+      // Do not introduce extra margin
+      position: absolute;
+      right: 0;
+      vertical-align: text-top;
+      &.thredded--topic-header--follow-info--unfollow {
+        top: 1.625em;  // required for Safari and Firefox
+      }
+    }
+    &--reason {
+      display: block;
+      vertical-align: text-top;
+    }
+  }
   p {
     margin: 0;
   }
+  &--reason {
+    display: inline-block;
+  }
   form {
     display: inline-block;
-    input[type=submit] {
+    input[type=submit], button {
       background:none;
       border:none;
       padding:0;
@@ -52,13 +75,10 @@
   }
 }
 
-.thredded--topic-following {
-  .thredded--topic-header--follow-info {
-    position: relative;
-  }
-  .thredded--topic-header--follow-icon {
-    @extend %thredded--following-icon;
-  }
+
+.thredded--topic-header--follow-icon {
+  @extend %thredded--following-icon;
+  vertical-align: middle;
 }
 
 .thredded--topic-followers {

data/app/assets/stylesheets/thredded/components/_topics.scss

@@ -5,6 +5,10 @@
   @media (max-width: $thredded-grid-container-max-width) {
     margin-left: 3rem;
   }
+  @include thredded-media-mobile {
+    margin-right: 2rem;
+  }
+
 }
 
 .thredded--topics--title {
@@ -130,6 +134,15 @@
   }
 }
 
+.thredded--topics--follow-icon {
+  position: absolute;
+  right: -1.6rem;
+  top: 0;
+  @include thredded-media-mobile {
+    right: -2rem;
+  }
+}
+
 .thredded--topic-following {
   .thredded--topics--follow-icon {
     @extend %thredded--following-icon;

data/app/assets/stylesheets/thredded/layout/_main-navigation.scss

@@ -1,35 +1,78 @@
+@mixin thredded-breadcrumbs-chevron() {
+  background: image-url("thredded/breadcrumb-chevron.svg") no-repeat center center;
+  content: "";
+  display: inline-block;
+  height: 10px;
+  margin: 0 ($thredded-small-spacing - 0.3rem) 0 $thredded-small-spacing;
+  width: 6px;
+}
+
 .thredded--main-navigation {
   @extend %thredded--list-unstyled;
   @include thredded--clearfix;
   display: block;
-  @include thredded-media-desktop-and-up {
-    margin-top: $thredded-small-spacing;
-  }
 }
 
 .thredded--navigation-breadcrumbs {
   @extend %thredded--list-unstyled;
 
   li {
-    display: inline-block;
+    display: block;
     font-weight: bold;
 
     a {
-      display: inline-block;
-      padding: $thredded-small-spacing 0;
+      display: block;
+    }
+
+    @include thredded-media-mobile {
+      a {
+        position: relative;
+      }
+
+      &:first-child:last-child {
+        a, &.thredded--navigation-breadcrumbs--item-no-link {
+          padding: $thredded-small-spacing 0;
+        }
+      }
+
+      &:first-child:not(:last-child) {
+        a, &.thredded--navigation-breadcrumbs--item-no-link {
+          padding-top: ($thredded-small-spacing/2);
+        }
+      }
+
+      &:last-child:not(:first-child) {
+        a, &.thredded--navigation-breadcrumbs--item-no-link {
+          padding-bottom: ($thredded-small-spacing/2);
+          &::before {
+            @include thredded-breadcrumbs-chevron();
+            position: absolute;
+            top: 0.4em;
+            left: -1.625em;
+          }
+        }
+      }
     }
 
-    &:after {
-      background: image-url("thredded/breadcrumb-chevron.svg") no-repeat center center;
-      content: "";
+    @include thredded-media-tablet-and-up {
       display: inline-block;
-      height: 10px;
-      margin: 0 ($thredded-small-spacing - 0.3rem) 0 $thredded-small-spacing;
-      width: 6px;
+      a, &.thredded--navigation-breadcrumbs--item-no-link {
+        display: inline-block;
+        padding: $thredded-small-spacing 0;
+      }
+      // Chevron
+      &::after {
+        @include thredded-breadcrumbs-chevron();
+      }
+      &:last-child::after {
+        display: none;
+      }
     }
 
-    &:last-child:after {
-      display: none;
+    @include thredded-media-desktop-and-up {
+      a, &.thredded--navigation-breadcrumbs--item-no-link {
+        padding: $thredded-base-spacing 0;
+      }
     }
   }