From 6f929eee4abc5d4f3d48a0d5fb32337ca31a8b8b Mon Sep 17 00:00:00 2001 From: Matt Enlow Date: Tue, 9 Sep 2014 19:22:11 -0600 Subject: [PATCH] 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 --- core/client/controllers/posts.js | 17 --------- core/client/controllers/posts/post.js | 13 +++++++ .../mixins/pagination-view-infinite-scroll.js | 8 ++-- core/client/routes/posts/index.js | 15 ++------ core/client/routes/posts/post.js | 2 +- core/client/templates/posts.hbs | 4 +- core/client/templates/posts/post.hbs | 2 +- ...ontent-view.js => paginated-scroll-box.js} | 14 +++---- core/client/views/post-item-view.js | 8 +++- core/client/views/posts.js | 38 ++++++------------- 10 files changed, 49 insertions(+), 72 deletions(-) rename core/client/views/{content-list-content-view.js => paginated-scroll-box.js} (53%) diff --git a/core/client/controllers/posts.js b/core/client/controllers/posts.js index e5cd933e13..31cf56ea1b 100644 --- a/core/client/controllers/posts.js +++ b/core/client/controllers/posts.js @@ -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); - }, } }); diff --git a/core/client/controllers/posts/post.js b/core/client/controllers/posts/post.js index 5127cfc312..49f1649907 100644 --- a/core/client/controllers/posts/post.js +++ b/core/client/controllers/posts/post.js @@ -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); + } } } }); diff --git a/core/client/mixins/pagination-view-infinite-scroll.js b/core/client/mixins/pagination-view-infinite-scroll.js index 1c1e8104c4..4c97e77154 100644 --- a/core/client/mixins/pagination-view-infinite-scroll.js +++ b/core/client/mixins/pagination-view-infinite-scroll.js @@ -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; diff --git a/core/client/routes/posts/index.js b/core/client/routes/posts/index.js index 2652efcd03..e3654ea082 100644 --- a/core/client/routes/posts/index.js +++ b/core/client/routes/posts/index.js @@ -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); } }); diff --git a/core/client/routes/posts/post.js b/core/client/routes/posts/post.js index 82cd551f14..c030e4c656 100644 --- a/core/client/routes/posts/post.js +++ b/core/client/routes/posts/post.js @@ -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'); } }, diff --git a/core/client/templates/posts.hbs b/core/client/templates/posts.hbs index e9caf0dfc7..2923893d75 100644 --- a/core/client/templates/posts.hbs +++ b/core/client/templates/posts.hbs @@ -11,7 +11,7 @@ {{#link-to "editor.new" class="btn btn-green" title="New Post"}}{{/link-to}} - {{#view "content-list-content-view" tagName="section"}} + {{#view "paginated-scroll-box" tagName="section" classNames="content-list-content"}}
    {{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}} {{#link-to "posts.post" this class="permalink" title="Edit this post"}} @@ -39,4 +39,4 @@
    {{outlet}}
    - \ No newline at end of file + diff --git a/core/client/templates/posts/post.hbs b/core/client/templates/posts/post.hbs index 7ffa52d632..68b37e56c2 100644 --- a/core/client/templates/posts/post.hbs +++ b/core/client/templates/posts/post.hbs @@ -1,5 +1,5 @@
    - + diff --git a/core/client/views/content-list-content-view.js b/core/client/views/paginated-scroll-box.js similarity index 53% rename from core/client/views/content-list-content-view.js rename to core/client/views/paginated-scroll-box.js index 688de853d3..3ec2e2df21 100644 --- a/core/client/views/content-list-content-view.js +++ b/core/client/views/paginated-scroll-box.js @@ -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; diff --git a/core/client/views/post-item-view.js b/core/client/views/post-item-view.js index 933c16f2ee..464454927c 100644 --- a/core/client/views/post-item-view.js +++ b/core/client/views/post-item-view.js @@ -6,12 +6,16 @@ var PostItemView = itemView.extend({ isFeatured: Ember.computed.alias('controller.model.featured'), isPage: Ember.computed.alias('controller.model.page'), - + //Edit post on double click doubleClick: function () { this.get('controller').send('openEditor', this.get('controller.model')); + }, + + click: function () { + this.get('controller').send('showPostContent'); } - + }); export default PostItemView; diff --git a/core/client/views/posts.js b/core/client/views/posts.js index a3b21c554e..3e6e1f17a8 100644 --- a/core/client/views/posts.js +++ b/core/client/views/posts.js @@ -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'); - } - }); - - // ### 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'); - }); - }); - }); + resetMobileView: function (mq) { + if (!mq.matches) { + $('.js-content-list').removeAttr('style'); + $('.js-content-preview').removeAttr('style'); + } + }, + attachResetMobileView: function () { + mobileQuery.addListener(this.resetMobileView); }.on('didInsertElement'), + detachResetMobileView: function () { + mobileQuery.removeListener(this.resetMobileView); + }.on('willDestroyElement') }); export default PostsView;