threddedDANIEL 0.14.5

data/app/assets/images/favicons/README.md

@@ -0,0 +1,3 @@
+These icons are copied from the Discourse repo:
+
+https://github.com/discourse/discourse/tree/a43ec88f46b1698cb2fbd08983b715011f882c45/app/assets/images/favicons

data/app/assets/images/thredded/breadcrumb-chevron.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 7 11" xmlns="http://www.w3.org/2000/svg"><path d="M1.96.19a.47.47 0 0 0-.685 0L.592.91a.52.52 0 0 0 0 .715L3.887 5.03.564 8.462a.52.52 0 0 0 0 .716l.684.717a.47.47 0 0 0 .684 0l4.35-4.508a.528.528 0 0 0 0-.717L1.958.19" fill="#B0AEBC" fill-rule="evenodd"/></svg>

data/app/assets/images/thredded/follow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 116 121" xmlns="http://www.w3.org/2000/svg"><path d="M57.071 113.714c0-.714-.357-1.071-1.071-1.071-2.634 0-4.9-.949-6.797-2.846-1.897-1.897-2.846-4.163-2.846-6.797 0-.714-.357-1.071-1.071-1.071-.715 0-1.072.357-1.072 1.071 0 3.259 1.15 6.038 3.449 8.337 2.3 2.3 5.078 3.449 8.337 3.449.714 0 1.071-.357 1.071-1.072zM12.473 94.43h87.054C87.652 81.036 81.714 62.464 81.714 38.714c0-2.277-.535-4.62-1.607-7.031-1.071-2.41-2.611-4.71-4.62-6.897-2.01-2.188-4.721-3.985-8.137-5.39-3.415-1.407-7.198-2.11-11.35-2.11-4.152 0-7.935.703-11.35 2.11-3.416 1.405-6.128 3.202-8.137 5.39-2.009 2.187-3.549 4.486-4.62 6.897-1.072 2.41-1.607 4.754-1.607 7.031 0 23.75-5.938 42.322-17.813 55.715zm99.241 0c0 2.321-.848 4.33-2.544 6.026-1.697 1.697-3.706 2.545-6.027 2.545h-30c0 4.732-1.674 8.772-5.022 12.12-3.349 3.349-7.389 5.023-12.121 5.023s-8.772-1.674-12.12-5.022c-3.349-3.349-5.023-7.389-5.023-12.121h-30c-2.321 0-4.33-.848-6.027-2.545C1.134 98.76.286 96.75.286 94.43a58.82 58.82 0 0 0 6.093-5.893c1.83-2.054 3.728-4.721 5.692-8.003 1.965-3.28 3.628-6.819 4.99-10.613 1.36-3.795 2.477-8.393 3.347-13.795.871-5.402 1.306-11.205 1.306-17.41 0-6.786 2.612-13.092 7.835-18.918 5.223-5.826 12.076-9.364 20.558-10.614a6.67 6.67 0 0 1-.536-2.612c0-1.785.625-3.303 1.875-4.553S54.214.143 56 .143c1.786 0 3.304.625 4.554 1.875 1.25 1.25 1.875 2.768 1.875 4.553a6.67 6.67 0 0 1-.536 2.612c8.482 1.25 15.335 4.788 20.558 10.614 5.223 5.826 7.835 12.132 7.835 18.917 0 6.206.435 12.01 1.306 17.411.87 5.402 1.986 10 3.348 13.795 1.361 3.794 3.024 7.332 4.989 10.613 1.964 3.282 3.861 5.95 5.692 8.003a58.82 58.82 0 0 0 6.093 5.893z" fill-rule="evenodd"/></svg>

data/app/assets/images/thredded/lock.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 16c0-1.104.896-2 2-2s2 .896 2 2c0 .738-.404 1.376-1 1.723v2.277h-2v-2.277c-.596-.347-1-.985-1-1.723zm11-6v14h-18v-14h3v-4c0-3.313 2.687-6 6-6s6 2.687 6 6v4h3zm-13 0h8v-4c0-2.206-1.795-4-4-4s-4 1.794-4 4v4zm11 2h-14v10h14v-10z"/></svg>

data/app/assets/images/thredded/moderation.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 6c0-.55-.45-1-1-1H5.82l.66-3.18.02-.23c0-.31-.13-.59-.33-.8L5.38 0 .44 4.94C.17 5.21 0 5.59 0 6v6.5c0 .83.67 1.5 1.5 1.5h6.75c.62 0 1.15-.38 1.38-.91l2.26-5.29c.07-.17.11-.36.11-.55V6zm10.5 4h-6.75c-.62 0-1.15.38-1.38.91l-2.26 5.29c-.07.17-.11.36-.11.55V18c0 .55.45 1 1 1h5.18l-.66 3.18-.02.24c0 .31.13.59.33.8l.79.78 4.94-4.94c.27-.27.44-.65.44-1.06v-6.5c0-.83-.67-1.5-1.5-1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

data/app/assets/images/thredded/private-messages.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>

data/app/assets/images/thredded/settings.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>

