Introduces select-kit

* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:

```
computeValue()
computeContent()
mutateValue()
```

.eslintrc

@@ -42,12 +42,12 @@
     "invisible":true,
     "asyncRender":true,
     "selectDropdown":true,
-    "selectBox":true,
-    "expandSelectBoxKit":true,
-    "collapseSelectBoxKit":true,
-    "selectBoxKitSelectRow":true,
-    "selectBoxKitSelectNoneRow":true,
-    "selectBoxKitFillInFilter":true,
+    "selectKit":true,
+    "expandSelectKit":true,
+    "collapseSelectKit":true,
+    "selectKitSelectRow":true,
+    "selectKitSelectNoneRow":true,
+    "selectKitFillInFilter":true,
     "asyncTestDiscourse":true,
     "fixture":true,
     "find":true,

app/assets/javascripts/admin/templates/components/site-settings/category-list.hbs

@@ -1,3 +1,3 @@
-{{category-selector categories=selectedCategories blacklist=selectedCategories}}
+{{category-selector categories=selectedCategories}}
 <div class='desc'>{{{unbound setting.description}}}</div>
 {{setting-validation-message message=validationMessage}}

app/assets/javascripts/admin/templates/web-hooks-show.hbs

@@ -48,7 +48,7 @@
     <div class='filters'>
       <div>
         <label>{{d-icon 'circle' class='tracking'}}{{i18n 'admin.web_hooks.categories_filter'}}</label>
-        {{category-selector categories=model.categories blacklist=model.categories}}
+        {{category-selector categories=model.categories}}
         <div class="instructions">{{i18n 'admin.web_hooks.categories_filter_instructions'}}</div>
       </div>
       <div>

app/assets/javascripts/application.js

@@ -4,7 +4,7 @@
 //= require ./ember-addons/ember-computed-decorators
 //= require ./ember-addons/fmt
 //= require_tree ./discourse-common
-//= require_tree ./select-box-kit
+//= require_tree ./select-kit
 //= require ./discourse
 //= require ./deprecated
 

app/assets/javascripts/discourse-common/lib/icon-library.js.es6

