Event based reinitialising - Resize Sensor

[ashley-hunter]

Brought in the most recent resize sensor code. Continuing the discussion from: #341

[illuusio]

Thank you for the contribution. I test this and try to get it in

[illuusio]

Where these CSS styles come from? Are they some tasked knownledge wizardy that I have not access to?

[ashley-hunter]

The resize detection is based on this idea: (https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js)[https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js].

Essentially the divs are positioned in a way that if there is any change in size it would cause a scroll event to fire, which we can then use to detect when to reinitialise. This particular css is tasked with creating the divs so they fill the entire area without being visible or having any effect on the content the user places in it.

[illuusio]

Why 10 px?

[ashley-hunter]

It doesn't necessarily need to be 10px, we just need to increase it so it is bigger in size that its parent container.

[illuusio]

How does this prevent getting into infinite resize loop? Is timer for that?

[ashley-hunter]

Essentially once a resize has occurred the sensor divs are likely no longer the size they need to trigger a scroll event (detect a resize). So we need to update their sizes. Setting the size of these elements does not trigger a resize event again as it will only be triggered when the parent container changes in size.

The timer isn't for that, it is just there as an additional feature, where a user may wish to delay the reinit after a resize occurs.

I hope that makes sense, it is quite difficult to explain.

[gitbreaker222]

i have set up a demo - unfortunately it seems not to resolve the issue I addressed in the prior discusson 😟

how to test

reinitialize with interval: https://jsfiddle.net/pa5ugd0v/6/
reinitialize with event (this PR): https://jsfiddle.net/pcwudrmc/12519/

• inspect the container div with the class .scroll-pane
• --> the immediate child .jspContainer should NOT refresh infinite while idle

However both do

background problem

The content of the .scroll-pane has more width (20em) than the container (19em). This seems to cause the infinite reinitializing and it seems to remain with the changes here.

tested in latest Chromium. When changing the fiddle, clear app cache stuff or test in private window

edit: I hope I've did everything right with the demo setup. This is my first real contribution to open source 😁

[ashley-hunter]

Hi @gitbreaker222, thanks for the examples! I notice one thing in the second example that may need updated to get the event based resizing to work. In the event based example the settings still use autoReinitialise: true. To take advantage of the changes in this PR try changing it to resizeSensor: true instead.

I didn't replace the autoReinitialise setting because there are a few edge cases where the event based resizing wouldn't suit. Hopefully you'll notice a good improvement after you make that change! If not let me know and I can look into it further 👍

[gitbreaker222]

thanks for the hint @ashley-hunter 👍
I've updated the fiddle with the resizeSensor and it solves the problem 😌
https://jsfiddle.net/pcwudrmc/12831/

• the panel adapts when the width of the window changes
• no endless relayouts

(demo jScrollPanel does not scroll, because I did not include mousewheel.js. Focus should be on the automatic resize.)

[illuusio]

Ok I test this once more and try to merge this. As this is in and more npm build logic merge I think I'll make release candidate after that to have more testing. Should there be changes to examples because those jsFiddle examples? I just looked through vert roughly and thanks @gitbreaker222 you are doing fine (as you test this for me).

[gitbreaker222]

I have used jsFiddle, because it was more easy for me to compare intervall/event resizing and analyse the performance drain.

My demo is basically just a mini version of the new example page examples/resize_sensor.html.

Aside from that, examples/auto_reinitialise.html won't advertise using autoReinitialise anymore and links to examples/resize_sensor.html instead.

The list in examples/index.html also has a new entry for the sensor, as well as the documentation in examples/settings.html

[illuusio]

@gitbreaker222 Thank you for the explanation. Yes I noticed that all there is new example and settings update which is 👍 for getting this in.

[illuusio]

Merged thanks.