2018-04-30 19:03:29 +03:00
|
|
|
import Service from '@ember/service';
|
2019-01-22 16:09:38 +03:00
|
|
|
import erd from 'element-resize-detector';
|
2018-04-30 19:03:29 +03:00
|
|
|
|
2022-02-03 01:11:11 +03:00
|
|
|
export default class ResizeDetectorService extends Service {
|
2022-02-07 19:53:12 +03:00
|
|
|
constructor() {
|
|
|
|
super(...arguments);
|
2018-04-30 19:03:29 +03:00
|
|
|
this.detector = erd({
|
|
|
|
strategy: 'scroll'
|
|
|
|
});
|
2022-02-03 01:11:11 +03:00
|
|
|
}
|
2018-04-30 19:03:29 +03:00
|
|
|
|
2022-02-07 19:53:12 +03:00
|
|
|
setup(selectorOrElement, callback) {
|
|
|
|
const element = typeof selectorOrElement === 'string'
|
|
|
|
? document.querySelector(selectorOrElement)
|
|
|
|
: selectorOrElement;
|
|
|
|
|
2018-04-30 19:03:29 +03:00
|
|
|
if (!element) {
|
|
|
|
// eslint-disable-next-line
|
2022-02-07 19:53:12 +03:00
|
|
|
console.error(`service:resize-detector - could not find element matching ${selectorOrElement}`);
|
2018-04-30 19:03:29 +03:00
|
|
|
}
|
2022-02-07 19:53:12 +03:00
|
|
|
|
2018-04-30 19:03:29 +03:00
|
|
|
this.detector.listenTo(element, callback);
|
2022-02-03 01:11:11 +03:00
|
|
|
}
|
2018-04-30 19:03:29 +03:00
|
|
|
|
2022-02-07 19:53:12 +03:00
|
|
|
teardown(selectorOrElement, callback) {
|
|
|
|
const element = typeof selectorOrElement === 'string'
|
|
|
|
? document.querySelector(selectorOrElement)
|
|
|
|
: selectorOrElement;
|
|
|
|
|
2018-04-30 19:03:29 +03:00
|
|
|
if (element) {
|
|
|
|
this.detector.removeListener(element, callback);
|
|
|
|
}
|
|
|
|
}
|
2022-02-03 01:11:11 +03:00
|
|
|
}
|