com web/php: Only load elephpants if the user's browser supports data: URIs.: js/common.js js/ext/modernizr.js

Commit: a38398f82ecbebf16f0ce924fbdb7735a0b814c5 Author: Adam Harvey <aharvey@php.net> Thu, 19 Dec 2013 17:08:23 -0800 Parents: 8ed6bb2bd5f15890f3d834adb1b085504ccb9339 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=a38398f82ecbebf16f0ce924fbdb7735a0b814c5 Log: Only load elephpants if the user's browser supports data: URIs. As part of this, I've upgraded Modernizr to the latest version (2.7.1) and changed its configuration to include a test for data: URI support. This is a result of sas spotting requests for pages starting with "data:" in our error logs from clients without data: URI support. Changed paths: M js/common.js M js/ext/modernizr.js

diff --git a/js/common.js b/js/common.js index 9955047..65427da 100755 --- a/js/common.js +++ b/js/common.js @@ -101,60 +101,76 @@ $(document).ready(function() { return false; }); - var $elephpants = $(".elephpants"); - var $elephpantsImages = $elephpants.find('.images'); - // load the elephpant images if elephpants div is in the dom. - $elephpantsImages.first().each(function (idx, node) { - - // function to fetch and insert images. - var fetchImages = function() { - - // determine how many elephpants are required to fill the - // viewport and subtract for any images we already have. - var count = Math.ceil($(document).width() / 75) - - $elephpantsImages.find("img").length; - - // early exit if we don't need any images. - if (count < 1) { - return; - } + /* Don't load elephpants on browsers that don't support data: URIs. + * Unfortunately, the Modernizr test is asynchronous, so we have to spin + * until it actually gives us a yes or a no. */ + var initElephpants = function () { + if (typeof Modernizr.datauri !== "undefined") { + var $elephpants = $(".elephpants"); + + if (Modernizr.datauri) { + var $elephpantsImages = $elephpants.find('.images'); + // load the elephpant images if elephpants div is in the dom. + $elephpantsImages.first().each(function (idx, node) { + + // function to fetch and insert images. + var fetchImages = function() { + + // determine how many elephpants are required to fill the + // viewport and subtract for any images we already have. + var count = Math.ceil($(document).width() / 75) + - $elephpantsImages.find("img").length; + + // early exit if we don't need any images. + if (count < 1) { + return; + } + + // do the fetch. + $.ajax({ + url: '/images/elephpants.php?count=' + count, + dataType: 'json', + success: function(data) { + var photo, image; + for (photo in data) { + photo = data[photo]; + link = $('<a>'); + link.attr('href', photo.url); + link.attr('title', photo.title); + image = $('<img>'); + image.attr('src', 'data:image/jpeg;base64,' + photo.data); + $(node).append(link.append(image)); + } + }, + error: function() { + $elephpants.hide(); + } + }); - // do the fetch. - $.ajax({ - url: '/images/elephpants.php?count=' + count, - dataType: 'json', - success: function(data) { - var photo, image; - for (photo in data) { - photo = data[photo]; - link = $('<a>'); - link.attr('href', photo.url); - link.attr('title', photo.title); - image = $('<img>'); - image.attr('src', 'data:image/jpeg;base64,' + photo.data); - $(node).append(link.append(image)); } - }, - error: function() { - $elephpants.hide(); - } - }); + // begin by fetching the images we need now. + fetchImages(); + + // fetch more if viewport gets larger. + var deferred = null; + $(window).resize(function() { + window.clearTimeout(deferred); + deferred = window.setTimeout(function(){ + fetchImages(); + }, 250); + }); + }); + } else { + $elephpants.hide(); + } + } else { + // Modernizr is still testing; check again in 100 ms. + window.setTimeout(initElephpants, 100); } + }; + initElephpants(); - // begin by fetching the images we need now. - fetchImages(); - - // fetch more if viewport gets larger. - var deferred = null; - $(window).resize(function() { - window.clearTimeout(deferred); - deferred = window.setTimeout(function(){ - fetchImages(); - }, 250); - }); - }); - // We have <p> tags generated with nothing in them and it requires a PHD change, meanwhile this fixes it. $refsect1.find('p').each(function() { var $this = $(this), html = $this.html(); diff --git a/js/ext/modernizr.js b/js/ext/modernizr.js index a890341..cdfd0cd 100644 --- a/js/ext/modernizr.js +++ b/js/ext/modernizr.js @@ -1,4 +1,4 @@ -/* Modernizr 2.7.0 (Custom Build) | MIT & BSD - * Build: http://modernizr.com/download/#-flexbox-flexboxlegacy-cssclasses-testprop-testallprops-domprefixes +/* Modernizr 2.7.1 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-flexbox-flexboxlegacy-cssclasses-testprop-testallprops-domprefixes-url_data_uri */ -;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.0",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.flexbox=function(){return D("flexWrap")},p.flexboxlegacy=function(){return D("boxDirection")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document); \ No newline at end of file +;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.flexbox=function(){return D("flexWrap")},p.flexboxlegacy=function(){return D("boxDirection")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(){var a=new Image;a.onerror=function(){Modernizr.addTest("datauri",function(){return!1})},a.onload=function(){Modernizr.addTest("datauri",function(){return a.width==1&&a.height==1})},a.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}(); \ No newline at end of file