v0.2.0: Use provider to show and hide menu

ShoppinPal · Jul 17, 2013 · e9e3920 · e9e3920
1 parent 23af698
commit e9e3920
Show file tree

Hide file tree

Showing 14 changed files with 186 additions and 115 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,6 +1,9 @@
 /*global module:false*/
 module.exports = function(grunt) {
 
+  // Load Grunt tasks declared in the package.json file
+  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+
   // Project configuration.
   grunt.initConfig({
     // Metadata.
@@ -17,7 +20,8 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-            'dist/ng-mobile-menu.min.js' : ['src/ng-mobile-menu.js']
+            'dist/ng-mobile-menu.min.js' : ['src/ng-mobile-menu.js'],
+            'demo/ng-mobile-menu.min.js' : ['src/ng-mobile-menu.js']
         }
       }
     },
@@ -28,15 +32,51 @@ module.exports = function(grunt) {
               banner: '<%= banner %>'
           },
           files: {
-              "dist/ng-mobile-menu.min.css" : "src/ng-mobile-menu.less"
+              "dist/ng-mobile-menu.min.css" : "src/ng-mobile-menu.less",
+              "demo/ng-mobile-menu.min.css" : "src/ng-mobile-menu.less"
           }
       }
+    },
+    connect: {
+        all: {
+            options: {
+                port: 9005,
+                hostname: "0.0.0.0",
+                base: 'demo',
+                middleware: function(connect, options){
+                    return [
+                        require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
+                        connect.static(options.base),
+                        connect.static('dist')
+                    ];
+                }
+            }
+        }
+    },
+    open: {
+        all: {
+            path: 'http://localhost:<%= connect.all.options.port%>'
+        }
+    },
+    regarde: {
+        all: {
+            files: [
+                'demo/*.html',
+                'demo/*.js',
+                'src/*.js',
+                'src/*.less'
+            ],
+            tasks: [
+                'uglify',
+                'less',
+                'livereload'
+            ]
+        }
     }
   });
 
-  // These plugins provide necessary tasks.
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-less');
+  // Server task
+  grunt.registerTask('server', ['uglify', 'less', 'livereload-start', 'connect', 'open', 'regarde' ]);
 
   // Default task.
   grunt.registerTask('default', ['uglify', 'less']);

diff --git a/README.md b/README.md
@@ -11,15 +11,15 @@ Include the CSS and JS files:
 
 <!-- ng-mobile-menu.js should be referenced after Angular and before your app -->
 <script type="text/javascript" src="angular.js"></script>
-<script type="text/javascript" src="ng-mobile-menu.js"></script>
+<script type="text/javascript" src="ng-mobile-menu.min.js"></script>
 <script type="text/javascript" src="your-angular-app.js"></script>
 
 ```
 
-Add `shoppinpal.ng-mobile-menu` as dependency in your app.
+Add `shoppinpal.mobile-menu` as dependency in your app.
 
 ```javascript
-angular.module('your-awesome-app',['shoppinpal.ng-mobile-menu']);
+angular.module('your-awesome-app',['shoppinpal.mobile-menu']);
 ```
 
 Then you just need to structure your HTML like this:
@@ -34,21 +34,26 @@ Then you just need to structure your HTML like this:
 </div>
 ```
 
-Use 2 anchor tags to control the menu. Only one will be visible at a time as ng-mobile-menu will hide and show them as needed based ont he menu state.
+Hide and show the menu in an ngClick like this `ng-click="$spMenu.toggle()"`. (`.show()` and `.hide()` are also available if you need them)
 
 ```html
-<!-- Notice that the href matches the id of the menu element -->
-<a href="#sp-nav" id="sp-show-menu">Show</a>
-<!-- Notice tha the href of this anchor points to the page element -->
-<a href="#sp-page" id="sp-hide-menu">Hide</a>
+<button ng-click="$spMenu.toggle()">Menu</button>
 ```
 
 ## Demo
 
 Check the `/demo` folder in the repository for a working demo.
 
 ## Changelog
-
+### 0.2.0
+#### Breaking Changes
+No longer using href targets to show and hide menu. Now you _must_ use the new `$spMenu` provider to show and hide the menu.
+### 0.1.3
+* Issue #2 : Change menu to use 80% width for more consistent appearance across mobile device resolutions.
+ * On larger screens (tablets, desktops) default width will be 20% for menu
+* Issue #1: Add support for #sp-nav.wide which will always use a width of 80% regardless of screen size. Just add class="wide" to your sp-nav element.
+### 0.1.2
+Use hardware accelerated CSS transitions.
 ### 0.1.1
 Remove horizontal scroll bars when menu is showing.
 ### 0.1.0

