From e18d8b35e52ea315ff43fe20374971c6095415fd Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Fri, 26 Jun 2015 19:09:43 +0930
Subject: [PATCH] Refactor component API a bit
---
js/forum/src/components/comment-post.js | 2 +-
js/forum/src/components/composer-body.js | 8 ++----
js/forum/src/components/composer.js | 14 +++++-----
js/forum/src/components/discussion-page.js | 4 +--
js/forum/src/components/header-secondary.js | 2 +-
js/forum/src/components/index-page.js | 2 +-
js/forum/src/components/notification-grid.js | 2 +-
js/lib/component.js | 29 ++++++++++++--------
js/lib/components/modal.js | 2 +-
9 files changed, 33 insertions(+), 32 deletions(-)
diff --git a/js/forum/src/components/comment-post.js b/js/forum/src/components/comment-post.js
index b846bb5c5..eba607067 100644
--- a/js/forum/src/components/comment-post.js
+++ b/js/forum/src/components/comment-post.js
@@ -52,7 +52,7 @@ export default class CommentPost extends Post {
var post = this.props.post;
var props = {post};
- items.add('user', this.postHeaderUser.view(), {first: true});
+ items.add('user', this.postHeaderUser.render(), {first: true});
items.add('meta', PostHeaderMeta.component(props));
if (post.isEdited() && !post.isHidden()) {
diff --git a/js/forum/src/components/composer-body.js b/js/forum/src/components/composer-body.js
index e279d6753..309c23132 100644
--- a/js/forum/src/components/composer-body.js
+++ b/js/forum/src/components/composer-body.js
@@ -25,20 +25,16 @@ export default class ComposerBody extends Component {
view(className) {
this.editor.props.disabled = this.loading() || !this.ready();
- return m('div', {className, config: this.onload.bind(this)}, [
+ return m('div', {className}, [
avatar(this.props.user, {className: 'composer-avatar'}),
m('div.composer-body', [
m('ul.composer-header', listItems(this.headerItems().toArray())),
- m('div.composer-editor', this.editor.view())
+ m('div.composer-editor', this.editor.render())
]),
LoadingIndicator.component({className: 'composer-loading'+(this.loading() ? ' active' : '')})
]);
}
- onload(element) {
- this.element(element);
- }
-
focus() {
this.ready(true);
m.redraw(true);
diff --git a/js/forum/src/components/composer.js b/js/forum/src/components/composer.js
index ac32aa1db..2ddd9caae 100644
--- a/js/forum/src/components/composer.js
+++ b/js/forum/src/components/composer.js
@@ -41,7 +41,7 @@ class Composer extends Component {
m('ul.composer-controls', listItems(this.controlItems().toArray())),
m('div.composer-content', {onclick: () => {
if (this.position() === Composer.PositionEnum.MINIMIZED) this.show();
- }}, this.component ? this.component.view() : '')
+ }}, this.component ? this.component.render() : '')
]);
}
@@ -141,7 +141,7 @@ class Composer extends Component {
}
}
- render(anchorToBottom) {
+ update(anchorToBottom) {
var $composer = this.$().stop(true);
var oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
@@ -235,12 +235,12 @@ class Composer extends Component {
if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position()) !== -1) {
this.position(Composer.PositionEnum.NORMAL);
}
- this.render(anchorToBottom);
+ this.update(anchorToBottom);
}
hide() {
this.position(Composer.PositionEnum.HIDDEN);
- this.render();
+ this.update();
}
close() {
@@ -252,21 +252,21 @@ class Composer extends Component {
minimize() {
if (this.position() !== Composer.PositionEnum.HIDDEN) {
this.position(Composer.PositionEnum.MINIMIZED);
- this.render();
+ this.update();
}
}
fullScreen() {
if (this.position() !== Composer.PositionEnum.HIDDEN) {
this.position(Composer.PositionEnum.FULLSCREEN);
- this.render();
+ this.update();
}
}
exitFullScreen() {
if (this.position() === Composer.PositionEnum.FULLSCREEN) {
this.position(Composer.PositionEnum.NORMAL);
- this.render();
+ this.update();
}
}
diff --git a/js/forum/src/components/discussion-page.js b/js/forum/src/components/discussion-page.js
index 2f2ae0b7e..e56423124 100644
--- a/js/forum/src/components/discussion-page.js
+++ b/js/forum/src/components/discussion-page.js
@@ -152,14 +152,14 @@ export default class DiscussionPage extends mixin(Component, evented) {
var discussion = this.discussion();
return m('div', {config: this.onload.bind(this)}, [
- app.cache.discussionList ? m('div.index-area.paned', {config: this.configIndex.bind(this)}, app.cache.discussionList.view()) : '',
+ app.cache.discussionList ? m('div.index-area.paned', {config: this.configIndex.bind(this)}, app.cache.discussionList.render()) : '',
m('div.discussion-area', discussion ? [
DiscussionHero.component({discussion}),
m('div.container', [
m('nav.discussion-nav', [
m('ul', listItems(this.sidebarItems().toArray()))
]),
- this.stream.view()
+ this.stream.render()
])
] : LoadingIndicator.component({className: 'loading-indicator-block'}))
]);
diff --git a/js/forum/src/components/header-secondary.js b/js/forum/src/components/header-secondary.js
index f64a05061..7103acd67 100644
--- a/js/forum/src/components/header-secondary.js
+++ b/js/forum/src/components/header-secondary.js
@@ -16,7 +16,7 @@ export default class HeaderSecondary extends Component {
items() {
var items = new ItemList();
- items.add('search', app.search.view());
+ items.add('search', app.search.render());
if (app.session.user()) {
items.add('notifications', UserNotifications.component({ user: app.session.user() }))
diff --git a/js/forum/src/components/index-page.js b/js/forum/src/components/index-page.js
index b5065e8a7..5abba0306 100644
--- a/js/forum/src/components/index-page.js
+++ b/js/forum/src/components/index-page.js
@@ -74,7 +74,7 @@ export default class IndexPage extends Component {
m('ul.index-toolbar-view', listItems(this.viewItems().toArray())),
m('ul.index-toolbar-action', listItems(this.actionItems().toArray()))
]),
- app.cache.discussionList.view()
+ app.cache.discussionList.render()
])
])
]);
diff --git a/js/forum/src/components/notification-grid.js b/js/forum/src/components/notification-grid.js
index e5c24777f..a53fe5922 100644
--- a/js/forum/src/components/notification-grid.js
+++ b/js/forum/src/components/notification-grid.js
@@ -43,7 +43,7 @@ export default class NotificationGrid extends Component {
m('td.toggle-group', {onclick: this.toggleType.bind(this, type.name)}, type.label),
this.methods.map(method => {
var key = this.key(type.name, method.name);
- return m('td.yesno-cell', this.inputs[key].view());
+ return m('td.yesno-cell', this.inputs[key].render());
})
]))
])
diff --git a/js/lib/component.js b/js/lib/component.js
index 589b1b32b..b99bf7469 100644
--- a/js/lib/component.js
+++ b/js/lib/component.js
@@ -22,6 +22,22 @@ export default class Component {
//
}
+ render() {
+ var vdom = this.view();
+ vdom.attrs = vdom.attrs || {};
+
+ if (!vdom.attrs.config) {
+ var component = this;
+ vdom.attrs.config = function() {
+ var args = [].slice.apply(arguments);
+ component.element(args[0]);
+ component.config.apply(component, args);
+ };
+ }
+
+ return vdom;
+ }
+
/**
*/
@@ -32,18 +48,7 @@ export default class Component {
}
var view = function(component) {
component.props = props;
- var vdom = component.view();
- vdom.attrs = vdom.attrs || {};
-
- if (!vdom.attrs.config) {
- vdom.attrs.config = function() {
- var args = [].slice.apply(arguments);
- component.element(args[0]);
- component.config.apply(component, args);
- };
- }
-
- return vdom;
+ return component.render();
};
view.$original = this.prototype.view;
var output = {
diff --git a/js/lib/components/modal.js b/js/lib/components/modal.js
index b4ee6e9b7..a332ffecd 100644
--- a/js/lib/components/modal.js
+++ b/js/lib/components/modal.js
@@ -2,7 +2,7 @@ import Component from 'flarum/component';
export default class Modal extends Component {
view() {
- return m('div.modal.fade', {config: this.onload.bind(this)}, this.component && this.component.view())
+ return m('div.modal.fade', {config: this.onload.bind(this)}, this.component && this.component.render())
}
onload(element, isInitialized) {