mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -05:00
402b27c7e9
In `gh-content-view-container` the visibility of another DOM node was being used to detect if a given view was mobile or not. This means the UI needed to have layout forced (and DOM rendered) before the content view container would render a second time. This is slow interaction with the DOM (forcing layout) and slow for Ember's renderer (it needs to render the container once with a default, then again when the value changes). Additionally there were two ways resize was being observed. The `Window.matchMedia` API was used for some styles and the `ember-resize` addon used to detect other changes. Here I've unified around just the `Window.matcheMedia` API but abstracted it behind a service. Sizes are exposed as properties that can be bound to or used directly in templates.
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import Ember from 'ember';
|
|
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
|
import MobileIndexRoute from 'ghost/routes/mobile-index-route';
|
|
|
|
export default MobileIndexRoute.extend(AuthenticatedRouteMixin, {
|
|
noPosts: false,
|
|
|
|
mediaQueries: Ember.inject.service(),
|
|
isMobile: Ember.computed.reads('mediaQueries.isMobile'),
|
|
|
|
// Transition to a specific post if we're not on mobile
|
|
beforeModel: function () {
|
|
if (!this.get('isMobile')) {
|
|
return this.goToPost();
|
|
}
|
|
},
|
|
|
|
setupController: function (controller) {
|
|
controller.set('noPosts', this.get('noPosts'));
|
|
},
|
|
|
|
goToPost: function () {
|
|
var self = this,
|
|
// the store has been populated by PostsRoute
|
|
posts = this.store.peekAll('post'),
|
|
post;
|
|
|
|
return this.get('session.user').then(function (user) {
|
|
post = posts.find(function (post) {
|
|
// Authors can only see posts they've written
|
|
if (user.get('isAuthor')) {
|
|
return post.isAuthoredByUser(user);
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
if (post) {
|
|
return self.transitionTo('posts.post', post);
|
|
}
|
|
|
|
self.set('noPosts', true);
|
|
});
|
|
},
|
|
|
|
// Mobile posts route callback
|
|
desktopTransition: function () {
|
|
this.goToPost();
|
|
}
|
|
});
|