Skip to content
This repository has been archived by the owner on Aug 5, 2020. It is now read-only.

V2.0 span not picture #231

Closed
wants to merge 5 commits into from
+160 −188
Closed

V2.0 span not picture #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
612f162
Update code to use both `picture` and `span[data-picture]`
jansepar Dec 2, 2013
0649e2b
Further changes required for using spans in addition to picture element
jansepar Dec 2, 2013
2332394
Switch to `span data-picture` rather then `picture` in all examples
jansepar Dec 2, 2013
4ad69aa
Fixes bug caught by tests; adds new test for span[data-picture]
jansepar Dec 2, 2013
d07a4c2
Change path to latest mobify.js build
jansepar Dec 2, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 28 additions & 63 deletions build/mobify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1328,7 +1328,8 @@ ResizeImages._resizeSourceElement = function(element, opts, rootSrc) {
* children
*/
ResizeImages._crawlPictureElement = function(el, opts) {
var sources = 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')) {
Expand Down Expand Up @@ -1431,15 +1432,14 @@ 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', '');
ResizeImages._rewriteSrcAttribute(element, opts);
}
// 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);
}
}
Expand Down Expand Up @@ -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';
Expand All @@ -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 <picture> is released
B) A major browser implements <picture>
*/
/*! 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 `<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" );

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,
Expand All @@ -2265,58 +2251,36 @@ 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 ] );
}
}

// 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.parentNode.appendChild( picImg );
picImg.removeAttribute("width");
picImg.removeAttribute("height");
}
else if( picImg ){
picImg.parentNode.removeChild( picImg );
}
}
};
Expand All @@ -2334,7 +2298,8 @@ window.matchMedia = window.matchMedia || Utils.matchMedia(document);
else if( w.attachEvent ){
w.attachEvent( "onload", w.picturefill );
}
})( this );

}( this ));

return;

Expand Down
2 changes: 1 addition & 1 deletion build/mobify.min.js
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions examples/capturing-picturepolyfill/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<script>!function(a,b,c,d,e){function g(a,c,d,e){var f=b.getElementsByTagName("script")[0];a.src=e,a.id=c,a.setAttribute("class",d),f.parentNode.insertBefore(a,f)}a.Mobify={points:[+new Date]};var f=/((; )|#|&|^)mobify=(\d)/.exec(location.hash+"; "+b.cookie);if(f&&f[3]){if(!+f[3])return}else if(!c())return;b.write('<plaintext style="display:none">'),setTimeout(function(){var c=a.Mobify=a.Mobify||{};c.capturing=!0;var f=b.createElement("script"),h="mobify",i=function(){var c=new Date;c.setTime(c.getTime()+3e5),b.cookie="mobify=0; expires="+c.toGMTString()+"; path=/",a.location=a.location.href};f.onload=function(){if(e)if("string"==typeof e){var c=b.createElement("script");c.onerror=i,g(c,"main-executable",h,mainUrl)}else a.Mobify.mainExecutable=e.toString(),e()},f.onerror=i,g(f,"mobify-js",h,d)})}(window,document,function(){a=/webkit|(firefox)[\/\s](\d+)|(opera)[\s\S]*version[\/\s](\d+)|(trident)[\/\s](\d+)|3ds/i.exec(navigator.userAgent);return!a||a[1]&&4>+a[2]||a[3]&&11>+a[4]||a[5]&&6>+a[6]?!1:!0},

// path to mobify.js
"/mobifyjs/build/mobify.min.js",
"/mobifyjs/build/mobify.js",

// calls to APIs go here (or path to a main.js)
function() {
Expand Down Expand Up @@ -32,12 +32,12 @@
<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)">
<span data-picture>
<span src="/mobifyjs/examples/assets/images/small.jpg"></span>
<span src="/mobifyjs/examples/assets/images/medium.jpg" data-media="(min-width: 450px)"></span>
<span src="/mobifyjs/examples/assets/images/large.jpg" data-media="(min-width: 800px)"></span>
<span src="/mobifyjs/examples/assets/images/extralarge.jpg" data-media="(min-width: 1000px)"></span>
<img src="/mobifyjs/examples/assets/images/small.jpg">
</picture>
</span>
</body>
</html>
18 changes: 9 additions & 9 deletions examples/resizeImages-picture-element/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<script>!function(a,b,c,d,e){function g(a,c,d,e){var f=b.getElementsByTagName("script")[0];a.src=e,a.id=c,a.setAttribute("class",d),f.parentNode.insertBefore(a,f)}a.Mobify={points:[+new Date]};var f=/((; )|#|&|^)mobify=(\d)/.exec(location.hash+"; "+b.cookie);if(f&&f[3]){if(!+f[3])return}else if(!c())return;b.write('<plaintext style="display:none">'),setTimeout(function(){var c=a.Mobify=a.Mobify||{};c.capturing=!0;var f=b.createElement("script"),h="mobify",i=function(){var c=new Date;c.setTime(c.getTime()+3e5),b.cookie="mobify=0; expires="+c.toGMTString()+"; path=/",a.location=a.location.href};f.onload=function(){if(e)if("string"==typeof e){var c=b.createElement("script");c.onerror=i,g(c,"main-executable",h,mainUrl)}else a.Mobify.mainExecutable=e.toString(),e()},f.onerror=i,g(f,"mobify-js",h,d)})}(window,document,function(){a=/webkit|(firefox)[\/\s](\d+)|(opera)[\s\S]*version[\/\s](\d+)|(trident)[\/\s](\d+)|3ds/i.exec(navigator.userAgent);return!a||a[1]&&4>+a[2]||a[3]&&11>+a[4]||a[5]&&6>+a[6]?!1:!0},

// path to mobify.js
"/mobifyjs/build/mobify.min.js",
"/mobifyjs/build/mobify.js",

// calls to APIs go here (or path to a main.js)
function() {
Expand All @@ -14,7 +14,7 @@
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
Expand Down Expand Up @@ -45,16 +45,16 @@
</head>
<body class="foo">

<p>Picture element 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.</p>
<p>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.</p>
<p>View the source to have a look, and view the inspector to see what the `resize` method does to the picture element's markup.</p>
<!-- http://upload.wikimedia.org/wikipedia/commons/6/68/President_Barack_Obama_Tours_Storm_Damage_in_New_Jersey_2.jpg -->
<picture class="example-photo" data-src="/mobifyjs/examples/assets/images/responsive-obama.jpg">
<source src="/mobifyjs/examples/assets/images/responsive-obama-mobile.png">
<source media="(min-width: 512px)">
<source media="(min-width: 1024px)" data-width="512">
<source media="(min-width: 2048px)" data-width="1024">
<span data-picture class="example-photo" data-src="/mobifyjs/examples/assets/images/responsive-obama.jpg">
<span src="/mobifyjs/examples/assets/images/responsive-obama-mobile.png"></span>
<span data-media="(min-width: 512px)"></span>
<span data-media="(min-width: 1024px)" data-width="512"></span>
<span data-media="(min-width: 2048px)" data-width="1024"></span>
<img src="/mobifyjs/examples/assets/images/responsive-obama.jpg">
</picture>
</span>

<h1>Excitingus Headlineus</h1>

Expand Down
Loading