Skip to content
Browse files

Added demo for srcset and picturefill

  • Loading branch information...
1 parent cb087b5 commit b6077d83593e3cd36431a0ae614997b67123540b @andismith committed Aug 20, 2013
View
34 demo/Gruntfile.js
@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = function(grunt) {
+
+ // Project configuration.
+ grunt.initConfig({
+ responsive_images: {
+ dev: {
+ options: {},
+ files: [{
+ expand: true,
+ src: ['assets/img/**/*.{jpg,gif,png}'],
+ cwd: 'src/',
+ dest: 'dist/'
+ }]
+ }
+ },
+ copy: {
+ dev: {
+ files: [{
+ expand: true,
+ src: ['**/*', '!assets/img/**/*.*'],
+ cwd: 'src/',
+ dest: 'dist/'
+ }]
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-copy');
+ grunt.loadNpmTasks('grunt-responsive-images');
+
+ grunt.registerTask('default', ['copy','responsive_images']);
+};
View
9 demo/package.json
@@ -0,0 +1,9 @@
+{
+ "name": "Responsive-Image-Demo",
+ "version": "0.0.1",
+ "dependencies": {
+ "grunt": "~0.4.1",
+ "grunt-responsive-images": "~0.0.1",
+ "grunt-contrib-copy": "~0.4.1"
+ }
+}
View
BIN demo/src/assets/img/wedding.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 demo/src/assets/js/matchmedia.js
@@ -0,0 +1,2 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
View
61 demo/src/assets/js/picturefill.js
@@ -0,0 +1,61 @@
+/*! 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
+ "use strict";
+
+ w.picturefill = function() {
+ var ps = w.document.getElementsByTagName( "span" );
+
+ // Loop the pictures
+ for( var i = 0, il = ps.length; i < il; i++ ){
+ if( ps[ i ].getAttribute( "data-picture" ) !== null ){
+
+ var sources = ps[ i ].getElementsByTagName( "span" ),
+ matches = [];
+
+ // See if which sources match
+ for( var j = 0, jl = sources.length; j < jl; j++ ){
+ var media = sources[ j ].getAttribute( "data-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
+ var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+ if( matches.length ){
+ var matchedEl = matches.pop();
+ if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
+ picImg = w.document.createElement( "img" );
+ picImg.alt = ps[ i ].getAttribute( "data-alt" );
+ }
+
+ picImg.src = matchedEl.getAttribute( "data-src" );
+ matchedEl.appendChild( picImg );
+ }
+ else if( picImg ){
+ picImg.parentNode.removeChild( picImg );
+ }
+ }
+ }
+ };
+
+ // 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 ));
View
1 demo/src/assets/js/srcset.min.js
@@ -0,0 +1 @@
+var Query=function(t){"use strict";var e=function(t){var e,r,n,i,s=[];if(t===void 0||null===t||""===t)return s;for(0===t.indexOf("?")&&(t=t.substring(1)),r=(""+t).split(/[&;]/),e=0;r.length>e;e++)n=r[e],i=n.split("="),s.push([i[0],i[1]]);return s},r=e(t),n=function(){var t,e,n="";for(t=0;r.length>t;t++)e=r[t],n.length>0&&(n+="&"),n+=e.join("=");return n.length>0?"?"+n:n},i=function(t){return t=decodeURIComponent(t),t=t.replace("+"," ")},s=function(t){var e,n;for(n=0;r.length>n;n++)if(e=r[n],i(t)===i(e[0]))return e[1]},o=function(t){var e,n,s=[];for(e=0;r.length>e;e++)n=r[e],i(t)===i(n[0])&&s.push(n[1]);return s},a=function(t,e){var n,s,o,a,u=[];for(n=0;r.length>n;n++)s=r[n],o=i(s[0])===i(t),a=i(s[1])===i(e),(1===arguments.length&&!o||2===arguments.length&&!o&&!a)&&u.push(s);return r=u,this},u=function(t,e,n){return 3===arguments.length&&-1!==n?(n=Math.min(n,r.length),r.splice(n,0,[t,e])):arguments.length>0&&r.push([t,e]),this},c=function(t,e,n){var s,o,c=-1;if(3===arguments.length){for(s=0;r.length>s;s++)if(o=r[s],i(o[0])===i(t)&&decodeURIComponent(o[1])===i(n)){c=s;break}a(t,n).addParam(t,e,c)}else{for(s=0;r.length>s;s++)if(o=r[s],i(o[0])===i(t)){c=s;break}a(t),u(t,e,c)}return this};return{getParamValue:s,getParamValues:o,deleteParam:a,addParam:u,replaceParam:c,toString:n}},Uri=function(t){"use strict";var e=!1,r=function(t){for(var r={strict:/^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,loose:/^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/},n=["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],i={name:"queryKey",parser:/(?:^|&)([^&=]*)=?([^&]*)/g},s=r[e?"strict":"loose"].exec(t),o={},a=14;a--;)o[n[a]]=s[a]||"";return o[i.name]={},o[n[12]].replace(i.parser,function(t,e,r){e&&(o[i.name][e]=r)}),o},n=r(t||""),i=new Query(n.query),s=function(t){return t!==void 0&&(n.protocol=t),n.protocol},o=null,a=function(t){return t!==void 0&&(o=t),null===o?-1!==n.source.indexOf("//"):o},u=function(t){return t!==void 0&&(n.userInfo=t),n.userInfo},c=function(t){return t!==void 0&&(n.host=t),n.host},h=function(t){return t!==void 0&&(n.port=t),n.port},f=function(t){return t!==void 0&&(n.path=t),n.path},l=function(t){return t!==void 0&&(i=new Query(t)),i},d=function(t){return t!==void 0&&(n.anchor=t),n.anchor},g=function(t){return s(t),this},p=function(t){return a(t),this},m=function(t){return u(t),this},v=function(t){return c(t),this},w=function(t){return h(t),this},x=function(t){return f(t),this},I=function(t){return l(t),this},y=function(t){return d(t),this},C=function(t){return l().getParamValue(t)},P=function(t){return l().getParamValues(t)},_=function(t,e){return 2===arguments.length?l().deleteParam(t,e):l().deleteParam(t),this},V=function(t,e,r){return 3===arguments.length?l().addParam(t,e,r):l().addParam(t,e),this},B=function(t,e,r){return 3===arguments.length?l().replaceParam(t,e,r):l().replaceParam(t,e),this},O=function(){var t="",e=function(t){return null!==t&&""!==t};return e(s())?(t+=s(),s().indexOf(":")!==s().length-1&&(t+=":"),t+="//"):a()&&e(c())&&(t+="//"),e(u())&&e(c())&&(t+=u(),u().indexOf("@")!==u().length-1&&(t+="@")),e(c())&&(t+=c(),e(h())&&(t+=":"+h())),e(f())?t+=f():e(c())&&(e(""+l())||e(d()))&&(t+="/"),e(""+l())&&(0!==(""+l()).indexOf("?")&&(t+="?"),t+=""+l()),e(d())&&(0!==d().indexOf("#")&&(t+="#"),t+=d()),t},Q=function(){return new Uri(O())};return{protocol:s,hasAuthorityPrefix:a,userInfo:u,host:c,port:h,path:f,query:l,anchor:d,setProtocol:g,setHasAuthorityPrefix:p,setUserInfo:m,setHost:v,setPort:w,setPath:x,setQuery:I,setAnchor:y,getQueryParamValue:C,getQueryParamValues:P,deleteQueryParam:_,addQueryParam:V,replaceQueryParam:B,toString:O,clone:Q}},jsUri=Uri;(function(t){function e(t){this.imageCandidates=[],this.srcValue=t.src,this.srcsetValue=t.srcset,this.isValid=!0,this.error="",this._parse(this.srcsetValue),this.isValid||console.error("Error: "+this.error)}function r(t){this.src=t.src,this.w=t.w||1/0,this.h=t.h||1/0,this.x=t.x||1}var n=/^[0-9]+$/;e.prototype._parse=function(){for(var t,e,n=this.srcsetValue,i=0,s=[];""!==n;){for(;" "===n.charAt(0);)n=n.slice(1);if(i=n.indexOf(" "),-1!==i){if(t=n.slice(0,i),""===t)break;n=n.slice(i+1),i=n.indexOf(","),-1===i?(e=n,n=""):(e=n.slice(0,i),n=n.slice(i+1)),s.push({url:t,descriptors:e})}else s.push({url:n,descriptors:""}),n=""}for(var o=0,a=s.length;a>o;o++){var u=s[o],c=this._parseDescriptors(u.descriptors);this._addCandidate(new r({src:u.url,x:c.x,w:c.w,h:c.h}))}this.srcValue&&this._addCandidate(new r({src:this.srcValue}))},e.prototype._addCandidate=function(t){for(var e=0;this.imageCandidates.length>e;e++){var r=this.imageCandidates[e];if(r.x==t.x&&r.w==t.w&&r.h==t.h)return}this.imageCandidates.push(t)},e.prototype._parseDescriptors=function(t){for(var e=t.split(/\s/),r={},i=0;e.length>i;i++){var s=e[i];if(s.length>0){var o=s[s.length-1],a=s.substring(0,s.length-1),u=parseInt(a,10),c=parseFloat(a);a.match(n)&&"w"===o?r[o]=u:a.match(n)&&"h"==o?r[o]=u:isNaN(c)||"x"!=o?(this.error='Invalid srcset descriptor found in "'+s+'".',this.isValid=!1):r[o]=c}}return r},t.SrcsetInfo=e})(window),function(t){function e(){this.w=null,this.h=null,this.x=null}e.prototype.compute=function(){this.w=window.innerWidth||document.documentElement.clientWidth,this.h=window.innerHeight||document.documentElement.clientHeight,this.x=window.devicePixelRatio},e.prototype.setForTesting=function(t){this.w=t.w,this.h=t.h,this.x=t.x},e.prototype.getBestImage=function(t){var e=t.imageCandidates.slice(0),r=this._getBestCandidateIf(e,function(t,e){return t.w>e.w});this._removeCandidatesIf(e,function(t){return function(e){return e.w<t.w}}(this)),0===e.length&&(e=[r]);var n=this._getBestCandidateIf(e,function(t,e){return t.h>e.h});this._removeCandidatesIf(e,function(t){return function(e){return e.h<t.h}}(this)),0===e.length&&(e=[n]);var i=this._getBestCandidateIf(e,function(t,e){return t.x>e.x});this._removeCandidatesIf(e,function(t){return function(e){return e.x<t.x}}(this)),0===e.length&&(e=[i]);var s=this._getBestCandidateIf(e,function(t,e){return t.w<e.w});this._removeCandidatesIf(e,function(t){return t.w>s.w}),this._getBestCandidateIf(e,function(t,e){return t.h<e.h}),this._removeCandidatesIf(e,function(t){return t.h>s.h});var o=this._getBestCandidateIf(e,function(t,e){return t.x<e.x});return this._removeCandidatesIf(e,function(t){return t.x>o.x}),e[0]},e.prototype._getBestCandidateIf=function(t,e){for(var r=t[0],n=0;t.length>n;n++){var i=t[n];e(i,r)&&(r=i)}return r},e.prototype._removeCandidatesIf=function(t,e){for(var r=t.length-1;r>=0;r--){var n=t[r];e(n)&&t.splice(r,1)}return t},e.prototype.getBestImage2=function(t){for(var e=null,r=t.imageCandidates,n=0;r.length>n;n++){var i=r[n],s=e?e.x:0;if(i.x>=s&&i.x<=this.x){if(null===e){e=i;continue}this.w<=i.w&&i.w<=e.w&&(e=i)}}return e},t.ViewportInfo=e}(window),function(){function t(){var t=new Image;return"srcset"in t}function e(){if(!t()){var e=new ViewportInfo;e.compute();for(var r=document.querySelectorAll("img"),n=0;r.length>n;n++){var i=r[n],s=i.getAttribute("srcset");if(s){var o=new SrcsetInfo({src:i.src,srcset:s}),a=e.getBestImage(o);i.src=a.src,i.style.webkitTransform="scale("+1/a.x+")",i.style.webkitTransformOrigin="0 0"}}}}var r=setInterval(function(){"complete"===document.readyState&&(e(),clearInterval(r))},10)}(window);
View
30 demo/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>srcset Test</title>
+ <script src="assets/js/srcset.min.js"></script>
+ </head>
+ <body>
+ <h1>Tests for Grunt Responsive Images</h1>
+ <p><a href="https://github.com/andismith/grunt-responsive-images">https://github.com/andismith/grunt-responsive-images</a></p>
+ <h2>srcset Test</h2>
+ <img alt="My Wedding Day"
+ src="assets/img/wedding-small.jpg"
+ srcset="assets/img/wedding-small.jpg 640w, assets/img/wedding-medium.jpg 1024w, assets/img/wedding-large.jpg">
+
+ <h2>PictureFill Test</h2>
+ <span data-picture data-alt="My Wedding Day">
+ <span data-src="assets/img/wedding-small.jpg"></span>
+ <span data-src="assets/img/wedding-medium.jpg" data-media="(min-width: 640px)"></span>
+ <span data-src="assets/img/wedding-large.jpg" data-media="(min-width: 1024px)"></span>
+
+ <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
+ <noscript><img src="assets/img/wedding-small.jpg" alt="My Wedding Day"></noscript>
+ </span>
+
+ <script src="assets/js/matchmedia.js"></script>
+ <script src="assets/js/picturefill.js"></script>
+
+
+ </body>
+</html>

0 comments on commit b6077d8

Please sign in to comment.
Something went wrong with that request. Please try again.