Skip to content
Permalink
Browse files

Resize the Picture element as well!

  • Loading branch information...
jansepar committed Jun 5, 2013
1 parent baa54d0 commit 801d0a650a52f5ad3214323ab3bf72e957c9be2c
@@ -1,3 +0,0 @@
[submodule "src/vendor/zepto"]
path = src/vendor/zepto
url = git@github.com:mobify/zepto.git
@@ -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>
@@ -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;
@@ -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;
};

@@ -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.
You can’t perform that action at this time.