018a4ec5e9
refs https://github.com/TryGhost/Ghost/issues/14101 - swapped use of `<LiquidWormhole>` to `{{#in-element}}` because we weren't animating anything - we can now use `{{css-transition}}` instead if we want to animate in the future - swapped use of `ShortcutsMixin` for ember-keyboard's `{{on-key}}` modifier - added `{{query-selector}}` helper so we can grab an element from inside the template rather than requiring a backing component function (used to pass the wormhole element to `{{#in-element}}`) - added `{{on-resize}}` modifier so the `resizeDetector` service can be used directly from the template rather than requiring a backing component to wait for render and use query selectors to grab an element
35 lines
1005 B
JavaScript
35 lines
1005 B
JavaScript
import Service from '@ember/service';
|
|
import erd from 'element-resize-detector';
|
|
|
|
export default class ResizeDetectorService extends Service {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.detector = erd({
|
|
strategy: 'scroll'
|
|
});
|
|
}
|
|
|
|
setup(selectorOrElement, callback) {
|
|
const element = typeof selectorOrElement === 'string'
|
|
? document.querySelector(selectorOrElement)
|
|
: selectorOrElement;
|
|
|
|
if (!element) {
|
|
// eslint-disable-next-line
|
|
console.error(`service:resize-detector - could not find element matching ${selectorOrElement}`);
|
|
}
|
|
|
|
this.detector.listenTo(element, callback);
|
|
}
|
|
|
|
teardown(selectorOrElement, callback) {
|
|
const element = typeof selectorOrElement === 'string'
|
|
? document.querySelector(selectorOrElement)
|
|
: selectorOrElement;
|
|
|
|
if (element) {
|
|
this.detector.removeListener(element, callback);
|
|
}
|
|
}
|
|
}
|