Ghost/ghost/admin/app/services/media-queries.js
Kevin Ansfield 2f4f6db133 Use es6 across client and add ember-suave to enforce rules
no issue
- add ember-suave dependency
- upgrade grunt-jscs dependency
- add a new .jscsrc for the client's tests directory that extends from client's base .jscsrc
- separate client tests in Gruntfile jscs task so they pick up the test's .jscsrc
- standardize es6 usage across client
2015-11-30 10:41:01 +00:00

49 lines
1.2 KiB
JavaScript

import Ember from 'ember';
const {Service, run} = Ember;
const MEDIA_QUERIES = {
maxWidth600: '(max-width: 600px)',
isMobile: '(max-width: 800px)',
maxWidth900: '(max-width: 900px)',
maxWidth1000: '(max-width: 1000px)'
};
export default Service.extend({
init() {
this._super(...arguments);
this._handlers = [];
this.loadQueries(MEDIA_QUERIES);
},
loadQueries(queries) {
Object.keys(queries).forEach((key) => {
this.loadQuery(key, queries[key]);
});
},
loadQuery(key, queryString) {
let query = window.matchMedia(queryString);
this.set(key, query.matches);
let handler = 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() {
this._handlers.forEach(([query, handler]) => {
query.removeListener(handler);
});
this._super(...arguments);
}
});