Convert some TopicMap stuff to Ember components

app/assets/javascripts/discourse/components/toggle_best_of_component.js

@@ -0,0 +1,12 @@
+Discourse.DiscourseToggleBestOfComponent = Ember.Component.extend({
+  templateName: 'components/discourse-toggle-best-of',
+  tagName: 'section',
+  classNames: ['information'],
+  postStream: Em.computed.alias('topic.postStream'),
+
+  actions: {
+    toggleBestOf: function() {
+      this.get('postStream').toggleBestOf();
+    }
+  }
+});

app/assets/javascripts/discourse/controllers/topic_controller.js

@@ -184,7 +184,6 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
       this.get('content').toggleStar();
     },
 
-
     /**
       Clears the pin from a topic for the currently logged in user
 
@@ -221,7 +220,22 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
           }) + "\n\n" + q);
         });
       });
+    },
+
+    removeAllowedUser: function(username) {
+      var self = this;
+      bootbox.dialog(I18n.t("private_message_info.remove_allowed_user", {name: username}), [
+        {label: I18n.t("no_value"),
+         'class': 'btn-danger rightg'},
+        {label: I18n.t("yes_value"),
+         'class': 'btn-primary',
+          callback: function() {
+            self.get('details').removeAllowedUser(username);
           }
+        }
+      ]);
+    }
+
   },
 
   jumpTopDisabled: function() {
@@ -414,15 +428,6 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
     return false;
   },
 
-  clearFlags: function(actionType) {
-    actionType.clearFlags();
-  },
-
-  // Who acted on a particular post / action type
-  whoActed: function(actionType) {
-    actionType.loadUsers();
-  },
-
   recoverPost: function(post) {
     post.recover();
   },
@@ -473,21 +478,8 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
       }
       return true;
     }
-  },
+  }
 
-  removeAllowedUser: function(username) {
-    var self = this;
-    bootbox.dialog(I18n.t("private_message_info.remove_allowed_user", {name: username}), [
-      {label: I18n.t("no_value"),
-       'class': 'btn-danger rightg'},
-      {label: I18n.t("yes_value"),
-       'class': 'btn-primary',
-        callback: function() {
-          self.get('details').removeAllowedUser(username);
-        }
-      }
-    ]);
-  }
 
 });
 

app/assets/javascripts/discourse/templates/components/discourse-toggle-best-of.js.handlebars

@@ -0,0 +1,9 @@
+<h3><i class='icon icon-bullhorn'></i> {{i18n best_of.title}}</h3>
+
+{{#if postStream.bestOf}}
+  <p>{{{i18n best_of.enabled_description}}}</p>
+  <button class='btn' {{action toggleBestOf}}>{{i18n best_of.disable}}</button>
+{{else}}
+  <p>{{{i18n best_of.description count="topic.posts_count"}}}</p>
+  <button class='btn' {{action toggleBestOf}}>{{i18n best_of.enable}}</button>
+{{/if}}

app/assets/javascripts/discourse/templates/post.js.handlebars

@@ -68,9 +68,9 @@
         <div class='cooked'>{{{cooked}}}</div>
         {{view Discourse.PostMenuView postBinding="this" postViewBinding="view"}}
       </div>
-      {{view Discourse.RepliesView contentBinding="replies" postViewBinding="view"}}
-      {{view Discourse.ActionsHistoryView postBinding="this"}}
-      {{view Discourse.TopicMapView postBinding="this"}}
+      {{view Discourse.RepliesView content=replies postView=view}}
+      {{discourse-action-history post=this}}
+      {{view Discourse.TopicMapView post=this topic=controller.model}}
     </div>
 
     <div class='span5 gutter'>

app/assets/javascripts/discourse/templates/topic_map/best_of_toggle.js.handlebars

@@ -1,8 +0,0 @@
-<h3><i class='icon icon-bullhorn'></i> {{i18n best_of.title}}</h3>
-{{#if postStream.bestOf}}
-  <p>{{{i18n best_of.enabled_description}}}</p>
-  <button class='btn' {{action toggleBestOf target="postStream"}}>{{i18n best_of.disable}}</button>
-{{else}}
-  <p>{{{i18n best_of.description count="posts_count"}}}</p>
-  <button class='btn' {{action toggleBestOf target="postStream"}}>{{i18n best_of.enable}}</button>
-{{/if}}

app/assets/javascripts/discourse/views/actions_history_view.js

@@ -2,24 +2,24 @@
   This view handles rendering of what actions have been taken on a post. It uses
   buffer rendering for performance rather than a template.
 
-  @class ActionsHistoryView
+  @class ActionsHistoryComponent
   @extends Discourse.View
   @namespace Discourse
   @module Discourse
 **/
