From a3ef66216d023d104bf0e7b0bf6af3c9c5766bdd Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Mon, 31 Mar 2014 01:37:44 +0200 Subject: [PATCH] Fixed merge conflicts --- Gruntfile.js | 6 ++---- README.md | 30 ++++++++++++++------------ bower.json | 58 +++++++++++++++++++++++++-------------------------- karma.conf.js | 9 +++++--- 4 files changed, 54 insertions(+), 49 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index dd99a90..37e2c3e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ module.exports = function(grunt) { grunt.initConfig({ // Metadata. meta: { - version: '2.0.6' + version: '3.0.0' }, banner: '/*! picturePolyfill - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + @@ -47,9 +47,6 @@ module.exports = function(grunt) { src: ['<%= uglify.dist.src %>'] } }, - karma: { - - } watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', @@ -69,4 +66,5 @@ module.exports = function(grunt) { // Default task. grunt.registerTask('default', ['jshint', 'uglify', 'watch']); + }; diff --git a/README.md b/README.md index a0b9421..6e2e83f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # picturePolyfill + A Responsive Images approach that you can use today that uses the **[real `picture` element](http://www.w3.org/TR/2013/WD-html-picture-element-20130226/)** along with children `source` elements with `media`, `src` and `srcset` attributes. * Author: Andrea Verlicchi (c) 2014 @@ -24,6 +25,7 @@ picturePolyfill is better than picturefill because: * it's **15x faster** on IE 10, **8x faster** on mobile Safari, **6x faster** on Firefox and Safari, **4x faster** on Chrome and Opera [see performance test](http://jsperf.com/picturepolyfill-204-vs-picturefill-121-performance-test) * it uses the **real `picture` markup** * it gives you the ability to **choose a default image** that you want to show on Internet Explorer desktop, without the need to add any comment +* it's **solid**, since `picturePolyfill` code is test driven with full code coverage ## Markup pattern and explanation @@ -120,33 +122,34 @@ bower install picturePolyfill ## Inclusion -To use picturePolyfill, just include the script tag at the end of your html file, in the `head` section of your `HTML` pages, OR just before the closure of the `body` tag. +You can either include the `script in the `head` section of your `HTML` pages, OR just before the closure of the `body` tag.` -Including the `defer` attribute in the `script` tag will prevent the script download to block page rendering while in progress. ### In the `head` section ```html - Your HEAD content + ... - Your BODY content + ... ``` +**Note:** Including the `defer` attribute in the `script` tag will prevent the script download to block page rendering while in progress. + ### At the end of the `body` section ```html - Your HEAD content + ... - Your BODY content + ... @@ -154,20 +157,22 @@ Including the `defer` attribute in the `script` tag will prevent the script down ## Execution -PicturePolyfill executes either automatically and programmatically. +PicturePolyfill executes either automatically and by code, calling the parse() function. * it executes automatically **at page load**, on the whole `document` * it executes automatically **at browser resize**, on the whole `document` -* it can be **programmatically executed**, if you: - * call `window.picturePolyfill()` to execute it on the whole `document` - * call `window.picturePolyfill(element)` to execute from the `element` DOM node below - -Calling `picturePolyfill()` and passing in a specific node is particularly useful **if your DOM has changed** and you know the parent node where the change occured. +* it can be **manually executed**, if you: + * call `picturePolyfill.parse()` to execute it on the whole `document` + * call `picturePolyfill.parse(element)` to execute from the `element` DOM node below ### After DOM has changed (AJAX calls, etc.) +PicturePolyfill is intentionally exposed to the global namespace, so you can call it as you need it. + **Example:** if some of your AJAX calls change a portion of your DOM injecting new `picture` nodes, after your new DOM has changed just call `picturePolyfill.parse()` (or `picturePolyfill.parse(element)`) to make picturePolyfill parse only the changed portion of the DOM. +Calling `picturePolyfill.parse(element)` (where `element` is a specific DOM node) is faster if you know the parent node where the DOM changed. + ## Browser support PicturePolyfill supports all modern browsers and **down to Internet Explorer 7** (it wasn't tested on IE6). @@ -175,7 +180,6 @@ PicturePolyfill supports all modern browsers and **down to Internet Explorer 7** * On **Modern Browsers, Internet Explorer 10 and above**: the images will be loaded depending on the matched media query * On **Internet Explorer 7 to 9**: the content of the `data-default-src` attribute will be used to reference the image source. - ## Size and delivery Currently, `picturePolyfill.js` compresses to around 1300bytes (~1.2kb) after minify and gzip. To minify, you might try these online tools: [Uglify](http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor](http://refresh-sf.com/yui/), or [Closure Compiler](http://closure-compiler.appspot.com/home). Serve with gzip compression. \ No newline at end of file diff --git a/bower.json b/bower.json index ed9397c..17f39a8 100644 --- a/bower.json +++ b/bower.json @@ -1,31 +1,31 @@ { - "name": "picturePolyfill", - "version": "2.0.6", - "main": "picturePolyfill.js", - "ignore": [ - ".idea", - ".gitignore", - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "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" + "name": "picturePolyfill", + "version": "3.0.0", + "main": "picturePolyfill.js", + "ignore": [ + ".idea", + ".gitignore", + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "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/karma.conf.js b/karma.conf.js index bcbd56d..21cdccb 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -15,8 +15,11 @@ module.exports = function(config) { // list of files / patterns to load in the browser files: [ - '*.js', - 'test/*.js' + 'test/jquery.min.js', + 'test/sinon-1.9.0.js', + 'test/sinon-qunit-1.0.0.js', + 'test/picturePolyfill.qunit.js', + 'picturePolyfill.js' ], @@ -59,7 +62,7 @@ module.exports = function(config) { // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['Chrome', 'Firefox', 'Safari'], + browsers: [/*'Opera', */'Chrome', 'Firefox'/*, 'Safari'*/], // Continuous Integration mode