refactors select-box

Note: this commit also now uses select-box for mobile topics controls

app/assets/javascripts/admin/templates/customize-themes-show.hbs

@@ -36,7 +36,7 @@
 
   <h3>{{i18n "admin.customize.theme.color_scheme"}}</h3>
   <p>{{i18n "admin.customize.theme.color_scheme_select"}}</p>
-  <p>{{d-select-box data=colorSchemes
+  <p>{{d-select-box content=colorSchemes
                     textKey="name"
                     filterable=true
                     value=colorSchemeId

app/assets/javascripts/discourse/components/select-box.js.es6

@@ -1,4 +1,4 @@
-import { observes } from "ember-addons/ember-computed-decorators";
+import { on, observes } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
   classNames: "select-box",
@@ -15,10 +15,11 @@ export default Ember.Component.extend({
 
   caretUpIcon: "caret-up",
   caretDownIcon: "caret-down",
+  headerText: null,
   icon: null,
 
   value: null,
-  noDataText: I18n.t("select_box.no_data"),
+  noContentText: I18n.t("select_box.no_content"),
   lastHoveredId: null,
 
   idKey: "id",
@@ -40,116 +41,97 @@ export default Ember.Component.extend({
   verticalOffset: 0,
   horizontalOffset: 0,
 
-  _renderBody: false,
+  renderBody: false,
 
   init() {
     this._super();
 
-    if(!this.get("data")) {
-      this.set("data", []);
+    if (!this.get("content")) {
+      this.set("content", []);
     }
 
     this.setProperties({
       componentId: this.elementId,
-      filteredData: [],
-      selectedData: {}
+      filteredContent: [],
+      selectedContent: {}
     });
   },
 
+  @observes("value")
+  _valueChanged: function() {
+    if (Ember.isNone(this.get("value"))) {
+      this.set("lastHoveredId", null);
+    }
+
+    this.set("filteredContent", this._remapContent(this.get("content")));
+  },
+
   @observes("filter")
-  _filter: function() {
-    if(_.isEmpty(this.get("filter"))) {
-      this.set("filteredData", this._remapData(this.get("data")));
+  _filterChanged: function() {
+    if (Ember.isEmpty(this.get("filter"))) {
+      this.set("filteredContent", this._remapContent(this.get("content")));
     } else {
-      const filtered = _.filter(this.get("data"), (data)=> {
-        return data[this.get("textKey")].toLowerCase().indexOf(this.get("filter")) > -1;
+      const filtered = _.filter(this.get("content"), (content) => {
+        return content[this.get("textKey")].toLowerCase().indexOf(this.get("filter")) > -1;
       });
-      this.set("filteredData", this._remapData(filtered));
+      this.set("filteredContent", this._remapContent(filtered));
     }
   },
 
-  @observes("expanded", "filteredData")
-  _expand: function() {
-    if(this.get("expanded")) {
-      this.setProperties({focused: false, _renderBody: true});
+  @observes("expanded")
+  _expandedChanged: function() {
+    if (this.get("expanded")) {
+      this.setProperties({ focused: false, renderBody: true });
 
-      Ember.$(document).on("keydown.select-box", (event) => {
-        const keyCode = event.keyCode || event.which;
-        if (keyCode === 9) {
-          this.set("expanded", false);
-        }
-      });
-
-      if(_.isUndefined(this.get("lastHoveredId"))) {
+      if (Ember.isNone(this.get("lastHoveredId"))) {
         this.set("lastHoveredId", this.get("value"));
       }
-
-      Ember.run.scheduleOnce("afterRender", this, () => {
-        this.$(".select-box-filter .filter-query").focus();
-        this.$(".select-box-collection").css("max-height", this.get("maxCollectionHeight"));
-        this.$().removeClass("is-reversed");
-
-        const offsetTop = this.$()[0].getBoundingClientRect().top;
-        const windowHeight = Ember.$(window).height();
-        const headerHeight = this.$(".select-box-header").outerHeight();
-        const filterHeight = this.$(".select-box-filter").outerHeight();
-
-        if(windowHeight - (offsetTop + this.get("maxCollectionHeight") + filterHeight + headerHeight) < 0) {
-          this.$().addClass("is-reversed");
-          this.$(".select-box-body").css({
-            left: this.get("horizontalOffset"),
-            top: "",
-            bottom: headerHeight + this.get("verticalOffset")
-          });
-        } else {
-          this.$(".select-box-body").css({
-            left: this.get("horizontalOffset"),
-            top: headerHeight + this.get("verticalOffset"),
-            bottom: ""
-          });
-        }
-
-        this.$(".select-box-wrapper").css({
-          width: this.get("maxWidth"),
-          display: "block",
-          height: headerHeight + this.$(".select-box-body").outerHeight()
-        });
-      });
-    } else {
-      Ember.$(document).off("keydown.select-box");
-      this.$(".select-box-wrapper").hide();
     };
   },
 
-  willDestroyElement() {
-    this._super();
-
-    Ember.$(document).off("click.select-box");
-    Ember.$(document).off("keydown.select-box");
+  @on("willDestroyElement")
+  _unbindEvents: function() {
+    $(document).off("click.select-box");
+    $(document).off("keydown.select-box");
     this.$(".select-box-offscreen").off("focusin.select-box");
     this.$(".select-box-offscreen").off("focusout.select-box");
   },
 
-  didReceiveAttrs() {
-    this._super();
+  @on("didRender")
+  _configureSelectBoxDOM: function() {
+    if (this.get("expanded")) {
+      this.$(".select-box-body").css('width', this.get("maxWidth"));
+      this.$(".select-box-filter .filter-query").focus();
+      this.$(".select-box-collection").css("max-height", this.get("maxCollectionHeight"));
 
-    this.set("lastHoveredId", this.get("data")[this.get("idKey")]);
-    this.set("filteredData", this._remapData(this.get("data")));
-    this._setSelectedData(this.get("data"));
+      this._bindTab();
+      this._applyDirection();
+      this._positionSelectBoxWrapper();
+    } else {
+      $(document).off("keydown.select-box");
+      this.$(".select-box-wrapper").hide();
+    }
   },
 
-  didRender() {
-    this._super();
+  @observes("content.[]")
+  @on("didReceiveAttrs")
+  _contentChanged: function() {
+    if (!Ember.isNone(this.get("value"))) {
+      this.set("lastHoveredId", this.get("content")[this.get("idKey")]);
+    } else {
+      this.set("lastHoveredId", null);
+    }
 
-    this.$(".select-box-body").css('width', this.get("maxWidth"));
-    this._expand();
+    this.set("filteredContent", this._remapContent(this.get("content")));
+    this._setSelectedContent(this.get("content"));
+    this.set("headerText", this.get("defaultHeaderText") || this.get("selectedContent.text"));
   },
 
-  didInsertElement() {
-    this._super();
-
-    Ember.$(document).on("click.select-box", (event) => {
-      if(this.get("expanded") && $(event.target).parents(".select-box").attr("id") !== this.$().attr("id")) {
+  @on("didInsertElement")
+  _bindEvents: function() {
+    $(document).on("click.select-box", (event) => {
+      const clickOutside = $(event.target).parents(".select-box").attr("id") !== this.$().attr("id");
+      if (this.get("expanded") && clickOutside) {
         this.setProperties({
           expanded: false,
           focused: false
@@ -187,25 +169,68 @@ export default Ember.Component.extend({
     }
   },
 
-  _setSelectedData(data) {
-    const selectedData = _.find(data, (d)=> {
-      return d[this.get("idKey")] === this.get("value");
+  _setSelectedContent(content) {
+    const selectedContent = content.find((c) => {
+      return c[this.get("idKey")] === this.get("value");
     });
 
-    if(!_.isUndefined(selectedData)) {
-      this.set("selectedData", this._normalizeData(selectedData));
+    if (!Ember.isNone(selectedContent)) {
+      this.set("selectedContent", this._normalizeContent(selectedContent));
     }
   },
 
-  _remapData(data) {
-    return data.map(d => this._normalizeData(d));
+  _remapContent(content) {
+    return content.map(c => this._normalizeContent(c));
   },
 
-  _normalizeData(data) {
+  _normalizeContent(content) {
     return {
-      id: data[this.get("idKey")],
-      text: data[this.get("textKey")],
-      icon: data[this.get("iconKey")]
+      id: content[this.get("idKey")],
+      text: content[this.get("textKey")],
+      icon: content[this.get("iconKey")]
     };
   },
+
+  _bindTab() {
+    $(document).on("keydown.select-box", (event) => {
+      const keyCode = event.keyCode || event.which;
+      if (keyCode === 9) {
+        this.set("expanded", false);
+      }
+    });
+  },
+
+  _positionSelectBoxWrapper() {
+    const headerHeight = this.$(".select-box-header").outerHeight();
+
+    this.$(".select-box-wrapper").css({
+      width: this.get("maxWidth"),
+      display: "block",
+      height: headerHeight + this.$(".select-box-body").outerHeight()
+    });
+  },
+
+  _applyDirection() {
+    this.$().removeClass("is-reversed");
+
+    const offsetTop = this.$()[0].getBoundingClientRect().top;
+    const windowHeight = $(window).height();
+    const headerHeight = this.$(".select-box-header").outerHeight();
+    const filterHeight = this.$(".select-box-filter").outerHeight();
+
+    if (windowHeight - (offsetTop + this.get("maxCollectionHeight") + filterHeight + headerHeight) < 0) {
+      this.$().addClass("is-reversed");
+      this.$(".select-box-body").css({
+        left: this.get("horizontalOffset"),
+        top: "",
+        bottom: headerHeight + this.get("verticalOffset")
+      });
+    } else {
+      this.$(".select-box-body").css({
+        left: this.get("horizontalOffset"),
+        top: headerHeight + this.get("verticalOffset"),
+        bottom: ""
+      });
+    }
+  },
 });

app/assets/javascripts/discourse/components/select-box/select-box-row.js.es6

@@ -10,25 +10,25 @@ export default Ember.Component.extend({
   lastHoveredId: null,
 
   mouseEnter() {
-    this.sendAction("onHover", this.get("data.id"));
+    this.sendAction("onHover", this.get("content.id"));
   },
 
   click() {
-    this.sendAction("onSelect", this.get("data.id"));
+    this.sendAction("onSelect", this.get("content.id"));
   },
 
   didReceiveAttrs() {
     this._super();
 
     this.set("isHighlighted", this._isHighlighted());
-    this.set("text", this.get("data.text"));
+    this.set("text", this.get("content.text"));
   },
 
   _isHighlighted() {
     if(_.isUndefined(this.get("lastHoveredId"))) {
-      return this.get("data.id") === this.get("selectedId");
+      return this.get("content.id") === this.get("selectedId");
     } else {
-      return this.get("data.id") === this.get("lastHoveredId");
+      return this.get("content.id") === this.get("lastHoveredId");
     }
   },
 });

app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6

@@ -1,12 +1,13 @@
-import { iconHTML } from 'discourse-common/lib/icon-library';
-import Combobox from 'discourse-common/components/combo-box';
 import { observes } from 'ember-addons/ember-computed-decorators';
+import DiscourseSelectBoxComponent from "discourse/components/d-select-box";
 
-export default Combobox.extend({
-  none: "topic.controls",
-
+export default DiscourseSelectBoxComponent.extend({
   init() {
     this._super();
+
+    this.set("textKey", "name");
+    this.set("defaultHeaderText", I18n.t("topic.controls"));
+    this.set("maxCollectionHeight", 300);
     this._createContent();
   },
 
@@ -24,23 +25,20 @@ export default Combobox.extend({
     } else {
       content.push({ id: 'bookmark', icon: 'bookmark', name: I18n.t('bookmarked.title') });
     }
+
     content.push({ id: 'share', icon: 'link', name: I18n.t('topic.share.title') });
 
     if (details.get('can_flag_topic')) {
       content.push({ id: 'flag', icon: 'flag', name: I18n.t('topic.flag_topic.title') });
     }
 
-    this.comboTemplate = (item) => {
-      const contentItem = content.findBy('id', item.id);
-      if (!contentItem) { return item.text; }
-      return `${iconHTML(contentItem.icon)}  ${item.text}`;
-    };
-
     this.set('content', content);
   },
 
   @observes('value')
   _valueChanged() {
+    this._super();
+
     const value = this.get('value');
     const topic = this.get('topic');
 

app/assets/javascripts/discourse/templates/components/select-box.hbs

@@ -7,7 +7,7 @@
 />
 
 {{component selectBoxHeaderComponent
-  data=selectedData
+  text=headerText
   focused=focused
   caretUpIcon=caretUpIcon
   caretDownIcon=caretDownIcon
@@ -17,7 +17,7 @@
 }}
 
 <div class="select-box-body">
-  {{#if _renderBody}}
+  {{#if renderBody}}
     {{#if filterable}}
       {{component selectBoxFilterComponent
         onFilterChange=(action "onFilterChange")
@@ -27,12 +27,12 @@
     {{/if}}
 
     {{component selectBoxCollectionComponent
-      filteredData=filteredData
+      filteredContent=filteredContent
       selectBoxRowComponent=selectBoxRowComponent
       lastHoveredId=lastHoveredId
       onSelectRow=(action "onSelectRow")
       onHoverRow=(action "onHoverRow")
-      noDataText=noDataText
+      noContentText=noContentText
       selectedId=value
     }}
   {{/if}}

app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs

@@ -1,16 +1,16 @@
 <ul class="collection">
-  {{#each filteredData as |data|}}
+  {{#each filteredContent as |content|}}
     {{component selectBoxRowComponent
-      data=data
+      content=content
       lastHoveredId=lastHoveredId
       onSelect=onSelectRow
       onHover=onHoverRow
       selectedId=selectedId
     }}
   {{else}}
-    {{#if noDataText}}
-      <li class="select-box-row no-data">
-        {{noDataText}}
+    {{#if noContentText}}
+      <li class="select-box-row no-content">
+        {{noContentText}}
       </li>
     {{/if}}
   {{/each}}

app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs

@@ -6,7 +6,7 @@
   {{/if}}
 
   <span class="current-selection">
-    {{data.text}}
+    {{text}}
   </span>
 
   <div class="caret-icon">

app/assets/javascripts/discourse/templates/components/select-box/select-box-row.hbs

@@ -1,7 +1,7 @@
-{{#if data.icon}}
-  {{d-icon data.icon}}
+{{#if content.icon}}
+  {{d-icon content.icon}}
 {{/if}}
 
 <p class="text">
-  {{data.text}}
+  {{content.text}}
 </p>

config/locales/client.en.yml

@@ -1144,7 +1144,7 @@ en:
       alt: 'Alt'
 
     select_box:
-      no_data: No data
+      no_content: No content
       filter_placeholder: Search...
 
     emoji_picker:

test/javascripts/components/select-box-test.js.es6

@@ -1,68 +1,69 @@
 import componentTest from 'helpers/component-test';
 
-moduleForComponent('select-box', {integration: true});
+moduleForComponent('select-box', { integration: true });
 
-componentTest('updating the data refreshes the list', {
-  template: '{{select-box value=1 data=data}}',
+componentTest('updating the content refreshes the list', {
+  template: '{{select-box value=1 content=content}}',
 
   beforeEach() {
-    this.set("data", [{id:1, text:"robin"}]);
+    this.set("content", [{id:1, text:"robin"}]);
   },
 
   test(assert) {
     click(this.$(".select-box-header"));
     andThen(() => {
       assert.equal(this.$(".select-box-row .text").html().trim(), "robin");
-
-      andThen(() => this.set("data", [{id:1, text:"regis"}]));
-      andThen(() => assert.equal(this.$(".select-box-row .text").html().trim(), "regis"));
     });
+    andThen(() => this.set("content", [{id:1, text:"regis"}]));
+    andThen(() => assert.equal(this.$(".select-box-row .text").html().trim(), "regis"));
   }
 });
 
 componentTest('accepts a value by reference', {
-  template: '{{select-box value=value data=data}}',
+  template: '{{select-box value=value content=content}}',
 
   beforeEach() {
     this.set("value", 1);
-    this.set("data", [{id:1, text:"robin"}, {id: 2, text:"regis"}]);
+    this.set("content", [{id:1, text:"robin"}, {id: 2, text:"regis"}]);
   },
 
   test(assert) {
     click(this.$(".select-box-header"));
     andThen(() => {
       assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin", "it highlights the row corresponding to the value");
+    });
 
+    andThen(() => {
       click(this.$(".select-box-row[title='robin']"));
-      andThen(() => assert.equal(this.get("value"), 1, "it mutates the value"));
+      andThen(() => {
+        assert.equal(this.get("value"), 1, "it mutates the value");
+      });
     });
   }
 });
 
 componentTest('select-box can be filtered', {
-  template: '{{select-box filterable=true value=1 data=data}}',
+  template: '{{select-box filterable=true value=1 content=content}}',
 
   beforeEach() {
-    this.set("data", [{id:1, text:"robin"}, {id: 2, text:"regis"}]);
+    this.set("content", [{id:1, text:"robin"}, {id: 2, text:"regis"}]);
   },
 
   test(assert) {
     click(this.$(".select-box-header"));
+    andThen(() => assert.equal(this.$(".filter-query").length, 1, "it has a search input"));
+
     andThen(() => {
-      andThen(() => assert.equal(this.$(".filter-query").length, 1, "it has a search input"));
-
-      andThen(() => {
-        this.$(".filter-query").val("regis");
-        this.$(".filter-query").trigger("keyup");
-      });
-      andThen(() => assert.equal(this.$(".select-box-row").length, 1, "it filters results"));
-
-      andThen(() => {
-        this.$(".filter-query").val("");
-        this.$(".filter-query").trigger("keyup");
-      });
-      andThen(() => assert.equal(this.$(".select-box-row").length, 2, "it returns to original data when filter is empty"));
+      this.$(".filter-query").val("regis");
+      this.$(".filter-query").trigger("keyup");
     });
+    andThen(() => assert.equal(this.$(".select-box-row").length, 1, "it filters results"));
+
+    andThen(() => {
+      this.$(".filter-query").val("");
+      this.$(".filter-query").trigger("keyup");
+    });
+    andThen(() => assert.equal(this.$(".select-box-row").length, 2, "it returns to original content when filter is empty"));
   }
 });
 
@@ -129,7 +130,6 @@ componentTest('not filterable by default', {
 componentTest('select-box is expandable', {
   template: '{{select-box}}',
   test(assert) {
-
     click(".select-box-header");
     andThen(() => {
       assert.equal(this.$(".select-box").hasClass("is-expanded"), true);
@@ -143,11 +143,11 @@ componentTest('select-box is expandable', {
 });
 
 componentTest('accepts custom id/text keys', {
-  template: '{{select-box value=value data=data idKey="identifier" textKey="name"}}',
+  template: '{{select-box value=value content=content idKey="identifier" textKey="name"}}',
 
   beforeEach() {
     this.set("value", 1);
-    this.set("data", [{identifier:1, name:"robin"}]);
+    this.set("content", [{identifier:1, name:"robin"}]);
   },
 
   test(assert) {
@@ -159,10 +159,10 @@ componentTest('accepts custom id/text keys', {
 });
 
 componentTest('doesn’t render collection content before first expand', {
-  template: '{{select-box value=1 data=data idKey="identifier" textKey="name"}}',
+  template: '{{select-box value=1 content=content idKey="identifier" textKey="name"}}',
 
   beforeEach() {
-    this.set("data", [{identifier:1, name:"robin"}]);
+    this.set("content", [{identifier:1, name:"robin"}]);
   },
 
   test(assert) {
@@ -176,10 +176,10 @@ componentTest('doesn’t render collection content before first expand', {
 });
 
 componentTest('persists filter state when expandind/collapsing', {
-  template: '{{select-box value=1 data=data filterable=true}}',
+  template: '{{select-box value=1 content=content filterable=true}}',
 
   beforeEach() {
-    this.set("data", [{id:1, text:"robin"}, {id:2, text:"régis"}]);
+    this.set("content", [{id:1, text:"robin"}, {id:2, text:"régis"}]);
   },
 
   test(assert) {
@@ -205,12 +205,11 @@ componentTest('persists filter state when expandind/collapsing', {
   }
 });
 
-
 componentTest('supports options to limit size', {
-  template: '{{select-box maxWidth=100 maxCollectionHeight=20 data=data}}',
+  template: '{{select-box maxWidth=100 maxCollectionHeight=20 content=content}}',
 
   beforeEach() {
-    this.set("data", [{id:1, text:"robin"}]);
+    this.set("content", [{id:1, text:"robin"}]);
   },
 
   test(assert) {