summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPeter Droogmans2012-10-08 13:43:14 (GMT)
committer Peter Droogmans2012-10-08 13:43:14 (GMT)
commit26c4b79eae13bb60823b25a51945b05a526b097f (patch)
treed870d643a38cd72482ca792c380b4a09223aa2da
parente34d10cb6ba11e0b3fdeb78c309239f1750be8a4 (diff)
drupal javascript code style used for picturefill.js8.x-1.x
-rw-r--r--picturefill/picturefill.js177
1 files changed, 89 insertions, 88 deletions
diff --git a/picturefill/picturefill.js b/picturefill/picturefill.js
index db80012..dfa25a2 100644
--- a/picturefill/picturefill.js
+++ b/picturefill/picturefill.js
@@ -1,108 +1,109 @@
+/*jshint loopfunc: true, browser: true, curly: true, eqeqeq: true, expr: true, forin: true, latedef: true, newcap: true, noarg: true, trailing: true, undef: true, unused: true */
/*! Picturefill - Author: Scott Jehl, 2012 | License: MIT/GPLv2 */
-/*
- Picturefill: A polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
- * Notes:
- * For active discussion of the picture element, see http://www.w3.org/community/respimg/
- * While this code does work, it is intended to be used only for example purposes until either:
- A) A W3C Candidate Recommendation for <picture> is released
- B) A major browser implements <picture>
-*/
(function( w ){
- // Enable strict mode
+ // Enable strict mode.
"use strict";
- // User preference for HD content when available
- var prefHD = false || w.localStorage && w.localStorage[ "picturefill-prefHD" ] === "true",
- hasHD;
-
- // Test if `<picture>` is supported natively, if so, exit - no polyfill needed.
- if ( !!( w.document.createElement( "picture" ) && w.document.createElement( "source" ) && w.HTMLPictureElement ) ){
+ // Test if `<picture>` is supported natively, if so, exit.
+ if (!!(w.document.createElement('picture') && w.document.createElement('source') && w.HTMLPictureElement)) {
return;
}
w.picturefill = function() {
+ // Copy attributes from the source to the destination.
function _copyAttributes(src, tar) {
- if (src.getAttribute( "width" ) && src.getAttribute( "height" )) {
- tar.width = src.getAttribute( "width" );
- tar.height = src.getAttribute( "height" );
+ if (src.getAttribute('width') && src.getAttribute('height')) {
+ tar.width = src.getAttribute('width');
+ tar.height = src.getAttribute('height');
}
}
- var ps = w.document.getElementsByTagName( "picture" );
-
- // Loop the pictures
- for( var i = 0, il = ps.length; i < il; i++ ){
- var sources = ps[ i ].getElementsByTagName( "source" ),
- picImg = null,
- matches = [];
-
- // If no sources are found, they're likely erased from the DOM. Try finding them inside comments.
- if( !sources.length ){
- var picText = ps[ i ].innerHTML,
- frag = w.document.createElement( "div" ),
- // For IE9, convert the source elements to divs
- srcs = picText.replace( /(<)source([^>]+>)/gmi, "$1div$2" ).match( /<div[^>]+>/gmi );
-
- frag.innerHTML = srcs.join( "" );
- sources = frag.getElementsByTagName( "div" );
+ // Get all picture tags.
+ var ps = w.document.getElementsByTagName('picture');
+
+ // Loop the pictures.
+ for (var i = 0, il = ps.length; i < il; i++ ) {
+ var sources = ps[i].getElementsByTagName('source');
+ var picImg = null;
+ var matches = [];
+
+ // If no sources are found, they're likely erased from the DOM.
+ // Try finding them inside comments.
+ if (!sources.length) {
+ var picText = ps[i].innerHTML;
+ var frag = w.document.createElement('div');
+ // For IE9, convert the source elements to divs.
+ var srcs = picText.replace(/(<)source([^>]+>)/gmi, '$1div$2').match(/<div[^>]+>/gmi);
+
+ frag.innerHTML = srcs.join('');
+ sources = frag.getElementsByTagName('div');
}
- // See which sources match
- for( var j = 0, jl = sources.length; j < jl; j++ ){
- var media = sources[ j ].getAttribute( "media" );
+ // See which sources match.
+ for (var j = 0, jl = sources.length; j < jl; j++ ) {
+ var media = sources[j].getAttribute('media');
// if there's no media specified, OR w.matchMedia is supported
- if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
- matches.push( sources[ j ] );
+ if (!media || (w.matchMedia && w.matchMedia(media).matches)) {
+ matches.push(sources[j]);
}
}
- // Find any existing img element in the picture element
- picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
-
- if( matches.length ){
+ if (matches.length) {
// Grab the most appropriate (last) match.
- var match = matches.pop(),
- srcset = match.getAttribute( "srcset" );
+ var match = matches.pop();
+ var srcset = match.getAttribute('srcset');
- if( !picImg ){
- picImg = w.document.createElement( "img" );
- picImg.alt = ps[ i ].getAttribute( "alt" );
- ps[ i ].appendChild( picImg );
- }
-
- if( srcset ) {
- var screenRes = ( prefHD && w.devicePixelRatio ) || 1, // Is it worth looping through reasonable matchMedia values here?
- sources = srcset.split(","); // Split comma-separated `srcset` sources into an array.
-
- hasHD = w.devicePixelRatio > 1;
+ // Find any existing img element in the picture element.
+ picImg = ps[i].getElementsByTagName('img')[0];
- for( var res = sources.length, r = res - 1; r >= 0; r-- ) { // Loop through each source/resolution in `srcset`.
- var source = sources[ r ].replace(/^\s*/, '').replace(/\s*$/, '').split(" "), // Remove any leading whitespace, then split on spaces.
- resMatch = parseFloat( source[1], 10 ); // Parse out the resolution for each source in `srcset`.
-
- if( screenRes >= resMatch ) {
- if( picImg.getAttribute( "src" ) !== source[0] ) {
- var newImg = document.createElement("img");
+ // Add a new img element if one doesn't exists.
+ if (!picImg) {
+ picImg = w.document.createElement('img');
+ picImg.alt = ps[i].getAttribute('alt');
+ ps[i].appendChild(picImg);
+ }
- newImg.src = source[0];
- // When the image is loaded, set a width equal to that of the original’s intrinsic width divided by the screen resolution:
- newImg.onload = function() {
- // Clone the original image into memory so the width is unaffected by page styles:
- var w = this.cloneNode( true ).width;
- if (w > 0) {
- this.width = ( w / resMatch );
- }
+ // Source element uses a srcset.
+ if (srcset) {
+ var screenRes = w.devicePixelRatio || 1;
+ // Split comma-separated `srcset` sources into an array.
+ sources = srcset.split(',');
+
+ // Loop through each source/resolution in srcset.
+ for (var res = sources.length, r = res - 1; r >= 0; r-- ) {
+ // Remove any leading whitespace, then split on spaces.
+ var source = sources[ r ].replace(/^\s*/, '').replace(/\s*$/, '').split(' ');
+ // Parse out the resolution for each source in `srcset`.
+ var resMatch = parseFloat(source[1], 10);
+
+ if (screenRes >= resMatch) {
+ if (picImg.getAttribute('src') !== source[0]) {
+ var newImg = document.createElement('img');
+
+ newImg.src = source[0];
+ // When the image is loaded, set a width equal to that of the
+ // original’s intrinsic width divided by the screen resolution.
+ newImg.onload = function() {
+ // Clone the original image into memory so the width is
+ // unaffected by page styles.
+ var w = this.cloneNode(true).width;
+ if (w > 0) {
+ this.width = (w / resMatch);
}
- _copyAttributes(match, newImg);
- picImg.parentNode.replaceChild( newImg, picImg );
- }
- break; // We’ve matched, so bail out of the loop here.
+ };
+ // Copy width and height from the source tag to the img element.
+ _copyAttributes(match, newImg);
+ picImg.parentNode.replaceChild(newImg, picImg);
}
+ // We’ve matched, so bail out of the loop here.
+ break;
}
+ }
} else {
- // No `srcset` in play, so just use the `src` value:
- picImg.src = match.getAttribute( "src" );
+ // No srcset used, so just use the 'src' value.
+ picImg.src = match.getAttribute('src');
+ // Copy width and height from the source tag to the img element.
_copyAttributes(match, picImg);
}
}
@@ -110,16 +111,16 @@
};
// Run on resize and domready (w.load as a fallback)
- if( w.addEventListener ){
- w.addEventListener( "resize", w.picturefill, false );
- w.addEventListener( "DOMContentLoaded", function(){
+ if (w.addEventListener) {
+ w.addEventListener('resize', w.picturefill, false);
+ w.addEventListener('DOMContentLoaded', function() {
w.picturefill();
- // Run once only
- w.removeEventListener( "load", w.picturefill, false );
- }, false );
- w.addEventListener( "load", w.picturefill, false );
+ // Run once only.
+ w.removeEventListener('load', w.picturefill, false);
+ }, false);
+ w.addEventListener('load', w.picturefill, false);
}
- else if( w.attachEvent ){
- w.attachEvent( "onload", w.picturefill );
+ else if (w.attachEvent) {
+ w.attachEvent('onload', w.picturefill);
}
-})( this ); \ No newline at end of file
+})(this);