Merge commit releasing v5.0

ryanfitzer · Oct 3, 2014 · c03428e · c03428e
2 parents 7fe57ae + 25e1c8a
commit c03428e
Show file tree

Hide file tree

Showing 11 changed files with 694 additions and 233 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,26 @@
+module.exports = function( grunt ) {
+
+    /* Configure */
+    grunt.initConfig({
+        pkg: grunt.file.readJSON( 'package.json' ),
+
+        uglify: {
+            options: {
+                report: 'gzip', // requires using `grunt --verbose`
+                compress: true,
+                preserveComments: 'some'
+            },
+            dist: {
+                files: {
+                    'viewport.min.js': [ 'viewport.js' ]
+                }
+            }
+        }
+    });
+
+    grunt.loadNpmTasks( 'grunt-contrib-uglify' );
+
+    grunt.registerTask( 'default', [
+        'uglify'
+    ]);
+};
diff --git a/demo/demo.js b/demo/demo.js
@@ -0,0 +1,70 @@
+var logger = function() {
+
+    var results
+        , msg
+        ;
+
+    if ( console && console.log ) {
+        return console.log( '=> ', arguments );
+    }
+
+    // IE7 logging
+    results = document.getElementById( 'breakpoints' );
+    msg = '<p>' + Array.prototype.slice.call( arguments ).join( ', ' ) + '</p>';
+
+    results.innerHTML = results.innerHTML + msg;
+}
+
+var handler = function( isCurrent, vp ) {
+
+    logger( vp.name, isCurrent );
+};
+
+var myVPOne = viewport([
+    {
+        name: 'small',
+        width: [ 0, 480 ]
+    },
+    {
+        name: 'medium',
+        width: [ 481, 768 ]
+    },
+    {
+        name: 'large',
+        width: [ 769 ]
+    }
+]);
+
+var myVPOneAll = myVPOne.subscribe( '*', function( vpPresent, vpPrevious ) {
+    logger( 'viewport dimensions: ' + myVPOne.size.width + ' x ' + myVPOne.size.height );
+    logger( 'name: *', 'present: ' + vpPresent.name, 'previous: ' + vpPrevious.name );
+});
+var myVPOne1 = myVPOne.subscribe( 'small', function( isCurrent, vp ) {
+
+    logger( vp.name, isCurrent );
+
+    if ( isNaN( myVPOne1 ) ) return;
+
+    myVPOne.unsubscribe( myVPOne1 );
+});
+var myVPOne2 = myVPOne.subscribe( 'medium', handler );
+var myVPOne3 = myVPOne.subscribe( 'large', handler );
+
+var myVPTwo = viewport([
+    {
+        name: 'small-one',
+        width: [ 320 ]
+    },
+    {
+        name: 'medium-one',
+        width: [ 1250 ]
+    },
+    {
+        name: 'height-one',
+        width: [ 600 ],
+        height: [ 600 ]
+    }
+]);
+var myVPTwo1 = myVPTwo.subscribe( 'small-one', handler );
+var myVPTwo2 = myVPTwo.subscribe( 'medium-one', handler );
+var myVPTwo3 = myVPTwo.subscribe( 'height-one', handler );
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>Viewport Tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style type="text/css">
+    #window {
+        margin:0;
+    }
+    .result {
+        padding:10px;
+        background:#ccc;
+    }
+    .break {
+        background:red;
+    }
+
+    @media screen and (max-width: 480px) {
+        #break-max-480 {
+            background:green;
+        }
+    }
+    @media screen and (max-width: 768px) {
+        #break-max-768 {
+            background:green;
+        }
+    }
+    @media screen and (min-width: 769px) {
+        #break-min-769 {
+            background:green;
+        }
+    }
+
+    @media screen and (min-width: 320px) {
+        #break-min-320 {
+            background:green;
+        }
+    }
+    @media screen and (min-width: 1250px) {
+        #break-min-1250 {
+            background:green;
+        }
+    }
+    @media screen and (min-height: 600px) and ( min-width: 600px ) {
+        #break-min-600 {
+            background:green;
+        }
+    }
+
+  </style>
+</head>
+<body id="feature-tests">
+
+<div class="viewport" id="window">
+
+  <h1>Viewport Tests</h1>
+
+  <div class="test" id="breakpoints">
+
+    <p class="result break" id="break-max-480">small <code>(max-width:480px)</code></p>
+    <p class="result break" id="break-max-768">medium <code>(max-width:768px)</code></p>
+    <p class="result break" id="break-min-769">large <code>(min-width:769px)</code></p>
+
+    <p class="result break" id="break-min-320">small-one <code>(min-width:320px)</code></p>
+    <p class="result break" id="break-min-1250">medium-one <code>(min-width:1250px)</code></p>
+    <p class="result break" id="break-min-600">height-one <code>(min-height:600px)</code></p>
+
+  </div>
+
+</div>
+<script src="../viewport.js"></script>
+<script src="demo.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ViewportJS",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "A unassuming, no-frills tool to use your responsive viewports in JavaScript.",
   "author": "Ryan Fitzer",
   "readmeFilename": "readme.md",
@@ -16,6 +16,9 @@
     "test": "./node_modules/.bin/mocha-phantomjs test/index.html --view 320x480; ./node_modules/.bin/mocha-phantomjs test/index.html --view 768x1024"
   },
   "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-uglify": "^0.6.0",
