Improve global back button. Goes back to previous interface.

It’s not quite like the browser’s back button because it doesn’t
necessarily go back to the last URL; rather, it goes back to the last
interface. So if you go into a discussion, then go to a different
discussion via the side pane, the back button will still take you back
to the index (not the previous discussion).
This commit is contained in:
Toby Zerner 2015-03-20 10:40:42 +10:30
parent 34c086d87b
commit 0c40dc7136
10 changed files with 97 additions and 18 deletions

View File

@ -10,21 +10,30 @@ export default Ember.Component.extend({
active: Ember.computed.or('target.paneIsShowing', 'target.paneIsPinned'),
mouseEnter: function() {
this.get('target').send('showPane');
var target = this.get('target');
if (target) {
target.send('showPane');
}
},
mouseLeave: function() {
this.get('target').send('hidePane');
var target = this.get('target');
if (target) {
target.send('hidePane');
}
},
actions: {
// WE HAVE TO GO BACK. WAAAAAALLLLLLTTTTT
back: function() {
this.get('target').send('transitionFromBackButton');
this.set('target', null);
this.sendAction('goBack');
},
togglePinned: function() {
this.get('target').send('togglePinned');
var target = this.get('target');
if (target) {
target.send('togglePinned');
}
},
toggleDrawer: function() {

View File

@ -14,7 +14,41 @@ export default Ember.Controller.extend({
searchQuery: '',
searchActive: false,
history: null,
init: function() {
this._super();
this.set('history', []);
this.pushHistory('index', '/');
},
pushHistory: function(name, url) {
var url = url || this.get('target.url');
var last = this.get('history').get('lastObject');
if (last && last.name === name) {
last.url = url;
} else {
this.get('history').pushObject({name: name, url: url});
}
},
popHistory: function(name) {
var last = this.get('history').get('lastObject');
if (last && last.name === name) {
this.get('history').popObject();
}
},
canGoBack: Ember.computed('history.length', function() {
return this.get('history.length') > 1;
}),
actions: {
goBack: function() {
this.get('history').popObject();
var history = this.get('history').get('lastObject');
this.transitionToRoute.call(this, history.url);
},
search: function(query) {
this.transitionToRoute('index', {queryParams: {searchQuery: query, sort: query ? 'relevance' : 'recent'}});
},

View File

@ -32,10 +32,6 @@ export default Ember.Controller.extend(UseComposer, Paneable, {
},
actions: {
transitionFromBackButton: function() {
this.transitionToRoute('index');
},
loadMore: function() {
this.get('index').send('loadMore');
},

View File

@ -0,0 +1,20 @@
import Ember from 'ember';
export default Ember.Mixin.create({
pushHistory: function() {
Ember.run.next(this, function() {
this.controllerFor('application').pushHistory(this.get('historyKey'), this.get('url'));
});
},
setupController: function(controller, model) {
this._super(controller, model);
this.pushHistory();
},
actions: {
queryParamsDidChange: function() {
this.pushHistory();
}
}
})

View File

@ -1,8 +1,11 @@
import Ember from 'ember';
import PostStream from 'flarum/models/post-stream';
import PushesHistory from 'flarum/mixins/pushes-history';
export default Ember.Route.extend(PushesHistory, {
historyKey: 'discussion',
export default Ember.Route.extend({
queryParams: {
start: {replace: true}
},
@ -33,7 +36,7 @@ export default Ember.Route.extend({
},
setupController: function(controller, discussion) {
controller.set('model', discussion);
this._super(controller, discussion);
this.controllerFor('index/index').set('lastDiscussion', discussion);
// Set up the post stream object. It needs to know about the discussion
@ -94,6 +97,8 @@ export default Ember.Route.extend({
actions: {
queryParamsDidChange: function(params) {
this._super(params);
// If the ?start param has changed, we want to tell the view to
// tell the streamContent component to jump to this start point.
// We postpone running this code until the next run loop because

View File

@ -0,0 +1,7 @@
import Ember from 'ember';
export default Ember.Route.extend({
deactivate: function() {
this.controllerFor('application').set('backButtonTarget', null);
}
});

View File

@ -1,8 +1,11 @@
import Ember from 'ember';
import AddCssClassToBody from 'flarum/mixins/add-css-class-to-body';
import PushesHistory from 'flarum/mixins/pushes-history';
export default Ember.Route.extend(AddCssClassToBody, PushesHistory, {
historyKey: 'index',
export default Ember.Route.extend(AddCssClassToBody, {
cachedModel: null,
model: function() {
@ -13,7 +16,7 @@ export default Ember.Route.extend(AddCssClassToBody, {
},
setupController: function(controller, model) {
controller.set('model', model);
this._super(controller, model);
if (!model.get('length')) {
controller.send('loadResults');

View File

@ -1,12 +1,17 @@
import Ember from 'ember';
export default Ember.Route.extend({
import PushesHistory from 'flarum/mixins/pushes-history';
export default Ember.Route.extend(PushesHistory, {
historyKey: 'user',
model: function() {
return Ember.RSVP.resolve(Ember.ArrayProxy.create());
},
setupController: function(controller, model) {
controller.set('model', model);
this._super(controller, model);
controller.send('loadResults');
}
});

View File

@ -1,10 +1,10 @@
<div id="page" {{bind-attr class=":global-page backButtonTarget.paneIsPinned:with-pane"}}>
{{application/back-button target=backButtonTarget className="back-control" toggleDrawer="toggleDrawer"}}
{{application/back-button target=backButtonTarget className="back-control" toggleDrawer="toggleDrawer" goBack="goBack" canGoBack=canGoBack}}
<div id="drawer" class="global-drawer">
<header id="header" class="global-header">
{{application/back-button target=backButtonTarget}}
{{application/back-button target=backButtonTarget goBack="goBack" canGoBack=canGoBack}}
<div class="container">

View File

@ -1,4 +1,4 @@
{{#if target}}
{{#if canGoBack}}
<div class="btn-group">
<button class="btn btn-default btn-icon back" {{action "back"}}>{{fa-icon "chevron-left" class="icon-glyph"}}</button>
{{#if target.paned}}