New PluginAPI for widget settings

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

@@ -5,7 +5,7 @@ import { addButton } from 'discourse/widgets/post-menu';
 import { includeAttributes } from 'discourse/lib/transform-post';
 import { addToolbarCallback } from 'discourse/components/d-editor';
 import { addWidgetCleanCallback } from 'discourse/components/mount-widget';
-import { decorateWidget } from 'discourse/widgets/widget';
+import { decorateWidget, changeSetting } from 'discourse/widgets/widget';
 import { onPageChange } from 'discourse/lib/page-tracker';
 
 class PluginApi {
@@ -241,6 +241,18 @@ class PluginApi {
     onPageChange(fn);
   }
 
+  /**
+   * Changes a setting associated with a widget. For example, if
+   * you wanted small avatars in the post stream:
+   *
+   * ```javascript
+   * api.changeWidgetSetting('post-avatar', 'size', 'small');
+   * ```
+   *
+   **/
+  changeWidgetSetting(widgetName, settingName, newValue) {
+    changeSetting(widgetName, settingName, newValue);
+  }
 }
 
 let _pluginv01;

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

@@ -77,12 +77,16 @@ createWidget('reply-to-tab', {
 createWidget('post-avatar', {
   tagName: 'div.topic-avatar',
 
+  settings: {
+    size: 'large'
+  },
+
   html(attrs) {
     let body;
     if (!attrs.user_id) {
       body = h('i', { className: 'fa fa-trash-o deleted-user-avatar' });
     } else {
-      body = avatarFor.call(this, 'large', {
+      body = avatarFor.call(this, this.settings.size, {
         template: attrs.avatar_template,
         username: attrs.username,
         url: attrs.usernameUrl,

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

@@ -37,6 +37,12 @@ export function applyDecorators(widget, type, attrs, state) {
   return [];
 }
 
+const _customSettings = {};
+export function changeSetting(widgetName, settingName, newValue) {
+  _customSettings[widgetName] = _customSettings[widgetName] || {};
+  _customSettings[widgetName][settingName] = newValue;
+}
+
 function drawWidget(builder, attrs, state) {
   const properties = {};
 
@@ -113,6 +119,13 @@ export default class Widget {
     this.currentUser = container.lookup('current-user:main');
     this.store = container.lookup('store:main');
     this.appEvents = container.lookup('app-events:main');
+
+    if (this.name) {
+      const custom = _customSettings[this.name];
+      if (custom) {
+        Object.keys(custom).forEach(k => this.settings[k] = custom[k]);
+      }
+    }
   }
 
   defaultState() {

test/javascripts/widgets/widget-test.js.es6

@@ -1,5 +1,6 @@
 import { moduleForWidget, widgetTest } from 'helpers/widget-test';
-import { decorateWidget, createWidget } from 'discourse/widgets/widget';
+import { createWidget } from 'discourse/widgets/widget';
+import { withPluginApi } from 'discourse/lib/plugin-api';
 
 moduleForWidget('base');
 
@@ -177,12 +178,14 @@ widgetTest('widget decorating', {
       },
     });
 
-    decorateWidget('decorate-test:before', dec => {
-      return dec.h('b', 'before');
-    });
+    withPluginApi('0.1', api => {
+      api.decorateWidget('decorate-test:before', dec => {
+        return dec.h('b', 'before');
+      });
 
-    decorateWidget('decorate-test:after', dec => {
-      return dec.h('i', 'after');
+      api.decorateWidget('decorate-test:after', dec => {
+        return dec.h('i', 'after');
+      });
     });
   },
 
@@ -192,3 +195,51 @@ widgetTest('widget decorating', {
     assert.equal(this.$('.decorate i').text(), 'after');
   }
 });
+
+widgetTest('widget settings', {
+  template: `{{mount-widget widget="settings-test"}}`,
+
+  setup() {
+    createWidget('settings-test', {
+      tagName: 'div.settings',
+
+      settings: {
+        age: 36
+      },
+
+      html() {
+        return `age is ${this.settings.age}`;
+      },
+    });
+  },
+
+  test(assert) {
+    assert.equal(this.$('.settings').text(), 'age is 36');
+  }
+});
+
+widgetTest('override settings', {
+  template: `{{mount-widget widget="ov-settings-test"}}`,
+
+  setup() {
+    createWidget('ov-settings-test', {
+      tagName: 'div.settings',
+
+      settings: {
+        age: 36
+      },
+
+      html() {
+        return `age is ${this.settings.age}`;
+      },
+    });
+
+    withPluginApi('0.1', api => {
+      api.changeWidgetSetting('ov-settings-test', 'age', 37);
+    });
+  },
+
+  test(assert) {
+    assert.equal(this.$('.settings').text(), 'age is 37');
+  }
+});