Moved more into components, including summary stuff.

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

@@ -1,3 +1,11 @@
+/**
+  The controls at the top of a private message in the map area.
+
+  @class DiscoursePrivateMessageMapComponent
+  @extends Ember.Component
+  @namespace Discourse
+  @module Discourse
+**/
 Discourse.DiscoursePrivateMessageMapComponent = Ember.Component.extend({
   templateName: 'components/discourse-private-message-map',
   tagName: 'section',

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

@@ -1,3 +1,11 @@
+/**
+  The controls for toggling the summarized view on/off
+
+  @class DiscourseToggleBestOfComponent
+  @extends Ember.Component
+  @namespace Discourse
+  @module Discourse
+**/
 Discourse.DiscourseToggleBestOfComponent = Ember.Component.extend({
   templateName: 'components/discourse-toggle-best-of',
   tagName: 'section',

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

@@ -0,0 +1,45 @@
+/**
+  The information that sits in the topic map.
+
+  @class DiscourseTopicInformationComponent
+  @extends Ember.Component
+  @namespace Discourse
+  @module Discourse
+**/
+
+var LINKS_SHOWN = 5;
+
+Discourse.DiscourseTopicInformationComponent = Ember.Component.extend({
+  mapCollapsed: true,
+  templateName: 'components/discourse-topic-information',
+  details: Em.computed.alias('topic.details'),
+  allLinksShown: false,
+
+  toggleMapClass: function() {
+    return this.get('mapCollapsed') ? 'icon-chevron-down' : 'icon-chevron-up';
+  }.property('mapCollapsed'),
+
+  showAllLinksControls: function() {
+    if (this.get('allLinksShown')) return false;
+    if ((this.get('details.links.length') || 0) <= LINKS_SHOWN) return false;
+    return true;
+  }.property('allLinksShown', 'topic.details.links'),
+
+  infoLinks: function() {
+    if (Em.isNone('details.links')) return [];
+
+    var allLinks = this.get('details.links');
+    if (this.get('allLinksShown')) return allLinks;
+    return allLinks.slice(0, LINKS_SHOWN);
+  }.property('details.links', 'allLinksShown'),
+
+  actions: {
+    toggleMap: function() {
+      this.toggleProperty('mapCollapsed');
+    },
+
+    showAllLinks: function() {
+      this.set('allLinksShown', true);
+    }
+  }
+});

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

@@ -0,0 +1,17 @@
+Discourse.DiscourseTopicParticipantComponent = Ember.Component.extend({
+
+  postStream: Em.computed.alias('participant.topic.postStream'),
+
+  toggled: function() {
+    return this.get('postStream.userFilters').contains(this.get('participant.username'));
+  }.property('postStream.userFilters.[]'),
+
+  actions: {
+    toggle: function() {
+      var postStream = this.get('postStream');
+      if (postStream) {
+        postStream.toggleParticipant(this.get('participant.username'));
+      }
+    }
+  }
+});

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

@@ -8,7 +8,6 @@
 **/
 Discourse.TopicController = Discourse.ObjectController.extend(Discourse.SelectedPostsCount, {
   multiSelect: false,
-  summaryCollapsed: true,
   needs: ['header', 'modal', 'composer', 'quoteButton'],
   allPostsSelected: false,
   editingTopic: false,
@@ -30,10 +29,6 @@ Discourse.TopicController = Discourse.ObjectController.extend(Discourse.Selected
       Discourse.URL.routeTo(this.get('lastPostUrl'));
     },
 
-    toggleSummary: function() {
-      this.toggleProperty('summaryCollapsed');
-    },
-
     selectAll: function() {
       var posts = this.get('postStream.posts');
       var selectedPosts = this.get('selectedPosts');

app/assets/javascripts/discourse/models/topic_details.js

@@ -23,6 +23,14 @@ Discourse.TopicDetails = Discourse.Model.extend({
       });
     }
 
+    if (details.participants) {
+      var topic = this.get('topic');
+      details.participants = details.participants.map(function (p) {
+        p.topic = topic;
+        return Em.Object.create(p);
+      });
+    }
+
     this.setProperties(details);
     this.set('loaded', true);
   },

app/assets/javascripts/discourse/templates/components/discourse-topic-information.js.handlebars

@@ -0,0 +1,68 @@
+<nav class='buttons'>
+  <button class='btn' {{action toggleMap}} title="{{i18n topic.toggle_information}}">
+    <i {{bindAttr class=":icon toggleMapClass"}}></i>
+  </button>
+</nav>
+
+<section class='map collapsed'>
+  <ul class="clearfix">
+    <li>
+      <a href='{{unbound topic.url}}'>
+      <h4>{{i18n created}}</h4>
+      {{avatar details.created_by imageSize="tiny"}}
+      {{date topic.created_at}}
+      </a>
+    </li>
+    <li>
+      <a {{bindAttr href="topic.lastPostUrl"}}>
+      <h4>{{i18n last_post}}</h4>
+      {{avatar details.last_poster imageSize="tiny"}}
+      {{date topic.last_posted_at}}
+      </a>
+    </li>
+    <li>
+      <h4>{{i18n posts}}</h4>
+      {{number topic.posts_count}}
+    </li>
+    <li>
+      <h4>{{i18n views}}</h4>
+      {{number topic.views}}
+    </li>
+    <li>
+      <h4>{{i18n links}}</h4>
+      {{number details.links.length}}
+    </li>
+    <li {{bindAttr class=":avatars mapCollapsed::hidden"}}>
+      {{#groupedEach participant in details.fewParticipants}}{{discourse-topic-participant participant=participant}}{{/groupedEach}}
+    </li>
+  </ul>
+</section>
+
+{{#unless mapCollapsed}}
+  <section class='avatars clearfix'>
+    {{#groupedEach participant in details.participants}}{{discourse-topic-participant participant=participant}}{{/groupedEach}}
+  </section>
+
+  {{#if infoLinks}}
+    <section class='links'>
+        <ul class='topic-links'>
+          {{#groupedEach infoLinks}}
+            <li>
+              <span class='badge badge-notification clicks' title='{{i18n topic_map.clicks}}'>{{clicks}}</span>
+              <a href="{{unbound url}}" target="_blank" class='topic-link track-link' data-user-id="{{unbound user_id}}" data-ignore-post-id="true" title="{{unbound url}}">
+                {{#if title}}{{shorten title}}{{else}}{{shortenUrl url}}{{/if}}
+                {{#if internal}}<i class='icon-arrow-right' title='{{i18n topic_map.topic_link}}'></i>{{/if}}
+              </a>
+            </li>
+          {{/groupedEach}}
+        </ul>
+
+        {{#if showAllLinksControls}}
+          <div class='link-summary'>
+            <a href='#' {{action showAllLinks}}>{{i18n topic_map.links_shown totalLinks="details.links.length"}}</a>
+          </div>
+        {{/if}}
+
+    </section>
+  {{/if}}
+{{/unless}}

app/assets/javascripts/discourse/templates/components/discourse-topic-participant.js.handlebars

@@ -0,0 +1,4 @@
+<a href='#' {{bindAttr class=":poster toggled"}} {{action toggle}} title="{{unbound participant.username}}">
+  <span class='post-count'>{{unbound participant.post_count}}</span>
+  {{avatar participant imageSize="medium"}}
+</a>

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

@@ -1,4 +0,0 @@
-<a href='#' {{bindAttr class=":poster view.toggled:toggled"}} {{action toggleParticipant this}} title="{{unbound username}}">
-  <span class='post-count'>{{unbound post_count}}</span>
-  {{avatar this imageSize="medium"}}
-</a>

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

@@ -1,105 +0,0 @@
-<nav class='buttons'>
-  {{#if summaryCollapsed}}
-    <button class='btn collapsed' {{action toggleSummary}} title="{{i18n topic.toggle_information}}">
-      <i class='icon icon-chevron-down'></i>
-    </button>
-    {{else}}
-    <button class='btn' {{action toggleSummary}} title="{{i18n topic.toggle_information}}">
-      <i class='icon icon-chevron-up'></i>
-    </button>
-  {{/if}}
-</nav>
-
-{{#if summaryCollapsed}}
-  <section class='summary collapsed'>
-    <ul class="clearfix">
-      <li>
-        <a {{bindAttr href="url"}}>
-        <h4>{{i18n created}}</h4>
-        {{avatar details.created_by imageSize="tiny"}}
-        {{date created_at}}
-        </a>
-      </li>
-      <li>
-        <a {{bindAttr href="lastPostUrl"}}>
-        <h4>{{i18n last_post}}</h4>
-        {{avatar details.last_poster imageSize="tiny"}}
-        {{date last_posted_at}}
-        </a>
-      </li>
-      <li>
-        <h4>{{i18n posts}}</h4>
-        {{number posts_count}}
-      </li>
-      <li>
-        <h4>{{i18n views}}</h4>
-        {{number views}}
-      </li>
-      <li>
-        <h4>{{i18n links}}</h4>
-        {{number details.links.length}}
-      </li>
-      {{#if details.fewParticipants}}
-      <li class='avatars'>
-        {{#groupedEach details.fewParticipants}}{{participant participant=this}}{{/groupedEach}}
-      </li>
-      {{/if}}
-    </ul>
-  </section>
-{{else}}
-
-  <section class='summary'>
-    <ul class="clearfix">
-      <li>
-        <h4>{{i18n created}}</h4>
-        {{avatar details.created_by imageSize="tiny"}}
-        <a {{bindAttr href="url"}}>{{date created_at}}</a>
-      </li>
-      <li>
-        <h4>{{i18n last_post}}</h4>
-        {{avatar details.last_poster imageSize="tiny"}}
-        <a {{bindAttr href="lastPostUrl"}}>{{date last_posted_at}}</a>
-      </li>
-      <li>
-        <h4>{{i18n posts}}</h4>
-        {{number posts_count}}
-      </li>
-      <li>
-        <h4>{{i18n views}}</h4>
-        {{number views}}
-      </li>
-    </ul>
-  </section>
-
-  {{#if details.participants}}
-    <section class='avatars clearfix'>
-      {{#groupedEach details.participants}}{{participant participant=this}}{{/groupedEach}}
-    </section>
-  {{/if}}
-
-  {{#if view.parentView.infoLinks}}
-    <section class='links'>
-        <ul class='topic-links'>
-          {{#groupedEach view.parentView.infoLinks}}
-            <li>
-              <span class='badge badge-notification clicks' title='{{i18n topic_map.clicks}}'>{{clicks}}</span>
-              <a href="{{unbound url}}" target="_blank" class='topic-link track-link' data-user-id="{{unbound user_id}}" data-ignore-post-id="true" title="{{unbound url}}">
-                {{#if title}}{{shorten title}}{{else}}{{shortenUrl url}}{{/if}}
-                {{#if internal}}<i class='icon-arrow-right' title='{{i18n topic_map.topic_link}}'></i>{{/if}}
-              </a>
-            </li>
-          {{/groupedEach}}
-        </ul>
-
-        {{#if view.parentView.showAllLinksControls}}
-          <div class='link-summary'>
-            <a href='#' {{action showAllLinks target="view.parentView"}}>{{i18n topic_map.links_shown totalLinks="details.links.length"}}</a>
-          </div>
-        {{/if}}
-
-    </section>
-  {{/if}}
-
-
-
-{{/if}}

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

@@ -1,19 +0,0 @@
-/**
-  This view renders a participant in a topic
-
-  @class ParticipantView
-  @extends Discourse.View
-  @namespace Discourse
-  @module Discourse
-**/
-Discourse.ParticipantView = Discourse.View.extend({
-  templateName: 'participant',
-
-  toggled: function() {
-    return this.get('controller.postStream.userFilters').contains(this.get('participant.username'));
-  }.property('controller.postStream.userFilters.[]')
-
-});
-
-
-Discourse.View.registerHelper('participant', Discourse.ParticipantView);

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

@@ -6,27 +6,8 @@
   @namespace Discourse
   @module Discourse
 **/
-
-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) <= LINKS_SHOWN) return false;
-    return true;
-  }.property('allLinksShown', 'topic.details.links'),
-
-  infoLinks: function() {
-    if (this.blank('topic.details.links')) return [];
-
-    var allLinks = this.get('topic.details.links');
-    if (this.get('allLinksShown')) return allLinks;
-    return allLinks.slice(0, LINKS_SHOWN);
-  }.property('topic.details.links', 'allLinksShown'),
-
   shouldRerender: Discourse.View.renderIfChanged('topic.posts_count'),
 
   hidden: function() {
@@ -42,20 +23,10 @@ Discourse.TopicMapView = Discourse.ContainerView.extend({
     this._super();
     if (this.get('hidden')) return;
 
-    this.attachViewWithArgs({
+    this.attachViewWithArgs({ topic: this.get('topic') }, Discourse.DiscourseTopicInformationComponent);
-      templateName: 'topic_map/info',
-      content: this.get('controller')
-    }, Discourse.GroupedView);
-
     this.trigger('appendMapInformation', this);
   },
 
-  actions: {
-    showAllLinks: function() {
-      this.set('allLinksShown', true);
-    },
-  },
-
   appendMapInformation: function(container) {
     var topic = this.get('topic');
 

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

@@ -267,7 +267,7 @@ a.star {
     margin-right: 4px;
   }
 
-  .summary {
+  .map {
     &.collapsed {
     }
     li {

app/assets/stylesheets/desktop/user.scss

@@ -64,7 +64,7 @@
     margin: 20px 0 10px 0;
   }
 
-  .summary {
+  .map {
     height: 50px;
   }
   .avatar {

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

@@ -186,7 +186,7 @@ a.star {
     margin-right: 4px;
   }
 
-  .summary {
+  .map {
     &.collapsed {
     }
     li {

app/assets/stylesheets/mobile/user.scss

@@ -61,7 +61,7 @@
     border-left: 0;
     border-right: 0;
   }
-  .summary {
+  .map {
     height: 50px;
   }
   .avatar {