From cb14ab7a14b08310bb87120f02ec0419efedef72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Fri, 27 Mar 2015 16:56:42 +0100
Subject: [PATCH] FEATURE: add archetype class to body

---
 .../mixins/add-archetype-class.js.es6         | 23 +++++++++++++++++++
 .../mixins/add-category-class.js.es6          |  4 ++--
 .../javascripts/discourse/views/topic.js.es6  |  5 +++-
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6

diff --git a/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6 b/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6
new file mode 100644
index 00000000000..f69a5b38df9
--- /dev/null
+++ b/app/assets/javascripts/discourse/mixins/add-archetype-class.js.es6
@@ -0,0 +1,23 @@
+// Mix this in to a view that has a `archetype` property to automatically
+// add it to the body as the view is entered / left / model is changed.
+// This is used for keeping the `body` style in sync for the background image.
+export default {
+  _enterView: function() { this.get('archetype'); }.on('init'),
+
+  _removeClasses() {
+    $('body').removeClass(function(idx, css) {
+      return (css.match(/\barchetype-\S+/g) || []).join(' ');
+    });
+  },
+
+  _categoryChanged: function() {
+    const archetype = this.get('archetype');
+    this._removeClasses();
+
+    if (archetype) {
+      $('body').addClass('archetype-' + archetype);
+    }
+  }.observes('archetype'),
+
+  _leaveView: function() { this._removeClasses(); }.on('willDestroyElement')
+};
diff --git a/app/assets/javascripts/discourse/mixins/add-category-class.js.es6 b/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
index 25f50ba2825..3e94f12b87a 100644
--- a/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
+++ b/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
@@ -4,14 +4,14 @@
 export default {
   _enterView: function() { this.get('categoryFullSlug'); }.on('init'),
 
-  _removeClasses: function() {
+  _removeClasses() {
     $('body').removeClass(function(idx, css) {
       return (css.match(/\bcategory-\S+/g) || []).join(' ');
     });
   },
 
   _categoryChanged: function() {
-    var categoryFullSlug = this.get('categoryFullSlug');
+    const categoryFullSlug = this.get('categoryFullSlug');
     this._removeClasses();
 
     if (categoryFullSlug) {
diff --git a/app/assets/javascripts/discourse/views/topic.js.es6 b/app/assets/javascripts/discourse/views/topic.js.es6
index 1050dc5a32f..fca59cf4f99 100644
--- a/app/assets/javascripts/discourse/views/topic.js.es6
+++ b/app/assets/javascripts/discourse/views/topic.js.es6
@@ -1,8 +1,9 @@
 import AddCategoryClass from 'discourse/mixins/add-category-class';
+import AddArchetypeClass from 'discourse/mixins/add-archetype-class';
 import { listenForViewEvent } from 'discourse/lib/app-events';
 import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 
-var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
+var TopicView = Discourse.View.extend(AddCategoryClass, AddArchetypeClass, Discourse.Scrolling, {
   templateName: 'topic',
   topicBinding: 'controller.model',
   userFiltersBinding: 'controller.userFilters',
@@ -19,6 +20,8 @@ var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
 
   postStream: Em.computed.alias('controller.postStream'),
 
+  archetype: Em.computed.alias('topic.archetype'),
+
   _composeChanged: function() {
     var composerController = Discourse.get('router.composerController');
     composerController.clearState();