Fix an issue with addEventListener in old Safari (pre v14) (#2114)

Seems Safari only added `MediaQueryList: change event` in version 14.
This is a workaround for older versions.

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event

Reported here

https://discord.com/channels/859816885297741824/926464446694580275/1166028196832092282

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Fixes an issue with `addEventListener` on MediaQueryList object in old
versions of Safari.
This commit is contained in:
Mitja Bezenšek 2023-10-24 21:47:12 +02:00 committed by GitHub
parent 94f78652cc
commit bc832bae6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -21,9 +21,24 @@ export function useDocumentEvents() {
} }
const mqString = `(resolution: ${window.devicePixelRatio}dppx)` const mqString = `(resolution: ${window.devicePixelRatio}dppx)`
const media = matchMedia(mqString) const media = matchMedia(mqString)
media.addEventListener('change', updatePixelRatio) // Safari only started supporting `addEventListener('change',...) in version 14
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event
const safariCb = (ev: any) => {
if (ev.type === 'change') {
updatePixelRatio()
}
}
if (media.addEventListener) {
media.addEventListener('change', updatePixelRatio)
} else if (media.addListener) {
media.addListener(safariCb)
}
remove = () => { remove = () => {
media.removeEventListener('change', updatePixelRatio) if (media.removeEventListener) {
media.removeEventListener('change', updatePixelRatio)
} else if (media.removeListener) {
media.removeListener(safariCb)
}
} }
editor.updateInstanceState({ devicePixelRatio: window.devicePixelRatio }) editor.updateInstanceState({ devicePixelRatio: window.devicePixelRatio })
} }