-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Unify mobile state in JS, drop resize
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.
- Loading branch information
Showing
15 changed files
with
95 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,28 @@ | ||
| import Ember from 'ember'; | ||
| import mobileQuery from 'ghost/utils/mobile'; | ||
|
|
||
| // 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, | ||
|
|
||
| activate: function attachDesktopTransition() { | ||
| this._super(); | ||
| mobileQuery.addListener(this.desktopTransitionMQ); | ||
| }, | ||
| mediaQueries: Ember.inject.service(), | ||
|
|
||
| deactivate: function removeDesktopTransition() { | ||
| this._super(); | ||
| mobileQuery.removeListener(this.desktopTransitionMQ); | ||
| activate: function () { | ||
| this._callDesktopTransition = () => { | ||
| if (!this.get('mediaQueries.isMobile')) { | ||
| this.desktopTransition(); | ||
| } | ||
| }; | ||
| Ember.addObserver(this, 'mediaQueries.isMobile', this._callDesktopTransition); | ||
| }, | ||
|
|
||
| setDesktopTransitionMQ: Ember.on('init', function () { | ||
| var self = this; | ||
| this.set('desktopTransitionMQ', function desktopTransitionMQ() { | ||
| if (!mobileQuery.matches) { | ||
| self.desktopTransition(); | ||
| } | ||
| }); | ||
| }) | ||
| deactivate: function () { | ||
| if (this._callDesktopTransition) { | ||
| Ember.removeObserver(this, 'mediaQueries.isMobile', this._callDesktopTransition); | ||
| this._callDesktopTransition = null; | ||
| } | ||
| } | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import Ember from 'ember'; | ||
|
|
||
| const MEDIA_QUERIES = { | ||
| maxWidth600: '(max-width: 600px)', | ||
| isMobile: '(max-width: 800px)', | ||
| maxWidth900: '(max-width: 900px)', | ||
| maxWidth1000: '(max-width: 1000px)' | ||
| }; | ||
|
|
||
| export default Ember.Service.extend({ | ||
| init: function () { | ||
| this._super(...arguments); | ||
| this._handlers = []; | ||
| this.loadQueries(MEDIA_QUERIES); | ||
| }, | ||
|
|
||
| loadQueries: function (queries) { | ||
| Object.keys(queries).forEach(key => { | ||
| this.loadQuery(key, queries[key]); | ||
| }); | ||
| }, | ||
|
|
||
| loadQuery: function (key, queryString) { | ||
| let query = window.matchMedia(queryString); | ||
|
|
||
| this.set(key, query.matches); | ||
|
|
||
| let handler = Ember.run.bind(this, () => { | ||
| let lastValue = this.get(key); | ||
| let newValue = query.matches; | ||
| if (lastValue !== newValue) { | ||
| this.set(key, query.matches); | ||
| } | ||
| }); | ||
| query.addListener(handler); | ||
| this._handlers.push([query, handler]); | ||
| }, | ||
|
|
||
| willDestroy: function () { | ||
| this._handlers.forEach(([query, handler]) => { | ||
| query.removeListener(handler); | ||
| }); | ||
| this._super(...arguments); | ||
| } | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {{gh-tag-settings-form tag=tag setProperty=(action "setProperty") openModal="openModal" isMobile=isMobile}} | ||
| {{gh-tag-settings-form tag=tag setProperty=(action "setProperty") openModal="openModal"}} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters