MediaWiki:Common.js: различия между версиями

Интерактивная навигация по истории

← Предыдущая правка Следующая правка →

@@ Строка 1354: / Строка 1354: @@
 // test
-( function () {
+( function ( $, mw ) {
-     async function isAPNG( url ) {
+     function detectAPNG( url, callback ) {
-         try {
+         var xhr = new XMLHttpRequest();
-            const resp = await fetch( url );
+        xhr.open( 'GET', url, true );
-            const buf  = await resp.arrayBuffer();
+        xhr.responseType = 'arraybuffer';
-             const data = new Uint8Array( buf );
+        xhr.onload = function () {
-            const acTL = [0x61,0x63,0x54,0x4C];
+             if ( xhr.status >= 200 && xhr.status < 300 ) {
-            for ( let i = 0; i < data.length - 4; i++ ) {
+                var bytes = new Uint8Array( xhr.response );
-                if ( acTL.every( (b,j) => data[i+j] === b ) ) {
+                var acTL = [ 0x61, 0x63, 0x54, 0x4C ];
-                    return true;
+                for ( var i = 0; i < bytes.length - 4; i++ ) {
+                    if (
+                        bytes[i]   === acTL[0] &&
+                        bytes[i+1] === acTL[1] &&
+                        bytes[i+2] === acTL[2] &&
+                        bytes[i+3] === acTL[3]
+                    ) {
+                        callback( true );
+                        return;
+                    }
                  }
              }
+            callback( false );
+        };
+        xhr.onerror = function () {
+            callback( false );
+        };
+        xhr.send();
+    }
+    function replaceWithCanvas( imgEl ) {
+        try {
+            var canvas = document.createElement( 'canvas' );
+            canvas.width  = imgEl.naturalWidth  || imgEl.width;
+            canvas.height = imgEl.naturalHeight || imgEl.height;
+            canvas.getContext( '2d' ).drawImage( imgEl, 0, 0 );
+            imgEl.parentNode.replaceChild( canvas, imgEl );
          } catch ( e ) {
-            console.error( 'APNG check failed for', url, e );
          }
-        return false;
      }
      $( function () {
-         $( 'img[src$=".png"]' ).each( async function () {
+         $( 'img[src$=".png"]' ).each( function () {
-             const $img = $( this );
+             var img = this;
-             const src  = $img.attr( 'src' );
+             var url = img.src;
-             if ( await isAPNG( src ) ) {
-                 const imgEl   = this;
+             detectAPNG( url, function ( isAPNG ) {
-                const canvas  = document.createElement( 'canvas' );
+                 if ( isAPNG ) {
-                canvas.width  = imgEl.naturalWidth;
+                    if ( img.complete && img.naturalWidth ) {
-                canvas.height = imgEl.naturalHeight;
+                        replaceWithCanvas( img );
-                imgEl.parentNode.replaceChild( canvas, imgEl );
+                    } else {
-                canvas.getContext( '2d' ).drawImage( imgEl, 0, 0 );
+                        img.addEventListener( 'load', function () {
-             }
+                            replaceWithCanvas( img );
+                        } );
+                    }
+                }
+             } );
          } );
      } );
-} )();
+} )( jQuery, mediaWiki );