diff --git a/demo/app.js b/demo/app.js
@@ -1 +1,21 @@
-angular.module('super-awesome-demo',['shoppinpal.ng-mobile-menu']);
+angular.module('super-awesome-demo',['shoppinpal.mobile-menu'])
+    .config(['$routeProvider',function($routeProvider){
+        $routeProvider
+            .when("/skinny", {
+                templateUrl: "skinny.html"//,
+                //controller: "SkinnyCtrl"
+            })
+            .when("/wide", {
+                templateUrl: "wide.html"//,
+                //controller: "WideCtrl"
+            })
+            .otherwise({
+                redirectTo: "/skinny"
+            });
+    }]);
+//    .controller('SkinnyCtrl', ['$scope', '$routeParams', DummyCtrl])
+//    .controller('WideCtrl', ['$scope', '$routeParams', DummyCtrl]);
+//
+//function DummyCtrl($scope, $routeParams) {
+//
+//}
diff --git a/demo/index.html b/demo/index.html
@@ -6,7 +6,7 @@
 
 
     <link rel="stylesheet" href="topcoat/css/topcoat-mobile-light.min.css"/>
-    <link rel="stylesheet" href="../dist/ng-mobile-menu.min.css"/>
+    <link rel="stylesheet" href="ng-mobile-menu.min.css"/>
     <style>
         #sp-page {
             background-color: darkgray;
@@ -16,42 +16,13 @@
             padding: 10px;
         }
     </style>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-    <script type="text/javascript" src="../dist/ng-mobile-menu.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-mobile.js"></script>
+    <script type="text/javascript" src="ng-mobile-menu.min.js"></script>
     <script type="text/javascript" src="app.js"></script>
 </head>
-<body ng-app>
-    <div id="sp-nav">
-        <div class="topcoat-list-container">
-           <ul class="topcoat-list">
-               <li class="topcoat-list__item">Navigation Item 1</li>
-               <li class="topcoat-list__item">Navigation Item 2</li>
-               <li class="topcoat-list__item">Navigation Item 3</li>
-           </ul>
-        </div>
-    </div>
-
-    <div id="sp-page">
-        <div class="topcoat-navigation-bar">
-            <div class="topcoat-navigation-bar__item left quarter">
-                <a class="topcoat-icon-button--quiet" href="#sp-nav" id="sp-show-menu">
-                    <span class="topcoat-icon topcoat-icon--menu-stack"></span>
-                </a>
-                <a class="topcoat-icon-button--quiet" href="#sp-page" id="sp-hide-menu">
-                    <span class="topcoat-icon topcoat-icon--menu-stack"></span>
-                </a>
-            </div>
-            <div class="topcoat-navigation-bar__item center half">
-                <h1 class="topcoat-navigation-bar__title">ng-mobile-menu Demo</h1>
-            </div>
-            <div class="topcoat-navigation-bar__item right quarter">
-                <a class="topcoat-icon-button--quiet">
-                    <span class="topcoat-icon topcoat-icon--edit"></span>
-                </a>
-            </div>
-        </div>
-        <p>This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's <a href="http://topcoat.io">Topcoat</a>.</p>
-    </div>
+<body ng-app="super-awesome-demo">
+    <div ng-view></div>
 
 </body>
 </html>
