From e3d44633f2f82b558b7234953744ed4c41348ead Mon Sep 17 00:00:00 2001 From: Chuck Carpenter Date: Wed, 18 Dec 2013 12:20:09 -0500 Subject: [PATCH 1/3] adding ratio rounding and some grunt fun --- .gitignore | 1 + Gruntfile.coffee | 77 ++++++++++++++++++++++++++++++++++++++++++++++ bower.json | 2 +- index.html | 52 +++++++++++++++---------------- package.json | 20 ++++++++++++ pictureTime.coffee | 14 ++++++--- pictureTime.js | 6 ++-- 7 files changed, 139 insertions(+), 33 deletions(-) create mode 100644 .gitignore create mode 100644 Gruntfile.coffee create mode 100644 package.json 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..cfcc978 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "picturetime", "main": "picturetime.js", - "version": "0.1.1", + "version": "0.1.3", "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..c0b8e97 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "pictureTime", + "version": "0.1.3", + "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" + } +} \ No newline at end of file diff --git a/pictureTime.coffee b/pictureTime.coffee index 0e66da3..221c95e 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 is 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..2f5175d 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 = []; From 63532dc78e66fa3366e2647e5bf4147879690c9d Mon Sep 17 00:00:00 2001 From: Chuck Carpenter Date: Wed, 18 Dec 2013 12:52:37 -0500 Subject: [PATCH 2/3] bumping version --- bower.json | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index cfcc978..13f19ec 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "picturetime", "main": "picturetime.js", - "version": "0.1.3", + "version": "0.2.0", "homepage": "https://github.com/natgeo/picturetime", "authors": [ "Chuck Carpenter " diff --git a/package.json b/package.json index c0b8e97..69bc6a9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pictureTime", - "version": "0.1.3", + "version": "0.2.0", "description": "PICTURE element polyfill with support back to IE9, fallback to IE8", "main": "pictureTime.js", "scripts": { @@ -17,4 +17,4 @@ "grunt-contrib-uglify": "~0.2.5", "grunt-bump-build-git": "~1.0.0" } -} \ No newline at end of file +} From d7489f744eae1fbda75a5fe2900d97470ec11d85 Mon Sep 17 00:00:00 2001 From: Chuck Carpenter Date: Wed, 18 Dec 2013 12:58:47 -0500 Subject: [PATCH 3/3] small fix --- pictureTime.coffee | 2 +- pictureTime.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pictureTime.coffee b/pictureTime.coffee index 221c95e..f3418fa 100644 --- a/pictureTime.coffee +++ b/pictureTime.coffee @@ -12,7 +12,7 @@ pictureTime = -> # 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 is 2 + if deviceRatio > 2 then deviceRatio = 2 for pic in pictures matches = [] diff --git a/pictureTime.js b/pictureTime.js index 2f5175d..6cdef00 100644 --- a/pictureTime.js +++ b/pictureTime.js @@ -6,7 +6,7 @@ pictures = document.getElementsByTagName("picture"); deviceRatio = window.devicePixelRatio ? Math.round(window.devicePixelRatio) : 1; if (deviceRatio > 2) { - deviceRatio === 2; + deviceRatio = 2; } for (_i = 0, _len = pictures.length; _i < _len; _i++) { pic = pictures[_i];