webp-uploads
Last commit date
.wordpress-org
2 years ago
.gitattributes
2 years ago
can-load.php
2 years ago
fallback.js
3 years ago
helper.php
2 years ago
hooks.php
2 years ago
image-edit.php
2 years ago
load.php
2 years ago
readme.txt
2 years ago
rest-api.php
2 years ago
settings.php
2 years ago
fallback.js
125 lines
| 1 | window.wpPerfLab = window.wpPerfLab || {}; |
| 2 | |
| 3 | ( function( document ) { |
| 4 | window.wpPerfLab.webpUploadsFallbackWebpImages = function( media ) { |
| 5 | for ( var i = 0; i < media.length; i++ ) { |
| 6 | try { |
| 7 | var image = media[ i ], |
| 8 | media_details = image.media_details, |
| 9 | media_sources = media_details.sources, |
| 10 | sizes = media_details.sizes, |
| 11 | sizes_keys = Object.keys( sizes ); |
| 12 | |
| 13 | // If the full image has no JPEG version available, no sub-size will have JPEG available either. |
| 14 | if ( sizes.full && ! sizes.full.sources['image/jpeg'] ) { |
| 15 | continue; |
| 16 | } |
| 17 | |
| 18 | var images = document.querySelectorAll( 'img.wp-image-' + image.id ); |
| 19 | |
| 20 | for ( var j = 0; j < images.length; j++ ) { |
| 21 | |
| 22 | var src = images[ j ].src; |
| 23 | |
| 24 | // If there are sources but no sizes, then attempt to replace src through sources. In that case, there is nothing more to replace. |
| 25 | if ( media_sources && ! sizes_keys.length ) { |
| 26 | // Only modify src if available and the relevant sources are set. |
| 27 | if ( src && media_sources['image/webp'] && media_sources['image/jpeg'] ) { |
| 28 | src = src.replace( media_sources['image/webp'].file, media_sources['image/jpeg'].file ); |
| 29 | images[ j ].setAttribute( 'src', src ); |
| 30 | } |
| 31 | continue; |
| 32 | } |
| 33 | |
| 34 | var srcset = images[ j ].getAttribute( 'srcset' ); |
| 35 | |
| 36 | for ( var k = 0; k < sizes_keys.length; k++ ) { |
| 37 | var media_sizes_sources = sizes[ sizes_keys[ k ] ].sources; |
| 38 | if ( ! media_sizes_sources || ! media_sizes_sources['image/webp'] || ! media_sizes_sources['image/jpeg'] ) { |
| 39 | continue; |
| 40 | } |
| 41 | |
| 42 | // Check to see if the image src has any size set, then update it. |
| 43 | if ( media_sizes_sources['image/webp'].source_url === src ) { |
| 44 | src = media_sizes_sources['image/jpeg'].source_url; |
| 45 | |
| 46 | // If there is no srcset and the src has been replaced, there is nothing more to replace. |
| 47 | if ( ! srcset ) { |
| 48 | break; |
| 49 | } |
| 50 | } |
| 51 | |
| 52 | if ( srcset ) { |
| 53 | srcset = srcset.replace( media_sizes_sources['image/webp'].source_url, media_sizes_sources['image/jpeg'].source_url ); |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | if ( srcset ) { |
| 58 | images[ j ].setAttribute( 'srcset', srcset ); |
| 59 | } |
| 60 | |
| 61 | if ( src ) { |
| 62 | images[ j ].setAttribute( 'src', src ); |
| 63 | } |
| 64 | } |
| 65 | } catch ( e ) { |
| 66 | } |
| 67 | } |
| 68 | }; |
| 69 | |
| 70 | var restApi = document.getElementById( 'webpUploadsFallbackWebpImages' ).getAttribute( 'data-rest-api' ); |
| 71 | |
| 72 | var loadMediaDetails = function( nodes ) { |
| 73 | var ids = []; |
| 74 | for ( var i = 0; i < nodes.length; i++ ) { |
| 75 | var node = nodes[ i ]; |
| 76 | var srcset = node.getAttribute( 'srcset' ) || ''; |
| 77 | |
| 78 | if ( |
| 79 | node.nodeName !== "IMG" || |
| 80 | ( ! node.src.match( /\.webp$/i ) && ! srcset.match( /\.webp\s+/ ) ) |
| 81 | ) { |
| 82 | continue; |
| 83 | } |
| 84 | |
| 85 | var attachment = node.className.match( /wp-image-(\d+)/i ); |
| 86 | if ( attachment && attachment[1] && ids.indexOf( attachment[1] ) === -1 ) { |
| 87 | ids.push( attachment[1] ); |
| 88 | } |
| 89 | } |
| 90 | |
| 91 | for ( var page = 0, pages = Math.ceil( ids.length / 100 ); page < pages; page++ ) { |
| 92 | var pageIds = []; |
| 93 | for ( var i = 0; i < 100 && i + page * 100 < ids.length; i++ ) { |
| 94 | pageIds.push( ids[ i + page * 100 ] ); |
| 95 | } |
| 96 | |
| 97 | var jsonp = document.createElement( 'script' ); |
| 98 | var restPath = 'wp/v2/media/?_fields=id,media_details&_jsonp=wpPerfLab.webpUploadsFallbackWebpImages&per_page=100&include=' + pageIds.join( ',' ); |
| 99 | if ( -1 !== restApi.indexOf( '?' ) ) { |
| 100 | restPath = restPath.replace( '?', '&' ); |
| 101 | } |
| 102 | jsonp.src = restApi + restPath; |
| 103 | document.body.appendChild( jsonp ); |
| 104 | } |
| 105 | }; |
| 106 | |
| 107 | try { |
| 108 | // Loop through already available images. |
| 109 | loadMediaDetails( document.querySelectorAll( 'img' ) ); |
| 110 | |
| 111 | // Start the mutation observer to update images added dynamically. |
| 112 | var observer = new MutationObserver( function( mutationList ) { |
| 113 | for ( var i = 0; i < mutationList.length; i++ ) { |
| 114 | loadMediaDetails( mutationList[ i ].addedNodes ); |
| 115 | } |
| 116 | } ); |
| 117 | |
| 118 | observer.observe( document.body, { |
| 119 | subtree: true, |
| 120 | childList: true, |
| 121 | } ); |
| 122 | } catch ( e ) { |
| 123 | } |
| 124 | } )( document ); |
| 125 |