data/app/assets/images/thredded/three-dot-menu.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="408px" height="408px" viewBox="0 0 408 408">
+		<path d="M204,102c28.05,0,51-22.95,51-51S232.05,0,204,0s-51,22.95-51,51S175.95,102,204,102z M204,153c-28.05,0-51,22.95-51,51    s22.95,51,51,51s51-22.95,51-51S232.05,153,204,153z M204,306c-28.05,0-51,22.95-51,51s22.95,51,51,51s51-22.95,51-51    S232.05,306,204,306z"/>
+</svg>

data/app/assets/images/thredded/unfollow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 138 121" xmlns="http://www.w3.org/2000/svg"><path d="M69.643 113.714c0-.714-.357-1.071-1.072-1.071-2.634 0-4.9-.949-6.796-2.846-1.898-1.897-2.846-4.163-2.846-6.797 0-.714-.358-1.071-1.072-1.071-.714 0-1.071.357-1.071 1.071 0 3.259 1.15 6.038 3.448 8.337 2.3 2.3 5.078 3.449 8.337 3.449.715 0 1.072-.357 1.072-1.072zm-35.96-31.808l58.728-50.893c-1.875-3.928-4.833-7.198-8.873-9.81-4.04-2.611-9.029-3.917-14.967-3.917-4.151 0-7.935.703-11.35 2.11-3.415 1.405-6.127 3.202-8.136 5.39-2.01 2.187-3.55 4.486-4.62 6.897-1.072 2.41-1.608 4.754-1.608 7.031 0 17.143-3.058 31.54-9.174 43.192zm90.603 12.523c0 2.321-.848 4.33-2.545 6.026-1.696 1.697-3.705 2.545-6.027 2.545h-30c0 4.732-1.674 8.772-5.022 12.12-3.348 3.349-7.388 5.023-12.12 5.023-4.733 0-8.762-1.663-12.088-4.989-3.326-3.326-5.01-7.355-5.055-12.087l9.977-8.638h50.692c-7.41-8.349-12.477-18.594-15.2-30.737l7.432-6.496c2.724 15.893 9.375 28.304 19.956 37.233zm5.759-93.215l5.625 6.429c.357.446.524.97.502 1.574a2.052 2.052 0 0 1-.703 1.506L10.112 119.34c-.447.357-.971.514-1.574.469-.603-.045-1.083-.29-1.44-.737l-5.625-6.428c-.357-.447-.524-.971-.502-1.574.022-.602.257-1.082.703-1.44L14.13 98.85c-.848-1.43-1.272-2.903-1.272-4.42a58.82 58.82 0 0 0 6.094-5.893c1.83-2.054 3.728-4.721 5.692-8.003 1.964-3.28 3.627-6.819 4.989-10.613 1.361-3.795 2.477-8.393 3.348-13.795.87-5.402 1.306-11.205 1.306-17.41 0-6.786 2.611-13.092 7.835-18.918 5.223-5.826 12.075-9.364 20.558-10.614a6.67 6.67 0 0 1-.536-2.612c0-1.785.625-3.303 1.875-4.553S66.786.143 68.57.143c1.786 0 3.304.625 4.554 1.875C74.375 3.268 75 4.786 75 6.57a6.67 6.67 0 0 1-.536 2.612c5.536.804 10.424 2.645 14.665 5.525 4.242 2.88 7.545 6.395 9.911 10.546L127.031.946c.447-.357.971-.513 1.574-.468.603.044 1.082.29 1.44.736z" fill-rule="evenodd"/></svg>

data/app/assets/javascripts/thredded.es6

@@ -0,0 +1,2 @@
+//= require thredded/dependencies
+//= require thredded/thredded

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

@@ -0,0 +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);
+  };
+
+  const initCurrentlyOnline = (node) => {
+    node.addEventListener('mouseenter', handleMouseEnter);
+    node.addEventListener('mouseleave', handleMouseLeave);
+    node.addEventListener('touchstart', handleTouchStart);
+  };
+
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initCurrentlyOnline(node);
+    });
+  });
+})();

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

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

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

@@ -0,0 +1,40 @@
+//= require thredded/components/user_textcomplete
+
+const ThreddedMentionAutocompletion = {
+  MATCH_RE: /(^@|\s@)"?([\w., \-()]+[\w.,\-()])$/,
+  // the last letter has to not be a space so it doesn't match after replacement
+  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

@@ -0,0 +1,37 @@
+//= require thredded/dependencies/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-post-form]';
+  const CONTENT_TEXTAREA_SELECTOR = 'textarea[name$="[content]"]';
+
+  const initPostForm = (form) => {
+    const textarea = form.querySelector(CONTENT_TEXTAREA_SELECTOR);
+    autosize(textarea);
+    new ThreddedPreviewArea(form, textarea);
+    ThreddedMentionAutocompletion.init(form, textarea);
+  };
+
+  const destroyPostForm = (form) => {
+    autosize.destroy(form.querySelector(CONTENT_TEXTAREA_SELECTOR));
+  };
+
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initPostForm(node);
+    });
+  });
+
+  document.addEventListener('turbolinks:before-cache', () => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      destroyPostForm(node);
+    });
+  });
+})();

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

