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.
37 lines
969 B
JavaScript
37 lines
969 B
JavaScript
/*
|
|
This cute little component has two jobs.
|
|
|
|
On desktop, it toggles autoNav behaviour. It tracks
|
|
that state via the maximise property, and uses the
|
|
state to render the appropriate icon.
|
|
|
|
On mobile, it renders a closing icon, and clicking it
|
|
closes the mobile menu
|
|
*/
|
|
|
|
import Ember from 'ember';
|
|
|
|
export default Ember.Component.extend({
|
|
classNames: ['gh-menu-toggle'],
|
|
|
|
mediaQueries: Ember.inject.service(),
|
|
isMobile: Ember.computed.reads('mediaQueries.isMobile'),
|
|
maximise: false,
|
|
|
|
iconClass: Ember.computed('maximise', 'isMobile', function () {
|
|
if (this.get('maximise') && !this.get('isMobile')) {
|
|
return 'icon-maximise';
|
|
} else {
|
|
return 'icon-minimise';
|
|
}
|
|
}),
|
|
|
|
click: function () {
|
|
if (this.get('isMobile')) {
|
|
this.sendAction('mobileAction');
|
|
} else {
|
|
this.toggleProperty('maximise');
|
|
this.sendAction('desktopAction');
|
|
}
|
|
}
|
|
});
|