c4effc9734
`window` and `document` are easily injected anyhow, but this primarily this keeps everything dom related in the same place. Included here are changes to make all ember related objects use the dom service `document` and `viewport` instead of just `document` and `window`. Quote from a previous PR (#4924) which explains the thinking around this: > Now I have all these things in the dom service, it would make sense to get window from there also. I was thinking of making a viewport method, which would be a nice word whether window was a browser window, an iframe (not really a window) like when ember testing, or anything else. To me the viewport is what we are actually talking about here.
33 lines
1,011 B
JavaScript
33 lines
1,011 B
JavaScript
import Component from '@ember/component';
|
|
import { get, set } from '@ember/object';
|
|
import { inject as service } from '@ember/service';
|
|
export default Component.extend({
|
|
dom: service('dom'),
|
|
isDropdownVisible: false,
|
|
didInsertElement: function() {
|
|
get(this, 'dom')
|
|
.root()
|
|
.classList.remove('template-with-vertical-menu');
|
|
},
|
|
actions: {
|
|
dropdown: function(e) {
|
|
if (get(this, 'dcs.length') > 0) {
|
|
set(this, 'isDropdownVisible', !get(this, 'isDropdownVisible'));
|
|
}
|
|
},
|
|
change: function(e) {
|
|
const dom = get(this, 'dom');
|
|
const win = dom.viewport();
|
|
const $root = dom.root();
|
|
const $body = dom.element('body');
|
|
if (e.target.checked) {
|
|
$root.classList.add('template-with-vertical-menu');
|
|
$body.style.height = $root.style.height = win.innerHeight + 'px';
|
|
} else {
|
|
$root.classList.remove('template-with-vertical-menu');
|
|
$body.style.height = $root.style.height = null;
|
|
}
|
|
},
|
|
},
|
|
});
|