Merge pull request #2405 from ligthyear/select2-sitesetting

AdminUI: Use Select2.js for SiteSetting Lists – adds Autocomplete and DnD-Sorting

app/assets/javascripts/admin/components/list_setting_component.js

@@ -2,81 +2,41 @@
   Provide a nice GUI for a pipe-delimited list in the site settings.
 
   @param settingValue is a reference to SiteSetting.value.
+  @param choices is a reference to SiteSetting.choices
 
   @class Discourse.ListSettingComponent
   @extends Ember.Component
   @namespace Discourse
   @module Discourse
  **/
+
 Discourse.ListSettingComponent = Ember.Component.extend({
-  layoutName: 'components/list-setting',
+  tagName: 'div',
 
-  init: function() {
-    this._super();
-    this.on("focusOut", this.uncacheValue);
-    this.set('children', []);
+  didInsertElement: function(){
+    this.$("input").select2({
+        multiple: false,
+        separator: "|",
+        tokenSeparators: [",", " ", "|"],
+        tags : this.get("choices") || [],
+        width: 'off'
+      }).on("change", function(obj) {
+        this.set("settingValue", obj.val.join("|"));
+        this.refreshSortables();
+      }.bind(this));
+
+    this.refreshSortables();
   },
 
-  canAddNew: true,
+  refreshOnReset: function() {
+    this.$("input").select2("val", this.get("settingValue").split("|"));
+  }.observes("settingValue"),
 
-  readValues: function() {
-    return this.get('settingValue').split('|');
-  }.property('settingValue'),
-
-  /**
-    Transfer the debounced value into the settingValue parameter.
-
-    This will cause a redraw of the child textboxes.
-
-    @param newFocus {Number|undefined} Which list index to focus on next, or undefined to not refocus
-  **/
-  uncacheValue: function(newFocus) {
-    var oldValue = this.get('settingValue'),
-        newValue = this.get('settingValueCached'),
-        self = this;
-
-    if (newValue !== undefined && newValue !== oldValue) {
-      this.set('settingValue', newValue);
-    }
-
-    if (newFocus !== undefined && newFocus > 0) {
-      Em.run.schedule('afterRender', function() {
-        var children = self.get('children');
-        if (newFocus < children.length) {
-          $(children[newFocus].get('element')).focus();
-        } else if (newFocus === children.length) {
-          $(self.get('element')).children().children('.list-add-value').focus();
-        }
-      });
-    }
-  },
-
-  setItemValue: function(index, item) {
-    var values = this.get('readValues');
-    values[index] = item;
-
-    // Remove blank items
-    values = values.filter(function(s) { return s !== ''; });
-    this.setProperties({
-      settingValueCached: values.join('|'),
-      canAddNew: true
-    });
-  },
-
-  actions: {
-    addNewItem: function() {
-      var newValue = this.get('settingValue') + '|';
-      this.setProperties({
-        settingValue: newValue,
-        settingValueCached: newValue,
-        canAddNew: false
-      });
-
-      var self = this;
-      Em.run.schedule('afterRender', function() {
-        var children = self.get('children');
-        $(children[children.length - 1].get('element')).focus();
-      });
-    }
+  refreshSortables: function() {
+    this.$("ul.select2-choices").sortable().on('sortupdate', function() {
+      this.$("input").select2("onSortEnd");
+    }.bind(this));
   }
 });
+
+

app/assets/javascripts/admin/components/list_setting_item_component.js

@@ -1,44 +0,0 @@
-/**
-  One item in a ListSetting.
-
-  @param parent is the ListSettingComponent.
-
-  @class Discourse.ListSettingItemComponent
-  @extends Ember.Component, Ember.TextSupport
-  @namespace Discourse
-  @module Discourse
- **/
-Discourse.ListSettingItemComponent = Ember.Component.extend(Ember.TextSupport, {
-  classNames: ['ember-text-field'],
-  tagName: "input",
-  attributeBindings: ['type', 'value', 'size', 'pattern'],
-
-  _initialize: function() {
-    // _parentView is the #each
-    // parent is the ListSettingComponent
-    this.setProperties({
-      value: this.get('_parentView.content'),
-      index: this.get('_parentView.contentIndex')
-    });
-    this.get('parent').get('children')[this.get('index')] = this;
-  }.on('init'),
-
-  markTab: function(e) {
-    var keyCode = e.keyCode || e.which;
-
-    if (keyCode === 9) {
-      this.set('nextIndex', this.get('index') + (e.shiftKey ? -1 : 1));
-    }
-  }.on('keyDown'),
-
-  reloadList: function() {
-    var nextIndex = this.get('nextIndex');
-    this.set('nextIndex', undefined); // one use only
-    this.get('parent').uncacheValue(nextIndex);
-  }.on('focusOut'),
-
-  _elementValueDidChange: function() {
-    this._super();
-    this.get('parent').setItemValue(this.get('index'), this.get('value'));
-  }
-});

app/assets/javascripts/admin/templates/site_settings/setting_list.js.handlebars

@@ -2,7 +2,7 @@
     <h3>{{unbound setting}}</h3>
 </div>
 <div class="setting-value">
-  {{list-setting settingValue=value}}
+  {{list-setting settingValue=value choices=choices}}
     <div class='desc'>{{unbound description}}</div>
 </div>
 {{#if dirty}}