consul/ui-v2/app/mixins/with-resizing.js
John Cowen 2920f73ddd ui: Adds document and viewport methods to the dom service (#5052)
`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.
2019-05-01 18:21:57 +00:00

36 lines
982 B
JavaScript

import Mixin from '@ember/object/mixin';
import { inject as service } from '@ember/service';
import { get } from '@ember/object';
import { assert } from '@ember/debug';
export default Mixin.create({
dom: service('dom'),
resize: function(e) {
assert('with-resizing.resize needs to be overridden', false);
},
init: function() {
this._super(...arguments);
this.handler = e => {
const win = e.target;
this.resize({
detail: { width: win.innerWidth, height: win.innerHeight },
});
};
},
didInsertElement: function() {
this._super(...arguments);
get(this, 'dom')
.viewport()
.addEventListener('resize', this.handler, false);
this.didAppear();
},
didAppear: function() {
this.handler({ target: get(this, 'dom').viewport() });
},
willDestroyElement: function() {
get(this, 'dom')
.viewport()
.removeEventListener('resize', this.handler, false);
this._super(...arguments);
},
});