mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00: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.
28 lines
850 B
JavaScript
28 lines
850 B
JavaScript
import Ember from 'ember';
|
|
|
|
// Routes that extend MobileIndexRoute need to implement
|
|
// desktopTransition, a function which is called when
|
|
// the user resizes to desktop levels.
|
|
export default Ember.Route.extend({
|
|
desktopTransition: Ember.K,
|
|
_callDesktopTransition: null,
|
|
|
|
mediaQueries: Ember.inject.service(),
|
|
|
|
activate: function () {
|
|
this._callDesktopTransition = () => {
|
|
if (!this.get('mediaQueries.isMobile')) {
|
|
this.desktopTransition();
|
|
}
|
|
};
|
|
Ember.addObserver(this, 'mediaQueries.isMobile', this._callDesktopTransition);
|
|
},
|
|
|
|
deactivate: function () {
|
|
if (this._callDesktopTransition) {
|
|
Ember.removeObserver(this, 'mediaQueries.isMobile', this._callDesktopTransition);
|
|
this._callDesktopTransition = null;
|
|
}
|
|
}
|
|
|
|
});
|