diff --git a/_InstallPackages/picturefill_2.2.0.zip b/_InstallPackages/picturefill_2.2.0.zip deleted file mode 100644 index 146ef7ca..00000000 Binary files a/_InstallPackages/picturefill_2.2.0.zip and /dev/null differ diff --git a/_InstallPackages/picturefill_2.3.0.zip b/_InstallPackages/picturefill_2.3.0.zip new file mode 100644 index 00000000..b44270a1 Binary files /dev/null and b/_InstallPackages/picturefill_2.3.0.zip differ diff --git a/picturefill_2.2.0/CHANGES.htm b/picturefill_2.2.0/CHANGES.htm deleted file mode 100644 index 17576cfe..00000000 --- a/picturefill_2.2.0/CHANGES.htm +++ /dev/null @@ -1,20 +0,0 @@ -
    -
  1. - 2.2.0 -

    Assorted bugfixes, improvements to compatibility in AMD environments, minor improvements to performance and spec compliance.

    -
    2. -
  2. - 2.1.0 - -
    3. -
  3. - 2.0.0 - -
    4. -
diff --git a/picturefill_2.2.0/LICENSE.htm b/picturefill_2.2.0/LICENSE.htm deleted file mode 100644 index 695464cf..00000000 --- a/picturefill_2.2.0/LICENSE.htm +++ /dev/null @@ -1 +0,0 @@ -

picturefill is licened under the MIT License.

diff --git a/picturefill_2.3.0/CHANGES.htm b/picturefill_2.3.0/CHANGES.htm new file mode 100644 index 00000000..79b8921a --- /dev/null +++ b/picturefill_2.3.0/CHANGES.htm @@ -0,0 +1,51 @@ +
    +
  1. + 2.3.0 +

    Changes from Picturefill 2.3 Beta

    +

    Spec Matching

    + +

    Bugs

    + +
    2. +
  2. + 2.3.0 Beta +

    Along with assorted bugfixes and performance improvements, the following major issues have been addressed with this release:

    + +

    Added support detection for the following image types: jpxr, jpg2000, and apng.
    + Image format support can now be handled using extensions. SVG and WebP remain a part of the Picturefill core, so as not to break existing implementations.

    + +

    Support for intrinsic image dimensions
    + Picturefill now matches native behavior in terms of an image’s inherent size: when served at “2x,” the image is displayed at half of its source’s inherent size. Note that this can and must be overrideable via CSS.

    + +

    Picturefill is now a named AMD module, and uses AMD/CommonJS module factory also in native supporting browsers.

    + +

    Picturefill has a team now
    + Everyone join me in welcoming the team responsible for the lion’s share of work that went into this release, and many more to come.

    + +

    Did someone just whisper “Picturefill 3?”
    + I thought I just heard someone whisper “Picturefill 3.” Weird.

    +
    3. +
  3. + 2.2.0 +

    Assorted bugfixes, improvements to compatibility in AMD environments, minor improvements to performance and spec compliance.

    +
    4. +
  4. + 2.1.0 + +
    5. +
  5. + 2.0.0 + +
    6. +
diff --git a/picturefill_2.3.0/LICENSE.htm b/picturefill_2.3.0/LICENSE.htm new file mode 100644 index 00000000..875f3668 --- /dev/null +++ b/picturefill_2.3.0/LICENSE.htm @@ -0,0 +1 @@ +

picturefill is licened under the MIT License.