@@ -0,0 +1,56 @@
+//= require thredded/core/serialize_form
+
+(() => {
+  const PREVIEW_AREA_SELECTOR = '[data-thredded-preview-area]';
+  const PREVIEW_AREA_POST_SELECTOR = '[data-thredded-preview-area-post]';
+
+  class ThreddedPreviewArea {
+
+    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(() => {
+        if (prevValue !== textarea.value) {
+          this.updatePreview();
+          prevValue = textarea.value;
+        }
+      }, 200, false);
+
+      textarea.addEventListener('input', onChange, false);
+
+      this.requestId = 0;
+    }
+
+    updatePreview() {
+      this.requestId++;
+      const 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
+          requestId === this.requestId) {
+          this.onPreviewResponse(request.responseText);
+        }
+      };
+      request.send(Thredded.serializeForm(this.form));
+    }
+
+    onPreviewResponse(data) {
+      this.preview.style.display = 'block';
+      this.previewPost.innerHTML = data;
+    }
+  }
+
+  window.ThreddedPreviewArea = ThreddedPreviewArea;
+})();

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

@@ -0,0 +1,49 @@
+//= require thredded/core/on_page_load
+
+(function() {
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll('[data-thredded-quote-post]'), (el) => {
+      el.addEventListener('click', onClick);
+    });
+  });
+
+  function onClick(evt) {
+    // Handle only left clicks with no modifier keys
+    if (evt.button !== 0 || evt.ctrlKey || evt.altKey || evt.metaKey || evt.shiftKey) return;
+    evt.preventDefault();
+    const target = document.getElementById('post_content');
+    target.scrollIntoView();
+    target.value = '...';
+    fetchReply(evt.target.getAttribute('data-thredded-quote-post'), (replyText) => {
+      if (!target.ownerDocument.body.contains(target)) return;
+      target.focus();
+      target.value = replyText;
+
+      const autosizeUpdateEvent = document.createEvent('Event');
+      autosizeUpdateEvent.initEvent('autosize:update', true, false);
+      target.dispatchEvent(autosizeUpdateEvent);
+      // Scroll into view again as the size might have changed.
+      target.scrollIntoView();
+    }, (errorMessage) => {
+      target.value = errorMessage;
+    });
+  }
+
+  function fetchReply(url, onSuccess, onError) {
+    const request = new XMLHttpRequest();
+    request.open('GET', url, /* async */ true);
+    request.onload = () => {
+      if (request.status >= 200 && request.status < 400) {
+        onSuccess(request.responseText);
+      } else {
+        onError(`Error (${request.status}): ${request.statusText} ${request.responseText}`);
+      }
+    };
+    request.onerror = () => {
+      onError('Network Error');
+    };
+    request.send();
+  }
+})();

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

@@ -0,0 +1,25 @@
+(() => {
+  const COMPONENT_SELECTOR = '#thredded--container [data-time-ago]';
+  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').replace('-', '_'));
+    });
+    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

@@ -0,0 +1,94 @@
+//= require thredded/dependencies/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]';
+  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;
+
+  const initTopicForm = (form) => {
+    const textarea = form.querySelector(CONTENT_TEXTAREA_SELECTOR);
+    if (!textarea) {
+      return;
+    }
+    autosize(textarea);
+    new ThreddedPreviewArea(form, textarea);
+    ThreddedMentionAutocompletion.init(form, textarea);
+
+    if (!form.classList.contains(COMPACT_CLASS)) {
+      return;
+    }
+
+    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);
+        }
+      });
+
+      // 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);
+          }
+          document.body.removeEventListener('touchend', listener);
+          document.body.removeEventListener('mouseup', listener);
+        };
+        document.body.addEventListener('mouseup', listener);
+        document.body.addEventListener('touchend', listener);
+      })
+    });
+  };
+
+  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);
+    }
+  };
+
+  const destroyTopicForm = (form) => {
+    const textarea = form.querySelector(CONTENT_TEXTAREA_SELECTOR);
+    if (!textarea) {
+      return;
+    }
+    autosize.destroy(textarea);
+  };
+
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      initTopicForm(node);
+    });
+  });
+
+  document.addEventListener('turbolinks:before-cache', () => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), (node) => {
+      destroyTopicForm(node);
+    });
+  });
+})();
+
+

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

@@ -0,0 +1,46 @@
+//= 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 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';
+  const POSTS_PER_PAGE = 50;
+
+  function pageNumber(url) {
+    const match = url.match(/\/page-(\d)$/);
+    return match ? +match[1] : 1;
+  }
+
+  function totalPages(numPosts) {
+    return Math.ceil(numPosts / POSTS_PER_PAGE);
+  }
+
+  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);
+      }
+    });
+  }
+
+  Thredded.onPageLoad(() => {
+    Array.prototype.forEach.call(document.querySelectorAll(COMPONENT_SELECTOR), initTopicsList);
+  });
+})();