Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Removed usage of MutationObserver

Browse source 
refs https://github.com/TryGhost/Team/issues/1249

We now want to update the element which we are observing, which means we
end up in a loop. Instead we can listen to resize events and manually
update the dimensions when images are changed.
This commit is contained in:
Fabien egg O'Carroll 2021-12-14 16:31:29 +02:00
parent d3ee36e45d
commit 1338ddd12b
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.js
View file

@ -125,14 +125,15 @@ export default class KoenigCardBeforeAfterComponent extends Component {
.trigger('click');
}
setupListeners(element) {
let observer = new MutationObserver(() => {
// @TODO Update on specific mutations
this.updateImageDimensions();
});
let config = {attributes: true, childList: true, subtree: true};
observer.observe(element, config);
setupListeners() {
this.updateImageDimensions();
const handleResize = () => {
this.updateImageDimensions();
};
window.addEventListener('resize', handleResize);
this.willDestroy = () => {
window.removeEventListener('resize', handleResize);
};
}
@action
@ -155,7 +156,7 @@ export default class KoenigCardBeforeAfterComponent extends Component {
@action
registerElement(element) {
this.element = element;
this.setupListeners(element);
this.setupListeners();
}
@action
@ -196,6 +197,7 @@ export default class KoenigCardBeforeAfterComponent extends Component {
};
let prop = `${metadata.id}Image`;
this.args.payload[prop] = imageData;
this.updateImageDimensions();
});
image.src = file.url;
}
@ -203,11 +205,13 @@ export default class KoenigCardBeforeAfterComponent extends Component {
@action
setLayoutWide() {
this.args.payload.cardWidth = 'wide';
run.scheduleOnce('afterRender', this, this.updateImageDimensions);
}
@action
setLayoutFull() {
this.args.payload.cardWidth = 'full';
run.scheduleOnce('afterRender', this, this.updateImageDimensions);
}
@action