element resize observer

[wkeese]

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.

[asudoh]

Weighing in just in case there will be a interest in: https://github.com/que-etc/resize-observer-polyfill

[wkeese]

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:

• It's UMD, so it can be dropped into the current code.
• I thought it would be too big since it's 15 pages long but the page says it's only 2.4K when zipped and minified.
• https://github.com/que-etc/resize-observer-polyfill#observation-strategy seems well thought out.

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.

[wkeese]

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.

[wkeese]

So, closing this ticket in favor of using resize-observer-polyfill.