Closed wkeese closed 5 years ago
Weighing in just in case there will be a interest in: https://github.com/que-etc/resize-observer-polyfill
That was fast :-). I know there are some polyfills for that, using various methods, although I haven't seen this one before. I like it because:
PS: I was worried it would only get notified at the end of animations but judging from https://que-etc.github.io/resize-observer-polyfill/ it somehow seems to detect when an animation is happening.
I did a quick test of this by loading http://localhost/delite/tests/functional/popup.html and clicking the “show dropdown dialog” button, then in the console:
require(["resize-observer-polyfill/dist/ResizeObserver"], function (ResizeObserver) {
var ro = new ResizeObserver(function (entries, observer) {
entries.forEach(function (entry) {
console.log('Element:', entry.target, entry.contentRect.width, entry.contentRect.height);
});
});
ro.observe(document.getElementById("simpleDialog"));
});
And then clicking the “Add row”, “Delete row”, “Animate wide”, and “Animate narrow” buttons in the dialog. It worked, and I was relieved to see that it tracks the animation as it’s happening, not just at the end.
Tested on Chrome, IE11 and iPad (emulator). I tried to test on Android (emulator) but it's being persnickety, I couldn't get the remote debugger to work.
So, closing this ticket in favor of using resize-observer-polyfill.
Add function or class to detect when an element changes size, like http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/.
Can be used by delite/popup (rather than its current custom code), and also external code.
Note that there is a proposed ResizeObserver (https://developers.google.com/web/updates/2016/10/resizeobserver) class but it doesn't help much because it currently only runs on Chrome.