@@ -42,7 +42,8 @@ export function renderIcon(renderType, id, params) {
     let rendererForType = renderer[renderType];
 
     if (rendererForType) {
-      let result = rendererForType(REPLACEMENTS[id] || id, params || {});
+      const icon = { id, replacementId: REPLACEMENTS[id] };
+      let result = rendererForType(icon, params || {});
       if (result) {
         return result;
       }
@@ -68,8 +69,14 @@ export function registerIconRenderer(renderer) {
 }
 
 // Support for font awesome icons
-function faClasses(id, params) {
-  let classNames = `fa fa-${id} d-icon d-icon-${id}`;
+function faClasses(icon, params) {
+  let classNames;
+  if (typeof icon.replacementId !== "undefined") {
+    classNames = `fa fa-${icon.replacementId} d-icon ${icon.id}`;
+  } else {
+    classNames = `fa fa-${icon.id} d-icon d-${icon.id}`;
+  }
+
   if (params) {
     if (params.modifier) { classNames += " fa-" + params.modifier; }
     if (params['class']) { classNames += ' ' + params['class']; }
@@ -81,9 +88,9 @@ function faClasses(id, params) {
 registerIconRenderer({
   name: 'font-awesome',
 
-  string(id, params) {
+  string(icon, params) {
     let tagName = params.tagName || 'i';
-    let html = `<${tagName} class='${faClasses(id, params)}'`;
+    let html = `<${tagName} class='${faClasses(icon, params)}'`;
     if (params.title) { html += ` title='${I18n.t(params.title)}'`; }
     if (params.label) { html += " aria-hidden='true'"; }
     html += `></${tagName}>`;
@@ -93,11 +100,11 @@ registerIconRenderer({
     return html;
   },
 
-  node(id, params) {
+  node(icon, params) {
     let tagName = params.tagName || 'i';
 
     const properties = {
-      className: faClasses(id, params),
+      className: faClasses(icon, params),
       attributes: { "aria-hidden": true }
     };
 

app/assets/javascripts/discourse/components/future-date-input.js.es6

@@ -1,7 +1,7 @@
 import { default as computed, observes } from "ember-addons/ember-computed-decorators";
 import {
   FORMAT,
-} from "select-box-kit/components/future-date-input-selector";
+} from "select-kit/components/future-date-input-selector";
 
 import { PUBLISH_TO_CATEGORY_STATUS_TYPE } from 'discourse/controllers/edit-topic-timer';
 

app/assets/javascripts/discourse/components/search-advanced-options.js.es6

@@ -185,18 +185,18 @@ export default Em.Component.extend({
         const userInput = Discourse.Category.findBySlug(subcategories[1], subcategories[0]);
         if ((!existingInput && userInput)
           || (existingInput && userInput && existingInput.id !== userInput.id))
-          this.set('searchedTerms.category', [userInput]);
+          this.set('searchedTerms.category', userInput);
       } else
       if (isNaN(subcategories)) {
         const userInput = Discourse.Category.findSingleBySlug(subcategories[0]);
         if ((!existingInput && userInput)
           || (existingInput && userInput && existingInput.id !== userInput.id))
-          this.set('searchedTerms.category', [userInput]);
+          this.set('searchedTerms.category', userInput);
       } else {
         const userInput = Discourse.Category.findById(subcategories[0]);
         if ((!existingInput && userInput)
           || (existingInput && userInput && existingInput.id !== userInput.id))
-          this.set('searchedTerms.category', [userInput]);
+          this.set('searchedTerms.category', userInput);
       }
     } else
       this.set('searchedTerms.category', '');
@@ -303,11 +303,11 @@ export default Em.Component.extend({
 
     const slugCategoryMatches = (match.length !== 0) ? match[0].match(REGEXP_CATEGORY_SLUG) : null;
     const idCategoryMatches = (match.length !== 0) ? match[0].match(REGEXP_CATEGORY_ID) : null;
-    if (categoryFilter && categoryFilter[0]) {
-      const id = categoryFilter[0].id;
-      const slug = categoryFilter[0].slug;
-      if (categoryFilter[0].parentCategory) {
-        const parentSlug = categoryFilter[0].parentCategory.slug;
+    if (categoryFilter) {
+      const id = categoryFilter.id;
+      const slug = categoryFilter.slug;
+      if (categoryFilter.parentCategory) {
+        const parentSlug = categoryFilter.parentCategory.slug;
         if (slugCategoryMatches)
           searchTerm = searchTerm.replace(slugCategoryMatches[0], `#${parentSlug}:${slug}`);
         else if (idCategoryMatches)

app/assets/javascripts/discourse/components/topic-timeline.js.es6

@@ -12,6 +12,7 @@ export default MountWidget.extend(Docking, {
   buildArgs() {
     let attrs =  {
       topic: this.get('topic'),
+      notificationLevel: this.get('notificationLevel'),
       topicTrackingState: this.topicTrackingState,
       enteredIndex: this.get('enteredIndex'),
       dockAt: this.dockAt,

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -21,6 +21,7 @@ import { attachAdditionalPanel } from 'discourse/widgets/header';
 import { registerIconRenderer, replaceIcon } from 'discourse-common/lib/icon-library';
 import { addNavItem } from 'discourse/models/nav-item';
 import { replaceFormatter } from 'discourse/lib/utilities';
+import { modifySelectKit } from "select-kit/mixins/plugin-api";
 
 // If you add any methods to the API ensure you bump up this number
 const PLUGIN_API_VERSION = '0.8.12';
@@ -589,6 +590,21 @@ class PluginApi {
   formatUsername(fn) {
     replaceFormatter(fn);
   }
+
+  /**
+  *
+  * Access SelectKit plugin api
+  *
+  * Example:
+  *
+  * modifySelectKit("topic-footer-mobile-dropdown").appendContent(() => [{
+  *   name: "discourse",
+  *   id: 1
+  * }])
+  */
+  modifySelectKit(pluginApiKey) {
+    return modifySelectKit(pluginApiKey);
+  }
 }
 
 let _pluginv01;

app/assets/javascripts/discourse/templates/components/d-navigation.hbs

@@ -9,7 +9,7 @@
 {{navigation-bar navItems=navItems filterMode=filterMode category=category}}
 
 {{#if showCategoryNotifications}}
-  {{category-notifications-button category=category}}
+  {{category-notifications-button value=category.notification_level category=category}}
 {{/if}}
 
 {{create-topic-button

app/assets/javascripts/discourse/templates/components/edit-category-general.hbs

@@ -22,7 +22,9 @@
         {{category-chooser
           none="category.none"
           value=category.parent_category_id
+          excludeCategoryId=category.id
           categories=parentCategories
+          allowSubCategories=false
           allowUncategorized=false}}
       {{/if}}
     </section>

app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs

@@ -13,7 +13,7 @@
   <div class="control-group pull-left">
     <label class="control-label" for="search-in-category">{{i18n "search.advanced.in_category.label"}}</label>
     <div class="controls">
-      {{category-selector categories=searchedTerms.category single="true" canReceiveUpdates="true"}}
+      {{search-advanced-category-chooser value=searchedTerms.category}}
     </div>
   </div>
 </div>

app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs

@@ -74,10 +74,10 @@
                   args=(hash topic=topic)
                   connectorTagName="span"}}
 
-  {{pinned-button topic=topic}}
+  {{pinned-button pinned=topic.pinned topic=topic}}
 </div>
 
-{{topic-notifications-button topic=topic}}
+{{topic-notifications-button notificationLevel=topic.details.notification_level topic=topic}}
 
 {{plugin-outlet name="after-topic-footer-buttons"
                 args=(hash topic=topic)

app/assets/javascripts/discourse/templates/topic.hbs

@@ -85,6 +85,7 @@
 
           {{topic-timeline
             topic=model
+            notificationLevel=model.details.notification_level
             prevEvent=info.prevEvent
             fullscreen=info.topicProgressExpanded
             enteredIndex=enteredIndex

app/assets/javascripts/discourse/templates/topic/unsubscribe.hbs

@@ -8,6 +8,6 @@
       {{i18n "topic.unsubscribe.change_notification_state"}}
     </p>
 
-    {{topic-notifications-button topic=model}}
+    {{topic-notifications-button notificationLevel=model.details.notification_level topic=model}}
   </div>
 </div>

app/assets/javascripts/discourse/templates/user/messages.hbs

@@ -73,7 +73,7 @@
     {{/if}}
 
     {{#if isGroup}}
-      {{group-notifications-button group=group user=model}}
+      {{group-notifications-button value=group.group_user.notification_level group=group user=model}}
     {{/if}}
 </div>
 

app/assets/javascripts/discourse/widgets/component_connector.js.es6

@@ -1,12 +1,13 @@
 export default class ComponentConnector {
-  constructor(widget, componentName, opts) {
+  constructor(widget, componentName, opts, trackedProperties) {
     this.widget = widget;
     this.opts = opts;
     this.componentName = componentName;
+    this.trackedProperties = trackedProperties || [];
   }
 
   init() {
-    const $elem = $('<div style="display: inline-block;" class="widget-component-connector"></div>');
+    const $elem = $('<div style="display: inline-flex;" class="widget-component-connector"></div>');
     const elem = $elem[0];
     const { opts, widget, componentName } = this;
 
@@ -29,7 +30,18 @@ export default class ComponentConnector {
     return elem;
   }
 
-  update() { }
+  update(prev) {
+    let shouldInit = false;
+    this.trackedProperties.forEach(prop => {
+      if (prev.opts[prop] !== this.opts[prop]) {
+        shouldInit = true;
+      }
+    });
+
+    if (shouldInit === true) return this.init();
+
+    return null;
+  }
 }
 
 ComponentConnector.prototype.type = 'Widget';

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -291,7 +291,7 @@ createWidget('timeline-footer-controls', {
 
   html(attrs) {
     const controls = [];
-    const { currentUser, fullScreen, topic } = attrs;
+    const { currentUser, fullScreen, topic, notificationLevel } = attrs;
 
     if (currentUser && !fullScreen) {
       if (topic.get('details.can_create_post')) {
@@ -315,12 +315,13 @@ createWidget('timeline-footer-controls', {
 
     if (currentUser) {
       controls.push(new ComponentConnector(this,
-        'topic-notifications-button',
+        'topic-notifications-options',
         {
+          value: notificationLevel,
           topic,
-          appendReason: false,
           showFullTitle: false
-        }
+        },
+        ["value"]
       ));
     }