-Discourse.ActionsHistoryView = Discourse.View.extend({
+Discourse.ActionsHistoryComponent = Em.Component.extend({
   tagName: 'section',
   classNameBindings: [':post-actions', 'hidden'],
-  content: Em.computed.alias('post.actionsHistory'),
-  noContent: Em.computed.empty('content'),
-  hidden: Em.computed.and('noContent', 'post.notDeleted'),
-  shouldRerender: Discourse.View.renderIfChanged('content.@each', 'content.users.length', 'post.deleted'),
+  actionsHistory: Em.computed.alias('post.actionsHistory'),
+  emptyHistory: Em.computed.empty('actionsHistory'),
+  hidden: Em.computed.and('emptyHistory', 'post.notDeleted'),
+  shouldRerender: Discourse.View.renderIfChanged('actionsHistory.@each', 'actionsHistory.users.length', 'post.deleted'),
 
   // This was creating way too many bound ifs and subviews in the handlebars version.
   render: function(buffer) {
 
-    if (this.present('content')) {
-      this.get('content').forEach(function(c) {
+    if (!this.get('emptyHistory')) {
+      this.get('actionsHistory').forEach(function(c) {
         buffer.push("<div class='post-action'>");
 
         var renderActionIf = function(property, dataAttribute, text) {
@@ -69,7 +69,7 @@ Discourse.ActionsHistoryView = Discourse.View.extend({
   },
 
   actionTypeById: function(actionTypeId) {
-    return this.get('content').findProperty('id', actionTypeId);
+    return this.get('actionsHistory').findProperty('id', actionTypeId);
   },
 
   click: function(e) {
@@ -77,23 +77,23 @@ Discourse.ActionsHistoryView = Discourse.View.extend({
         actionTypeId;
 
     if (actionTypeId = $target.data('clear-flags')) {
-      this.get('controller').clearFlags(this.actionTypeById(actionTypeId));
+      this.actionTypeById(actionTypeId).clearFlags();
       return false;
     }
 
     // User wants to know who actioned it
     if (actionTypeId = $target.data('who-acted')) {
-      this.get('controller').whoActed(this.actionTypeById(actionTypeId));
+      this.actionTypeById(actionTypeId).loadUsers();
       return false;
     }
 
     if (actionTypeId = $target.data('act')) {
-      this.get('content').findProperty('id', actionTypeId).act();
+      this.get('actionsHistory').findProperty('id', actionTypeId).act();
       return false;
     }
 
     if (actionTypeId = $target.data('undo')) {
-      this.get('content').findProperty('id', actionTypeId).undo();
+      this.get('actionsHistory').findProperty('id', actionTypeId).undo();
       return false;
     }
 
@@ -102,3 +102,4 @@ Discourse.ActionsHistoryView = Discourse.View.extend({
 });
 
 
+Discourse.View.registerHelper('discourse-action-history', Discourse.ActionsHistoryComponent);

app/assets/javascripts/discourse/views/topic_map/topic_map_view.js

@@ -1,20 +1,21 @@
 /**
-  This view handles rendering of the summary of the topic under the first post
+  This view handles rendering of the map of the topic under the first post
 
   @class TopicMapView
   @extends Discourse.View
   @namespace Discourse
   @module Discourse
 **/
-Discourse.TopicMapView = Discourse.ContainerView.extend({
-  classNameBindings: ['hidden', ':topic-summary'],
-  allLinksShown: false,
 
-  topic: Em.computed.alias('controller.model'),
+var LINKS_SHOWN = 5;
+
+Discourse.TopicMapView = Discourse.ContainerView.extend({
+  classNameBindings: ['hidden', ':topic-map'],
+  allLinksShown: false,
 
   showAllLinksControls: function() {
     if (this.get('allLinksShown')) return false;
-    if ((this.get('topic.details.links.length') || 0) <= Discourse.TopicMapView.LINKS_SHOWN) return false;
+    if ((this.get('topic.details.links.length') || 0) <= LINKS_SHOWN) return false;
     return true;
   }.property('allLinksShown', 'topic.details.links'),
 
@@ -23,16 +24,18 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({
 
     var allLinks = this.get('topic.details.links');
     if (this.get('allLinksShown')) return allLinks;
-    return allLinks.slice(0, Discourse.TopicMapView.LINKS_SHOWN);
+    return allLinks.slice(0, LINKS_SHOWN);
   }.property('topic.details.links', 'allLinksShown'),
 
   shouldRerender: Discourse.View.renderIfChanged('topic.posts_count'),
 
   hidden: function() {
     if (!this.get('post.firstPost')) return true;
-    if (this.get('controller.content.archetype') === 'private_message') return false;
-    if (this.get('controller.content.archetype') !== 'regular') return true;
-    return this.get('controller.content.posts_count') < 2;
+
+    var topic = this.get('topic');
+    if (topic.get('archetype') === 'private_message') return false;
+    if (topic.get('archetype') !== 'regular') return true;
+    return topic.get('posts_count') < 2;
   }.property(),
 
   init: function() {
@@ -44,23 +47,22 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({
       content: this.get('controller')
     }, Discourse.GroupedView);
 
-    this.trigger('appendSummaryInformation', this);
+    this.trigger('appendMapInformation', this);
   },
 
+  actions: {
     showAllLinks: function() {
       this.set('allLinksShown', true);
     },
+  },
 
-  appendSummaryInformation: function(container) {
+  appendMapInformation: function(container) {
 
-    // If we have a best of view
-    if (this.get('controller.has_best_of')) {
-      container.attachViewWithArgs({
-        templateName: 'topic_map/best_of_toggle',
-        tagName: 'section',
-        classNames: ['information'],
-        content: this.get('controller')
-      }, Discourse.GroupedView);
+    var topic = this.get('topic');
+
+    // If we have a best of capability
+    if (topic.get('has_best_of')) {
+      container.attachViewWithArgs({ topic: topic }, Discourse.DiscourseToggleBestOfComponent);
     }
 
     // If we have a private message
@@ -75,6 +77,3 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({
   }
 });
 
-Discourse.TopicMapView.reopenClass({
-  LINKS_SHOWN: 5
-});

app/assets/stylesheets/desktop/topic-post.scss

@@ -211,7 +211,7 @@ a.star {
   text-shadow: none !important;
 }
 
-.topic-summary {
+.topic-map {
   margin: 20px 0 0 0;
   border: 1px solid #ddd;
 

app/assets/stylesheets/mobile/topic-post.scss

@@ -126,7 +126,7 @@ a.star {
 	text-shadow: none !important;
 }
 
-.topic-summary {
+.topic-map {
 
   .btn {
     border-radius: 0 4px 0 4px;