mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Emberify Posts mobile transitions
Closes #3950 - Fixed up event attachment and removal in a few mixins - Renamed content-list-content-view to something more understandable - simplify transition from posts.index to posts.post
This commit is contained in:
parent
9f6884e876
commit
6f929eee4a
10 changed files with 49 additions and 72 deletions
|
@ -71,23 +71,6 @@ var PostsController = Ember.ArrayController.extend(PaginationControllerMixin, {
|
|||
//let the PaginationControllerMixin know what type of model we will be paginating
|
||||
//this is necesariy because we do not have access to the model inside the Controller::init method
|
||||
this._super({'modelType': 'post'});
|
||||
},
|
||||
|
||||
actions: {
|
||||
resetContentPreview: function () {
|
||||
$('.js-content-list').removeAttr('style');
|
||||
$('.js-content-preview').removeAttr('style');
|
||||
},
|
||||
|
||||
showContentPreview: function () {
|
||||
$('.js-content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
|
||||
$('.js-content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
|
||||
},
|
||||
|
||||
hideContentPreview: function () {
|
||||
$('.js-content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
|
||||
$('.js-content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import {mobileQuery} from 'ghost/utils/mobile';
|
||||
var PostController = Ember.ObjectController.extend({
|
||||
isPublished: Ember.computed.equal('status', 'published'),
|
||||
classNameBindings: ['featured'],
|
||||
|
@ -11,6 +12,18 @@ var PostController = Ember.ObjectController.extend({
|
|||
this.get('model').save(options).catch(function (errors) {
|
||||
self.notifications.showErrors(errors);
|
||||
});
|
||||
},
|
||||
hidePostContent: function () {
|
||||
if (mobileQuery.matches) {
|
||||
$('.js-content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
|
||||
$('.js-content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
|
||||
}
|
||||
},
|
||||
showPostContent: function () {
|
||||
if (mobileQuery.matches) {
|
||||
$('.js-content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
|
||||
$('.js-content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -21,19 +21,19 @@ var PaginationViewInfiniteScrollMixin = Ember.Mixin.create({
|
|||
/**
|
||||
* Bind to the scroll event once the element is in the DOM
|
||||
*/
|
||||
didInsertElement: function () {
|
||||
attachCheckScroll: function () {
|
||||
var el = this.$();
|
||||
|
||||
el.on('scroll', Ember.run.bind(this, this.checkScroll));
|
||||
},
|
||||
}.on('didInsertElement'),
|
||||
|
||||
/**
|
||||
* Unbind from the scroll event when the element is no longer in the DOM
|
||||
*/
|
||||
willDestroyElement: function () {
|
||||
detachCheckScroll: function () {
|
||||
var el = this.$();
|
||||
el.off('scroll');
|
||||
}
|
||||
}.on('willDestroyElement')
|
||||
});
|
||||
|
||||
export default PaginationViewInfiniteScrollMixin;
|
||||
|
|
|
@ -1,34 +1,25 @@
|
|||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
import {mobileQuery} from 'ghost/utils/mobile';
|
||||
|
||||
var PostsIndexRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, loadingIndicator, {
|
||||
// This route's only function is to determine whether or not a post
|
||||
// exists to be used for the content preview. It has a parent resource (Posts)
|
||||
// that is responsible for populating the store.
|
||||
//Transition to posts.post if there are any posts the user can see
|
||||
beforeModel: function () {
|
||||
var self = this,
|
||||
// the store has been populated so we can work with the local copy
|
||||
posts = this.store.all('post'),
|
||||
currentPost = this.controllerFor('posts').get('currentPost');
|
||||
post;
|
||||
|
||||
return this.store.find('user', 'me').then(function (user) {
|
||||
// return the first post find that matches the following criteria:
|
||||
// * User is an author, and is the author of this post
|
||||
// * User has a role other than author
|
||||
return posts.find(function (post) {
|
||||
post = posts.find(function (post) {
|
||||
if (user.get('isAuthor')) {
|
||||
return post.isAuthoredByUser(user);
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(function (post) {
|
||||
if (post) {
|
||||
if (currentPost === post && mobileQuery.matches) {
|
||||
self.controllerFor('posts').send('hideContentPreview');
|
||||
}
|
||||
|
||||
return self.transitionTo('posts.post', post);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -55,7 +55,7 @@ var PostsPostRoute = Ember.Route.extend(SimpleAuth.AuthenticatedRouteMixin, load
|
|||
this.controllerFor('posts').set('currentPost', model);
|
||||
|
||||
if (mobileQuery.matches) {
|
||||
this.controllerFor('posts').send('hideContentPreview');
|
||||
this.controllerFor('posts.post').send('hidePostContent');
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</section>
|
||||
{{#link-to "editor.new" class="btn btn-green" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
|
||||
</header>
|
||||
{{#view "content-list-content-view" tagName="section"}}
|
||||
{{#view "paginated-scroll-box" tagName="section" classNames="content-list-content"}}
|
||||
<ol class="posts-list">
|
||||
{{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
|
||||
{{#link-to "posts.post" this class="permalink" title="Edit this post"}}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<header class="post-preview-header">
|
||||
<button type="button" class="btn btn-default btn-back">Back</button>
|
||||
<button type="button" class="btn btn-default btn-back" {{action "hidePostContent"}}>Back</button>
|
||||
<button type="button" {{bind-attr class="featured:featured:unfeatured"}} title="Feature this post" {{action "toggleFeatured"}}>
|
||||
<span class="hidden">Star</span>
|
||||
</button>
|
||||
|
|
|
@ -2,17 +2,17 @@ import setScrollClassName from 'ghost/utils/set-scroll-classname';
|
|||
import PaginationViewMixin from 'ghost/mixins/pagination-view-infinite-scroll';
|
||||
|
||||
|
||||
var PostsListView = Ember.View.extend(PaginationViewMixin, {
|
||||
classNames: ['content-list-content'],
|
||||
|
||||
didInsertElement: function () {
|
||||
this._super();
|
||||
var PaginatedScrollBox = Ember.View.extend(PaginationViewMixin, {
|
||||
attachScrollClassHandler: function () {
|
||||
var el = this.$();
|
||||
el.on('scroll', Ember.run.bind(el, setScrollClassName, {
|
||||
target: el.closest('.content-list'),
|
||||
offset: 10
|
||||
}));
|
||||
}
|
||||
}.on('didInsertElement'),
|
||||
detachScrollClassHandler: function () {
|
||||
this.$().off('scroll');
|
||||
}.on('willDestroyElement')
|
||||
});
|
||||
|
||||
export default PostsListView;
|
||||
export default PaginatedScrollBox;
|
|
@ -10,6 +10,10 @@ var PostItemView = itemView.extend({
|
|||
//Edit post on double click
|
||||
doubleClick: function () {
|
||||
this.get('controller').send('openEditor', this.get('controller.model'));
|
||||
},
|
||||
|
||||
click: function () {
|
||||
this.get('controller').send('showPostContent');
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -1,35 +1,21 @@
|
|||
import {mobileQuery, responsiveAction} from 'ghost/utils/mobile';
|
||||
import {mobileQuery} from 'ghost/utils/mobile';
|
||||
|
||||
var PostsView = Ember.View.extend({
|
||||
target: Ember.computed.alias('controller'),
|
||||
classNames: ['content-view-container'],
|
||||
tagName: 'section',
|
||||
|
||||
mobileInteractions: function () {
|
||||
Ember.run.scheduleOnce('afterRender', this, function () {
|
||||
var self = this;
|
||||
//@TODO Kill all the jqueries.
|
||||
$(window).resize(function () {
|
||||
if (!mobileQuery.matches) {
|
||||
self.send('resetContentPreview');
|
||||
resetMobileView: function (mq) {
|
||||
if (!mq.matches) {
|
||||
$('.js-content-list').removeAttr('style');
|
||||
$('.js-content-preview').removeAttr('style');
|
||||
}
|
||||
});
|
||||
|
||||
// ### Show content preview when swiping left on content list
|
||||
$('.manage').on('click', '.content-list ol li', function (event) {
|
||||
responsiveAction(event, '(max-width: 900px)', function () {
|
||||
self.send('showContentPreview');
|
||||
});
|
||||
});
|
||||
|
||||
// ### Hide content preview
|
||||
$('.manage').on('click', '.content-preview .btn.btn-back', function (event) {
|
||||
responsiveAction(event, '(max-width: 900px)', function () {
|
||||
self.send('hideContentPreview');
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
attachResetMobileView: function () {
|
||||
mobileQuery.addListener(this.resetMobileView);
|
||||
}.on('didInsertElement'),
|
||||
detachResetMobileView: function () {
|
||||
mobileQuery.removeListener(this.resetMobileView);
|
||||
}.on('willDestroyElement')
|
||||
});
|
||||
|
||||
export default PostsView;
|
||||
|
|
Loading…
Reference in a new issue