mirror of
https://github.com/flarum/framework.git
synced 2024-11-29 04:33:47 +08:00
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:
parent
34c086d87b
commit
0c40dc7136
|
@ -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() {
|
||||
|
|
|
@ -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'}});
|
||||
},
|
||||
|
|
|
@ -32,10 +32,6 @@ export default Ember.Controller.extend(UseComposer, Paneable, {
|
|||
},
|
||||
|
||||
actions: {
|
||||
transitionFromBackButton: function() {
|
||||
this.transitionToRoute('index');
|
||||
},
|
||||
|
||||
loadMore: function() {
|
||||
this.get('index').send('loadMore');
|
||||
},
|
||||
|
|
20
framework/core/ember/app/mixins/pushes-history.js
Normal file
20
framework/core/ember/app/mixins/pushes-history.js
Normal 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();
|
||||
}
|
||||
}
|
||||
})
|
|
@ -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
|
||||
|
|
7
framework/core/ember/app/routes/index.js
Normal file
7
framework/core/ember/app/routes/index.js
Normal file
|
@ -0,0 +1,7 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Route.extend({
|
||||
deactivate: function() {
|
||||
this.controllerFor('application').set('backButtonTarget', null);
|
||||
}
|
||||
});
|
|
@ -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');
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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">
|
||||
|
||||
|
|
|
@ -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}}
|
||||
|
|
Loading…
Reference in New Issue
Block a user