From 7888d18ce7ce716049d16a0416da5fb63201d8e9 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 08:15:18 +0100 Subject: [PATCH 01/12] Releasing 1.0.0 --- bower.json | 34 +++++++++++++++++++++++++++------- picturePolyfill.min.js | 4 ++-- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/bower.json b/bower.json index bbb115d..fb4fbfc 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,31 @@ { - "name": "pictyrePolyfill", - "version": "1.0.1", - "main": "", + "name": "picturePolyfill", + "version": "1.0.0", + "main": "picturePolyfill.js", "ignore": [ ".idea", - ".gitignore" + ".gitignore", + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" ], - "dependencies": {}, - "devDependencies": {} -} \ No newline at end of file + "homepage": "https://github.com/verlok/picturePolyfill", + "authors": [ + "Andrea Verlicchi " + ], + "description": "The real polyfill to use responsive images today", + "keywords": [ + "picture", + "polyfill", + "picturefill", + "responsive", + "images", + "responsive", + "design", + "responsive", + "images" + ], + "license": "MIT" +} diff --git a/picturePolyfill.min.js b/picturePolyfill.min.js index 516329d..8eefd98 100644 --- a/picturePolyfill.min.js +++ b/picturePolyfill.min.js @@ -1,4 +1,4 @@ -/*! Picture Polyfill - v1.0.0 - 2014-03-11 +/*! Picture Polyfill - v1.0.0 - 2014-03-14 * https://github.com/verlok/picturePolyfill/ * Copyright (c) 2014 Andrea Verlicchi; Licensed MIT */ -(function(a){function e(a,b){if(typeof a=="string")return a;while(a[b]===undefined&&b>0)b-=1;return a[b]}function f(b){var d,f;for(var g=0,h=b.length;g0)b-=1;return a[b]}function f(b){var d,f;for(var g=0,h=b.length;g Date: Fri, 14 Mar 2014 18:41:36 +0100 Subject: [PATCH 02/12] Deleted unused matchMedia.js --- usingPictureMarkup/external/matchMedia.js | 46 ----------------------- 1 file changed, 46 deletions(-) delete mode 100755 usingPictureMarkup/external/matchMedia.js diff --git a/usingPictureMarkup/external/matchMedia.js b/usingPictureMarkup/external/matchMedia.js deleted file mode 100755 index 0bfca11..0000000 --- a/usingPictureMarkup/external/matchMedia.js +++ /dev/null @@ -1,46 +0,0 @@ -/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */ - -window.matchMedia || (window.matchMedia = function() { - "use strict"; - - // For browsers that support matchMedium api such as IE 9 and webkit - var styleMedia = (window.styleMedia || window.media); - - // For those that don't support matchMedium - if (!styleMedia) { - var style = document.createElement('style'), - script = document.getElementsByTagName('script')[0], - info = null; - - style.type = 'text/css'; - style.id = 'matchmediajs-test'; - - script.parentNode.insertBefore(style, script); - - // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers - info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle; - - styleMedia = { - matchMedium: function(media) { - var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }'; - - // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers - if (style.styleSheet) { - style.styleSheet.cssText = text; - } else { - style.textContent = text; - } - - // Test if media query is true or false - return info.width === '1px'; - } - }; - } - - return function(media) { - return { - matches: styleMedia.matchMedium(media || 'all'), - media: media || 'all' - }; - }; -}()); From 84b3c0d594343991e6f9a7c5af9796d2224a003b Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 18:41:47 +0100 Subject: [PATCH 03/12] Deleted unused matchMedia.js From 2a1676aa2d22e3d9b69b1e381552cdc90129b591 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 18:43:14 +0100 Subject: [PATCH 04/12] Updated viewport info --- index.html | 1 + tests/tests.html | 1 + usingPictureMarkup/index.html | 7 ++++--- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c111efb..9f6d7dc 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Responsive images using verlok/picturePolyfill - by Andrea Verlicchi +
diff --git a/tests/tests.html b/tests/tests.html index 5036cf7..a2584fc 100644 --- a/tests/tests.html +++ b/tests/tests.html @@ -4,6 +4,7 @@ Responsive images with picturePolyfill - by Andrea Verlicchi +
diff --git a/usingPictureMarkup/index.html b/usingPictureMarkup/index.html index c7724b2..ab6b44c 100644 --- a/usingPictureMarkup/index.html +++ b/usingPictureMarkup/index.html @@ -4,6 +4,7 @@ Responsive images with picturePolyfill - by Andrea Verlicchi +
@@ -14,7 +15,7 @@

Responsive images using PicturePolyfill - Demo

With HD (Retina) display support

- + @@ -27,7 +28,7 @@

With HD (Retina) display support

Without HD (Retina) display support

 - + @@ -42,7 +43,7 @@

Without HD (Retina) display support

Real time server side scaling is provided by Pixtulate.

- + \ No newline at end of file From a47da00de3f0179c567414a07027972687e26059 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 18:44:02 +0100 Subject: [PATCH 05/12] Fixed ParseDOM parameter bug --- picturePolyfill.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/picturePolyfill.js b/picturePolyfill.js index 002798a..1ad52e6 100644 --- a/picturePolyfill.js +++ b/picturePolyfill.js @@ -5,7 +5,7 @@ "use strict"; var timerId, - pixelRatio = w.devicePixelRatio || 1, // The pixel density (2 is for HD aka Retina displays) + pixelRatio = Math.ceil(w.devicePixelRatio || 1), // The pixel density (2 is for HD aka Retina displays) mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches; @@ -22,7 +22,6 @@ if (typeof arrayOrString === 'string') { return arrayOrString; } - position = Math.ceil(position); while (arrayOrString[position]===undefined && position>0) { position-=1; } @@ -98,7 +97,7 @@ * @param element the starting element to parse DOM into. If not passed, it parses the whole document. */ - function parseDOM(element) { + function parseDOMTree(element) { var pictureData, imageHolder, imageHolders = element.querySelectorAll('[data-picture]'); @@ -119,17 +118,25 @@ } } + /** + * Private function to call w.picturePolyfill on the whole document + */ + function picturePolyfillDocument() { + w.picturePolyfill(document); + } + /** * Expose the function to the global environment, if browser is supported, else empty function * @type {Function} */ w.picturePolyfill = (!document.querySelectorAll) ? function(){} : function(element){ - parseDOM(element || document); + parseDOMTree(element || document); }; + /** - * Manage resize event calling the parseDOM function + * Manage resize event calling the parseDOMTree function * only if they've passed 100 milliseconds between a resize event and another * to avoid the script to slower the browser on animated resize or browser edge dragging */ @@ -137,16 +144,16 @@ if (w.addEventListener) { w.addEventListener('resize', function() { clearTimeout(timerId); - timerId = setTimeout(w.picturePolyfill, 100); + timerId = setTimeout(picturePolyfillDocument, 100); }); w.addEventListener('DOMContentLoaded', function(){ - w.picturePolyfill(); - w.removeEventListener('load', w.picturePolyfill); + picturePolyfillDocument(); + w.removeEventListener('load', picturePolyfillDocument); }); - w.addEventListener('load', w.picturePolyfill); + w.addEventListener('load', picturePolyfillDocument); } else if (w.attachEvent) { - w.attachEvent('onload', w.picturePolyfill); + w.attachEvent('onload', picturePolyfillDocument); } }(this)); \ No newline at end of file From 8a85c7cc9de9991e8982733c8dc6971bc5e4c522 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 18:45:21 +0100 Subject: [PATCH 06/12] Working on real picture tag polyfill - moved default src to its own data --- usingPictureMarkup/picturePolyfill.js | 72 ++++++++++----------------- 1 file changed, 27 insertions(+), 45 deletions(-) diff --git a/usingPictureMarkup/picturePolyfill.js b/usingPictureMarkup/picturePolyfill.js index d3a0c56..63aac43 100644 --- a/usingPictureMarkup/picturePolyfill.js +++ b/usingPictureMarkup/picturePolyfill.js @@ -5,16 +5,9 @@ "use strict"; var timerId, - pixelRatio = w.devicePixelRatio || 1, // The pixel density (2 is for HD aka Retina displays) + pixelRatio = Math.ceil(w.devicePixelRatio || 1), // The pixel density (2 is for HD aka Retina displays) mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches; - /** - * Activate picture and source tag support for IE8 - */ - - document.createElement("picture"); - document.createElement("source"); - /** * Returns a hash density > src @@ -23,15 +16,15 @@ function getSrcSetHash(srcSetAttribute) { var hash = {}, sources = srcSetAttribute.split(','); - - for (var i=0, len=sources.length; i0) ? getSrcAttributeFromData(pictureData) : - getStandardImageFromData(pictureData)); - // } + pictureElement.getAttribute("data-defaultsrc")); + //} //catch (e) { - // w.console.log(e); + //w.console.log(e); //} } } + /** + * Private function to call w.picturePolyfill on the whole document + */ + function picturePolyfillDocument() { + w.picturePolyfill(document); + } + /** * Expose the function to the global environment, if browser is supported, else empty function * @type {Function} @@ -174,6 +155,7 @@ parsePictures(element || document); }; + /** * Manage resize event calling the parsePictures function * only if they've passed 100 milliseconds between a resize event and another @@ -183,16 +165,16 @@ if (w.addEventListener) { w.addEventListener('resize', function() { clearTimeout(timerId); - timerId = setTimeout(w.picturePolyfill, 100); + timerId = setTimeout(picturePolyfillDocument, 100); }); w.addEventListener('DOMContentLoaded', function(){ - w.picturePolyfill(); - w.removeEventListener('load', w.picturePolyfill); + picturePolyfillDocument(); + w.removeEventListener('load', picturePolyfillDocument); }); - w.addEventListener('load', w.picturePolyfill); + w.addEventListener('load', picturePolyfillDocument); } else if (w.attachEvent) { - w.attachEvent('onload', w.picturePolyfill); + w.attachEvent('onload', picturePolyfillDocument); } }(this)); \ No newline at end of file From 41896b667971bb7f392094f0652c9f9f0541bd06 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 18:47:01 +0100 Subject: [PATCH 07/12] Added test to work with picture on IE8 --- tests/test_pic_ie8.html | 82 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 tests/test_pic_ie8.html diff --git a/tests/test_pic_ie8.html b/tests/test_pic_ie8.html new file mode 100644 index 0000000..b0d12c8 --- /dev/null +++ b/tests/test_pic_ie8.html @@ -0,0 +1,82 @@ + + + + + Responsive images with picturePolyfill - by Andrea Verlicchi + + + +
+
+

Responsive images using PicturePolyfill - Demo

+

The following link contains two responsive images created using a <span> element, inline JSON (instead of <source> markup), and the picturePolyfill script.

+
+
+

With HD (Retina) display support

+ + + + + + + + +
+
+

Without HD (Retina) display support

+ + + + + + + + +
+
+

Real time server side scaling is provided by Pixtulate.

+
+
+ + + \ No newline at end of file From 9dfc5fbeec8746fa7a7b69d5b0cce6d640b3049f Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 19:03:34 +0100 Subject: [PATCH 08/12] Moved css into html files --- index.css | 39 ----------------------- index.html | 13 +++++++- tests/index.html | 38 ++++++++++++++++++++++ tests/picturefill_vs_picturePolyfill.html | 8 ++++- tests/test_pic_ie8.html | 13 +++++++- tests/tests.html | 11 ++++++- usingPictureMarkup/index.css | 39 ----------------------- usingPictureMarkup/index.html | 13 +++++++- 8 files changed, 91 insertions(+), 83 deletions(-) delete mode 100644 index.css create mode 100644 tests/index.html delete mode 100644 usingPictureMarkup/index.css diff --git a/index.css b/index.css deleted file mode 100644 index a628ec0..0000000 --- a/index.css +++ /dev/null @@ -1,39 +0,0 @@ -body { - margin: 0; - padding: 0; - text-align: center; -} - -.intro { - padding: 0 16px; -} - -.outro { - padding: 1px 16px; - clear: both; -} - -.element a, .element span, .element img { - display: block; -} - -img { - width: 100%; - height: auto; - border: 0; -} - -.element h2 { - padding: 0 16px; -} - -.element:hover h2 { - text-decoration: underline; -} - -@media screen and (min-width: 481px) { - .element { - float: left; - width: 50%; - } -} \ No newline at end of file diff --git a/index.html b/index.html index 9f6d7dc..e35582b 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,19 @@ Responsive images using verlok/picturePolyfill - by Andrea Verlicchi - +
diff --git a/tests/index.html b/tests/index.html new file mode 100644 index 0000000..7e27394 --- /dev/null +++ b/tests/index.html @@ -0,0 +1,38 @@ + + + + + Responsive images with picturePolyfill - by Andrea Verlicchi + + + + +
+

picturePolyfill Test

+

To test script solidness.

+
+

Most complex usage

+ + + +
+
+ + + + \ No newline at end of file diff --git a/tests/picturefill_vs_picturePolyfill.html b/tests/picturefill_vs_picturePolyfill.html index 08800f2..c5ca41d 100644 --- a/tests/picturefill_vs_picturePolyfill.html +++ b/tests/picturefill_vs_picturePolyfill.html @@ -1,7 +1,11 @@ -Hey + Hey + @@ -24,6 +28,8 @@ +

This test is published in jsPerf: picturefill vs picturePolyfill performance test

+ diff --git a/tests/test_pic_ie8.html b/tests/test_pic_ie8.html index b0d12c8..e924e94 100644 --- a/tests/test_pic_ie8.html +++ b/tests/test_pic_ie8.html @@ -3,7 +3,18 @@ Responsive images with picturePolyfill - by Andrea Verlicchi - +
diff --git a/tests/tests.html b/tests/tests.html index a2584fc..2a8f978 100644 --- a/tests/tests.html +++ b/tests/tests.html @@ -3,8 +3,17 @@ Responsive images with picturePolyfill - by Andrea Verlicchi - +
diff --git a/usingPictureMarkup/index.css b/usingPictureMarkup/index.css deleted file mode 100644 index a628ec0..0000000 --- a/usingPictureMarkup/index.css +++ /dev/null @@ -1,39 +0,0 @@ -body { - margin: 0; - padding: 0; - text-align: center; -} - -.intro { - padding: 0 16px; -} - -.outro { - padding: 1px 16px; - clear: both; -} - -.element a, .element span, .element img { - display: block; -} - -img { - width: 100%; - height: auto; - border: 0; -} - -.element h2 { - padding: 0 16px; -} - -.element:hover h2 { - text-decoration: underline; -} - -@media screen and (min-width: 481px) { - .element { - float: left; - width: 50%; - } -} \ No newline at end of file diff --git a/usingPictureMarkup/index.html b/usingPictureMarkup/index.html index ab6b44c..3d63308 100644 --- a/usingPictureMarkup/index.html +++ b/usingPictureMarkup/index.html @@ -3,8 +3,19 @@ Responsive images with picturePolyfill - by Andrea Verlicchi - +
From 3c89d414810d13c498cde2716facc0105084d444 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 19:04:33 +0100 Subject: [PATCH 09/12] Removed some sort of space --- tests/test_pic_ie8.html | 2 +- tests/tests.html | 2 +- usingPictureMarkup/index.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/test_pic_ie8.html b/tests/test_pic_ie8.html index e924e94..b95cbe7 100644 --- a/tests/test_pic_ie8.html +++ b/tests/test_pic_ie8.html @@ -7,7 +7,7 @@ body { margin: 0; padding: 0; text-align: center; } .intro { padding: 0 16px; } .outro { padding: 1px 16px; clear: both; } - .element a, .element span, .element img { display: block; } + .element a, .element span, .element img { display: block; } img { width: 100%; height: auto; border: 0; } .element h2 { padding: 0 16px; } .element:hover h2 { text-decoration: underline; } diff --git a/tests/tests.html b/tests/tests.html index 2a8f978..4068153 100644 --- a/tests/tests.html +++ b/tests/tests.html @@ -6,7 +6,7 @@ From fa207ec747ab77956355cc472f5d1382aa20e040 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 14 Mar 2014 19:13:32 +0100 Subject: [PATCH 12/12] Removed unused media query from tests.html