diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/Gruntfile.coffee b/Gruntfile.coffee new file mode 100644 index 0000000..b65159b --- /dev/null +++ b/Gruntfile.coffee @@ -0,0 +1,77 @@ +'use strict' +module.exports = (grunt) -> + # load all grunt tasks + # this assumes matchdep, grunt-contrib-watch, grunt-contrib-coffee, + # grunt-coffeelint, grunt-contrib-clean is in the package.json file + require('matchdep').filterDev('grunt-*').forEach grunt.loadNpmTasks + + grunt.initConfig + # load in the module information + pkg: grunt.file.readJSON 'package.json' + # path to Grunt file for exclusion + gruntfile: 'Gruntfile.coffee' + # generalize the module information for banner output + banner: '/**\n' + + ' * Description: <%= pkg.description %>\n' + + ' * Date Built: <%= grunt.template.today("yyyy-mm-dd") %>\n' + + ' * Copyright (c) <%= grunt.template.today("yyyy") %>' + + '**/\n' + + # basic watch tasks first for development + watch: + coffee: + files: [ + '*.coffee' + ] + tasks: 'coffee:compile' + options: + livereload: true + + + # clear out any unneccessary files + clean: ['<%= pkg.name %>.js', '!.node_modules/'] + + + # lint our files to make sure we're keeping to team standards + coffeelint: + files: + src: ['<%= pkg.name %>.coffee'] + options: + 'indentation': + value: 4 + level: 'warn' + 'no_trailing_whitespace': + level: 'ignore' + 'max_line_length': + velue: 120 + level: 'warn' + + + # this is here, well so we can compile the files into something + # readable on the interwebs. + coffee: + compile: + files: [ + expand: true + cwd: '' + src: ['<%= pkg.name %>.coffee'] + dest: '' + # we need this rename function in case files are named + # with dot notation. e.g., ngm.module.coffee + rename: (destBase, destPath) -> + destBase + destPath.replace(/\.coffee$/, '.js') + ] + + build: + tasks: ['default'], + packageConfig: 'pkg', + packages: '*.json', + jsonSpace: 2, + jsonReplacer: undefined + + + grunt.registerTask 'default', [ + 'coffeelint' + 'clean' + 'coffee:compile' + ] \ No newline at end of file diff --git a/bower.json b/bower.json index c16fda9..13f19ec 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "picturetime", "main": "picturetime.js", - "version": "0.1.1", + "version": "0.2.0", "homepage": "https://github.com/natgeo/picturetime", "authors": [ "Chuck Carpenter " diff --git a/index.html b/index.html index 78857d3..ef767f4 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,30 @@ - - - - PictureTime - - - - - - - -

PictureTime: A <picture> element polyfill, building on picturefill

- - - - - - - - + + + + PictureTime + + + + + + + +

PictureTime: A <picture> element polyfill, building on picturefill

+ + + + + + + + - + diff --git a/package.json b/package.json new file mode 100644 index 0000000..69bc6a9 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "pictureTime", + "version": "0.2.0", + "description": "PICTURE element polyfill with support back to IE9, fallback to IE8", + "main": "pictureTime.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "license": "MIT", + "devDependencies": { + "grunt": "~0.4.1", + "matchdep": "~0.1.1", + "grunt-contrib-watch": "~0.4.4", + "grunt-contrib-coffee": "~0.7.0", + "grunt-coffeelint": "0.0.7", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-uglify": "~0.2.5", + "grunt-bump-build-git": "~1.0.0" + } +} diff --git a/pictureTime.coffee b/pictureTime.coffee index 0e66da3..f3418fa 100644 --- a/pictureTime.coffee +++ b/pictureTime.coffee @@ -1,19 +1,25 @@ -# pictureTime polyfill by Chuck Carpenter for National Geographic, 2012 +# pictureTime polyfill by +# Chuck Carpenter for National Geographic, 2012 # much observed from the picturefill polyfill by Scott Jehl # http://github.com/scottjehl/picturefill -# needed to change markup to respect actual picture element and double density photos +# needed to change markup to respect actual +# picture element and double density photos pictureTime = -> pictures = document.getElementsByTagName "picture" - deviceRatio = window.devicePixelRatio or 1 + # if Device Pixel Ratio exists, give us the whole number. + # Otherwise, fall back to 1. + deviceRatio = if window.devicePixelRatio then Math.round window.devicePixelRatio else 1 + if deviceRatio > 2 then deviceRatio = 2 for pic in pictures matches = [] sources = pic.getElementsByTagName "source" - # IE8 is not going to let us process srcset attr, return and let the fallback load + # IE8 is not going to let us process srcset attr, + # return and let the fallback load if pic.innerHTML is "" if ( img = pic.getElementsByTagName( "img" )[ 0 ] ) and ( src = img.getAttribute "data-src" ) img.setAttribute "src", src diff --git a/pictureTime.js b/pictureTime.js index 5920cde..6cdef00 100644 --- a/pictureTime.js +++ b/pictureTime.js @@ -1,11 +1,13 @@ -// Generated by CoffeeScript 1.6.3 (function() { var pictureTime, stringifyPictures, watchPictures; pictureTime = function() { var correctSrc, deviceRatio, frag, img, matches, media, pic, picImg, picText, pictures, resMatch, sAttr, sources, src, srcSets, srcs, _i, _j, _k, _len, _len1, _len2; pictures = document.getElementsByTagName("picture"); - deviceRatio = window.devicePixelRatio || 1; + deviceRatio = window.devicePixelRatio ? Math.round(window.devicePixelRatio) : 1; + if (deviceRatio > 2) { + deviceRatio = 2; + } for (_i = 0, _len = pictures.length; _i < _len; _i++) { pic = pictures[_i]; matches = [];