0
Fork 0
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:
Matt Enlow 2014-09-09 19:22:11 -06:00
parent 9f6884e876
commit 6f929eee4a
10 changed files with 49 additions and 72 deletions

View file

@ -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);
},
}
});

View file

@ -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);
}
}
}
});

View file

@ -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;

View file

@ -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);
}
});

View file

@ -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');
}
},

View file

@ -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"}}

View file

@ -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>

View file

@ -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;

View file

@ -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');
}
});

View file

@ -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;