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