Permalink
Browse files

Resize the Picture element as well!

  • Loading branch information...
jansepar committed Jun 5, 2013
1 parent baa54d0 commit 801d0a650a52f5ad3214323ab3bf72e957c9be2c
View
@@ -1,3 +0,0 @@
-[submodule "src/vendor/zepto"]
- path = src/vendor/zepto
- url = git@github.com:mobify/zepto.git
View
@@ -494,6 +494,37 @@ Utils.supportsLocalStorage = function() {
}
};
+// matchMedia polyfill generator
+// (allows you to specify which document to run polyfill on)
+Utils.matchMedia = function(doc) {
+
+
+ var bool,
+ docElem = doc.documentElement,
+ refNode = docElem.firstElementChild || docElem.firstChild,
+ // fakeBody required for <FF4 when executed in <head>
+ fakeBody = doc.createElement("body"),
+ div = doc.createElement("div");
+
+ div.id = "mq-test-1";
+ div.style.cssText = "position:absolute;top:-100em";
+ fakeBody.style.background = "none";
+ fakeBody.appendChild(div);
+
+ return function(q){
+ div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
+
+ docElem.insertBefore(fakeBody, refNode);
+ bool = div.offsetWidth === 42;
+ docElem.removeChild(fakeBody);
+
+ return {
+ matches: bool,
+ media: q
+ };
+ };
+};
+
return Utils;
});
@@ -1183,18 +1214,54 @@ ResizeImages.resize = function(imgs, options) {
opts.format = "webp";
}
- var attrVal;
- for(var i=0; i<imgs.length; i++) {
- var img = imgs[i];
- debugger;
- if (attrVal = img.getAttribute(opts.attribute)) {
- absolutify.href = attrVal;
+ function modifySrcAttribute(img, srcVal, width){
+ var srcVal = img.getAttribute(opts.attribute) || srcVal;
+ if (srcVal) {
+ absolutify.href = srcVal;
var url = absolutify.href;
if (httpRe.test(url)) {
+ if (width) {
+ opts = Utils.clone(opts);
+ opts.maxWidth = width;
+ }
+ delete opts;
img.setAttribute(opts.attribute, ResizeImages.getImageURL(url, opts));
}
}
}
+
+ // Modifies img and picture/source elements
+ // (rootSrc used for use with recursion)
+ function modifyImages(imgs, rootSrc) {
+ for(var i=0; i<imgs.length; i++) {
+ var img = imgs[i];
+ if (img.nodeName === 'IMG') {
+ modifySrcAttribute(img);
+ }
+ else if (img.nodeName === 'PICTURE') {
+ // Change attribute of any img element inside a picture element
+ // so it does not load post-flood
+ var disableImg = img.getElementsByTagName('img');
+ if (disableImg.length > 0) {
+ disableImg[0].setAttribute('data-orig-src', disableImg[0].getAttribute(opts.attribute));
+ disableImg[0].removeAttribute(opts.attribute);
+ }
+ // Recurse on the source elements
+ var sources = img.getElementsByTagName('source');
+ var rootSrc = img.getAttribute('data-src');
+ modifyImages(sources, rootSrc);
+
+ }
+ else if (img.nodeName === 'SOURCE') {
+ // Grab all source elements and modify the src
+ var width = img.getAttribute('data-width');
+ modifySrcAttribute(img, rootSrc, width);
+ }
+ }
+ }
+
+ modifyImages(imgs);
+
return imgs;
};
@@ -1784,7 +1851,134 @@ Unblockify.unblock = function(scripts) {
return Unblockify;
});
-require(["utils", "capture", "resizeImages", "jazzcat", "unblockify"], function(Utils, Capture, ResizeImages, Jazzcat, Unblockify) {
+define('external/picturefill',["utils"], function(Utils) {
+
+var capturing = window.Mobify && window.Mobify.capturing || false;
+
+// Return early if in Capturing mode.
+if (capturing) {
+ return;
+}
+
+window.matchMedia = Utils.matchMedia(document);
+
+/*! 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
+
+
+ // 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 ) ){
+ return;
+ }
+
+ w.picturefill = function() {
+ 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" );
+ }
+
+ // 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 ] );
+ }
+ }
+
+ // Find any existing img element in the picture element
+ picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+ if( matches.length ){
+ // Grab the most appropriate (last) match.
+ var match = matches.pop(),
+ 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;
+
+ 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");
+
+ 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:
+ this.width = ( this.cloneNode( true ).width / resMatch );
+ }
+ picImg.parentNode.replaceChild( newImg, picImg );
+ }
+ break; // We’ve matched, so bail out of the loop here.
+ }
+ }
+ } else {
+ // No `srcset` in play, so just use the `src` value:
+ picImg.src = match.getAttribute( "src" );
+ }
+ }
+ }
+ };
+
+ // Run on resize and domready (w.load as a fallback)
+ 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 );
+ }
+ else if( w.attachEvent ){
+ w.attachEvent( "onload", w.picturefill );
+ }
+})( this );
+
+return;
+
+});
+require(["utils", "capture", "resizeImages", "jazzcat", "unblockify", "external/picturefill"], function(Utils, Capture, ResizeImages, Jazzcat, Unblockify) {
var Mobify = window.Mobify = window.Mobify || {};
Mobify.Utils = Utils;
Mobify.Capture = Capture;

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -99,12 +99,11 @@
<body class="foo">
<p>Credit to scottjehl for his <a href="http://scottjehl.github.com/picturefill/">picturefill example</a></p>
<p>This example has been forked and replicated using capturing to avoid the need for a &lt;noscript&gt; tag (view source to see for yourself).</p>
- <p>Open up the network tab of your web inspector to see that the img element does not have it's asset downloaded.<p>
- <picture>
- <source src="/mobifyjs/examples/assets/images/small.jpg">
- <source src="/mobifyjs/examples/assets/images/medium.jpg" media="(min-width: 450px)">
- <source src="/mobifyjs/examples/assets/images/large.jpg" media="(min-width: 800px)">
- <source src="/mobifyjs/examples/assets/images/extralarge.jpg" media="(min-width: 1000px)">
+ <p>Open up the network tab of your web inspector to see that the img element does not have it's asset downloaded.</p>
+ <picture data-src="/mobifyjs/examples/assets/images/extralarge.jpg">
+ <source src="/mobifyjs/examples/assets/images/alternate_art.png" media="(min-width: 320px)" data-width="320">
+ <source media="(min-width: 800px)" data-width="400">
+ <source media="(min-width: 1000px)" data-width="500">
<img src="/mobifyjs/examples/assets/images/small.jpg">
</picture>
<script>
View
@@ -1,4 +1,4 @@
-require(["utils", "capture", "resizeImages", "jazzcat", "unblockify"], function(Utils, Capture, ResizeImages, Jazzcat, Unblockify) {
+require(["utils", "capture", "resizeImages", "jazzcat", "unblockify", "external/picturefill"], function(Utils, Capture, ResizeImages, Jazzcat, Unblockify) {
var Mobify = window.Mobify = window.Mobify || {};
Mobify.Utils = Utils;
Mobify.Capture = Capture;
View
@@ -208,18 +208,54 @@ ResizeImages.resize = function(imgs, options) {
opts.format = "webp";
}
- var attrVal;
- for(var i=0; i<imgs.length; i++) {
- var img = imgs[i];
- debugger;
- if (attrVal = img.getAttribute(opts.attribute)) {
- absolutify.href = attrVal;
+ function modifySrcAttribute(img, srcVal, width){
+ var srcVal = img.getAttribute(opts.attribute) || srcVal;
+ if (srcVal) {
+ absolutify.href = srcVal;
var url = absolutify.href;
if (httpRe.test(url)) {
+ if (width) {
+ opts = Utils.clone(opts);
+ opts.maxWidth = width;
+ }
+ delete opts;
img.setAttribute(opts.attribute, ResizeImages.getImageURL(url, opts));
}
}
}
+
+ // Modifies img and picture/source elements
+ // (rootSrc used for use with recursion)
+ function modifyImages(imgs, rootSrc) {
+ for(var i=0; i<imgs.length; i++) {
+ var img = imgs[i];
+ if (img.nodeName === 'IMG') {
+ modifySrcAttribute(img);
+ }
+ else if (img.nodeName === 'PICTURE') {
+ // Change attribute of any img element inside a picture element
+ // so it does not load post-flood
+ var disableImg = img.getElementsByTagName('img');
+ if (disableImg.length > 0) {
+ disableImg[0].setAttribute('data-orig-src', disableImg[0].getAttribute(opts.attribute));
+ disableImg[0].removeAttribute(opts.attribute);
+ }
+ // Recurse on the source elements
+ var sources = img.getElementsByTagName('source');
+ var rootSrc = img.getAttribute('data-src');
+ modifyImages(sources, rootSrc);
+
+ }
+ else if (img.nodeName === 'SOURCE') {
+ // Grab all source elements and modify the src
+ var width = img.getAttribute('data-width');
+ modifySrcAttribute(img, rootSrc, width);
+ }
+ }
+ }
+
+ modifyImages(imgs);
+
return imgs;
};
View
@@ -85,6 +85,37 @@ Utils.supportsLocalStorage = function() {
}
};
+// matchMedia polyfill generator
+// (allows you to specify which document to run polyfill on)
+Utils.matchMedia = function(doc) {
+ "use strict";
+
+ var bool,
+ docElem = doc.documentElement,
+ refNode = docElem.firstElementChild || docElem.firstChild,
+ // fakeBody required for <FF4 when executed in <head>
+ fakeBody = doc.createElement("body"),
+ div = doc.createElement("div");
+
+ div.id = "mq-test-1";
+ div.style.cssText = "position:absolute;top:-100em";
+ fakeBody.style.background = "none";
+ fakeBody.appendChild(div);
+
+ return function(q){
+ div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
+
+ docElem.insertBefore(fakeBody, refNode);
+ bool = div.offsetWidth === 42;
+ docElem.removeChild(fakeBody);
+
+ return {
+ matches: bool,
+ media: q
+ };
+ };
+};
+
return Utils;
});
Submodule zepto deleted from 788c07
Oops, something went wrong.

0 comments on commit 801d0a6

Please sign in to comment.