Webpack (#1367)

* Replace gulp with webpack and npm scripts for JS compilation
* Set up Travis CI to commit compiled JS
* Restructure `js` directory; only one instance of npm, forum/admin are "submodules"
* Refactor JS initializers into Application subclasses
* Maintain partial compatibility API (importing from absolute paths) for extensions
* Remove minification responsibility from PHP asset compiler
* Restructure `less` directory

js/src/forum/components/DiscussionComposer.js

@@ -0,0 +1,101 @@
+import ComposerBody from './ComposerBody';
+import extractText from '../../common/utils/extractText';
+
+/**
+ * The `DiscussionComposer` component displays the composer content for starting
+ * a new discussion. It adds a text field as a header control so the user can
+ * enter the title of their discussion. It also overrides the `submit` and
+ * `willExit` actions to account for the title.
+ *
+ * ### Props
+ *
+ * - All of the props for ComposerBody
+ * - `titlePlaceholder`
+ */
+export default class DiscussionComposer extends ComposerBody {
+  init() {
+    super.init();
+
+    /**
+     * The value of the title input.
+     *
+     * @type {Function}
+     */
+    this.title = m.prop('');
+  }
+
+  static initProps(props) {
+    super.initProps(props);
+
+    props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_discussion.body_placeholder'));
+    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
+    props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
+    props.titlePlaceholder = props.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
+    props.className = 'ComposerBody--discussion';
+  }
+
+  headerItems() {
+    const items = super.headerItems();
+
+    items.add('title', <h3>{app.translator.trans('core.forum.composer_discussion.title')}</h3>, 100);
+
+    items.add('discussionTitle', (
+      <h3>
+        <input className="FormControl"
+          value={this.title()}
+          oninput={m.withAttr('value', this.title)}
+          placeholder={this.props.titlePlaceholder}
+          disabled={!!this.props.disabled}
+          onkeydown={this.onkeydown.bind(this)}/>
+      </h3>
+    ));
+
+    return items;
+  }
+
+  /**
+   * Handle the title input's keydown event. When the return key is pressed,
+   * move the focus to the start of the text editor.
+   *
+   * @param {Event} e
+   */
+  onkeydown(e) {
+    if (e.which === 13) { // Return
+      e.preventDefault();
+      this.editor.setSelectionRange(0, 0);
+    }
+
+    m.redraw.strategy('none');
+  }
+
+  preventExit() {
+    return (this.title() || this.content()) && this.props.confirmExit;
+  }
+
+  /**
+   * Get the data to submit to the server when the discussion is saved.
+   *
+   * @return {Object}
+   */
+  data() {
+    return {
+      title: this.title(),
+      content: this.content()
+    };
+  }
+
+  onsubmit() {
+    this.loading = true;
+
+    const data = this.data();
+
+    app.store.createRecord('discussions').save(data).then(
+      discussion => {
+        app.composer.hide();
+        app.cache.discussionList.addDiscussion(discussion);
+        m.route(app.route.discussion(discussion));
+      },
+      this.loaded.bind(this)
+    );
+  }
+}