From 612f162ab9fc810fdbc542c008cab381bedc4148 Mon Sep 17 00:00:00 2001
From: Shawn Jansepar
Date: Sun, 1 Dec 2013 20:35:58 -0800
Subject: [PATCH 1/5] Update code to use both `picture` and
`span[data-picture]`
---
build/mobify.js | 85 ++++++-------------
build/mobify.min.js | 2 +-
examples/capturing-picturepolyfill/index.html | 14 +--
.../resizeImages-picture-element/index.html | 6 +-
src/external/picturefill.js | 85 ++++++-------------
5 files changed, 61 insertions(+), 131 deletions(-)
diff --git a/build/mobify.js b/build/mobify.js
index 492809b2..c395155b 100644
--- a/build/mobify.js
+++ b/build/mobify.js
@@ -2207,7 +2207,7 @@ if (capturing) {
Capture.prototype.renderCapturedDoc = function(options) {
// Change attribute of any img element inside a picture element
// so it does not load post-flood
- var imgsInPicture = this.capturedDoc.querySelectorAll('picture img');
+ var imgsInPicture = this.capturedDoc.querySelectorAll('picture img, span[data-picture] img');
for (var i = 0, len = imgsInPicture.length; i < len; i++) {
var disableImg = imgsInPicture[i];
var srcAttr = window.Mobify && window.Mobify.prefix + 'src';
@@ -2222,38 +2222,24 @@ if (capturing) {
window.matchMedia = window.matchMedia || Utils.matchMedia(document);
-/* https://github.com/Wilto/picturefill-proposal */
-/*! 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 is released
- B) A major browser implements
-*/
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
+
(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 `` 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" );
-
+ var ps = w.document.querySelectorAll( "picture, span[data-picture]" );
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
- var sources = ps[ i ].getElementsByTagName( "source" ),
- picImg = null,
+ var sources = ps[ i ].querySelectorAll( "span, source" ),
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,
@@ -2265,9 +2251,9 @@ window.matchMedia = window.matchMedia || Utils.matchMedia(document);
sources = frag.getElementsByTagName( "div" );
}
- // See which sources match
+ // See if which sources match
for( var j = 0, jl = sources.length; j < jl; j++ ){
- var media = sources[ j ].getAttribute( "media" );
+ var media = sources[ j ].getAttribute( "data-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 ] );
@@ -2275,48 +2261,26 @@ window.matchMedia = window.matchMedia || Utils.matchMedia(document);
}
// Find any existing img element in the picture element
- picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+ var 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 ){
+ var matchedEl = matches.pop();
+ if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
picImg = w.document.createElement( "img" );
- picImg.alt = ps[ i ].getAttribute( "alt" );
- ps[ i ].appendChild( picImg );
+ picImg.alt = ps[ i ].getAttribute( "data-alt" );
}
-
- 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" );
+ else if( matchedEl === picImg.parentNode ){
+ // Skip further actions if the correct image is already in place
+ continue;
}
+
+ picImg.src = matchedEl.getAttribute( "data-src" ) || matchedEl.getAttribute("src");
+ matchedEl.appendChild( picImg );
+ picImg.removeAttribute("width");
+ picImg.removeAttribute("height");
+ }
+ else if( picImg ){
+ picImg.parentNode.removeChild( picImg );
}
}
};
@@ -2334,7 +2298,8 @@ window.matchMedia = window.matchMedia || Utils.matchMedia(document);
else if( w.attachEvent ){
w.attachEvent( "onload", w.picturefill );
}
-})( this );
+
+}( this ));
return;
diff --git a/build/mobify.min.js b/build/mobify.min.js
index bf8d0298..5272b9ba 100644
--- a/build/mobify.min.js
+++ b/build/mobify.min.js
@@ -1 +1 @@
-!function(){var a,b,c;!function(d){function e(a,b){return u.call(a,b)}function f(a,b){var c,d,e,f,g,h,i,j,k,l,m=b&&b.split("/"),n=s.map,o=n&&n["*"]||{};if(a&&"."===a.charAt(0))if(b){for(m=m.slice(0,m.length-1),a=m.concat(a.split("/")),j=0;j0&&(a.splice(j-1,2),j-=2)}a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if((m||o)&&n){for(c=a.split("/"),j=c.length;j>0;j-=1){if(d=c.slice(0,j).join("/"),m)for(k=m.length;k>0;k-=1)if(e=n[m.slice(0,k).join("/")],e&&(e=e[d])){f=e,g=j;break}if(f)break;!h&&o&&o[d]&&(h=o[d],i=j)}!f&&h&&(f=h,g=i),f&&(c.splice(0,g,f),a=c.join("/"))}return a}function g(a,b){return function(){return n.apply(d,v.call(arguments,0).concat([a,b]))}}function h(a){return function(b){return f(b,a)}}function i(a){return function(b){q[a]=b}}function j(a){if(e(r,a)){var b=r[a];delete r[a],t[a]=!0,m.apply(d,b)}if(!e(q,a)&&!e(t,a))throw new Error("No "+a);return q[a]}function k(a){var b,c=a?a.indexOf("!"):-1;return c>-1&&(b=a.substring(0,c),a=a.substring(c+1,a.length)),[b,a]}function l(a){return function(){return s&&s.config&&s.config[a]||{}}}var m,n,o,p,q={},r={},s={},t={},u=Object.prototype.hasOwnProperty,v=[].slice;o=function(a,b){var c,d=k(a),e=d[0];return a=d[1],e&&(e=f(e,b),c=j(e)),e?a=c&&c.normalize?c.normalize(a,h(b)):f(a,b):(a=f(a,b),d=k(a),e=d[0],a=d[1],e&&(c=j(e))),{f:e?e+"!"+a:a,n:a,pr:e,p:c}},p={require:function(a){return g(a)},exports:function(a){var b=q[a];return"undefined"!=typeof b?b:q[a]={}},module:function(a){return{id:a,uri:"",exports:q[a],config:l(a)}}},m=function(a,b,c,f){var h,k,l,m,n,s,u=[];if(f=f||a,"function"==typeof c){for(b=!b.length&&c.length?["require","exports","module"]:b,n=0;n":""},a.removeBySelector=function(b,c){c=c||document;var d=c.querySelectorAll(b);return a.removeElements(d,c)},a.removeElements=function(a,b){b=b||document;for(var c=0,d=a.length;d>c;c++){var e=a[c];e.parentNode.removeChild(e)}return a};var d;return a.supportsLocalStorage=function(){if(void 0!==d)return d;var a="modernizr";try{localStorage.setItem(a,a),localStorage.removeItem(a),d=!0}catch(b){d=!1}return d},a.matchMedia=function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}},a.domIsReady=function(a){var a=a||document;return a.attachEvent?"complete"===a.readyState:"loading"!==a.readyState},a.getPhysicalScreenSize=function(a){function b(b){var c=a||window.devicePixelRatio||1;return b.width=Math.round(b.width*c),b.height=Math.round(b.height*c),b}var c=navigator.userAgent.match(/ip(hone|od|ad)/i),d=(navigator.userAgent.match(/android (\d)/i)||{})[1],e={width:window.outerWidth,height:window.outerHeight};if(!c)return d>3?b(e):e;var f=window.orientation%180;return f?(e.height=screen.width,e.width=screen.height):(e.width=screen.width,e.height=screen.height),b(e)},a}),c("mobifyjs/capture",["mobifyjs/utils"],function(a){function b(a){return a.nodeName.toLowerCase()}function c(a){return a.replace('"',""")}function d(c){return c?[].map.call(c.childNodes,function(c){var d=b(c);return"#comment"==d?"":"plaintext"==d?c.textContent:"script"==d&&(/mobify/.test(c.src)||/mobify/i.test(c.textContent))?"":c.outerHTML||c.nodeValue||a.outerHTML(c)}).join(""):""}window.Mobify&&!window.Mobify.capturing&&document.getElementsByTagName("plaintext").length&&(window.Mobify.capturing=!0);var e=/(")},g.load=function(a){var c,d=0,e=!1;if(a){for(;c=a[d++];)"ready"==c.status&&c.statusCode>=200&&c.statusCode<300&&(e=!0,b.set(encodeURI(c.url),c));e&&b.save()}},g.defaults={selector:"script",attribute:"x-src",base:"//jazzcat.mobify.com",responseType:"jsonp",execCallback:"Jazzcat.exec",loadCallback:"Jazzcat.load",concat:!1,projectName:""},g}),c("mobifyjs/unblockify",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c={};return c.moveScripts=function(b,c){a.removeElements(b,c);for(var d=0,e=b.length;e>d;d++){var f=b[d];c.body.appendChild(f)}},c.unblock=function(a){var d=b.prototype.insertMobifyScripts;b.prototype.insertMobifyScripts=function(){d.call(this);var b=this.capturedDoc;c.moveScripts(a,b)}},c}),c("mobifyjs/cssOptimize",["mobifyjs/utils"],function(a){var b=window.cssOptimize={};b.getCssUrl=function(b,d){var e=a.extend({},c,d),f=[e.protoAndHost];return e.projectName&&f.push("project-"+e.projectName),f.push(e.endpoint),f.push(b),f.join("/")},b._rewriteHref=function(c,d){var e,f=c.getAttribute(d.targetAttribute);f&&(e=a.absolutify(f),a.httpUrl(e)&&(c.setAttribute("data-orig-href",f),c.setAttribute(d.targetAttribute,b.getCssUrl(e,d)),d.onerror&&c.setAttribute("onerror",d.onerror)))},b.optimize=function(d,e){for(var f,g=a.extend({},c,e),h=0,i=d.length;i>h;h++)f=d[h],"LINK"===f.nodeName&&"stylesheet"===f.getAttribute("rel")&&f.getAttribute(g.targetAttribute)&&!f.hasAttribute("mobify-optimized")&&(f.setAttribute("mobify-optimized",""),b._rewriteHref(f,g))},b.restoreOriginalHref=function(a){var b;a.target.removeAttribute("onerror"),(b=a.target.getAttribute("data-orig-href"))&&a.target.setAttribute("href",b)};var c=b._defaults={protoAndHost:"//jazzcat.mobify.com",endpoint:"cssoptimizer",projectName:"oss-"+location.hostname.replace(/[^\w]/g,"-"),targetAttribute:"x-href",onerror:"Mobify.CssOptimize.restoreOriginalHref(event);"};return b}),c("mobifyjs/external/picturefill",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c=window.Mobify&&window.Mobify.capturing||!1;if(c){var d=b.prototype.renderCapturedDoc;return b.prototype.renderCapturedDoc=function(){for(var a=this.capturedDoc.querySelectorAll("picture img"),b=0,c=a.length;c>b;b++){var e=a[b],f=window.Mobify&&window.Mobify.prefix+"src";e.setAttribute("data-orig-src",e.getAttribute(f)),e.removeAttribute(f)}d.apply(this,arguments)},void 0}window.matchMedia=window.matchMedia||a.matchMedia(document),function(a){var b,c=!1||a.localStorage&&"true"===a.localStorage["picturefill-prefHD"];a.document.createElement("picture")&&a.document.createElement("source")&&a.HTMLPictureElement||(a.picturefill=function(){for(var d=a.document.getElementsByTagName("picture"),e=0,f=d.length;f>e;e++){var g=d[e].getElementsByTagName("source"),h=null,i=[];if(!g.length){var j=d[e].innerHTML,k=a.document.createElement("div"),l=j.replace(/(<)source([^>]+>)/gim,"$1div$2").match(/]+>/gim);k.innerHTML=l.join(""),g=k.getElementsByTagName("div")}for(var m=0,n=g.length;n>m;m++){var o=g[m].getAttribute("media");(!o||a.matchMedia&&a.matchMedia(o).matches)&&i.push(g[m])}if(h=d[e].getElementsByTagName("img")[0],i.length){var p=i.pop(),q=p.getAttribute("srcset");if(h||(h=a.document.createElement("img"),h.alt=d[e].getAttribute("alt"),d[e].appendChild(h)),q){var r=c&&a.devicePixelRatio||1,g=q.split(",");b=a.devicePixelRatio>1;for(var s=g.length,t=s-1;t>=0;t--){var u=g[t].replace(/^\s*/,"").replace(/\s*$/,"").split(" "),v=parseFloat(u[1],10);if(r>=v){if(h.getAttribute("src")!==u[0]){var w=document.createElement("img");w.src=u[0],w.onload=function(){this.width=this.cloneNode(!0).width/v},h.parentNode.replaceChild(w,h)}break}}}else h.src=p.getAttribute("src")}}},a.addEventListener?(a.addEventListener("resize",a.picturefill,!1),a.addEventListener("DOMContentLoaded",function(){a.picturefill(),a.removeEventListener("load",a.picturefill,!1)},!1),a.addEventListener("load",a.picturefill,!1)):a.attachEvent&&a.attachEvent("onload",a.picturefill))}(this)}),b(["mobifyjs/utils","mobifyjs/capture","mobifyjs/resizeImages","mobifyjs/jazzcat","mobifyjs/unblockify","mobifyjs/cssOptimize","mobifyjs/external/picturefill"],function(a,b,c,d,e,f){var g=window.Mobify=window.Mobify||{};return g.Utils=a,g.Capture=b,g.ResizeImages=c,g.Jazzcat=d,g.CssOptimize=f,g.Unblockify=e,g.api="2.0",g},void 0,!0),c("mobify-library",function(){})}();
\ No newline at end of file
+!function(){var a,b,c;!function(d){function e(a,b){return u.call(a,b)}function f(a,b){var c,d,e,f,g,h,i,j,k,l,m=b&&b.split("/"),n=s.map,o=n&&n["*"]||{};if(a&&"."===a.charAt(0))if(b){for(m=m.slice(0,m.length-1),a=m.concat(a.split("/")),j=0;j
0&&(a.splice(j-1,2),j-=2)}a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if((m||o)&&n){for(c=a.split("/"),j=c.length;j>0;j-=1){if(d=c.slice(0,j).join("/"),m)for(k=m.length;k>0;k-=1)if(e=n[m.slice(0,k).join("/")],e&&(e=e[d])){f=e,g=j;break}if(f)break;!h&&o&&o[d]&&(h=o[d],i=j)}!f&&h&&(f=h,g=i),f&&(c.splice(0,g,f),a=c.join("/"))}return a}function g(a,b){return function(){return n.apply(d,v.call(arguments,0).concat([a,b]))}}function h(a){return function(b){return f(b,a)}}function i(a){return function(b){q[a]=b}}function j(a){if(e(r,a)){var b=r[a];delete r[a],t[a]=!0,m.apply(d,b)}if(!e(q,a)&&!e(t,a))throw new Error("No "+a);return q[a]}function k(a){var b,c=a?a.indexOf("!"):-1;return c>-1&&(b=a.substring(0,c),a=a.substring(c+1,a.length)),[b,a]}function l(a){return function(){return s&&s.config&&s.config[a]||{}}}var m,n,o,p,q={},r={},s={},t={},u=Object.prototype.hasOwnProperty,v=[].slice;o=function(a,b){var c,d=k(a),e=d[0];return a=d[1],e&&(e=f(e,b),c=j(e)),e?a=c&&c.normalize?c.normalize(a,h(b)):f(a,b):(a=f(a,b),d=k(a),e=d[0],a=d[1],e&&(c=j(e))),{f:e?e+"!"+a:a,n:a,pr:e,p:c}},p={require:function(a){return g(a)},exports:function(a){var b=q[a];return"undefined"!=typeof b?b:q[a]={}},module:function(a){return{id:a,uri:"",exports:q[a],config:l(a)}}},m=function(a,b,c,f){var h,k,l,m,n,s,u=[];if(f=f||a,"function"==typeof c){for(b=!b.length&&c.length?["require","exports","module"]:b,n=0;n":""},a.removeBySelector=function(b,c){c=c||document;var d=c.querySelectorAll(b);return a.removeElements(d,c)},a.removeElements=function(a,b){b=b||document;for(var c=0,d=a.length;d>c;c++){var e=a[c];e.parentNode.removeChild(e)}return a};var d;return a.supportsLocalStorage=function(){if(void 0!==d)return d;var a="modernizr";try{localStorage.setItem(a,a),localStorage.removeItem(a),d=!0}catch(b){d=!1}return d},a.matchMedia=function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}},a.domIsReady=function(a){var a=a||document;return a.attachEvent?"complete"===a.readyState:"loading"!==a.readyState},a.getPhysicalScreenSize=function(a){function b(b){var c=a||window.devicePixelRatio||1;return b.width=Math.round(b.width*c),b.height=Math.round(b.height*c),b}var c=navigator.userAgent.match(/ip(hone|od|ad)/i),d=(navigator.userAgent.match(/android (\d)/i)||{})[1],e={width:window.outerWidth,height:window.outerHeight};if(!c)return d>3?b(e):e;var f=window.orientation%180;return f?(e.height=screen.width,e.width=screen.height):(e.width=screen.width,e.height=screen.height),b(e)},a}),c("mobifyjs/capture",["mobifyjs/utils"],function(a){function b(a){return a.nodeName.toLowerCase()}function c(a){return a.replace('"',""")}function d(c){return c?[].map.call(c.childNodes,function(c){var d=b(c);return"#comment"==d?"":"plaintext"==d?c.textContent:"script"==d&&(/mobify/.test(c.src)||/mobify/i.test(c.textContent))?"":c.outerHTML||c.nodeValue||a.outerHTML(c)}).join(""):""}window.Mobify&&!window.Mobify.capturing&&document.getElementsByTagName("plaintext").length&&(window.Mobify.capturing=!0);var e=/(")},g.load=function(a){var c,d=0,e=!1;if(a){for(;c=a[d++];)"ready"==c.status&&c.statusCode>=200&&c.statusCode<300&&(e=!0,b.set(encodeURI(c.url),c));e&&b.save()}},g.defaults={selector:"script",attribute:"x-src",base:"//jazzcat.mobify.com",responseType:"jsonp",execCallback:"Jazzcat.exec",loadCallback:"Jazzcat.load",concat:!1,projectName:""},g}),c("mobifyjs/unblockify",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c={};return c.moveScripts=function(b,c){a.removeElements(b,c);for(var d=0,e=b.length;e>d;d++){var f=b[d];c.body.appendChild(f)}},c.unblock=function(a){var d=b.prototype.insertMobifyScripts;b.prototype.insertMobifyScripts=function(){d.call(this);var b=this.capturedDoc;c.moveScripts(a,b)}},c}),c("mobifyjs/cssOptimize",["mobifyjs/utils"],function(a){var b=window.cssOptimize={};b.getCssUrl=function(b,d){var e=a.extend({},c,d),f=[e.protoAndHost];return e.projectName&&f.push("project-"+e.projectName),f.push(e.endpoint),f.push(b),f.join("/")},b._rewriteHref=function(c,d){var e,f=c.getAttribute(d.targetAttribute);f&&(e=a.absolutify(f),a.httpUrl(e)&&(c.setAttribute("data-orig-href",f),c.setAttribute(d.targetAttribute,b.getCssUrl(e,d)),d.onerror&&c.setAttribute("onerror",d.onerror)))},b.optimize=function(d,e){for(var f,g=a.extend({},c,e),h=0,i=d.length;i>h;h++)f=d[h],"LINK"===f.nodeName&&"stylesheet"===f.getAttribute("rel")&&f.getAttribute(g.targetAttribute)&&!f.hasAttribute("mobify-optimized")&&(f.setAttribute("mobify-optimized",""),b._rewriteHref(f,g))},b.restoreOriginalHref=function(a){var b;a.target.removeAttribute("onerror"),(b=a.target.getAttribute("data-orig-href"))&&a.target.setAttribute("href",b)};var c=b._defaults={protoAndHost:"//jazzcat.mobify.com",endpoint:"cssoptimizer",projectName:"oss-"+location.hostname.replace(/[^\w]/g,"-"),targetAttribute:"x-href",onerror:"Mobify.CssOptimize.restoreOriginalHref(event);"};return b}),c("mobifyjs/external/picturefill",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c=window.Mobify&&window.Mobify.capturing||!1;if(c){var d=b.prototype.renderCapturedDoc;return b.prototype.renderCapturedDoc=function(){for(var a=this.capturedDoc.querySelectorAll("picture img, span[data-picture] img"),b=0,c=a.length;c>b;b++){var e=a[b],f=window.Mobify&&window.Mobify.prefix+"src";e.setAttribute("data-orig-src",e.getAttribute(f)),e.removeAttribute(f)}d.apply(this,arguments)},void 0}window.matchMedia=window.matchMedia||a.matchMedia(document),function(a){a.document.createElement("picture")&&a.document.createElement("source")&&a.HTMLPictureElement||(a.picturefill=function(){for(var b=a.document.querySelectorAll("picture, span[data-picture]"),c=0,d=b.length;d>c;c++){var e=b[c].querySelectorAll("span, source"),f=[];if(!e.length){var g=b[c].innerHTML,h=a.document.createElement("div"),i=g.replace(/(<)source([^>]+>)/gim,"$1div$2").match(/]+>/gim);h.innerHTML=i.join(""),e=h.getElementsByTagName("div")}for(var j=0,k=e.length;k>j;j++){var l=e[j].getAttribute("data-media")||e[j].getAttribute("media");(!l||a.matchMedia&&a.matchMedia(l).matches)&&f.push(e[j])}var m=b[c].getElementsByTagName("img")[0];if(f.length){var n=f.pop();if(m&&"NOSCRIPT"!==m.parentNode.nodeName){if(n===m.parentNode)continue}else m=a.document.createElement("img"),m.alt=b[c].getAttribute("data-alt");m.src=n.getAttribute("data-src")||n.getAttribute("src"),n.appendChild(m),m.removeAttribute("width"),m.removeAttribute("height")}else m&&m.parentNode.removeChild(m)}},a.addEventListener?(a.addEventListener("resize",a.picturefill,!1),a.addEventListener("DOMContentLoaded",function(){a.picturefill(),a.removeEventListener("load",a.picturefill,!1)},!1),a.addEventListener("load",a.picturefill,!1)):a.attachEvent&&a.attachEvent("onload",a.picturefill))}(this)}),b(["mobifyjs/utils","mobifyjs/capture","mobifyjs/resizeImages","mobifyjs/jazzcat","mobifyjs/unblockify","mobifyjs/cssOptimize","mobifyjs/external/picturefill"],function(a,b,c,d,e,f){var g=window.Mobify=window.Mobify||{};return g.Utils=a,g.Capture=b,g.ResizeImages=c,g.Jazzcat=d,g.CssOptimize=f,g.Unblockify=e,g.api="2.0",g},void 0,!0),c("mobify-library",function(){})}();
\ No newline at end of file
diff --git a/examples/capturing-picturepolyfill/index.html b/examples/capturing-picturepolyfill/index.html
index 486dc7d5..334662a0 100644
--- a/examples/capturing-picturepolyfill/index.html
+++ b/examples/capturing-picturepolyfill/index.html
@@ -4,7 +4,7 @@
")},g.load=function(a){var c,d=0,e=!1;if(a){for(;c=a[d++];)"ready"==c.status&&c.statusCode>=200&&c.statusCode<300&&(e=!0,b.set(encodeURI(c.url),c));e&&b.save()}},g.defaults={selector:"script",attribute:"x-src",base:"//jazzcat.mobify.com",responseType:"jsonp",execCallback:"Jazzcat.exec",loadCallback:"Jazzcat.load",concat:!1,projectName:""},g}),c("mobifyjs/unblockify",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c={};return c.moveScripts=function(b,c){a.removeElements(b,c);for(var d=0,e=b.length;e>d;d++){var f=b[d];c.body.appendChild(f)}},c.unblock=function(a){var d=b.prototype.insertMobifyScripts;b.prototype.insertMobifyScripts=function(){d.call(this);var b=this.capturedDoc;c.moveScripts(a,b)}},c}),c("mobifyjs/cssOptimize",["mobifyjs/utils"],function(a){var b=window.cssOptimize={};b.getCssUrl=function(b,d){var e=a.extend({},c,d),f=[e.protoAndHost];return e.projectName&&f.push("project-"+e.projectName),f.push(e.endpoint),f.push(b),f.join("/")},b._rewriteHref=function(c,d){var e,f=c.getAttribute(d.targetAttribute);f&&(e=a.absolutify(f),a.httpUrl(e)&&(c.setAttribute("data-orig-href",f),c.setAttribute(d.targetAttribute,b.getCssUrl(e,d)),d.onerror&&c.setAttribute("onerror",d.onerror)))},b.optimize=function(d,e){for(var f,g=a.extend({},c,e),h=0,i=d.length;i>h;h++)f=d[h],"LINK"===f.nodeName&&"stylesheet"===f.getAttribute("rel")&&f.getAttribute(g.targetAttribute)&&!f.hasAttribute("mobify-optimized")&&(f.setAttribute("mobify-optimized",""),b._rewriteHref(f,g))},b.restoreOriginalHref=function(a){var b;a.target.removeAttribute("onerror"),(b=a.target.getAttribute("data-orig-href"))&&a.target.setAttribute("href",b)};var c=b._defaults={protoAndHost:"//jazzcat.mobify.com",endpoint:"cssoptimizer",projectName:"oss-"+location.hostname.replace(/[^\w]/g,"-"),targetAttribute:"x-href",onerror:"Mobify.CssOptimize.restoreOriginalHref(event);"};return b}),c("mobifyjs/external/picturefill",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c=window.Mobify&&window.Mobify.capturing||!1;if(c){var d=b.prototype.renderCapturedDoc;return b.prototype.renderCapturedDoc=function(){for(var a=this.capturedDoc.querySelectorAll("picture img, span[data-picture] img"),b=0,c=a.length;c>b;b++){var e=a[b],f=window.Mobify&&window.Mobify.prefix+"src";e.setAttribute("data-orig-src",e.getAttribute(f)),e.removeAttribute(f)}d.apply(this,arguments)},void 0}window.matchMedia=window.matchMedia||a.matchMedia(document),function(a){a.document.createElement("picture")&&a.document.createElement("source")&&a.HTMLPictureElement||(a.picturefill=function(){for(var b=a.document.querySelectorAll("picture, span[data-picture]"),c=0,d=b.length;d>c;c++){var e=b[c].querySelectorAll("span, source"),f=[];if(!e.length){var g=b[c].innerHTML,h=a.document.createElement("div"),i=g.replace(/(<)source([^>]+>)/gim,"$1div$2").match(/
]+>/gim);h.innerHTML=i.join(""),e=h.getElementsByTagName("div")}for(var j=0,k=e.length;k>j;j++){var l=e[j].getAttribute("data-media")||e[j].getAttribute("media");(!l||a.matchMedia&&a.matchMedia(l).matches)&&f.push(e[j])}var m=b[c].getElementsByTagName("img")[0];if(f.length){var n=f.pop();if(m&&"NOSCRIPT"!==m.parentNode.nodeName){if(n===m.parentNode)continue}else m=a.document.createElement("img"),m.alt=b[c].getAttribute("data-alt");m.src=n.getAttribute("data-src")||n.getAttribute("src"),n.appendChild(m),m.removeAttribute("width"),m.removeAttribute("height")}else m&&m.parentNode.removeChild(m)}},a.addEventListener?(a.addEventListener("resize",a.picturefill,!1),a.addEventListener("DOMContentLoaded",function(){a.picturefill(),a.removeEventListener("load",a.picturefill,!1)},!1),a.addEventListener("load",a.picturefill,!1)):a.attachEvent&&a.attachEvent("onload",a.picturefill))}(this)}),b(["mobifyjs/utils","mobifyjs/capture","mobifyjs/resizeImages","mobifyjs/jazzcat","mobifyjs/unblockify","mobifyjs/cssOptimize","mobifyjs/external/picturefill"],function(a,b,c,d,e,f){var g=window.Mobify=window.Mobify||{};return g.Utils=a,g.Capture=b,g.ResizeImages=c,g.Jazzcat=d,g.CssOptimize=f,g.Unblockify=e,g.api="2.0",g},void 0,!0),c("mobify-library",function(){})}();
\ No newline at end of file
+!function(){var a,b,c;!function(d){function e(a,b){return u.call(a,b)}function f(a,b){var c,d,e,f,g,h,i,j,k,l,m=b&&b.split("/"),n=s.map,o=n&&n["*"]||{};if(a&&"."===a.charAt(0))if(b){for(m=m.slice(0,m.length-1),a=m.concat(a.split("/")),j=0;j
0&&(a.splice(j-1,2),j-=2)}a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if((m||o)&&n){for(c=a.split("/"),j=c.length;j>0;j-=1){if(d=c.slice(0,j).join("/"),m)for(k=m.length;k>0;k-=1)if(e=n[m.slice(0,k).join("/")],e&&(e=e[d])){f=e,g=j;break}if(f)break;!h&&o&&o[d]&&(h=o[d],i=j)}!f&&h&&(f=h,g=i),f&&(c.splice(0,g,f),a=c.join("/"))}return a}function g(a,b){return function(){return n.apply(d,v.call(arguments,0).concat([a,b]))}}function h(a){return function(b){return f(b,a)}}function i(a){return function(b){q[a]=b}}function j(a){if(e(r,a)){var b=r[a];delete r[a],t[a]=!0,m.apply(d,b)}if(!e(q,a)&&!e(t,a))throw new Error("No "+a);return q[a]}function k(a){var b,c=a?a.indexOf("!"):-1;return c>-1&&(b=a.substring(0,c),a=a.substring(c+1,a.length)),[b,a]}function l(a){return function(){return s&&s.config&&s.config[a]||{}}}var m,n,o,p,q={},r={},s={},t={},u=Object.prototype.hasOwnProperty,v=[].slice;o=function(a,b){var c,d=k(a),e=d[0];return a=d[1],e&&(e=f(e,b),c=j(e)),e?a=c&&c.normalize?c.normalize(a,h(b)):f(a,b):(a=f(a,b),d=k(a),e=d[0],a=d[1],e&&(c=j(e))),{f:e?e+"!"+a:a,n:a,pr:e,p:c}},p={require:function(a){return g(a)},exports:function(a){var b=q[a];return"undefined"!=typeof b?b:q[a]={}},module:function(a){return{id:a,uri:"",exports:q[a],config:l(a)}}},m=function(a,b,c,f){var h,k,l,m,n,s,u=[];if(f=f||a,"function"==typeof c){for(b=!b.length&&c.length?["require","exports","module"]:b,n=0;n":""},a.removeBySelector=function(b,c){c=c||document;var d=c.querySelectorAll(b);return a.removeElements(d,c)},a.removeElements=function(a,b){b=b||document;for(var c=0,d=a.length;d>c;c++){var e=a[c];e.parentNode.removeChild(e)}return a};var d;return a.supportsLocalStorage=function(){if(void 0!==d)return d;var a="modernizr";try{localStorage.setItem(a,a),localStorage.removeItem(a),d=!0}catch(b){d=!1}return d},a.matchMedia=function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}},a.domIsReady=function(a){var a=a||document;return a.attachEvent?"complete"===a.readyState:"loading"!==a.readyState},a.getPhysicalScreenSize=function(a){function b(b){var c=a||window.devicePixelRatio||1;return b.width=Math.round(b.width*c),b.height=Math.round(b.height*c),b}var c=navigator.userAgent.match(/ip(hone|od|ad)/i),d=(navigator.userAgent.match(/android (\d)/i)||{})[1],e={width:window.outerWidth,height:window.outerHeight};if(!c)return d>3?b(e):e;var f=window.orientation%180;return f?(e.height=screen.width,e.width=screen.height):(e.width=screen.width,e.height=screen.height),b(e)},a}),c("mobifyjs/capture",["mobifyjs/utils"],function(a){function b(a){return a.nodeName.toLowerCase()}function c(a){return a.replace('"',""")}function d(c){return c?[].map.call(c.childNodes,function(c){var d=b(c);return"#comment"==d?"":"plaintext"==d?c.textContent:"script"==d&&(/mobify/.test(c.src)||/mobify/i.test(c.textContent))?"":c.outerHTML||c.nodeValue||a.outerHTML(c)}).join(""):""}window.Mobify&&!window.Mobify.capturing&&document.getElementsByTagName("plaintext").length&&(window.Mobify.capturing=!0);var e=/(")},g.load=function(a){var c,d=0,e=!1;if(a){for(;c=a[d++];)"ready"==c.status&&c.statusCode>=200&&c.statusCode<300&&(e=!0,b.set(encodeURI(c.url),c));e&&b.save()}},g.defaults={selector:"script",attribute:"x-src",base:"//jazzcat.mobify.com",responseType:"jsonp",execCallback:"Jazzcat.exec",loadCallback:"Jazzcat.load",concat:!1,projectName:""},g}),c("mobifyjs/unblockify",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c={};return c.moveScripts=function(b,c){a.removeElements(b,c);for(var d=0,e=b.length;e>d;d++){var f=b[d];c.body.appendChild(f)}},c.unblock=function(a){var d=b.prototype.insertMobifyScripts;b.prototype.insertMobifyScripts=function(){d.call(this);var b=this.capturedDoc;c.moveScripts(a,b)}},c}),c("mobifyjs/cssOptimize",["mobifyjs/utils"],function(a){var b=window.cssOptimize={};b.getCssUrl=function(b,d){var e=a.extend({},c,d),f=[e.protoAndHost];return e.projectName&&f.push("project-"+e.projectName),f.push(e.endpoint),f.push(b),f.join("/")},b._rewriteHref=function(c,d){var e,f=c.getAttribute(d.targetAttribute);f&&(e=a.absolutify(f),a.httpUrl(e)&&(c.setAttribute("data-orig-href",f),c.setAttribute(d.targetAttribute,b.getCssUrl(e,d)),d.onerror&&c.setAttribute("onerror",d.onerror)))},b.optimize=function(d,e){for(var f,g=a.extend({},c,e),h=0,i=d.length;i>h;h++)f=d[h],"LINK"===f.nodeName&&"stylesheet"===f.getAttribute("rel")&&f.getAttribute(g.targetAttribute)&&!f.hasAttribute("mobify-optimized")&&(f.setAttribute("mobify-optimized",""),b._rewriteHref(f,g))},b.restoreOriginalHref=function(a){var b;a.target.removeAttribute("onerror"),(b=a.target.getAttribute("data-orig-href"))&&a.target.setAttribute("href",b)};var c=b._defaults={protoAndHost:"//jazzcat.mobify.com",endpoint:"cssoptimizer",projectName:"oss-"+location.hostname.replace(/[^\w]/g,"-"),targetAttribute:"x-href",onerror:"Mobify.CssOptimize.restoreOriginalHref(event);"};return b}),c("mobifyjs/external/picturefill",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c=window.Mobify&&window.Mobify.capturing||!1;if(c){var d=b.prototype.renderCapturedDoc;return b.prototype.renderCapturedDoc=function(){for(var a=this.capturedDoc.querySelectorAll("picture img, span[data-picture] img"),b=0,c=a.length;c>b;b++){var e=a[b],f=window.Mobify&&window.Mobify.prefix+"src";e.setAttribute("data-orig-src",e.getAttribute(f)),e.removeAttribute(f)}d.apply(this,arguments)},void 0}window.matchMedia=window.matchMedia||a.matchMedia(document),function(a){a.document.createElement("picture")&&a.document.createElement("source")&&a.HTMLPictureElement||(a.picturefill=function(){for(var b=a.document.querySelectorAll("picture, span[data-picture]"),c=0,d=b.length;d>c;c++){var e=b[c].querySelectorAll("span, source"),f=[];if(!e.length){var g=b[c].innerHTML,h=a.document.createElement("div"),i=g.replace(/(<)source([^>]+>)/gim,"$1div$2").match(/]+>/gim);h.innerHTML=i.join(""),e=h.getElementsByTagName("div")}for(var j=0,k=e.length;k>j;j++){var l=e[j].getAttribute("data-media")||e[j].getAttribute("media");(!l||a.matchMedia&&a.matchMedia(l).matches)&&f.push(e[j])}var m=b[c].getElementsByTagName("img")[0];if(f.length){var n=f.pop();if(m&&"NOSCRIPT"!==m.parentNode.nodeName){if(n===m.parentNode)continue}else m=a.document.createElement("img"),m.alt=b[c].getAttribute("data-alt");m.src=n.getAttribute("data-src")||n.getAttribute("src"),n.parentNode.appendChild(m),m.removeAttribute("width"),m.removeAttribute("height")}else m&&m.parentNode.removeChild(m)}},a.addEventListener?(a.addEventListener("resize",a.picturefill,!1),a.addEventListener("DOMContentLoaded",function(){a.picturefill(),a.removeEventListener("load",a.picturefill,!1)},!1),a.addEventListener("load",a.picturefill,!1)):a.attachEvent&&a.attachEvent("onload",a.picturefill))}(this)}),b(["mobifyjs/utils","mobifyjs/capture","mobifyjs/resizeImages","mobifyjs/jazzcat","mobifyjs/unblockify","mobifyjs/cssOptimize","mobifyjs/external/picturefill"],function(a,b,c,d,e,f){var g=window.Mobify=window.Mobify||{};return g.Utils=a,g.Capture=b,g.ResizeImages=c,g.Jazzcat=d,g.CssOptimize=f,g.Unblockify=e,g.api="2.0",g},void 0,!0),c("mobify-library",function(){})}();
\ No newline at end of file
diff --git a/examples/capturing-picturepolyfill/index.html b/examples/capturing-picturepolyfill/index.html
index 334662a0..6fa4102e 100644
--- a/examples/capturing-picturepolyfill/index.html
+++ b/examples/capturing-picturepolyfill/index.html
@@ -34,9 +34,9 @@
Open up the network tab of your web inspector to see that the img element does not have it's asset downloaded.
-
-
-
+
+
+
- Picture polyfill is used here in a much simpler way. Equivalent images at different breakpoints do not need to be automatically generated, they only need to set width attributes for each `source` element.
+ Picture polyfill is used here in a much simpler way. Equivalent images at different breakpoints do not need to be automatically generated, they only need to set width attributes for each `source/span` element.
View the source to have a look, and view the inspector to see what the `resize` method does to the picture element's markup.
-
-
-
-
-
+
+
+
+
+
-
+
Excitingus Headlineus
diff --git a/src/external/picturefill.js b/src/external/picturefill.js
index 3b68cd49..a4e87165 100644
--- a/src/external/picturefill.js
+++ b/src/external/picturefill.js
@@ -76,7 +76,7 @@ window.matchMedia = window.matchMedia || Utils.matchMedia(document);
}
picImg.src = matchedEl.getAttribute( "data-src" ) || matchedEl.getAttribute("src");
- matchedEl.appendChild( picImg );
+ matchedEl.parentNode.appendChild( picImg );
picImg.removeAttribute("width");
picImg.removeAttribute("height");
}
diff --git a/src/resizeImages.js b/src/resizeImages.js
index 75d64d60..6e344436 100644
--- a/src/resizeImages.js
+++ b/src/resizeImages.js
@@ -178,7 +178,7 @@ ResizeImages._resizeSourceElement = function(element, opts, rootSrc) {
* children
*/
ResizeImages._crawlPictureElement = function(el, opts) {
- var sources = el.getElementsByTagName('source');
+ var sources = el.getElementsByTagName('span') || el.getElementsByTagName('source');
// If source elements are erased from the dom, leave the
// picture element alone.
if (sources.length === 0 || el.hasAttribute('mobify-optimized')) {
@@ -289,7 +289,7 @@ ResizeImages.resize = function(elements, options) {
}
// For a `picture`, (potentially) nuke src on `img`, and
// pass all `source` elements into modifyImages recursively
- else if (element.nodeName === 'PICTURE') {
+ else if (element.nodeName === 'SPAN' || element.nodeName === 'PICTURE') {
ResizeImages._crawlPictureElement(element, opts);
}
}
From 2332394982356eecbae8c3ae3f7e13996b13f064 Mon Sep 17 00:00:00 2001
From: Shawn Jansepar
Date: Sun, 1 Dec 2013 21:10:49 -0800
Subject: [PATCH 3/5] Switch to `span data-picture` rather then `picture` in
all examples
---
.../resizeImages-picture-element/index.html | 2 +-
www/v2/docs/image-resizer.md | 46 +++++++++----------
www/v2/docs/index.md | 6 +--
www/v2/examples/index.md | 36 +++++++--------
4 files changed, 45 insertions(+), 45 deletions(-)
diff --git a/examples/resizeImages-picture-element/index.html b/examples/resizeImages-picture-element/index.html
index be71db90..81b9dd0a 100644
--- a/examples/resizeImages-picture-element/index.html
+++ b/examples/resizeImages-picture-element/index.html
@@ -14,7 +14,7 @@
Mobify.Capture.init(function(capture){
var capturedDoc = capture.capturedDoc;
- var images = capturedDoc.querySelectorAll("img, picture, span[data-picture]");
+ var images = capturedDoc.querySelectorAll("img, span[data-picture]");
Mobify.ResizeImages.resize(images);
// Render source DOM to document
diff --git a/www/v2/docs/image-resizer.md b/www/v2/docs/image-resizer.md
index 873cba88..6c9e8bd4 100644
--- a/www/v2/docs/image-resizer.md
+++ b/www/v2/docs/image-resizer.md
@@ -5,10 +5,10 @@ title: Mobify.js Documentation
# Image Resizer
-- Automatically resize ` ` and `` elements to the maximum width
+- Automatically resize ` ` and `` elements to the maximum width
of the screen.
- Automatically determine support for `WEBP`, and convert images on the fly.
-- Manual resize of `` elements by specifying different widths
+- Manual resize of `` elements by specifying different widths
on each `` element breakpoint.
- Cache all images on Mobify's CDN.
- Image resizing powered by the [Mobify Performance Suite](https://cloud.mobify.com){: target='_blank' }.
@@ -28,11 +28,11 @@ Please refer to the [quickstart guide](/mobifyjs/v2/docs/) to get setup.
## `ResizeImages.resize(images, [options])`
-__images__ must be an array of ` ` and/or `` elements.
+__images__ must be an array of ` ` and/or `` elements.
__options__ are optional.
-Rewrites the `src` of every ` /` in the `images` array on the page based
+Rewrites the `src` of every ` /` in the `images` array on the page based
on the options passed.
- By default, images are requested through `ir0.mobify.com` (part of the [Mobify Performance Suite](https://cloud.mobify.com){: target='_blank' }).
@@ -81,7 +81,7 @@ Automatic image resizing (using Capturing):
Mobify.Capture.init(function(capture){
var capturedDoc = capture.capturedDoc;
// Resize images using Mobify Image Resizer
- var images = capturedDoc.querySelectorAll('img, picture');
+ var images = capturedDoc.querySelectorAll('img, span[data-picture]');
Mobify.ResizeImages.resize( images, {
cacheHours: "2",
} );
@@ -177,31 +177,31 @@ current state of browser support for this format.
## Simplified Picture Element
-Mobify.js comes with a `` polyfill. In combination with the Image Resize
-API, you can have much simplier `` elements. You also no longer need
+Mobify.js comes with a `` polyfill. In combination with the Image Resize
+API, you can have much simplier `` elements. You also no longer need
a <noscript> fallback when using the Resize API (with Capturing).
-The problem with the `` element is that using it to specify the same
+The problem with the `` element is that using it to specify the same
image at different widths can be extremely tedious. Nobody wants to generate 4
versions of every image at all of the possible resolutions, and constantly
update those versions in the markup. Scaling image widths can be automated
-(although the `` element is the best solution for art direction).
+(although the `` element is the best solution for art direction).
-To solve this problem, Mobify.js allows for alternate `` markup that
+To solve this problem, Mobify.js allows for alternate `` markup that
allows you to specify widths as attributes on `` elements, instead of
specifying a different `src` attribute for each breakpoint.
For example, you could write your element like this:
-
-
-
-
-
+
+
+
+
+
-
+
-Notice the use of the `data-src` attribute inside of the `` element.
+Notice the use of the `data-src` attribute inside of the `` element.
This gives us a basis that we can resize to produce an asset for other
breakpoints.
@@ -222,13 +222,13 @@ Let's break down how this will actually work in the browser:
The `resize` method will cause the above markup to transform into this (on an iPhone):
-
-
-
-
-
+
+
+
+
+
-
+
After `resize` changes the markup, the Picture polyfill will run and select the appropriate image based on running the media queries.
diff --git a/www/v2/docs/index.md b/www/v2/docs/index.md
index b1002a66..de4f41a8 100644
--- a/www/v2/docs/index.md
+++ b/www/v2/docs/index.md
@@ -46,7 +46,7 @@ any element that loads external resources!**):
Mobify.Capture.init(function(capture){
var capturedDoc = capture.capturedDoc;
- var images = capturedDoc.querySelectorAll("img, picture");
+ var images = capturedDoc.querySelectorAll("img, span[data-picture]");
Mobify.ResizeImages.resize(images);
// Render source DOM to document
@@ -61,7 +61,7 @@ any element that loads external resources!**):
If you want to use the [Image API](/mobifyjs/v2/docs/image-resizer/)
without [Capturing](/mobifyjs/v2/docs/capturing/), you must change
`src` to `x-src` (this is configurable) for every <img>
and
-<picture>
element you have in your site (you
+<span data-picture>
element you have in your site (you
also may want to add <noscript>
fallbacks if you're worried
about browsers with JavaScript disabled/unavailable). This snippet will
load mobify.js asynchronously in order to be able to start loading images before
@@ -74,7 +74,7 @@ Then, paste the following tag before </head>
, or top of
")},g.load=function(a){var c,d=0,e=!1;if(a){for(;c=a[d++];)"ready"==c.status&&c.statusCode>=200&&c.statusCode<300&&(e=!0,b.set(encodeURI(c.url),c));e&&b.save()}},g.defaults={selector:"script",attribute:"x-src",base:"//jazzcat.mobify.com",responseType:"jsonp",execCallback:"Jazzcat.exec",loadCallback:"Jazzcat.load",concat:!1,projectName:""},g}),c("mobifyjs/unblockify",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c={};return c.moveScripts=function(b,c){a.removeElements(b,c);for(var d=0,e=b.length;e>d;d++){var f=b[d];c.body.appendChild(f)}},c.unblock=function(a){var d=b.prototype.insertMobifyScripts;b.prototype.insertMobifyScripts=function(){d.call(this);var b=this.capturedDoc;c.moveScripts(a,b)}},c}),c("mobifyjs/cssOptimize",["mobifyjs/utils"],function(a){var b=window.cssOptimize={};b.getCssUrl=function(b,d){var e=a.extend({},c,d),f=[e.protoAndHost];return e.projectName&&f.push("project-"+e.projectName),f.push(e.endpoint),f.push(b),f.join("/")},b._rewriteHref=function(c,d){var e,f=c.getAttribute(d.targetAttribute);f&&(e=a.absolutify(f),a.httpUrl(e)&&(c.setAttribute("data-orig-href",f),c.setAttribute(d.targetAttribute,b.getCssUrl(e,d)),d.onerror&&c.setAttribute("onerror",d.onerror)))},b.optimize=function(d,e){for(var f,g=a.extend({},c,e),h=0,i=d.length;i>h;h++)f=d[h],"LINK"===f.nodeName&&"stylesheet"===f.getAttribute("rel")&&f.getAttribute(g.targetAttribute)&&!f.hasAttribute("mobify-optimized")&&(f.setAttribute("mobify-optimized",""),b._rewriteHref(f,g))},b.restoreOriginalHref=function(a){var b;a.target.removeAttribute("onerror"),(b=a.target.getAttribute("data-orig-href"))&&a.target.setAttribute("href",b)};var c=b._defaults={protoAndHost:"//jazzcat.mobify.com",endpoint:"cssoptimizer",projectName:"oss-"+location.hostname.replace(/[^\w]/g,"-"),targetAttribute:"x-href",onerror:"Mobify.CssOptimize.restoreOriginalHref(event);"};return b}),c("mobifyjs/external/picturefill",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c=window.Mobify&&window.Mobify.capturing||!1;if(c){var d=b.prototype.renderCapturedDoc;return b.prototype.renderCapturedDoc=function(){for(var a=this.capturedDoc.querySelectorAll("picture img, span[data-picture] img"),b=0,c=a.length;c>b;b++){var e=a[b],f=window.Mobify&&window.Mobify.prefix+"src";e.setAttribute("data-orig-src",e.getAttribute(f)),e.removeAttribute(f)}d.apply(this,arguments)},void 0}window.matchMedia=window.matchMedia||a.matchMedia(document),function(a){a.document.createElement("picture")&&a.document.createElement("source")&&a.HTMLPictureElement||(a.picturefill=function(){for(var b=a.document.querySelectorAll("picture, span[data-picture]"),c=0,d=b.length;d>c;c++){var e=b[c].querySelectorAll("span, source"),f=[];if(!e.length){var g=b[c].innerHTML,h=a.document.createElement("div"),i=g.replace(/(<)source([^>]+>)/gim,"$1div$2").match(/]+>/gim);h.innerHTML=i.join(""),e=h.getElementsByTagName("div")}for(var j=0,k=e.length;k>j;j++){var l=e[j].getAttribute("data-media")||e[j].getAttribute("media");(!l||a.matchMedia&&a.matchMedia(l).matches)&&f.push(e[j])}var m=b[c].getElementsByTagName("img")[0];if(f.length){var n=f.pop();if(m&&"NOSCRIPT"!==m.parentNode.nodeName){if(n===m.parentNode)continue}else m=a.document.createElement("img"),m.alt=b[c].getAttribute("data-alt");m.src=n.getAttribute("data-src")||n.getAttribute("src"),n.parentNode.appendChild(m),m.removeAttribute("width"),m.removeAttribute("height")}else m&&m.parentNode.removeChild(m)}},a.addEventListener?(a.addEventListener("resize",a.picturefill,!1),a.addEventListener("DOMContentLoaded",function(){a.picturefill(),a.removeEventListener("load",a.picturefill,!1)},!1),a.addEventListener("load",a.picturefill,!1)):a.attachEvent&&a.attachEvent("onload",a.picturefill))}(this)}),b(["mobifyjs/utils","mobifyjs/capture","mobifyjs/resizeImages","mobifyjs/jazzcat","mobifyjs/unblockify","mobifyjs/cssOptimize","mobifyjs/external/picturefill"],function(a,b,c,d,e,f){var g=window.Mobify=window.Mobify||{};return g.Utils=a,g.Capture=b,g.ResizeImages=c,g.Jazzcat=d,g.CssOptimize=f,g.Unblockify=e,g.api="2.0",g},void 0,!0),c("mobify-library",function(){})}();
\ No newline at end of file
+!function(){var a,b,c;!function(d){function e(a,b){return u.call(a,b)}function f(a,b){var c,d,e,f,g,h,i,j,k,l,m=b&&b.split("/"),n=s.map,o=n&&n["*"]||{};if(a&&"."===a.charAt(0))if(b){for(m=m.slice(0,m.length-1),a=m.concat(a.split("/")),j=0;j
0&&(a.splice(j-1,2),j-=2)}a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if((m||o)&&n){for(c=a.split("/"),j=c.length;j>0;j-=1){if(d=c.slice(0,j).join("/"),m)for(k=m.length;k>0;k-=1)if(e=n[m.slice(0,k).join("/")],e&&(e=e[d])){f=e,g=j;break}if(f)break;!h&&o&&o[d]&&(h=o[d],i=j)}!f&&h&&(f=h,g=i),f&&(c.splice(0,g,f),a=c.join("/"))}return a}function g(a,b){return function(){return n.apply(d,v.call(arguments,0).concat([a,b]))}}function h(a){return function(b){return f(b,a)}}function i(a){return function(b){q[a]=b}}function j(a){if(e(r,a)){var b=r[a];delete r[a],t[a]=!0,m.apply(d,b)}if(!e(q,a)&&!e(t,a))throw new Error("No "+a);return q[a]}function k(a){var b,c=a?a.indexOf("!"):-1;return c>-1&&(b=a.substring(0,c),a=a.substring(c+1,a.length)),[b,a]}function l(a){return function(){return s&&s.config&&s.config[a]||{}}}var m,n,o,p,q={},r={},s={},t={},u=Object.prototype.hasOwnProperty,v=[].slice;o=function(a,b){var c,d=k(a),e=d[0];return a=d[1],e&&(e=f(e,b),c=j(e)),e?a=c&&c.normalize?c.normalize(a,h(b)):f(a,b):(a=f(a,b),d=k(a),e=d[0],a=d[1],e&&(c=j(e))),{f:e?e+"!"+a:a,n:a,pr:e,p:c}},p={require:function(a){return g(a)},exports:function(a){var b=q[a];return"undefined"!=typeof b?b:q[a]={}},module:function(a){return{id:a,uri:"",exports:q[a],config:l(a)}}},m=function(a,b,c,f){var h,k,l,m,n,s,u=[];if(f=f||a,"function"==typeof c){for(b=!b.length&&c.length?["require","exports","module"]:b,n=0;n":""},a.removeBySelector=function(b,c){c=c||document;var d=c.querySelectorAll(b);return a.removeElements(d,c)},a.removeElements=function(a,b){b=b||document;for(var c=0,d=a.length;d>c;c++){var e=a[c];e.parentNode.removeChild(e)}return a};var d;return a.supportsLocalStorage=function(){if(void 0!==d)return d;var a="modernizr";try{localStorage.setItem(a,a),localStorage.removeItem(a),d=!0}catch(b){d=!1}return d},a.matchMedia=function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}},a.domIsReady=function(a){var a=a||document;return a.attachEvent?"complete"===a.readyState:"loading"!==a.readyState},a.getPhysicalScreenSize=function(a){function b(b){var c=a||window.devicePixelRatio||1;return b.width=Math.round(b.width*c),b.height=Math.round(b.height*c),b}var c=navigator.userAgent.match(/ip(hone|od|ad)/i),d=(navigator.userAgent.match(/android (\d)/i)||{})[1],e={width:window.outerWidth,height:window.outerHeight};if(!c)return d>3?b(e):e;var f=window.orientation%180;return f?(e.height=screen.width,e.width=screen.height):(e.width=screen.width,e.height=screen.height),b(e)},a}),c("mobifyjs/capture",["mobifyjs/utils"],function(a){function b(a){return a.nodeName.toLowerCase()}function c(a){return a.replace('"',""")}function d(c){return c?[].map.call(c.childNodes,function(c){var d=b(c);return"#comment"==d?"":"plaintext"==d?c.textContent:"script"==d&&(/mobify/.test(c.src)||/mobify/i.test(c.textContent))?"":c.outerHTML||c.nodeValue||a.outerHTML(c)}).join(""):""}window.Mobify&&!window.Mobify.capturing&&document.getElementsByTagName("plaintext").length&&(window.Mobify.capturing=!0);var e=/(")},g.load=function(a){var c,d=0,e=!1;if(a){for(;c=a[d++];)"ready"==c.status&&c.statusCode>=200&&c.statusCode<300&&(e=!0,b.set(encodeURI(c.url),c));e&&b.save()}},g.defaults={selector:"script",attribute:"x-src",base:"//jazzcat.mobify.com",responseType:"jsonp",execCallback:"Jazzcat.exec",loadCallback:"Jazzcat.load",concat:!1,projectName:""},g}),c("mobifyjs/unblockify",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c={};return c.moveScripts=function(b,c){a.removeElements(b,c);for(var d=0,e=b.length;e>d;d++){var f=b[d];c.body.appendChild(f)}},c.unblock=function(a){var d=b.prototype.insertMobifyScripts;b.prototype.insertMobifyScripts=function(){d.call(this);var b=this.capturedDoc;c.moveScripts(a,b)}},c}),c("mobifyjs/cssOptimize",["mobifyjs/utils"],function(a){var b=window.cssOptimize={};b.getCssUrl=function(b,d){var e=a.extend({},c,d),f=[e.protoAndHost];return e.projectName&&f.push("project-"+e.projectName),f.push(e.endpoint),f.push(b),f.join("/")},b._rewriteHref=function(c,d){var e,f=c.getAttribute(d.targetAttribute);f&&(e=a.absolutify(f),a.httpUrl(e)&&(c.setAttribute("data-orig-href",f),c.setAttribute(d.targetAttribute,b.getCssUrl(e,d)),d.onerror&&c.setAttribute("onerror",d.onerror)))},b.optimize=function(d,e){for(var f,g=a.extend({},c,e),h=0,i=d.length;i>h;h++)f=d[h],"LINK"===f.nodeName&&"stylesheet"===f.getAttribute("rel")&&f.getAttribute(g.targetAttribute)&&!f.hasAttribute("mobify-optimized")&&(f.setAttribute("mobify-optimized",""),b._rewriteHref(f,g))},b.restoreOriginalHref=function(a){var b;a.target.removeAttribute("onerror"),(b=a.target.getAttribute("data-orig-href"))&&a.target.setAttribute("href",b)};var c=b._defaults={protoAndHost:"//jazzcat.mobify.com",endpoint:"cssoptimizer",projectName:"oss-"+location.hostname.replace(/[^\w]/g,"-"),targetAttribute:"x-href",onerror:"Mobify.CssOptimize.restoreOriginalHref(event);"};return b}),c("mobifyjs/external/picturefill",["mobifyjs/utils","mobifyjs/capture"],function(a,b){var c=window.Mobify&&window.Mobify.capturing||!1;if(c){var d=b.prototype.renderCapturedDoc;return b.prototype.renderCapturedDoc=function(){for(var a=this.capturedDoc.querySelectorAll("picture img, span[data-picture] img"),b=0,c=a.length;c>b;b++){var e=a[b],f=window.Mobify&&window.Mobify.prefix+"src";e.setAttribute("data-orig-src",e.getAttribute(f)),e.removeAttribute(f)}d.apply(this,arguments)},void 0}window.matchMedia=window.matchMedia||a.matchMedia(document),function(a){a.document.createElement("picture")&&a.document.createElement("source")&&a.HTMLPictureElement||(a.picturefill=function(){for(var b=a.document.querySelectorAll("picture, span[data-picture]"),c=0,d=b.length;d>c;c++){var e=b[c].querySelectorAll("span, source"),f=[];if(!e.length){var g=b[c].innerHTML,h=a.document.createElement("div"),i=g.replace(/(<)source([^>]+>)/gim,"$1div$2").match(/]+>/gim);h.innerHTML=i.join(""),e=h.getElementsByTagName("div")}for(var j=0,k=e.length;k>j;j++){var l=e[j].getAttribute("data-media")||e[j].getAttribute("media");(!l||a.matchMedia&&a.matchMedia(l).matches)&&f.push(e[j])}var m=b[c].getElementsByTagName("img")[0];if(f.length){var n=f.pop();if(m&&"NOSCRIPT"!==m.parentNode.nodeName){if(n===m.parentNode)continue}else m=a.document.createElement("img"),m.alt=b[c].getAttribute("data-alt");m.src=n.getAttribute("data-src")||n.getAttribute("src"),n.parentNode.appendChild(m),m.removeAttribute("width"),m.removeAttribute("height")}else m&&m.parentNode.removeChild(m)}},a.addEventListener?(a.addEventListener("resize",a.picturefill,!1),a.addEventListener("DOMContentLoaded",function(){a.picturefill(),a.removeEventListener("load",a.picturefill,!1)},!1),a.addEventListener("load",a.picturefill,!1)):a.attachEvent&&a.attachEvent("onload",a.picturefill))}(this)}),b(["mobifyjs/utils","mobifyjs/capture","mobifyjs/resizeImages","mobifyjs/jazzcat","mobifyjs/unblockify","mobifyjs/cssOptimize","mobifyjs/external/picturefill"],function(a,b,c,d,e,f){var g=window.Mobify=window.Mobify||{};return g.Utils=a,g.Capture=b,g.ResizeImages=c,g.Jazzcat=d,g.CssOptimize=f,g.Unblockify=e,g.api="2.0",g},void 0,!0),c("mobify-library",function(){})}();
\ No newline at end of file
diff --git a/src/resizeImages.js b/src/resizeImages.js
index 6e344436..53db6911 100644
--- a/src/resizeImages.js
+++ b/src/resizeImages.js
@@ -178,7 +178,8 @@ ResizeImages._resizeSourceElement = function(element, opts, rootSrc) {
* children
*/
ResizeImages._crawlPictureElement = function(el, opts) {
- var sources = el.getElementsByTagName('span') || el.getElementsByTagName('source');
+ var sources;
+ (sources = el.getElementsByTagName('span')).length || (sources = el.getElementsByTagName('source'));
// If source elements are erased from the dom, leave the
// picture element alone.
if (sources.length === 0 || el.hasAttribute('mobify-optimized')) {
@@ -281,7 +282,6 @@ ResizeImages.resize = function(elements, options) {
for(var i=0; i < elements.length; i++) {
var element = elements[i];
-
// For an `img`, simply modify the src attribute
if (element.nodeName === 'IMG' && !element.hasAttribute('mobify-optimized')) {
element.setAttribute('mobify-optimized', '');
diff --git a/tests/resizeImages.html b/tests/resizeImages.html
index 9f65923c..38e8f458 100644
--- a/tests/resizeImages.html
+++ b/tests/resizeImages.html
@@ -45,6 +45,15 @@
+
+
+
+
+
+
+
+
+
@@ -237,6 +246,39 @@
});
+ test('resize images - span data-picture element', function() {
+ var images = document.querySelectorAll('#resizeImages-span-picture-element span[data-picture]');
+
+ ResizeImages.resize(images, {
+ projectName: 'test1',
+ maxWidth: 1280,
+ maxHeight: 480,
+ webp: false,
+ sourceAttribute: 'src'
+ });
+
+ var sources = images[0].getElementsByTagName('span');
+ if (sources.length === 0) {
+ ok(images[0].getElementsByTagName("img")[0].getAttribute("src"),
+ "http://www.mobify.com/i/phone-tablet-small.png",
+ "if source not properly parsed (iOS 4.3), src for img element inside of a picture element should remain");
+ return;
+ }
+
+ equal(images[0].querySelectorAll("#width-and-src")[0].getAttribute("src"),
+ "//ir0.mobify.com/project-test1/300/480/http://www.mobify.com/i/phone-tablet-small.png",
+ "source in picture has width overridden, and uses own src");
+
+ equal(images[0].querySelectorAll("#width-and-no-src")[0].getAttribute("src"),
+ "//ir0.mobify.com/project-test1/400/480/http://www.mobify.com/i/phone-tablet.png",
+ "source in picture has width overridden, and uses data-src in picture");
+
+ equal(images[0].querySelectorAll("#no-width-and-no-src")[0].getAttribute("src"),
+ "//ir0.mobify.com/project-test1/1280/480/http://www.mobify.com/i/phone-tablet.png",
+ "source in picture has no width overide, and uses data-src in picture");
+
+ });
+
test('get image url', function() {
var options = Utils.extend(ResizeImages.processOptions(), {
maxWidth: 320,
From d07a4c21fe6ccfb30b6291b984b66114e6de5e6d Mon Sep 17 00:00:00 2001
From: Shawn Jansepar
Date: Sun, 1 Dec 2013 22:17:18 -0800
Subject: [PATCH 5/5] Change path to latest mobify.js build
---
www/v2/docs/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/www/v2/docs/index.md b/www/v2/docs/index.md
index de4f41a8..98c182c0 100644
--- a/www/v2/docs/index.md
+++ b/www/v2/docs/index.md
@@ -70,7 +70,7 @@ the DOM is ready.
Then, paste the following tag before </head>
, or top of
<body>
:
-
+