From 260f4c85bf4ef404352bb326a62334844f078bb0 Mon Sep 17 00:00:00 2001 From: Toby Zerner 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 ++--- .../core/js/forum/src/components/composer.js | 14 ++++----- .../forum/src/components/discussion-page.js | 4 +-- .../forum/src/components/header-secondary.js | 2 +- .../js/forum/src/components/index-page.js | 2 +- .../forum/src/components/notification-grid.js | 2 +- framework/core/js/lib/component.js | 29 +++++++++++-------- framework/core/js/lib/components/modal.js | 2 +- 9 files changed, 33 insertions(+), 32 deletions(-) diff --git a/framework/core/js/forum/src/components/comment-post.js b/framework/core/js/forum/src/components/comment-post.js index b846bb5c5..eba607067 100644 --- a/framework/core/js/forum/src/components/comment-post.js +++ b/framework/core/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/framework/core/js/forum/src/components/composer-body.js b/framework/core/js/forum/src/components/composer-body.js index e279d6753..309c23132 100644 --- a/framework/core/js/forum/src/components/composer-body.js +++ b/framework/core/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/framework/core/js/forum/src/components/composer.js b/framework/core/js/forum/src/components/composer.js index ac32aa1db..2ddd9caae 100644 --- a/framework/core/js/forum/src/components/composer.js +++ b/framework/core/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/framework/core/js/forum/src/components/discussion-page.js b/framework/core/js/forum/src/components/discussion-page.js index 2f2ae0b7e..e56423124 100644 --- a/framework/core/js/forum/src/components/discussion-page.js +++ b/framework/core/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/framework/core/js/forum/src/components/header-secondary.js b/framework/core/js/forum/src/components/header-secondary.js index f64a05061..7103acd67 100644 --- a/framework/core/js/forum/src/components/header-secondary.js +++ b/framework/core/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/framework/core/js/forum/src/components/index-page.js b/framework/core/js/forum/src/components/index-page.js index b5065e8a7..5abba0306 100644 --- a/framework/core/js/forum/src/components/index-page.js +++ b/framework/core/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/framework/core/js/forum/src/components/notification-grid.js b/framework/core/js/forum/src/components/notification-grid.js index e5c24777f..a53fe5922 100644 --- a/framework/core/js/forum/src/components/notification-grid.js +++ b/framework/core/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/framework/core/js/lib/component.js b/framework/core/js/lib/component.js index 589b1b32b..b99bf7469 100644 --- a/framework/core/js/lib/component.js +++ b/framework/core/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/framework/core/js/lib/components/modal.js b/framework/core/js/lib/components/modal.js index b4ee6e9b7..a332ffecd 100644 --- a/framework/core/js/lib/components/modal.js +++ b/framework/core/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) {