2015-10-28 14:36:45 +03:00
|
|
|
import Ember from 'ember';
|
2015-06-09 19:25:45 +03:00
|
|
|
|
2016-01-19 16:03:27 +03:00
|
|
|
const {
|
|
|
|
Component,
|
|
|
|
computed,
|
|
|
|
inject: {service}
|
|
|
|
} = Ember;
|
2015-06-09 19:25:45 +03:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
/*
|
|
|
|
This cute little component has two jobs.
|
2015-06-09 19:25:45 +03:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
On desktop, it toggles autoNav behaviour. It tracks
|
|
|
|
that state via the maximise property, and uses the
|
|
|
|
state to render the appropriate icon.
|
2015-06-09 19:25:45 +03:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
On mobile, it renders a closing icon, and clicking it
|
|
|
|
closes the mobile menu
|
|
|
|
*/
|
|
|
|
export default Component.extend({
|
2015-06-09 19:25:45 +03:00
|
|
|
classNames: ['gh-menu-toggle'],
|
|
|
|
|
2016-01-19 16:03:27 +03:00
|
|
|
mediaQueries: service(),
|
2015-10-28 14:36:45 +03:00
|
|
|
isMobile: computed.reads('mediaQueries.isMobile'),
|
2015-06-09 19:25:45 +03:00
|
|
|
maximise: false,
|
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
iconClass: computed('maximise', 'isMobile', function () {
|
2015-06-09 19:25:45 +03:00
|
|
|
if (this.get('maximise') && !this.get('isMobile')) {
|
|
|
|
return 'icon-maximise';
|
|
|
|
} else {
|
|
|
|
return 'icon-minimise';
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
click() {
|
2015-06-09 19:25:45 +03:00
|
|
|
if (this.get('isMobile')) {
|
|
|
|
this.sendAction('mobileAction');
|
|
|
|
} else {
|
|
|
|
this.toggleProperty('maximise');
|
|
|
|
this.sendAction('desktopAction');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|