mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-11 10:55:47 +02:00
Code Issues Releases Wiki Activity

Upgrade to Ember 1.11-beta.1

Browse Source 
HTMLBars goodness! Since there was some breakage and a lot of fiddling
around to get some things working, I took this opportunity to do a big
cleanup of the whole Ember app. I accidentally worked on some new
features too :3

Note that the app is still broken right now, pending on
https://github.com/emberjs/ember.js/issues/10401

Cleanup:
- Restructuring of components
- Consolidation of some stuff into mixins, cleanup of some APIs that
will be public
- Change all instances of .property() / .observes() / .on() to
Ember.computed() / Ember.observer() / Ember.on() respectively (I think
it is more readable)
- More comments
- Start conforming to a code style (2 spaces for indentation)

New features:
- Post hiding/restoring
- Mark individual discussions as read by clicking
- Clicking on a read discussion jumps to the end
- Mark all discussions as read
- Progressively mark the discussion as read as the page is scrolled
- Unordered list post formatting
- Post permalink popup

Demo once that Ember regression is fixed!
This commit is contained in:
Toby Zerner
2015-02-10 18:05:40 +10:30
parent cf88fda8c8
commit c28307903b
164 changed files with 4623 additions and 4587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ember/app/controllers/application.js
View File

@@ -2,22 +2,22 @@ import Ember from 'ember';
export default Ember.Controller.extend({
// The title of the forum.
// TODO: Preload this value in the index.html payload from Laravel config.
forumTitle: 'Flarum Demo Forum',
// The title of the forum.
// TODO: Preload this value in the index.html payload from Laravel config.
forumTitle: 'Flarum Demo Forum',
// The title of the current page. This should be set as appropriate in
// controllers/views.
pageTitle: '',
// The title of the current page. This should be set as appropriate in
// controllers/views.
pageTitle: '',
backButtonTarget: null,
backButtonTarget: null,
searchQuery: '',
searchActive: false,
searchQuery: '',
searchActive: false,
actions: {
search: function(query) {
this.transitionToRoute('index', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
}
}
actions: {
search: function(query) {
this.transitionToRoute('index', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
}
}
});

160
ember/app/controllers/composer.js
View File

@@ -1,99 +1,99 @@
import Ember from 'ember';
export var PositionEnum = {
HIDDEN: 'hidden',
NORMAL: 'normal',
MINIMIZED: 'minimized',
FULLSCREEN: 'fullscreen'
HIDDEN: 'hidden',
NORMAL: 'normal',
MINIMIZED: 'minimized',
FULLSCREEN: 'fullscreen'
};
export default Ember.Controller.extend(Ember.Evented, {
content: null,
position: PositionEnum.HIDDEN,
content: null,
position: PositionEnum.HIDDEN,
visible: Ember.computed.or('normal', 'minimized', 'fullscreen'),
normal: Ember.computed.equal('position', PositionEnum.NORMAL),
minimized: Ember.computed.equal('position', PositionEnum.MINIMIZED),
fullscreen: Ember.computed.equal('position', PositionEnum.FULLSCREEN),
visible: Ember.computed.or('normal', 'minimized', 'fullscreen'),
normal: Ember.computed.equal('position', PositionEnum.NORMAL),
minimized: Ember.computed.equal('position', PositionEnum.MINIMIZED),
fullscreen: Ember.computed.equal('position', PositionEnum.FULLSCREEN),
// Switch out the composer's content for a new component. The old
// component will be given the opportunity to abort the switch. Note:
// there appears to be a bug in Ember where the content binding won't
// update in the view if we switch the value out immediately. As a
// workaround, we set it to null, and then set it to its new value in the
// next run loop iteration.
switchContent: function(newContent) {
var composer = this;
this.confirmExit().then(function() {
composer.set('content', null);
Ember.run.next(function() {
newContent.set('composer', composer);
composer.set('content', newContent);
});
});
// Switch out the composer's content for a new component. The old
// component will be given the opportunity to abort the switch. Note:
// there appears to be a bug in Ember where the content binding won't
// update in the view if we switch the value out immediately. As a
// workaround, we set it to null, and then set it to its new value in the
// next run loop iteration.
switchContent: function(newContent) {
var composer = this;
this.confirmExit().then(function() {
composer.set('content', null);
Ember.run.next(function() {
newContent.composer = composer;
composer.set('content', newContent);
});
});
},
// Ask the content component if it's OK to close it, and give it the
// opportunity to abort. The content component must respond to the
// `willExit(abort)` action, and call `abort()` if we should not proceed.
confirmExit: function() {
var composer = this;
var promise = new Ember.RSVP.Promise(function(resolve, reject) {
var content = composer.get('content');
if (content) {
content.send('willExit', reject);
}
resolve();
});
return promise;
},
actions: {
show: function() {
var composer = this;
// We do this in the next run loop because we need to wait for new
// content to be switched in. See `switchContent` above.
Ember.run.next(function() {
composer.set('position', PositionEnum.NORMAL);
composer.trigger('focus');
});
},
// Ask the content component if it's OK to close it, and give it the
// opportunity to abort. The content component must respond to the
// `willExit(abort)` action, and call `abort()` if we should not proceed.
confirmExit: function() {
var composer = this;
var promise = new Ember.RSVP.Promise(function(resolve, reject) {
var content = composer.get('content');
if (content) {
content.send('willExit', reject);
}
resolve();
});
return promise;
hide: function() {
this.set('position', PositionEnum.HIDDEN);
},
actions: {
show: function() {
var composer = this;
clearContent: function() {
this.set('content', null);
},
// We do this in the next run loop because we need to wait for new
// content to be switched in. See `switchContent` above.
Ember.run.next(function() {
composer.set('position', PositionEnum.NORMAL);
composer.trigger('focus');
});
},
close: function() {
var composer = this;
this.confirmExit().then(function() {
composer.send('hide');
});
},
hide: function() {
this.set('position', PositionEnum.HIDDEN);
},
minimize: function() {
if (this.get('position') !== PositionEnum.HIDDEN) {
this.set('position', PositionEnum.MINIMIZED);
}
},
clearContent: function() {
this.set('content', null);
},
fullscreen: function() {
if (this.get('position') !== PositionEnum.HIDDEN) {
this.set('position', PositionEnum.FULLSCREEN);
this.trigger('focus');
}
},
close: function() {
var composer = this;
this.confirmExit().then(function() {
composer.send('hide');
});
},
minimize: function() {
if (this.get('position') !== PositionEnum.HIDDEN) {
this.set('position', PositionEnum.MINIMIZED);
}
},
fullscreen: function() {
if (this.get('position') !== PositionEnum.HIDDEN) {
this.set('position', PositionEnum.FULLSCREEN);
this.trigger('focus');
}
},
exitFullscreen: function() {
if (this.get('position') === PositionEnum.FULLSCREEN) {
this.set('position', PositionEnum.NORMAL);
this.trigger('focus');
}
}
exitFullscreen: function() {
if (this.get('position') === PositionEnum.FULLSCREEN) {
this.set('position', PositionEnum.NORMAL);
this.trigger('focus');
}
}
}
});

189
ember/app/controllers/discussion.js
View File

@@ -1,116 +1,103 @@
import Ember from 'ember';
import ComposerReply from '../components/discussions/composer-reply';
import ActionButton from '../components/ui/controls/action-button';
import AlertMessage from '../components/alert-message';
import ComposerReply from 'flarum/components/composer/composer-reply';
import ActionButton from 'flarum/components/ui/action-button';
import AlertMessage from 'flarum/components/ui/alert-message';
import UseComposerMixin from 'flarum/mixins/use-composer';
export default Ember.Controller.extend(Ember.Evented, {
needs: ['application', 'alerts', 'composer'],
queryParams: ['start'],
start: '1',
searchQuery: '',
export default Ember.Controller.extend(Ember.Evented, UseComposerMixin, {
needs: ['application'],
composer: Ember.inject.controller('composer'),
alerts: Ember.inject.controller('alerts'),
loaded: false,
stream: null,
queryParams: ['start'],
start: '1',
searchQuery: '',
// Save a reply. This may be called by a composer-reply component that was
// set up on a different discussion, so we require a discussion model to
// be explicitly passed rather than using the controller's implicit one.
// @todo break this down into bite-sized functions so that extensions can
// easily override where they please.
saveReply: function(discussion, data) {
var controller = this;
var composer = this.get('controllers.composer');
var stream = this.get('stream');
loaded: false,
stream: null,
composer.set('content.loading', true);
controller.get('controllers.alerts').send('clearAlerts');
// Save a reply. This may be called by a composer-reply component that was
// set up on a different discussion, so we require a discussion model to
// be explicitly passed rather than using the controller's implicit one.
// @todo break this down into bite-sized functions so that extensions can
// easily override where they please.
saveReply: function(discussion, data) {
var post = this.store.createRecord('post', {
content: data.content,
discussion: discussion
});
var post = this.store.createRecord('post', {
content: data.content,
discussion: discussion
});
var controller = this;
var stream = this.get('stream');
return this.saveAndDismissComposer(post).then(function(post) {
discussion.setProperties({
lastTime: post.get('time'),
lastUser: post.get('user'),
lastPost: post,
lastPostNumber: post.get('number'),
commentsCount: discussion.get('commentsCount') + 1,
readTime: post.get('time'),
readNumber: post.get('number')
});
return post.save().then(function(post) {
composer.send('hide');
discussion.setProperties({
lastTime: post.get('time'),
lastUser: post.get('user'),
lastPost: post,
lastPostNumber: post.get('number'),
commentsCount: discussion.get('commentsCount') + 1,
readTime: post.get('time'),
readNumber: post.get('number')
});
// If we're currently viewing the discussion which this reply was
// made in, then we can add the post to the end of the post
// stream.
if (discussion == controller.get('model') && stream) {
stream.addPostToEnd(post);
} else {
// Otherwise, we'll create an alert message to inform the user
// that their reply has been posted, containing a button which
// will transition to their new post when clicked.
var message = AlertMessage.create({
type: 'success',
message: 'Your reply was posted.'
});
message.on('populateControls', function(controls) {
controls.pushObjectWithTag(ActionButton.create({
label: 'View',
action: function() {
controller.transitionToRoute('discussion', post.get('discussion'), {queryParams: {start: post.get('number')}});
message.send('dismiss');
}
}), 'view');
});
controller.get('controllers.alerts').send('alert', message);
// If we're currently viewing the discussion which this reply was
// made in, then we can add the post to the end of the post
// stream.
if (discussion == controller.get('model') && stream) {
stream.addPostToEnd(post);
} else {
// Otherwise, we'll create an alert message to inform the user
// that their reply has been posted, containing a button which
// will transition to their new post when clicked.
var message = AlertMessage.create({
type: 'success',
message: 'Your reply was posted.',
buttons: [{
label: 'View',
action: function() {
controller.transitionToRoute('discussion', post.get('discussion'), {queryParams: {start: post.get('number')}});
}
},
function(reason) {
var errors = reason.errors;
for (var i in reason.errors) {
var message = AlertMessage.create({
type: 'warning',
message: reason.errors[i]
});
controller.get('controllers.alerts').send('alert', message);
}
})
.finally(function() {
composer.set('content.loading', false);
}]
});
controller.get('alerts').send('alert', message);
}
});
},
// Whenever we transition to a different discussion or the logged-in user
// changes, we'll need the composer content to refresh next time the reply
// button is clicked.
clearComposerContent: Ember.observer('model', 'session.user', function() {
this.set('composerContent', undefined);
}),
actions: {
reply: function() {
var discussion = this.get('model');
var controller = this;
this.showComposer(function() {
return ComposerReply.create({
user: controller.get('session.user'),
discussion: discussion,
submit: function(data) {
controller.saveReply(discussion, data);
}
});
});
},
actions: {
reply: function() {
var controller = this;
var discussion = this.get('model');
var composer = this.get('controllers.composer');
// This action is called when the start position of the discussion
// currently being viewed changes (i.e. when the user scrolls up/down
// the post stream.)
positionChanged: function(startNumber, endNumber) {
this.set('start', startNumber);
// If the composer is already set up for this discussion, then we
// don't need to change its content - we can just show it.
if (!(composer.get('content') instanceof ComposerReply) || composer.get('content.discussion') !== discussion) {
composer.switchContent(ComposerReply.create({
user: controller.get('session.user'),
discussion: discussion,
submit: function(data) {
controller.saveReply(discussion, data);
}
}));
}
composer.send('show');
},
// This action is called when the start position of the discussion
// currently being viewed changes (i.e. when the user scrolls up/down
// the post stream.)
updateStart: function(start) {
this.set('start', start);
}
var discussion = this.get('model');
if (endNumber > discussion.get('readNumber')) {
discussion.set('readNumber', endNumber);
discussion.save();
}
}
}
});

109
ember/app/controllers/index.js
View File

@@ -1,76 +1,59 @@
import Ember from 'ember';
import DiscussionResult from '../models/discussion-result';
import PostResult from '../models/post-result';
import PaneableMixin from '../mixins/paneable';
import ComposerDiscussion from '../components/discussions/composer-discussion';
import AlertMessage from '../components/alert-message';
import DiscussionResult from 'flarum/models/discussion-result';
import PostResult from 'flarum/models/post-result';
import Paneable from 'flarum/mixins/paneable';
import ComposerDiscussion from 'flarum/components/composer/composer-discussion';
import AlertMessage from 'flarum/components/ui/alert-message';
import UseComposer from 'flarum/mixins/use-composer';
export default Ember.Controller.extend(Ember.Evented, PaneableMixin, {
needs: ['application', 'composer', 'alerts', 'index/index', 'discussion'],
export default Ember.Controller.extend(UseComposer, Paneable, {
needs: ['application', 'index/index', 'discussion'],
composer: Ember.inject.controller('composer'),
alerts: Ember.inject.controller('alerts'),
index: Ember.computed.alias('controllers.index/index'),
index: Ember.computed.alias('controllers.index/index'),
paneDisabled: Ember.computed.not('index.model.length'),
paneDisabled: Ember.computed.not('index.model.length'),
saveDiscussion: function(data) {
var controller = this;
var composer = this.get('controllers.composer');
var stream = this.get('stream');
saveDiscussion: function(data) {
var discussion = this.store.createRecord('discussion', {
title: data.title,
content: data.content
});
composer.set('content.loading', true);
controller.get('controllers.alerts').send('clearAlerts');
var controller = this;
return this.saveAndDismissComposer(discussion).then(function(discussion) {
controller.get('index').set('model', null).send('refresh');
controller.transitionToRoute('discussion', discussion);
});
},
var discussion = this.store.createRecord('discussion', {
title: data.title,
content: data.content
});
return discussion.save().then(function(discussion) {
composer.send('hide');
controller.get('index').set('model', null).send('refresh');
controller.transitionToRoute('discussion', discussion);
},
function(reason) {
var errors = reason.errors;
for (var i in reason.errors) {
var message = AlertMessage.create({
type: 'warning',
message: reason.errors[i]
});
controller.get('controllers.alerts').send('alert', message);
}
})
.finally(function() {
composer.set('content.loading', false);
});
actions: {
transitionFromBackButton: function() {
this.transitionToRoute('index');
},
actions: {
transitionFromBackButton: function() {
this.transitionToRoute('index');
},
loadMore: function() {
this.get('index').send('loadMore');
},
loadMore: function() {
this.get('index').send('loadMore');
},
markAllAsRead: function() {
var user = this.get('session.user');
user.set('readTime', new Date);
user.save();
},
newDiscussion: function() {
var controller = this;
var composer = this.get('controllers.composer');
// If the composer is already set up for starting a discussion, then we
// don't need to change its content - we can just show it.
if (!(composer.get('content') instanceof ComposerDiscussion)) {
composer.switchContent(ComposerDiscussion.create({
user: controller.get('session.user'),
submit: function(data) {
controller.saveDiscussion(data);
}
}));
}
composer.send('show');
}
}
newDiscussion: function() {
var controller = this;
this.showComposer(function() {
return ComposerDiscussion.create({
user: controller.get('session.user'),
submit: function(data) {
controller.saveDiscussion(data);
}
});
});
}
}
});

31
ember/app/controllers/index/index.js
View File

@@ -1,7 +1,7 @@
import Ember from 'ember';
import DiscussionResult from '../../models/discussion-result';
import PostResult from '../../models/post-result';
import DiscussionResult from 'flarum/models/discussion-result';
import PostResult from 'flarum/models/post-result';
export default Ember.Controller.extend({
needs: ['application'],
@@ -22,17 +22,15 @@ export default Ember.Controller.extend({
{key: 'oldest', label: 'Oldest', sort: 'created'},
],
terminalPostType: function() {
terminalPostType: Ember.computed('sort', function() {
return ['newest', 'oldest'].indexOf(this.get('sort')) !== -1 ? 'start' : 'last';
}.property('sort'),
}),
countType: function() {
countType: Ember.computed('sort', function() {
return this.get('sort') === 'replies' ? 'replies' : 'unread';
}.property('sort'),
}),
moreResults: function() {
return !!this.get('meta.moreUrl');
}.property('meta.moreUrl'),
moreResults: Ember.computed.bool('meta.moreUrl'),
getResults: function(start) {
var searchQuery = this.get('searchQuery');
@@ -75,9 +73,12 @@ export default Ember.Controller.extend({
});
},
searchQueryDidChange: function() {
this.get('controllers.application').set('searchQuery', this.get('searchQuery'));
this.get('controllers.application').set('searchActive', !! this.get('searchQuery'));
searchQueryDidChange: Ember.observer('searchQuery', function() {
var searchQuery = this.get('searchQuery');
this.get('controllers.application').setProperties({
searchQuery: searchQuery,
searchActive: !!searchQuery
});
var sortOptions = this.get('sortOptions');
@@ -86,13 +87,13 @@ export default Ember.Controller.extend({
} else if (!this.get('searchQuery') && sortOptions[0].sort === 'relevance') {
sortOptions.shiftObject();
}
}.observes('searchQuery'),
}),
paramsDidChange: function() {
paramsDidChange: Ember.observer('sort', 'show', 'searchQuery', function() {
if (this.get('model')) {
this.send('refresh');
}
}.observes('sort', 'show', 'searchQuery'),
}),
actions: {
loadMore: function() {

48
ember/app/controllers/login.js
View File

@@ -1,36 +1,34 @@
import Ember from 'ember';
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';
import ModalControllerMixin from '../mixins/modal-controller';
export default Ember.Controller.extend(ModalControllerMixin, AuthenticationControllerMixin, {
import ModalController from 'flarum/mixins/modal-controller';
export default Ember.Controller.extend(ModalController, AuthenticationControllerMixin, {
authenticator: 'authenticator:flarum',
loading: false,
actions: {
authenticate: function() {
var data = this.getProperties('identification', 'password');
var controller = this;
this.set('error', null);
this.set('loading', true);
return this._super(data).then(function() {
controller.send("sessionChanged");
controller.send("closeModal");
}, function(errors) {
switch(errors[0].code) {
case 'invalidLogin':
controller.set('error', 'Your login details are incorrect.');
break;
var data = this.getProperties('identification', 'password');
var controller = this;
this.set('error', null);
this.set('loading', true);
return this._super(data).then(function() {
controller.send("sessionChanged");
controller.send("closeModal");
}, function(errors) {
switch(errors[0].code) {
case 'invalidLogin':
controller.set('error', 'Your login details are incorrect.');
break;
default:
controller.set('error', 'Something went wrong. (Error code: '+errors[0].code+')');
}
controller.trigger('refocus');
}).finally(function() {
controller.set('loading', false);
});
}
}
default:
controller.set('error', 'Something went wrong. (Error code: '+errors[0].code+')');
}
controller.trigger('refocus');
}).finally(function() {
controller.set('loading', false);
});
}
}
});

50
ember/app/controllers/signup.js
View File

@@ -1,33 +1,29 @@
import Ember from 'ember';
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';
import ModalControllerMixin from '../mixins/modal-controller';
import ModalController from 'flarum/mixins/modal-controller';
export default Ember.Controller.extend(ModalControllerMixin, AuthenticationControllerMixin, {
authenticator: 'authenticator:flarum',
export default Ember.Controller.extend(ModalController, {
actions: {
submit: function() {
var data = this.getProperties('username', 'email', 'password');
var controller = this;
this.set('error', null);
this.set('loading', true);
actions: {
submit: function() {
var data = this.getProperties('username', 'email', 'password');
var controller = this;
this.set('error', null);
this.set('loading', true);
var user = this.store.createRecord('user', data);
var user = this.store.createRecord('user', data);
return user.save().then(function() {
controller.get('session').authenticate('authenticator:flarum', {
identification: data.email,
password: data.password
}).then(function() {
controller.send('closeModal');
controller.send('sessionChanged');
controller.set('loading', false);
});
}, function(reason) {
controller.set('loading', false);
});
}
}
return user.save().then(function() {
controller.get('session').authenticate('authenticator:flarum', {
identification: data.email,
password: data.password
}).then(function() {
controller.send('closeModal');
controller.send('sessionChanged');
controller.set('loading', false);
});
}, function(reason) {
controller.set('loading', false);
});
}
}
});