From 65553d7b706855fbf9a9f929b64c681ad34f19f8 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 22 Feb 2016 14:09:53 -0500
Subject: [PATCH] Allow custom classes for any widget

---
 .../discourse/widgets/decorator-helper.js.es6 | 21 +++++++++++++++++++
 .../discourse/widgets/widget.js.es6           | 21 +++++++------------
 2 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/widgets/decorator-helper.js.es6

diff --git a/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6 b/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6
new file mode 100644
index 00000000000..c5b671f7f9b
--- /dev/null
+++ b/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6
@@ -0,0 +1,21 @@
+import Connector from 'discourse/widgets/connector';
+import { h } from 'virtual-dom';
+
+class DecoratorHelper {
+  constructor(widget, attrs, state) {
+    this.widget = widget;
+    this.attrs = attrs;
+    this.state = state;
+  }
+
+  connect(details) {
+    return new Connector(this.widget, details);
+  }
+
+  getModel() {
+    return this.widget.findAncestorModel();
+  }
+}
+DecoratorHelper.prototype.h = h;
+
+export default DecoratorHelper;
diff --git a/app/assets/javascripts/discourse/widgets/widget.js.es6 b/app/assets/javascripts/discourse/widgets/widget.js.es6
index 680a7b59458..7176de339b7 100644
--- a/app/assets/javascripts/discourse/widgets/widget.js.es6
+++ b/app/assets/javascripts/discourse/widgets/widget.js.es6
@@ -1,6 +1,6 @@
 import { WidgetClickHook, WidgetClickOutsideHook } from 'discourse/widgets/click-hook';
 import { h } from 'virtual-dom';
-import Connector from 'discourse/widgets/connector';
+import DecoratorHelper from 'discourse/widgets/decorator-helper';
 
 function emptyContent() { }
 
@@ -17,19 +17,6 @@ export function renderedKey(key) {
 
 const _decorators = {};
 
-class DecoratorHelper {
-  constructor(container, attrs, state) {
-    this.container = container;
-    this.attrs = attrs;
-    this.state = state;
-  }
-
-  connect(details) {
-    return new Connector(this.container, details);
-  }
-}
-DecoratorHelper.prototype.h = h;
-
 export function decorateWidget(widgetName, cb) {
   _decorators[widgetName] = _decorators[widgetName] || [];
   _decorators[widgetName].push(cb);
@@ -52,6 +39,12 @@ function drawWidget(builder, attrs, state) {
   if (this.buildClasses) {
     let classes = this.buildClasses(attrs, state) || [];
     if (!Array.isArray(classes)) { classes = [classes]; }
+
+    const customClasses = applyDecorators(this, 'classNames', attrs, state);
+    if (customClasses && customClasses.length) {
+      classes = classes.concat(customClasses);
+    }
+
     if (classes.length) {
       properties.className = classes.join(' ');
     }