diff --git a/demo/ng-mobile-menu.min.css b/demo/ng-mobile-menu.min.css
@@ -0,0 +1,9 @@
+#sp-hide-menu{display:none}
+#sp-nav,#sp-nav.wide{width:80%;overflow:hidden;position:absolute;top:0;left:0;height:100%}#sp-nav nav,#sp-nav.wide nav{display:block;background:black;color:white;z-index:5;height:100%}#sp-nav nav div,#sp-nav.wide nav div{z-index:5}
+#sp-page{position:absolute;width:100%;height:100%;float:right;z-index:10;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-duration:0.3s;transition-duration:0.3s}
+#sp-nav.show,#sp-nav.show.wide{left:0px;overflow-x:hidden}
+#sp-nav.show+#sp-page #sp-show-menu,#sp-nav.show.wide+#sp-page #sp-show-menu{display:none}
+#sp-nav.show+#sp-page #sp-hide-menu,#sp-nav.show.wide+#sp-page #sp-hide-menu{display:inline}
+#sp-nav.show+#sp-page,#sp-nav.show.wide+#sp-page{position:absolute;-webkit-transform:translateX(80%);transform:translateX(80%);-webkit-transition-duration:0.3s;transition-duration:0.3s;overflow-x:hidden;-webkit-overflow-scrolling:touch}
+body{overflow-x:hidden}
+@media (min-width:900px){#sp-nav{width:20%} #sp-nav.show+#sp-page{-webkit-transform:translateX(20%);transform:translateX(20%)}}
diff --git a/demo/ng-mobile-menu.min.js b/demo/ng-mobile-menu.min.js
diff --git a/demo/skinny.html b/demo/skinny.html
@@ -0,0 +1,30 @@
+<div id="sp-nav">
+    <div class="topcoat-list-container">
+        <ul class="topcoat-list">
+            <li class="topcoat-list__item">Navigation Item 1</li>
+            <li class="topcoat-list__item">Navigation Item 2</li>
+            <li class="topcoat-list__item">Navigation Item 3</li>
+        </ul>
+    </div>
+</div>
+
+<div id="sp-page">
+    <div class="topcoat-navigation-bar">
+        <div class="topcoat-navigation-bar__item left quarter">
+            <a class="topcoat-icon-button--quiet" href="" ng-click="$spMenu.toggle()">
+                <span class="topcoat-icon topcoat-icon--menu-stack"></span>
+            </a>
+        </div>
+        <div class="topcoat-navigation-bar__item center half">
+            <h1 class="topcoat-navigation-bar__title">ng-mobile-menu Demo</h1>
+        </div>
+        <div class="topcoat-navigation-bar__item right quarter">
+            <a class="topcoat-icon-button--quiet">
+                <span class="topcoat-icon topcoat-icon--edit"></span>
+            </a>
+        </div>
+    </div>
+    <p>This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's <a href="http://topcoat.io">Topcoat</a>.
+        Go to the <a href="#/wide">wide demo</a>.
+    </p>
+</div>
diff --git a/demo/wide.html b/demo/wide.html
@@ -1,26 +1,3 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
-    <title>ng-mobile-menu Demo</title>
-
-
-    <link rel="stylesheet" href="topcoat/css/topcoat-mobile-light.min.css"/>
-    <link rel="stylesheet" href="../dist/ng-mobile-menu.min.css"/>
-    <style>
-        #sp-page {
-            background-color: darkgray;
-            color: whitesmoke;
-        }
-        #sp-page > p {
-            padding: 10px;
-        }
-    </style>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-    <script type="text/javascript" src="../dist/ng-mobile-menu.min.js"></script>
-    <script type="text/javascript" src="app.js"></script>
-</head>
-<body ng-app>
 <div id="sp-nav" class="wide">
     <div class="topcoat-list-container">
         <ul class="topcoat-list">
@@ -34,10 +11,7 @@
 <div id="sp-page">
     <div class="topcoat-navigation-bar">
         <div class="topcoat-navigation-bar__item left quarter">
-            <a class="topcoat-icon-button--quiet" href="#sp-nav" id="sp-show-menu">
-                <span class="topcoat-icon topcoat-icon--menu-stack"></span>
-            </a>
-            <a class="topcoat-icon-button--quiet" href="#sp-page" id="sp-hide-menu">
+            <a class="topcoat-icon-button--quiet" href="" ng-click="$spMenu.toggle()">
                 <span class="topcoat-icon topcoat-icon--menu-stack"></span>
             </a>
         </div>
@@ -50,8 +24,7 @@ <h1 class="topcoat-navigation-bar__title">ng-mobile-menu Demo</h1>
             </a>
         </div>
     </div>
-    <p>This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's <a href="http://topcoat.io">Topcoat</a>.</p>
+    <p>This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's <a href="http://topcoat.io">Topcoat</a>.
+        Go to the <a href="#/skinny">normal demo</a>.
+    </p>
 </div>
