From 75f6b43e62966d600a0b0c7fc31ea94d4dba6efa Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Fri, 18 Jul 2014 12:19:47 -0400 Subject: [PATCH] ES6: Discourse.ContainerView --- .../discourse/components/color-picker.js.es6 | 4 +- .../discourse/views/archetype-options.js.es6 | 4 +- .../{container_view.js => container.js.es6} | 11 +--- .../discourse/views/pagedown-editor.js.es6 | 11 +--- .../views/topic-footer-buttons.js.es6 | 3 +- .../views/topic-map-container.js.es6 | 12 +---- app/assets/javascripts/main_include.js | 4 +- test/javascripts/views/container_view_test.js | 50 +++++++++---------- 8 files changed, 40 insertions(+), 59 deletions(-) rename app/assets/javascripts/discourse/views/{container_view.js => container.js.es6} (72%) diff --git a/app/assets/javascripts/discourse/components/color-picker.js.es6 b/app/assets/javascripts/discourse/components/color-picker.js.es6 index ffb118b31c2..519bf2aa967 100644 --- a/app/assets/javascripts/discourse/components/color-picker.js.es6 +++ b/app/assets/javascripts/discourse/components/color-picker.js.es6 @@ -1,4 +1,6 @@ -export default Discourse.ContainerView.extend({ +import DiscourseContainerView from 'discourse/views/container'; + +export default DiscourseContainerView.extend({ classNames: 'colors-container', _createButtons: function() { diff --git a/app/assets/javascripts/discourse/views/archetype-options.js.es6 b/app/assets/javascripts/discourse/views/archetype-options.js.es6 index 2f31d6f47b7..8cf0c4bd346 100644 --- a/app/assets/javascripts/discourse/views/archetype-options.js.es6 +++ b/app/assets/javascripts/discourse/views/archetype-options.js.es6 @@ -1,4 +1,6 @@ -export default Discourse.ContainerView.extend({ +import DiscourseContainerView from 'discourse/views/container'; + +export default DiscourseContainerView.extend({ metaDataBinding: 'parentView.metaData', init: function() { diff --git a/app/assets/javascripts/discourse/views/container_view.js b/app/assets/javascripts/discourse/views/container.js.es6 similarity index 72% rename from app/assets/javascripts/discourse/views/container_view.js rename to app/assets/javascripts/discourse/views/container.js.es6 index df3752de743..f538c902100 100644 --- a/app/assets/javascripts/discourse/views/container_view.js +++ b/app/assets/javascripts/discourse/views/container.js.es6 @@ -1,13 +1,4 @@ -/** - Our own containerView with a helper method for attaching views - - @class ContainerView - @extends Ember.ContainerView - @namespace Discourse - @uses Discourse.Presence - @module Discourse -**/ -Discourse.ContainerView = Ember.ContainerView.extend(Discourse.Presence, { +export default Ember.ContainerView.extend(Discourse.Presence, { /** Attaches a view and wires up the container properly diff --git a/app/assets/javascripts/discourse/views/pagedown-editor.js.es6 b/app/assets/javascripts/discourse/views/pagedown-editor.js.es6 index 3fe2c3d6275..207148d6914 100644 --- a/app/assets/javascripts/discourse/views/pagedown-editor.js.es6 +++ b/app/assets/javascripts/discourse/views/pagedown-editor.js.es6 @@ -1,16 +1,9 @@ /*global assetPath:true */ -/** - A control to support using PageDown as an Ember view. - - @class PagedownEditor - @extends Discourse.ContainerView - @namespace Discourse - @module Discourse -**/ import PagedownPreviewView from 'discourse/views/pagedown-preview'; +import DiscourseContainerView from 'discourse/views/container'; -export default Discourse.ContainerView.extend({ +export default DiscourseContainerView.extend({ elementId: 'pagedown-editor', init: function() { diff --git a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 index c985e78f51a..768b5eef65d 100644 --- a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 +++ b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 @@ -6,8 +6,9 @@ import InviteReplyButton from 'discourse/views/invite-reply-button'; import ReplyButton from 'discourse/views/reply-button'; import PinnedButton from 'discourse/views/pinned-button'; import TopicNotificationsButton from 'discourse/views/topic-notifications-button'; +import DiscourseContainerView from 'discourse/views/container'; -export default Discourse.ContainerView.extend({ +export default DiscourseContainerView.extend({ elementId: 'topic-footer-buttons', topicBinding: 'controller.content', diff --git a/app/assets/javascripts/discourse/views/topic-map-container.js.es6 b/app/assets/javascripts/discourse/views/topic-map-container.js.es6 index 2f70b05cb3d..b6b85d3cc83 100644 --- a/app/assets/javascripts/discourse/views/topic-map-container.js.es6 +++ b/app/assets/javascripts/discourse/views/topic-map-container.js.es6 @@ -1,18 +1,10 @@ -/** - This view contains the topic map as well as other relevant information underneath the - first post. - - @class TopicMapContainerView - @extends Discourse.View - @namespace Discourse - @module Discourse -**/ import PrivateMessageMapComponent from 'discourse/components/private-message-map'; import TopicMapComponent from 'discourse/components/topic-map'; import ToggleSummaryComponent from 'discourse/components/toggle-summary'; import ToggleDeletedComponent from 'discourse/components/toggle-deleted'; +import DiscourseContainerView from 'discourse/views/container'; -export default Discourse.ContainerView.extend({ +export default DiscourseContainerView.extend({ classNameBindings: ['hidden', ':topic-map'], shouldRerender: Discourse.View.renderIfChanged('topic.posts_count'), diff --git a/app/assets/javascripts/main_include.js b/app/assets/javascripts/main_include.js index d90e3cdc031..2b2423e2917 100644 --- a/app/assets/javascripts/main_include.js +++ b/app/assets/javascripts/main_include.js @@ -13,7 +13,7 @@ //= require ./discourse/lib/markdown //= require ./discourse/lib/computed //= require ./discourse/views/view -//= require ./discourse/views/container_view +//= require ./discourse/views/container //= require ./discourse/lib/debounce //= require ./discourse/models/model //= require ./discourse/models/user_action @@ -23,7 +23,7 @@ //= require ./discourse/controllers/object_controller //= require ./discourse/controllers/navigation/default //= require ./discourse/views/text-field -//= require ./discourse/views/modal/modal_body_view +//= require ./discourse/views/modal_body_view //= require ./discourse/views/flag //= require ./discourse/views/combo-box //= require ./discourse/views/button diff --git a/test/javascripts/views/container_view_test.js b/test/javascripts/views/container_view_test.js index a03dd89370a..6a8093bc08a 100644 --- a/test/javascripts/views/container_view_test.js +++ b/test/javascripts/views/container_view_test.js @@ -1,53 +1,53 @@ -var SomeViewClass = Ember.View.extend(); -var container = Discourse.ContainerView.create(); +var SomeViewClass = Ember.View.extend(), + containerView; -var containerHasOnlyOneChild = function(klass) { - equal(container.get('childViews').length, 1, "container has no other children than the one created by method"); - ok(container.objectAt(0) instanceof klass, "container's child created by method is an instance of a correct class"); -}; +function containerHasOnlyOneChild(klass) { + equal(containerView.get('childViews').length, 1, "container has no other children than the one created by method"); + ok(containerView.objectAt(0) instanceof klass, "container's child created by method is an instance of a correct class"); +} -var containerHasTwoChildren = function(klass1, klass2) { - equal(container.get('childViews').length, 2, "container has both already existing and newly created children"); - ok(container.objectAt(0) instanceof klass1, "already existing child's class is correct"); - ok(container.objectAt(1) instanceof klass2, "newly created child's class is correct"); -}; +function containerHasTwoChildren(klass1, klass2) { + equal(containerView.get('childViews').length, 2, "container has both already existing and newly created children"); + ok(containerView.objectAt(0) instanceof klass1, "already existing child's class is correct"); + ok(containerView.objectAt(1) instanceof klass2, "newly created child's class is correct"); +} var childHasProperty = function(name) { - equal(container.objectAt(0).get(name), name, "method passes properties to the container's child it creates"); + equal(containerView.objectAt(0).get(name), name, "method passes properties to the container's child it creates"); }; -module("Discourse.ContainerView", { +module("view:container", { setup: function() { - container.removeAllChildren(); + containerView = Discourse.__container__.lookup('view:container'); } }); test("mixes in Discourse.Presence", function() { - ok(Discourse.Presence.detect(container)); + ok(Discourse.Presence.detect(containerView)); }); test("attachViewWithArgs: creates a view of a given class with given properties and appends it to the container", function() { - container.attachViewWithArgs({foo: "foo"}, SomeViewClass); + containerView.attachViewWithArgs({foo: "foo"}, SomeViewClass); containerHasOnlyOneChild(SomeViewClass); childHasProperty("foo"); }); test("attachViewWithArgs: creates a view of a given class without any properties and appends it to the container", function() { - container.attachViewWithArgs(null, SomeViewClass); + containerView.attachViewWithArgs(null, SomeViewClass); containerHasOnlyOneChild(SomeViewClass); }); test("attachViewWithArgs: creates a view without class specified (Ember.View is used by default) with given properties and appends it to the container", function() { - container.attachViewWithArgs({foo: "foo"}); + containerView.attachViewWithArgs({foo: "foo"}); containerHasOnlyOneChild(Ember.View); childHasProperty("foo"); }); test("attachViewWithArgs: creates a view without class specified (Ember.View is used by default) without any properties and appends it to the container", function() { - container.attachViewWithArgs(); + containerView.attachViewWithArgs(); containerHasOnlyOneChild(Ember.View); }); @@ -55,21 +55,21 @@ test("attachViewWithArgs: creates a view without class specified (Ember.View is test("attachViewWithArgs: appends a view to a container already containing other views", function() { var AlreadyContainedViewClass = Ember.View.extend(); var alreadyContainedView = AlreadyContainedViewClass.create(); - container.pushObject(alreadyContainedView); + containerView.pushObject(alreadyContainedView); - container.attachViewWithArgs(null, SomeViewClass); + containerView.attachViewWithArgs(null, SomeViewClass); containerHasTwoChildren(AlreadyContainedViewClass, SomeViewClass); }); test("attachViewClass: creates a view of a given class without any properties and appends it to the container", function() { - container.attachViewClass(SomeViewClass); + containerView.attachViewClass(SomeViewClass); containerHasOnlyOneChild(SomeViewClass); }); test("attachViewClass: creates a view without class specified (Ember.View is used by default) without any properties and appends it to the container", function() { - container.attachViewClass(); + containerView.attachViewClass(); containerHasOnlyOneChild(Ember.View); }); @@ -77,9 +77,9 @@ test("attachViewClass: creates a view without class specified (Ember.View is use test("attachViewClass: appends a view to a container already containing other views", function() { var AlreadyContainedViewClass = Ember.View.extend(); var alreadyContainedView = AlreadyContainedViewClass.create(); - container.pushObject(alreadyContainedView); + containerView.pushObject(alreadyContainedView); - container.attachViewClass(SomeViewClass); + containerView.attachViewClass(SomeViewClass); containerHasTwoChildren(AlreadyContainedViewClass, SomeViewClass); });