Changeset 56541
- Timestamp:
- 09/07/2023 08:35:38 PM (14 months ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/js/_enqueues/admin/common.js
r56243 r56541 2105 2105 2106 2106 }( jQuery, window )); 2107 2108 /** 2109 * Freeze animated plugin icons when reduced motion is enabled. 2110 * 2111 * When the user has enabled the 'prefers-reduced-motion' setting, this module 2112 * stops animations for all GIFs on the page with the class 'plugin-icon' or 2113 * plugin icon images in the update plugins table. 2114 * 2115 * @since 6.4 2116 */ 2117 (function() { 2118 // Private variables and methods. 2119 var priv = {}, 2120 pub = {}, 2121 mediaQuery; 2122 2123 // Initialize pauseAll to false; it will be set to true if reduced motion is preferred. 2124 priv.pauseAll = false; 2125 if ( window.matchMedia ) { 2126 mediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' ); 2127 if ( ! mediaQuery || mediaQuery.matches ) { 2128 priv.pauseAll = true; 2129 } 2130 } 2131 2132 // Method to replace animated GIFs with a static frame. 2133 priv.freezeAnimatedPluginIcons = function( img ) { 2134 var coverImage = function() { 2135 var width = img.width; 2136 var height = img.height; 2137 var canvas = document.createElement( 'canvas' ); 2138 2139 // Set canvas dimensions. 2140 canvas.width = width; 2141 canvas.height = height; 2142 2143 // Copy classes from the image to the canvas. 2144 canvas.className = img.className; 2145 2146 // Check if the image is inside a specific table. 2147 var isInsideUpdateTable = img.closest( '#update-plugins-table' ); 2148 2149 if ( isInsideUpdateTable ) { 2150 // Transfer computed styles from image to canvas. 2151 var computedStyles = window.getComputedStyle( img ), 2152 i, max; 2153 for ( i = 0, max = computedStyles.length; i < max; i++ ) { 2154 var propName = computedStyles[ i ]; 2155 var propValue = computedStyles.getPropertyValue( propName ); 2156 canvas.style[ propName ] = propValue; 2157 } 2158 } 2159 2160 // Draw the image onto the canvas. 2161 canvas.getContext( '2d' ).drawImage( img, 0, 0, width, height ); 2162 2163 // Set accessibility attributes on canvas. 2164 canvas.setAttribute( 'aria-hidden', 'true' ); 2165 canvas.setAttribute( 'role', 'presentation' ); 2166 2167 // Insert canvas before the image and set the image to be near-invisible. 2168 var parent = img.parentNode; 2169 parent.insertBefore( canvas, img ); 2170 img.style.opacity = 0.01; 2171 img.style.width = '0px'; 2172 img.style.height = '0px'; 2173 }; 2174 2175 // If the image is already loaded, apply the coverImage function. 2176 if ( img.complete ) { 2177 coverImage(); 2178 } else { 2179 // Otherwise, wait for the image to load. 2180 img.addEventListener( 'load', coverImage, true ); 2181 } 2182 }; 2183 2184 // Public method to freeze all relevant GIFs on the page. 2185 pub.freezeAll = function() { 2186 var images = document.querySelectorAll( '.plugin-icon, #update-plugins-table img' ); 2187 for ( var x = 0; x < images.length; x++ ) { 2188 if ( /\.gif(?:\?|$)/i.test( images[ x ].src ) ) { 2189 priv.freezeAnimatedPluginIcons( images[ x ] ); 2190 } 2191 } 2192 }; 2193 2194 // Only run the freezeAll method if the user prefers reduced motion. 2195 if ( true === priv.pauseAll ) { 2196 pub.freezeAll(); 2197 } 2198 2199 // Listen for jQuery AJAX events. 2200 ( function( $ ) { 2201 $( document ).ajaxComplete( function( event, xhr, settings ) { 2202 // Check if this is the 'search-install-plugins' request. 2203 if ( settings.data && settings.data.includes( 'action=search-install-plugins' ) ) { 2204 // Recheck if the user prefers reduced motion. 2205 if ( window.matchMedia ) { 2206 var mediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' ); 2207 if ( mediaQuery.matches ) { 2208 pub.freezeAll(); 2209 } 2210 } else { 2211 // Fallback for browsers that don't support matchMedia. 2212 if ( true === priv.pauseAll ) { 2213 pub.freezeAll(); 2214 } 2215 } 2216 } 2217 } ); 2218 } )( jQuery ); 2219 2220 // Expose public methods. 2221 return pub; 2222 })();
Note: See TracChangeset
for help on using the changeset viewer.