search

CrazyTim / spin-wheel

An easy to use, themeable component for randomising choices and prizes.
https://crazytim.github.io/spin-wheel/examples/themes
MIT License
214 stars 57 forks source link

Use ResizeObserver to detect size change of wheel container #26

Closed CrazyTim closed 5 months ago

CrazyTim commented 11 months ago

For most use cases, the size of the container will only change if the window is resized (due to a responsive layout). So the current method of listening for window.resize is good enough. However this won't work if JavaScript triggers a resize of just the container, and we will need to call wheel.refresh().

Not a big deal, but ResizeObserver would be better. It was implemented in Edge and Safari in early 2020, so its fairly new tech, and we will need to fall back to the existing method of listening for window.resize.

CrazyTim commented 5 months ago

As raised in #42, it might be nessecary to include Wheel.resize in the docs for older browsers that don't support ResizeObserver.

matronator commented 5 months ago

As raised in #42, it might be nessecary to include Wheel.resize in the docs for older browsers that don't support ResizeObserver.

It's not just old browsers, I'm on the latest Safari that supports ResizeObserver, but I still have to call resize when resizing the window while the modal with the wheel is closed.

CrazyTim commented 5 months ago

ResizeObserver

As raised in #42, it might be nessecary to include Wheel.resize in the docs for older browsers that don't support ResizeObserver.

It's not just old browsers, I'm on the latest Safari that supports ResizeObserver, but I still have to call resize when resizing the window while the modal with the wheel is closed.

@matronator this has not been implemented yet. When it does, you shouldn't need to call Wheel.resize in a modern browser.

CrazyTim commented 5 months ago

Done in 028c510