Skip to content
This repository has been archived by the owner on May 9, 2022. It is now read-only.

Commit

Permalink
Conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wilto
Wilto committed Oct 7, 2014
2 parents bec4643 + ad36a2b commit e6ba809
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 92 deletions.
89 changes: 44 additions & 45 deletions dist/picturefill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,12 @@ window.matchMedia || (window.matchMedia = function() {
/**
* Shortcut method for matchMedia ( for easy overriding in tests )
*/

pf.matchesMedia = function( media ) {
return w.matchMedia && w.matchMedia( media ).matches;
};

/**
* Shortcut method for `devicePixelRatio` ( for easy overriding in tests )
*/
// Shortcut method for `devicePixelRatio` ( for easy overriding in tests )
pf.getDpr = function() {
return ( w.devicePixelRatio || 1 );
};
Expand All @@ -115,11 +114,11 @@ window.matchMedia || (window.matchMedia = function() {
// 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";
/**
* 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`?
*/
* 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`?
*/
length = length.replace( "vw", "%" );

// Create a cached element for getting length value widths
Expand Down Expand Up @@ -152,10 +151,10 @@ window.matchMedia || (window.matchMedia = function() {
// container of supported mime types that one might need to qualify before using
pf.types = {};

// Add support for standard mime types.
pf.types["image/jpeg"] = true;
pf.types["image/gif"] = true;
pf.types["image/png"] = true;
// Add support for standard mime types
pf.types[ "image/jpeg" ] = true;
pf.types[ "image/gif" ] = true;
pf.types[ "image/png" ] = true;

// test svg support
pf.types[ "image/svg+xml" ] = doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");
Expand Down Expand Up @@ -199,9 +198,7 @@ window.matchMedia || (window.matchMedia = function() {
}
};

/**
* Parses an individual `size` and returns the length, and optional media query
*/
// Parses an individual `size` and returns the length, and optional media query
pf.parseSize = function( sourceSizeStr ) {
var match = /(\([^)]+\))?\s*(.+)/g.exec( sourceSizeStr );
return {
Expand All @@ -210,9 +207,7 @@ window.matchMedia || (window.matchMedia = function() {
};
};

/**
* Takes a string of sizes and returns the width in pixels as a number
*/
// Takes a string of sizes and returns the width in pixels as a number
pf.findWidthFromSourceSize = function( sourceSizeListStr ) {
// Split up source size list, ie ( max-width: 30em ) 100%, ( max-width: 50em ) 50%, 33%
// or (min-width:30em) calc(30% - 15px)
Expand Down Expand Up @@ -245,19 +240,19 @@ window.matchMedia || (window.matchMedia = function() {

pf.parseSrcset = function( srcset ) {
/**
* A lot of this was pulled from Boris Smus’ parser for the now-defunct WHATWG `srcset`
* https://github.com/borismus/srcset-polyfill/blob/master/js/srcset-info.js
*
* 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
* are added to the list.
*/
* A lot of this was pulled from Boris Smus’ parser for the now-defunct WHATWG `srcset`
* https://github.com/borismus/srcset-polyfill/blob/master/js/srcset-info.js
*
* 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
* are added to the list.
*/
var candidates = [];

while ( srcset !== "" ) {
srcset = srcset.replace(/^\s+/g,"");
srcset = srcset.replace( /^\s+/g, "" );

// 5. Collect a sequence of characters that are not space characters, and let that be url.
var pos = srcset.search(/\s/g),
Expand All @@ -273,15 +268,15 @@ window.matchMedia || (window.matchMedia = function() {
// 6.1. If url is empty, then jump to the step labeled descriptor parser.

if ( last === "," || url === "" ) {
url = url.replace(/,+$/, "");
url = url.replace( /,+$/, "" );
descriptor = "";
}
srcset = srcset.slice( pos + 1 );

// 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(",");
var descpos = srcset.indexOf( "," );
if ( descpos !== -1 ) {
descriptor = srcset.slice( 0, descpos );
srcset = srcset.slice( descpos + 1 );
Expand Down Expand Up @@ -310,7 +305,7 @@ window.matchMedia || (window.matchMedia = function() {
// 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, ""),
sizeDescriptor = descriptor && descriptor.replace( /(^\s+|\s+$)/g, "" ),
widthInCssPixels = pf.findWidthFromSourceSize( sizes ),
resCandidate;

Expand Down Expand Up @@ -357,7 +352,7 @@ window.matchMedia || (window.matchMedia = function() {
return formattedCandidates;
};

/*
/**
* if it's an img element and it has a srcset property,
* we need to remove the attribute so we can manipulate src
* (the property's existence infers native srcset support, and a srcset-supporting browser will prioritize srcset's value over our winning picture candidate)
Expand All @@ -370,9 +365,7 @@ window.matchMedia || (window.matchMedia = function() {
}
};

/*
* Accept a source or img element and process its srcset and sizes attrs
*/
// Accept a source or img element and process its srcset and sizes attrs
pf.processSourceSet = function( el ) {
var srcset = el.getAttribute( "srcset" ),
sizes = el.getAttribute( "sizes" ),
Expand Down Expand Up @@ -437,7 +430,7 @@ window.matchMedia || (window.matchMedia = function() {
return a.resolution - b.resolution;
};

/*
/**
* In IE9, <source> elements get removed if they aren't children of
* video elements. Thus, we conditionally wrap source elements
* using <!--[if IE 9]><video style="display: none;"><![endif]-->
Expand All @@ -457,7 +450,7 @@ window.matchMedia || (window.matchMedia = function() {
}
};

/*
/**
* Find all `img` elements, and add them to the candidate list if they have
* a `picture` parent, a `sizes` attribute in basic `srcset` supporting browsers,
* a `srcset` attribute at all, and they haven’t been evaluated already.
Expand All @@ -470,8 +463,8 @@ window.matchMedia || (window.matchMedia = function() {
var currImg = imgs[ h ];

if ( currImg.parentNode.nodeName.toUpperCase() === "PICTURE" ||
( currImg.getAttribute( "srcset" ) !== null ) || currImg[ pf.ns ] && currImg[ pf.ns ].srcset !== null ) {
elems.push( currImg );
( currImg.getAttribute( "srcset" ) !== null ) || currImg[ pf.ns ] && currImg[ pf.ns ].srcset !== null ) {
elems.push( currImg );
}
}
return elems;
Expand Down Expand Up @@ -501,7 +494,7 @@ window.matchMedia || (window.matchMedia = function() {
continue;
}
// if it's a source element that has the `src` property set, throw a warning in the console
if ( source.getAttribute( "src" ) !== null && typeof console !== undefined ){
if ( source.getAttribute( "src" ) !== null && typeof console !== undefined ) {
console.warn("The `src` attribute is invalid on `picture` `source` element; instead, use `srcset`.");
}

Expand Down Expand Up @@ -534,8 +527,8 @@ window.matchMedia || (window.matchMedia = function() {
parent,
firstMatch,
candidates,
options = opt || {};

options = opt || {};
elements = options.elements || pf.getAllElements();

// Loop through all elements
Expand All @@ -545,13 +538,18 @@ window.matchMedia || (window.matchMedia = function() {
firstMatch = undefined;
candidates = undefined;

// immediately skip non-`img` nodes
if ( element.nodeName.toUpperCase() !== "IMG" ) {
continue;
}

// expando for caching data on the img
if ( !element[ pf.ns ] ) {
element[ pf.ns ] = {};
}

// if the element has already been evaluated, skip it
// unless `options.force` is set to true ( this, for example,
// if the element has already been evaluated, skip it unless
// `options.reevaluate` is set to true ( this, for example,
// is set to true when running `picturefill` on `resize` ).
if ( !options.reevaluate && element[ pf.ns ].evaluated ) {
continue;
Expand Down Expand Up @@ -622,7 +620,8 @@ window.matchMedia || (window.matchMedia = function() {

function checkResize() {
var resizeThrottle;
if (!w._picturefillWorking) {

if ( !w._picturefillWorking ) {
w._picturefillWorking = true;
w.clearTimeout( resizeThrottle );
resizeThrottle = w.setTimeout( function() {
Expand All @@ -648,7 +647,7 @@ window.matchMedia || (window.matchMedia = function() {
if ( typeof module === "object" && typeof module.exports === "object" ) {
// CommonJS, just export
module.exports = picturefill;
} else if ( typeof define === "function" && define.amd ){
} else if ( typeof define === "function" && define.amd ) {
// AMD support
define( function() { return picturefill; } );
} else if ( typeof w === "object" ) {
Expand Down
Loading

0 comments on commit e6ba809

Please sign in to comment.