-
-</body>
-</html>
diff --git a/dist/ng-mobile-menu.min.css b/dist/ng-mobile-menu.min.css
@@ -1,9 +1,9 @@
 #sp-hide-menu{display:none}
 #sp-nav,#sp-nav.wide{width:80%;overflow:hidden;position:absolute;top:0;left:0;height:100%}#sp-nav nav,#sp-nav.wide nav{display:block;background:black;color:white;z-index:5;height:100%}#sp-nav nav div,#sp-nav.wide nav div{z-index:5}
 #sp-page{position:absolute;width:100%;height:100%;float:right;z-index:10;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-duration:0.3s;transition-duration:0.3s}
-#sp-nav:target,#sp-nav:target.wide{left:0px;overflow-x:hidden}
-#sp-nav:target+#sp-page #sp-show-menu,#sp-nav:target.wide+#sp-page #sp-show-menu{display:none}
-#sp-nav:target+#sp-page #sp-hide-menu,#sp-nav:target.wide+#sp-page #sp-hide-menu{display:inline}
-#sp-nav:target+#sp-page,#sp-nav:target.wide+#sp-page{position:absolute;-webkit-transform:translateX(80%);transform:translateX(80%);-webkit-transition-duration:0.3s;transition-duration:0.3s;overflow-x:hidden;-webkit-overflow-scrolling:touch}
+#sp-nav.show,#sp-nav.show.wide{left:0px;overflow-x:hidden}
+#sp-nav.show+#sp-page #sp-show-menu,#sp-nav.show.wide+#sp-page #sp-show-menu{display:none}
+#sp-nav.show+#sp-page #sp-hide-menu,#sp-nav.show.wide+#sp-page #sp-hide-menu{display:inline}
+#sp-nav.show+#sp-page,#sp-nav.show.wide+#sp-page{position:absolute;-webkit-transform:translateX(80%);transform:translateX(80%);-webkit-transition-duration:0.3s;transition-duration:0.3s;overflow-x:hidden;-webkit-overflow-scrolling:touch}
 body{overflow-x:hidden}
-@media (min-width:900px){#sp-nav{width:20%} #sp-nav:target+#sp-page{-webkit-transform:translateX(20%);transform:translateX(20%)}}
+@media (min-width:900px){#sp-nav{width:20%} #sp-nav.show+#sp-page{-webkit-transform:translateX(20%);transform:translateX(20%)}}
diff --git a/dist/ng-mobile-menu.min.js b/dist/ng-mobile-menu.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-mobile-menu",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "An AngularJS module that provides a CSS slide out menu for mobile apps like the Facebook iOS app.",
   "main": "Gruntfile.js",
   "repository": {
@@ -25,6 +25,11 @@
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-uglify": "~0.2.2",
-    "grunt-contrib-less": "~0.6.1"
+    "grunt-contrib-less": "~0.6.1",
+    "matchdep": "~0.1.2",
+    "grunt-regarde": "~0.1.1",
+    "grunt-contrib-livereload": "~0.1.2",
+    "grunt-contrib-connect": "~0.3.0",
+    "grunt-open": "~0.2.1"
   }
 }
diff --git a/src/ng-mobile-menu.css b/src/ng-mobile-menu.css
@@ -33,21 +33,21 @@
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }
-#sp-nav:target,
-#sp-nav:target.wide {
+#sp-nav.show,
+#sp-nav.show.wide {
   left: 0px;
   overflow-x: hidden;
 }
-#sp-nav:target + #sp-page #sp-show-menu,
-#sp-nav:target.wide + #sp-page #sp-show-menu {
+#sp-nav.show + #sp-page #sp-show-menu,
+#sp-nav.show.wide + #sp-page #sp-show-menu {
   display: none;
 }
-#sp-nav:target + #sp-page #sp-hide-menu,
-#sp-nav:target.wide + #sp-page #sp-hide-menu {
+#sp-nav.show + #sp-page #sp-hide-menu,
+#sp-nav.show.wide + #sp-page #sp-hide-menu {
   display: inline;
 }
-#sp-nav:target + #sp-page,
-#sp-nav:target.wide + #sp-page {
+#sp-nav.show + #sp-page,
+#sp-nav.show.wide + #sp-page {
   position: absolute;
   -webkit-transform: translateX(80%);
   transform: translateX(80%);
@@ -63,7 +63,7 @@ body {
   #sp-nav {
     width: 20%;
   }
-  #sp-nav:target + #sp-page {
+  #sp-nav.show + #sp-page {
     -webkit-transform: translateX(20%);
     transform: translateX(20%);
   }