Add UI for list site settings

2026-09-05 04:40:41 -05:00 · 2014-04-08 14:17:55 -07:00
parent 9c4dd1cb35
commit 6779bec58c
8 changed files with 220 additions and 10 deletions
@@ -0,0 +1,82 @@
+/**
+  Provide a nice GUI for a pipe-delimited list in the site settings.
+
+  @param settingValue is a reference to SiteSetting.value.
+
+  @class Discourse.ListSettingComponent
+  @extends Ember.Component
+  @namespace Discourse
+  @module Discourse
+ **/
+Discourse.ListSettingComponent = Ember.Component.extend({
+  layoutName: 'components/list-setting',
+
+  init: function() {
+    this._super();
+    this.on("focusOut", this.uncacheValue);
+    this.set('children', []);
+  },
+
+  canAddNew: true,
+
+  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();
+      });
+    }
+  }
+});
@@ -0,0 +1,44 @@
+/**
+  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'));
+  }
+});