From 039acd6eade3bb17b27696529bb8ac85ef2ea023 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Fri, 15 Nov 2013 13:30:24 -0500 Subject: [PATCH] Convert some TopicMap stuff to Ember components --- .../components/toggle_best_of_component.js | 12 +++++ .../discourse/controllers/topic_controller.js | 40 ++++++--------- .../discourse-toggle-best-of.js.handlebars | 9 ++++ .../discourse/templates/post.js.handlebars | 6 +-- .../topic_map/best_of_toggle.js.handlebars | 8 --- .../discourse/views/actions_history_view.js | 27 +++++----- .../views/topic_map/topic_map_view.js | 49 +++++++++---------- .../stylesheets/desktop/topic-post.scss | 4 +- app/assets/stylesheets/mobile/topic-post.scss | 2 +- 9 files changed, 81 insertions(+), 76 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/toggle_best_of_component.js create mode 100644 app/assets/javascripts/discourse/templates/components/discourse-toggle-best-of.js.handlebars delete mode 100644 app/assets/javascripts/discourse/templates/topic_map/best_of_toggle.js.handlebars diff --git a/app/assets/javascripts/discourse/components/toggle_best_of_component.js b/app/assets/javascripts/discourse/components/toggle_best_of_component.js new file mode 100644 index 000000000..12b9ec9df --- /dev/null +++ b/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(); + } + } +}); diff --git a/app/assets/javascripts/discourse/controllers/topic_controller.js b/app/assets/javascripts/discourse/controllers/topic_controller.js index 4fc599b78..837a44106 100644 --- a/app/assets/javascripts/discourse/controllers/topic_controller.js +++ b/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,22 +478,9 @@ 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); - } - } - ]); } + }); diff --git a/app/assets/javascripts/discourse/templates/components/discourse-toggle-best-of.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-toggle-best-of.js.handlebars new file mode 100644 index 000000000..eb81f17af --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/discourse-toggle-best-of.js.handlebars @@ -0,0 +1,9 @@ +

{{i18n best_of.title}}

+ +{{#if postStream.bestOf}} +

{{{i18n best_of.enabled_description}}}

+ +{{else}} +

{{{i18n best_of.description count="topic.posts_count"}}}

+ +{{/if}} diff --git a/app/assets/javascripts/discourse/templates/post.js.handlebars b/app/assets/javascripts/discourse/templates/post.js.handlebars index 319d57040..6f8c65c10 100644 --- a/app/assets/javascripts/discourse/templates/post.js.handlebars +++ b/app/assets/javascripts/discourse/templates/post.js.handlebars @@ -68,9 +68,9 @@
{{{cooked}}}
{{view Discourse.PostMenuView postBinding="this" postViewBinding="view"}} - {{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}}
diff --git a/app/assets/javascripts/discourse/templates/topic_map/best_of_toggle.js.handlebars b/app/assets/javascripts/discourse/templates/topic_map/best_of_toggle.js.handlebars deleted file mode 100644 index 1d6937810..000000000 --- a/app/assets/javascripts/discourse/templates/topic_map/best_of_toggle.js.handlebars +++ /dev/null @@ -1,8 +0,0 @@ -

{{i18n best_of.title}}

-{{#if postStream.bestOf}} -

{{{i18n best_of.enabled_description}}}

- -{{else}} -

{{{i18n best_of.description count="posts_count"}}}

- -{{/if}} diff --git a/app/assets/javascripts/discourse/views/actions_history_view.js b/app/assets/javascripts/discourse/views/actions_history_view.js index 6bf5ec8c2..5e3053478 100644 --- a/app/assets/javascripts/discourse/views/actions_history_view.js +++ b/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("
"); 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); \ No newline at end of file diff --git a/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js b/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js index fa457427b..815e28951 100644 --- a/app/assets/javascripts/discourse/views/topic_map/topic_map_view.js +++ b/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); }, - showAllLinks: function() { - this.set('allLinksShown', true); + 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 -}); diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index cc15c5e59..42ce66089 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/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; @@ -602,7 +602,7 @@ blockquote { /* solo quotes */ blockquote {margin-top: 0; padding-top: 0; .onebox-result {background-color: #ddd;} - + } .title { diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 84c7e65b0..cfc6b71b3 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/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;