diff --git a/picturefill_2.2.0/picturefill.dnn b/picturefill_2.3.0/picturefill.dnn similarity index 93% rename from picturefill_2.2.0/picturefill.dnn rename to picturefill_2.3.0/picturefill.dnn index 2fcb77d9..9e183125 100644 --- a/picturefill_2.2.0/picturefill.dnn +++ b/picturefill_2.3.0/picturefill.dnn @@ -1,6 +1,6 @@ - + Picturefill <picture>, srcset, sizes, and more http://scottjehl.github.com/picturefill/]]> @@ -24,7 +24,7 @@ picturefill picturefill.js BodyBottom - https://cdn.jsdelivr.net/picturefill/2.2.0/picturefill.min.js + https://cdn.jsdelivr.net/picturefill/2.3.0/picturefill.min.js picturefill diff --git a/picturefill_2.2.0/picturefill.js b/picturefill_2.3.0/picturefill.js similarity index 72% rename from picturefill_2.2.0/picturefill.js rename to picturefill_2.3.0/picturefill.js index c72991fb..29c20245 100644 --- a/picturefill_2.2.0/picturefill.js +++ b/picturefill_2.3.0/picturefill.js @@ -1,6 +1,6 @@ -/*! Picturefill - v2.2.0 - 2014-10-30 +/*! Picturefill - v2.3.0 - 2015-03-23 * http://scottjehl.github.io/picturefill -* Copyright (c) 2014 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT */ +* Copyright (c) 2015 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT */ /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */ window.matchMedia || (window.matchMedia = function() { @@ -56,9 +56,24 @@ window.matchMedia || (window.matchMedia = function() { // Enable strict mode "use strict"; + function expose(picturefill) { + /* expose picturefill */ + if ( typeof module === "object" && typeof module.exports === "object" ) { + // CommonJS, just export + module.exports = picturefill; + } else if ( typeof define === "function" && define.amd ) { + // AMD support + define( "picturefill", function() { return picturefill; } ); + } + if ( typeof w === "object" ) { + // If no AMD and we are in the browser, attach to window + w.picturefill = picturefill; + } + } + // If picture is supported, well, that's awesome. Let's get outta here... if ( w.HTMLPictureElement ) { - w.picturefill = function() { }; + expose(function() { }); return; } @@ -66,7 +81,9 @@ window.matchMedia || (window.matchMedia = function() { doc.createElement( "picture" ); // local object for method references and testing exposure - var pf = {}; + var pf = w.picturefill || {}; + + var regWDesc = /\s+\+?\d+(e\d+)?w/; // namespace pf.ns = "picturefill"; @@ -82,10 +99,18 @@ window.matchMedia || (window.matchMedia = function() { return str.trim ? str.trim() : str.replace( /^\s+|\s+$/g, "" ); }; - // just a string endsWith workaround - pf.endsWith = function( str, suffix ) { - return str.endsWith ? str.endsWith( suffix ) : str.indexOf( suffix, str.length - suffix.length ) !== -1; - }; + /** + * Gets a string and returns the absolute URL + * @param src + * @returns {String} absolute URL + */ + pf.makeUrl = (function() { + var anchor = doc.createElement( "a" ); + return function(src) { + anchor.href = src; + return anchor.href; + }; + })(); /** * Shortcut method for https://w3c.github.io/webappsec/specs/mixedcontent/#restricts-mixed-content ( for easy overriding in tests ) @@ -111,14 +136,17 @@ window.matchMedia || (window.matchMedia = function() { * http://dev.w3.org/csswg/css-values-3/#length-value */ pf.getWidthFromLength = function( length ) { - // If a length is specified and doesn’t contain a percentage, and it is greater than 0 or using `calc`, use it. Else, use the `100vw` default. - length = length && length.indexOf( "%" ) > -1 === false && ( parseFloat( length ) > 0 || length.indexOf( "calc(" ) > -1 ) ? length : "100vw"; + var cssValue; + // If a length is specified and doesn’t contain a percentage, and it is greater than 0 or using `calc`, use it. Else, abort. + if ( !(length && length.indexOf( "%" ) > -1 === false && ( parseFloat( length ) > 0 || length.indexOf( "calc(" ) > -1 )) ) { + return false; + } /** * If length is specified in `vw` units, use `%` instead since the div we’re measuring * is injected at the top of the document. * - * TODO: maybe we should put this behind a feature test for `vw`? + * TODO: maybe we should put this behind a feature test for `vw`? The risk of doing this is possible browser inconsistancies with vw vs % */ length = length.replace( "vw", "%" ); @@ -128,73 +156,74 @@ window.matchMedia || (window.matchMedia = function() { // Positioning styles help prevent padding/margin/width on `html` or `body` from throwing calculations off. pf.lengthEl.style.cssText = "border:0;display:block;font-size:1em;left:0;margin:0;padding:0;position:absolute;visibility:hidden"; + + // Add a class, so that everyone knows where this element comes from + pf.lengthEl.className = "helper-from-picturefill-js"; } - pf.lengthEl.style.width = length; + pf.lengthEl.style.width = "0px"; + + try { + pf.lengthEl.style.width = length; + } catch ( e ) {} doc.body.appendChild(pf.lengthEl); - // Add a class, so that everyone knows where this element comes from - pf.lengthEl.className = "helper-from-picturefill-js"; + cssValue = pf.lengthEl.offsetWidth; - if ( pf.lengthEl.offsetWidth <= 0 ) { - // Something has gone wrong. `calc()` is in use and unsupported, most likely. Default to `100vw` (`100%`, for broader support.): - pf.lengthEl.style.width = doc.documentElement.offsetWidth + "px"; + if ( cssValue <= 0 ) { + cssValue = false; } - var offsetWidth = pf.lengthEl.offsetWidth; - doc.body.removeChild( pf.lengthEl ); - return offsetWidth; + return cssValue; }; + pf.detectTypeSupport = function( type, typeUri ) { + // based on Modernizr's lossless img-webp test + // note: asynchronous + var image = new w.Image(); + image.onerror = function() { + pf.types[ type ] = false; + picturefill(); + }; + image.onload = function() { + pf.types[ type ] = image.width === 1; + picturefill(); + }; + image.src = typeUri; + + return "pending"; + }; // container of supported mime types that one might need to qualify before using - pf.types = {}; + pf.types = pf.types || {}; - // Add support for standard mime types - pf.types[ "image/jpeg" ] = true; - pf.types[ "image/gif" ] = true; - pf.types[ "image/png" ] = true; + pf.initTypeDetects = function() { + // Add support for standard mime types + pf.types[ "image/jpeg" ] = true; + pf.types[ "image/gif" ] = true; + pf.types[ "image/png" ] = true; + pf.types[ "image/svg+xml" ] = doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1"); + pf.types[ "image/webp" ] = pf.detectTypeSupport("image/webp", "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA="); + }; - // test svg support - pf.types[ "image/svg+xml" ] = doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1"); - - // test webp support, only when the markup calls for it - pf.types[ "image/webp" ] = function() { - // based on Modernizr's lossless img-webp test - // note: asynchronous - var type = "image/webp"; - - image.onerror = function() { - pf.types[ type ] = false; - picturefill(); - }; - image.onload = function() { - pf.types[ type ] = image.width === 1; - picturefill(); - }; - image.src = "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA="; - }; - - /** - * Takes a source element and checks if its type attribute is present and if so, supported - * Note: for type tests that require a async logic, - * you can define them as a function that'll run only if that type needs to be tested. Just make the test function call picturefill again when it is complete. - * see the async webp test above for example - */ pf.verifyTypeSupport = function( source ) { var type = source.getAttribute( "type" ); // if type attribute exists, return test result, otherwise return true if ( type === null || type === "" ) { return true; } else { + var pfType = pf.types[ type ]; // if the type test is a function, run it and return "pending" status. The function will rerun picturefill on pending elements once finished. - if ( typeof( pf.types[ type ] ) === "function" ) { - pf.types[ type ](); + if ( typeof pfType === "string" && pfType !== "pending") { + pf.types[ type ] = pf.detectTypeSupport( type, pfType ); + return "pending"; + } else if ( typeof pfType === "function" ) { + pfType(); return "pending"; } else { - return pf.types[ type ]; + return pfType; } } }; @@ -226,17 +255,17 @@ window.matchMedia || (window.matchMedia = function() { if ( !length ) { continue; } - if ( !media || pf.matchesMedia( media ) ) { - // if there is no media query or it matches, choose this as our winning length - // and end algorithm - winningLength = length; + // if there is no media query or it matches, choose this as our winning length + if ( (!media || pf.matchesMedia( media )) && + // pass the length to a method that can properly determine length + // in pixels based on these formats: http://dev.w3.org/csswg/css-values-3/#length-value + (winningLength = pf.getWidthFromLength( length )) ) { break; } } - // pass the length to a method that can properly determine length - // in pixels based on these formats: http://dev.w3.org/csswg/css-values-3/#length-value - return pf.getWidthFromLength( winningLength ); + //if we have no winningLength fallback to 100vw + return winningLength || Math.max(w.innerWidth || 0, doc.documentElement.clientWidth); }; pf.parseSrcset = function( srcset ) { @@ -246,8 +275,8 @@ window.matchMedia || (window.matchMedia = function() { * * 1. Let input (`srcset`) be the value passed to this algorithm. * 2. Let position be a pointer into input, initially pointing at the start of the string. - * 3. Let raw candidates be an initially empty ordered list of URLs with associated - * unparsed descriptors. The order of entries in the list is the order in which entries + * 3. Let raw candidates be an initially empty ordered list of URLs with associated + * unparsed descriptors. The order of entries in the list is the order in which entries * are added to the list. */ var candidates = []; @@ -274,7 +303,7 @@ window.matchMedia || (window.matchMedia = function() { } srcset = srcset.slice( pos + 1 ); - // 6.2. Collect a sequence of characters that are not U+002C COMMA characters (,), and + // 6.2. Collect a sequence of characters that are not U+002C COMMA characters (,), and // let that be descriptors. if ( descriptor === null ) { var descpos = srcset.indexOf( "," ); @@ -303,7 +332,7 @@ window.matchMedia || (window.matchMedia = function() { }; pf.parseDescriptor = function( descriptor, sizesattr ) { - // 11. Descriptor parser: Let candidates be an initially empty source set. The order of entries in the list + // 11. Descriptor parser: Let candidates be an initially empty source set. The order of entries in the list // is the order in which entries are added to the list. var sizes = sizesattr || "100vw", sizeDescriptor = descriptor && descriptor.replace( /(^\s+|\s+$)/g, "" ), @@ -362,7 +391,8 @@ window.matchMedia || (window.matchMedia = function() { pf.dodgeSrcset = function( img ) { if ( img.srcset ) { img[ pf.ns ].srcset = img.srcset; - img.removeAttribute( "srcset" ); + img.srcset = ""; + img.setAttribute( "data-pfsrcset", img[ pf.ns ].srcset ); } }; @@ -383,6 +413,66 @@ window.matchMedia || (window.matchMedia = function() { return candidates; }; + pf.backfaceVisibilityFix = function( picImg ) { + // See: https://github.com/scottjehl/picturefill/issues/332 + var style = picImg.style || {}, + WebkitBackfaceVisibility = "webkitBackfaceVisibility" in style, + currentZoom = style.zoom; + + if (WebkitBackfaceVisibility) { + style.zoom = ".999"; + + WebkitBackfaceVisibility = picImg.offsetWidth; + + style.zoom = currentZoom; + } + }; + + pf.setIntrinsicSize = (function() { + var urlCache = {}; + var setSize = function( picImg, width, res ) { + if ( width ) { + picImg.setAttribute( "width", parseInt(width / res, 10) ); + } + }; + return function( picImg, bestCandidate ) { + var img; + if ( !picImg[ pf.ns ] || w.pfStopIntrinsicSize ) { + return; + } + if ( picImg[ pf.ns ].dims === undefined ) { + picImg[ pf.ns].dims = picImg.getAttribute("width") || picImg.getAttribute("height"); + } + if ( picImg[ pf.ns].dims ) { return; } + + if ( bestCandidate.url in urlCache ) { + setSize( picImg, urlCache[bestCandidate.url], bestCandidate.resolution ); + } else { + img = doc.createElement( "img" ); + img.onload = function() { + urlCache[bestCandidate.url] = img.width; + + //IE 10/11 don't calculate width for svg outside document + if ( !urlCache[bestCandidate.url] ) { + try { + doc.body.appendChild( img ); + urlCache[bestCandidate.url] = img.width || img.offsetWidth; + doc.body.removeChild( img ); + } catch(e){} + } + + if ( picImg.src === bestCandidate.url ) { + setSize( picImg, urlCache[bestCandidate.url], bestCandidate.resolution ); + } + picImg = null; + img.onload = null; + img = null; + }; + img.src = bestCandidate.url; + } + }; + })(); + pf.applyBestCandidate = function( candidates, picImg ) { var candidate, length, @@ -401,29 +491,26 @@ window.matchMedia || (window.matchMedia = function() { } } - if ( bestCandidate && !pf.endsWith( picImg.src, bestCandidate.url ) ) { - if ( pf.restrictsMixedContent() && bestCandidate.url.substr(0, "http:".length).toLowerCase() === "http:" ) { - if ( typeof console !== undefined ) { - console.warn( "Blocked mixed content image " + bestCandidate.url ); - } - } else { - picImg.src = bestCandidate.url; - // currentSrc attribute and property to match - // http://picture.responsiveimages.org/#the-img-element - picImg.currentSrc = picImg.src; - - var style = picImg.style || {}, - WebkitBackfaceVisibility = "webkitBackfaceVisibility" in style, - currentZoom = style.zoom; + if ( bestCandidate ) { - if (WebkitBackfaceVisibility) { // See: https://github.com/scottjehl/picturefill/issues/332 - style.zoom = ".999"; + bestCandidate.url = pf.makeUrl( bestCandidate.url ); - WebkitBackfaceVisibility = picImg.offsetWidth; + if ( picImg.src !== bestCandidate.url ) { + if ( pf.restrictsMixedContent() && bestCandidate.url.substr(0, "http:".length).toLowerCase() === "http:" ) { + if ( window.console !== undefined ) { + console.warn( "Blocked mixed content image " + bestCandidate.url ); + } + } else { + picImg.src = bestCandidate.url; + // currentSrc attribute and property to match + // http://picture.responsiveimages.org/#the-img-element + picImg.currentSrc = picImg.src; - style.zoom = currentZoom; + pf.backfaceVisibilityFix( picImg ); } } + + pf.setIntrinsicSize(picImg, bestCandidate); } }; @@ -557,7 +644,7 @@ window.matchMedia || (window.matchMedia = function() { } // if `img` is in a `picture` element - if ( parent.nodeName.toUpperCase() === "PICTURE" ) { + if ( parent && parent.nodeName.toUpperCase() === "PICTURE" ) { // IE9 video workaround pf.removeVideoShim( parent ); @@ -578,9 +665,8 @@ window.matchMedia || (window.matchMedia = function() { } // Cache and remove `srcset` if present and we’re going to be doing `picture`/`srcset`/`sizes` polyfilling to it. - if ( parent.nodeName.toUpperCase() === "PICTURE" || - ( element.srcset && !pf.srcsetSupported ) || - ( !pf.sizesSupported && ( element.srcset && element.srcset.indexOf("w") > -1 ) ) ) { + if ( ( parent && parent.nodeName.toUpperCase() === "PICTURE" ) || + ( !pf.sizesSupported && ( element.srcset && regWDesc.test( element.srcset ) ) ) ) { pf.dodgeSrcset( element ); } @@ -608,11 +694,13 @@ window.matchMedia || (window.matchMedia = function() { * Also attaches picturefill on resize */ function runPicturefill() { + pf.initTypeDetects(); picturefill(); var intervalId = setInterval( function() { // When the document has finished loading, stop checking for new images // https://github.com/ded/domready/blob/master/ready.js#L15 picturefill(); + if ( /^loaded|^i|^c/.test( doc.readyState ) ) { clearInterval( intervalId ); return; @@ -644,16 +732,6 @@ window.matchMedia || (window.matchMedia = function() { /* expose methods for testing */ picturefill._ = pf; - /* expose picturefill */ - if ( typeof module === "object" && typeof module.exports === "object" ) { - // CommonJS, just export - module.exports = picturefill; - } else if ( typeof define === "function" && define.amd ) { - // AMD support - define( function() { return picturefill; } ); - } else if ( typeof w === "object" ) { - // If no AMD and we are in the browser, attach to window - w.picturefill = picturefill; - } + expose( picturefill ); -} )( this, this.document, new this.Image() ); +} )( window, window.document, new window.Image() );