Massive JavaScript cleanup

- Use JSX for templates
- Docblock/comment everything
- Mostly passes ESLint (still some work to do)
- Lots of renaming, refactoring, etc.

CSS hasn't been updated yet.

js/forum/src/components/DiscussionPage.js

@@ -0,0 +1,309 @@
+import Component from 'flarum/Component';
+import ItemList from 'flarum/utils/ItemList';
+import DiscussionHero from 'flarum/components/DiscussionHero';
+import PostStream from 'flarum/components/PostStream';
+import PostStreamScrubber from 'flarum/components/PostStreamScrubber';
+import LoadingIndicator from 'flarum/components/LoadingIndicator';
+import SplitDropdown from 'flarum/components/SplitDropdown';
+import listItems from 'flarum/helpers/listItems';
+import mixin from 'flarum/utils/mixin';
+import evented from 'flarum/utils/evented';
+import DiscussionControls from 'flarum/utils/DiscussionControls';
+
+/**
+ * The `DiscussionPage` component displays a whole discussion page, including
+ * the discussion list pane, the hero, the posts, and the sidebar.
+ */
+export default class DiscussionPage extends mixin(Component, evented) {
+  constructor(...args) {
+    super(...args);
+
+    /**
+     * The discussion that is being viewed.
+     *
+     * @type {Discussion}
+     */
+    this.discussion = null;
+
+    /**
+     * The number of the first post that is currently visible in the viewport.
+     *
+     * @type {Integer}
+     */
+    this.near = null;
+
+    this.refresh();
+
+    // If the discussion list has been loaded, then we'll enable the pane (and
+    // hide it by default). Also, if we've just come from another discussion
+    // page, then we don't want Mithril to redraw the whole page – if it did,
+    // then the pane would which would be slow and would cause problems with
+    // event handlers.
+    if (app.cache.discussionList) {
+      app.pane.enable();
+      app.pane.hide();
+
+      if (app.current instanceof DiscussionPage) {
+        m.redraw.strategy('diff');
+      }
+    }
+
+    // Push onto the history stack, but use a generalised key so that navigating
+    // to a few different discussions won't override the behaviour of the back
+    // button.
+    app.history.push('discussion');
+    app.current = this;
+
+    app.session.on('loggedIn', this.loggedInHandler = this.refresh.bind(this));
+  }
+
+  onunload(e) {
+    // If we have routed to the same discussion as we were viewing previously,
+    // cancel the unloading of this controller and instead prompt the post
+    // stream to jump to the new 'near' param.
+    if (this.discussion) {
+      if (m.route.param('id') === this.discussion.id()) {
+        e.preventDefault();
+
+        if (Number(m.route.param('near')) !== Number(this.near)) {
+          this.stream.goToNumber(m.route.param('near') || 1);
+        }
+
+        this.near = null;
+        return;
+      }
+    }
+
+    // If we are indeed navigating away from this discussion, then disable the
+    // discussion list pane. Also, if we're composing a reply to this
+    // discussion, minimize the composer – unless it's empty, in which case
+    // we'll just close it.
+    app.pane.disable();
+    app.session.off('loggedIn', this.loggedInHandler);
+
+    if (app.composingReplyTo(this.discussion) && !app.composer.component.content()) {
+      app.composer.hide();
+    } else {
+      app.composer.minimize();
+    }
+  }
+
+  view() {
+    const discussion = this.discussion;
+
+    return (
+      <div>
+        {app.cache.discussionList
+          ? <div className="index-area paned" config={this.configPane.bind(this)}>
+              {app.cache.discussionList.render()}
+            </div>
+          : ''}
+
+        <div className="discussion-area">
+          {discussion
+            ? [
+              DiscussionHero.component({discussion}),
+              <div className="container">
+                <nav className="discussion-nav">
+                  <ul>{listItems(this.sidebarItems().toArray())}</ul>
+                </nav>
+                {this.stream.render()}
+              </div>
+            ]
+            : LoadingIndicator.component({className: 'loading-indicator-block'})}
+        </div>
+      </div>
+    );
+  }
+
+  config(isInitialized, context) {
+    if (isInitialized) return;
+
+    context.retain = true;
+
+    $('body').addClass('discussion-page');
+    context.onunload = () => $('body').removeClass('discussion-page');
+  }
+
+  /**
+   * Clear and reload the discussion.
+   */
+  refresh() {
+    this.near = m.route.param('near') || 0;
+    this.discussion = null;
+
+    const preloadedDiscussion = app.preloadedDocument();
+    if (preloadedDiscussion) {
+      // We must wrap this in a setTimeout because if we are mounting this
+      // component for the first time on page load, then any calls to m.redraw
+      // will be ineffective and thus any configs (scroll code) will be run
+      // before stuff is drawn to the page.
+      setTimeout(this.init.bind(this, preloadedDiscussion));
+    } else {
+      const params = this.params();
+      params.include = params.include.join(',');
+
+      app.store.find('discussions', m.route.param('id'), params)
+        .then(this.init.bind(this));
+    }
+
+    // Since this may be called during the component's constructor, i.e. in the
+    // middle of a redraw, forcing another redraw would not bode well. Instead
+    // we start/end a computation so Mithril will only redraw if it isn't
+    // already doing so.
+    m.startComputation();
+    m.endComputation();
+  }
+
+  /**
+   * Get the parameters that should be passed in the API request to get the
+   * discussion.
+   *
+   * @return {Object}
+   */
+  params() {
+    return {
+      page: {near: this.near},
+      include: ['posts', 'posts.user', 'posts.user.groups']
+    };
+  }
+
+  /**
+   * Initialize the component to display the given discussion.
+   *
+   * @param {Discussion} discussion
+   */
+  init(discussion) {
+    // If the slug in the URL doesn't match up, we'll redirect so we have the
+    // correct one.
+    if (m.route.param('id') === discussion.id() && m.route.param('slug') !== discussion.slug()) {
+      m.route(app.route.discussion(discussion, m.route.param('near')), null, true);
+      return;
+    }
+
+    this.discussion = discussion;
+
+    app.setTitle(discussion.title());
+
+    // When the API responds with a discussion, it will also include a number of
+    // posts. Some of these posts are included because they are on the first
+    // page of posts we want to display (determined by the `near` parameter) –
+    // others may be included because due to other relationships introduced by
+    // extensions. We need to distinguish the two so we don't end up displaying
+    // the wrong posts. We do so by filtering out the posts that don't have
+    // the 'discussion' relationship linked, then sorting and splicing.
+    let includedPosts = [];
+    if (discussion.payload && discussion.payload.included) {
+      includedPosts = discussion.payload.included
+        .filter(record => record.type === 'posts' && record.relationships && record.relationships.discussion)
+        .map(record => app.store.getById('posts', record.id))
+        .sort((a, b) => a.id() - b.id())
+        .splice(20);
+    }
+
+    // Set up the post stream for this discussion, along with the first page of
+    // posts we want to display. Tell the stream to scroll down and highlight
+    // the specific post that was routed to.
+    this.stream = new PostStream({discussion, includedPosts});
+    this.stream.on('positionChanged', this.positionChanged.bind(this));
+    this.stream.goToNumber(m.route.param('near') || 1, true);
+
+    this.trigger('loaded', discussion);
+  }
+
+  /**
+   * Configure the discussion list pane.
+   *
+   * @param {DOMElement} element
+   * @param {Boolean} isInitialized
+   * @param {Object} context
+   */
+  configPane(element, isInitialized, context) {
+    if (isInitialized) return;
+
+    context.retain = true;
+
+    const $list = $(element);
+
+    // When the mouse enters and leaves the discussions pane, we want to show
+    // and hide the pane respectively. We also create a 10px 'hot edge' on the
+    // left of the screen to activate the pane.
+    const pane = app.pane;
+    $list.hover(pane.show.bind(pane), pane.onmouseleave.bind(pane));
+
+    const hotEdge = e => {
+      if (e.pageX < 10) pane.show();
+    };
+    $(document).on('mousemove', hotEdge);
+    context.onunload = () => $(document).off('mousemove', hotEdge);
+
+    // If the discussion we are viewing is listed in the discussion list, then
+    // we will make sure it is visible in the viewport – if it is not we will
+    // scroll the list down to it.
+    const $discussion = $list.find('.discussion-list-item.active');
+    if ($discussion.length) {
+      const listTop = $list.offset().top;
+      const listBottom = listTop + $list.outerHeight();
+      const discussionTop = $discussion.offset().top;
+      const discussionBottom = discussionTop + $discussion.outerHeight();
+
+      if (discussionTop < listTop || discussionBottom > listBottom) {
+        $list.scrollTop($list.scrollTop() - listTop + discussionTop);
+      }
+    }
+  }
+
+  /**
+   * Build an item list for the contents of the sidebar.
+   *
+   * @return {ItemList}
+   */
+  sidebarItems() {
+    const items = new ItemList();
+
+    items.add('controls',
+      SplitDropdown.component({
+        children: DiscussionControls.controls(this.discussion, this).toArray(),
+        icon: 'ellipsis-v',
+        className: 'primary-control',
+        buttonClassName: 'btn btn-primary'
+      })
+    );
+
+    items.add('scrubber',
+      PostStreamScrubber.component({
+        stream: this.stream,
+        className: 'title-control'
+      })
+    );
+
+    return items;
+  }
+
+  /**
+   * When the posts that are visible in the post stream change (i.e. the user
+   * scrolls up or down), then we update the URL and mark the posts as read.
+   *
+   * @param {Integer} startNumber
+   * @param {Integer} endNumber
+   */
+  positionChanged(startNumber, endNumber) {
+    const discussion = this.discussion;
+
+    // Construct a URL to this discussion with the updated position, then
+    // replace it into the window's history and our own history stack.
+    const url = app.route.discussion(discussion, this.near = startNumber);
+
+    m.route(url, true);
+    window.history.replaceState(null, document.title, url);
+
+    app.history.push('discussion');
+
+    // If the user hasn't read past here before, then we'll update their read
+    // state and redraw.
+    if (app.session.user && endNumber > (discussion.readNumber() || 0)) {
+      discussion.save({readNumber: endNumber});
+      m.redraw();
+    }
+  }
+}