RealtimePreview.js: Respect prefers-reduced-motion

Set inManualMode to the result of the current prefers-reduced-motion
setting.
Add another property (reducedMotion) for later UI/message work

Bug: T314787
Change-Id: Ifeb8b996430830499945e73eca2dcfe0355c8046
This commit is contained in:
samtar 2022-08-12 22:49:14 +01:00
parent 9614477f8c
commit 4a49cefbca
No known key found for this signature in database
GPG key ID: 2C15A644ABE9A27E

View file

@ -59,7 +59,10 @@ function RealtimePreview() {
// Manual mode widget.
this.manualWidget = new ManualWidget( this, this.reloadButton );
this.inManualMode = false;
// Set up a property for reducedMotion — useful for customising the UI message.
this.reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
// If the user has "prefers-reduced-motion" set, force us into manual mode.
this.inManualMode = this.reducedMotion;
this.twoPaneLayout.getPane2().append( this.manualWidget.$element, this.reloadButton.$element, this.$loadingBar, this.$previewNode, this.errorLayout.$element );
this.eventNames = 'change.realtimepreview input.realtimepreview cut.realtimepreview paste.realtimepreview';