Merge pull request #9 from natgeo/ratio-rounding

Ratio rounding
chuckcarpenter · Dec 18, 2013 · f678f03 · f678f03
2 parents 28fb870 + d7489f7
commit f678f03
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Gruntfile.coffee 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'
+    ]
diff --git 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 <chuck.carpenter@me.com>"

diff --git a/index.html b/index.html
@@ -1,30 +1,30 @@
 <!DOCTYPE html> 
 <html>
-	<head>
-		<meta charset=utf-8 />
-		<meta name="viewport" content="width=device-width,initial-scale=1">
-		<title>PictureTime</title>
-		
-		<script src="external/matchmedia.js"></script>
-		<script src="pictureTime.js"></script>
-		<style>
-			body { font-family: sans-serif }
-			img {  max-width: 100% }
-		</style>
-	</head>
-	<body>
-		
-		<h1>PictureTime: A &lt;picture&gt; element polyfill, building on <a href="http://github.com/scottjehl/picturefill">picturefill</a></h1>
-		
-		<picture alt="Photo: Tiger in tall grass" />
-	        <source srcset="external/imgs/small.jpg 1x, external/imgs/smallplus.jpg 2x">
-	        <source media="(min-width: 700px)" srcset="external/imgs/medium.jpg 1x, external/imgs/mediumplus.jpg 2x" />
-	        <source media="(min-width: 900px)" srcset="external/imgs/large.jpg 1x, external/imgs/largeplus.jpg 2x" />
-	         
-	        <!-- noscript prevents the image from using resources unless JS fails -->
-	        <noscript>
-	            <img src="external/imgs/medium.jpg" />
-	        </noscript>
+    <head>
+        <meta charset=utf-8 />
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>PictureTime</title>
+        
+        <script src="external/matchmedia.js"></script>
+        <script src="pictureTime.js"></script>
+        <style>
+            body { font-family: sans-serif }
+            img {  max-width: 100% }
+        </style>
+    </head>
+    <body>
+        
+        <h1>PictureTime: A &lt;picture&gt; element polyfill, building on <a href="http://github.com/scottjehl/picturefill">picturefill</a></h1>
+        
+        <picture alt="Photo: Tiger in tall grass" />
+            <source media="(min-width: 900px)" srcset="external/imgs/large.jpg 1x, external/imgs/largeplus.jpg 2x" />
+            <source media="(min-width: 700px)" srcset="external/imgs/medium.jpg 1x, external/imgs/mediumplus.jpg 2x" />
+            <source srcset="external/imgs/small.jpg 1x, external/imgs/smallplus.jpg 2x">
+
+            <!-- noscript prevents the image from using resources unless JS fails -->
+            <noscript>
+                <img src="external/imgs/medium.jpg" />
+            </noscript>
     </picture>
-	</body>
+    </body>
 </html>
diff --git a/package.json 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
@@ -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