+    "intern": "~1.7.0",
     "mocha-phantomjs": "3.1.2"
   }
 }
diff --git a/readme.md b/readme.md
@@ -2,7 +2,7 @@
 
 An unassuming, no-frills tool to use your responsive viewports in JavaScript. ViewportJS exposes an API for querying and/or subscribing to viewport changes.
 
-- 1.6 KB minified & gzipped.
+- 1.49 KB minified & gzipped.
 - Since ViewportJS is only concerned about the width and height of your viewport, it does not depend `window.matchMedia`.
 - [UMD](https://github.com/umdjs/umd) compatible.
 - Tested in IE7-11, Safari, Firefox, Chrome, Mobile Safari, Chrome Android (4.2.2).
@@ -13,33 +13,41 @@ An unassuming, no-frills tool to use your responsive viewports in JavaScript. Vi
 
 ViewportJS exposes an API that answers the following questions:
 
-Can I subscribe/unsubscribe to the `name` viewport to receive updates when `name` becomes valid/invalid?
+1. Can I subscribe/unsubscribe to the `name` viewport to receive updates when `name` becomes valid/invalid?
 
-```js
-var myToken = myViewport.subscribe( 'name', function( matches ) {
-    // do something
-});
+    ```js
+    var myToken = myViewport.subscribe( 'name', function( matches, viewport ) {
+        // do something
+    });
+
+    myViewport.unsubscribe( myToken );
+    ```
 
-myViewport.unsubscribe( myToken );
-```
+2. Can I subscribe to all viewports at once?
 
-Is `name` the current viewport?
-
-```js
-myViewport.is( 'name' );
-```
+    ```js
+    myViewport.subscribe( '*', function( viewport ) {
+        // do something
+    });
+    ```
 
-Which viewport is the current viewport?
+3. Is `name` the current viewport?
 
-```js
-myViewport.current();
-```
+    ```js
+    myViewport.is( 'name' );
+    ```
 
-Does `name` fall within the current viewport?
+4. Which viewport is the current viewport?
 
-```js
-myViewport.matches( 'name' );
-```
+    ```js
+    myViewport.current();
+    ```
+
+5. Does `name` fall within the current viewport?
+
+    ```js
+    myViewport.matches( 'name' );
+    ```
 
 
 
@@ -70,26 +78,6 @@ var myViewport = viewport([
 ]);
 ```
 
-The object returned to `myViewport` can now be used to branch functionality based on the current viewport:
-
-```js
-if ( myViewport.is( 'large' ) ) {
-    // do something
-} else {
-    // do something else
-}
-```
-
-You can also subscribe/unsubscribe to a specific for updates when it becomes valid/invalid.
-
-```js
-var largeVPToken = myViewport.subscribe( 'large', function( isCurrent ) {
-    // do something
-});
-
-myViewport.unsubscribe( largeVPToken );
-```
-
 
 
 ## Viewport Object Properties ##
@@ -160,10 +148,12 @@ if ( isSmallWithinVP ) {
 
 ### `subscribe( String name, Function handler )` ###
 
-Subscribe for updates when a specific viewport becomes valid/invalid. The handler is passed the `isCurrent` boolean for checking if the viewport has become valid/invalid. All subscribers are checked for validity when first subscribed to allow for lazy subscribers. The `subscribe` method returns a token for use on the `unsubscribe` method.
+Subscribe for updates when a specific viewport becomes valid/invalid. The handler is passed the `isCurrent` boolean for checking if the viewport has become valid/invalid, as well as the current viewport's object. All subscribers are checked for validity when first subscribed in order to allow for lazy subscribers. The `subscribe` method returns a token for use on the `unsubscribe` method.
+
+There is also a reserved viewport name `*` to allow for subscribing to all viewports at once. It's handler only receives the current viewport's object.
 
 ```js
-var smallVPToken = myViewport.subscribe( 'small', function( isCurrent ) {
+var smallVPToken = myViewport.subscribe( 'small', function( isCurrent, viewport ) {
 
     if ( isCurrent ) {
         // do something
@@ -190,6 +180,11 @@ myViewport.unsubscribe( smallVP );
 ## Properties ##
 
 
+### `size Object` ###
+
+An object containing the `width` and `height` of the current viewport.
+
+
 ### `viewports Array` ###
 
 The original `array` of viewports.
@@ -217,4 +212,4 @@ An object keyed by the viewport names. Extends the original viewport objects wit
 
 ## Roadmap ##
 
-- Functional testing. Subscribe feature needs the window size to be manipulated.
+- Functional testing. Testing the subscribe feature requires the window size to be manipulated.
diff --git a/test/tests/test.js b/test/tests/test.js
@@ -41,7 +41,6 @@ describe('viewport tests', function() {
         assert.equal( vp.is( 'second' ), true );
     });
 
-
     it( 'should return the correct viewport object based on height', function() {
 
         var vp = viewport([
@@ -60,7 +59,6 @@ describe('viewport tests', function() {
         assert.equal( vp.is( 'second' ), true );
     });
 
-
     it( 'should return the correct viewport object based on width and height', function() {
 
         var vp = viewport([