From e9e39209bfd4d5e05b04d6f5801d9947cbf81944 Mon Sep 17 00:00:00 2001 From: Jeff French Date: Wed, 17 Jul 2013 14:09:34 -0500 Subject: [PATCH] v0.2.0: Use provider to show and hide menu --- Gruntfile.js | 50 +++++++++++++++++++++++++++++++++---- README.md | 23 ++++++++++------- demo/app.js | 22 +++++++++++++++- demo/index.html | 41 +++++------------------------- demo/ng-mobile-menu.min.css | 9 +++++++ demo/ng-mobile-menu.min.js | 3 +++ demo/skinny.html | 30 ++++++++++++++++++++++ demo/wide.html | 35 +++----------------------- dist/ng-mobile-menu.min.css | 10 ++++---- dist/ng-mobile-menu.min.js | 4 +-- package.json | 9 +++++-- src/ng-mobile-menu.css | 18 ++++++------- src/ng-mobile-menu.js | 37 +++++++++++++++++++-------- src/ng-mobile-menu.less | 10 ++++---- 14 files changed, 186 insertions(+), 115 deletions(-) create mode 100644 demo/ng-mobile-menu.min.css create mode 100644 demo/ng-mobile-menu.min.js create mode 100644 demo/skinny.html diff --git a/Gruntfile.js b/Gruntfile.js index e20646f..31e284c 100644 --- 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 index dbd4cc4..3327eba 100644 --- a/README.md +++ b/README.md @@ -11,15 +11,15 @@ Include the CSS and JS files: - + ``` -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,13 +34,10 @@ Then you just need to structure your HTML like this: ``` -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 - -Show - -Hide + ``` ## Demo @@ -48,7 +45,15 @@ Use 2 anchor tags to control the menu. Only one will be visible at a time as ng- 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 index a9e00e7..201988e 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1 +1,21 @@ -angular.module('super-awesome-demo',['shoppinpal.ng-mobile-menu']); \ No newline at end of file +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) { +// +//} \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 24e20b2..989934d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,7 +6,7 @@ - + - - + + + - -
-
-
    -
  • Navigation Item 1
    • -
  • Navigation Item 2
    • -
  • Navigation Item 3
    • -
-
-
- -
-
-
- - - - - - -
-
-

ng-mobile-menu Demo

-
-
- - - -
-
-

This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's Topcoat.

-
+ +
\ No newline at end of file diff --git a/demo/ng-mobile-menu.min.css b/demo/ng-mobile-menu.min.css new file mode 100644 index 0000000..5425ab1 --- /dev/null +++ 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 new file mode 100644 index 0000000..c0bfce6 --- /dev/null +++ b/demo/ng-mobile-menu.min.js @@ -0,0 +1,3 @@ +/*! ng-mobile-menu - v0.2.0 - 2013-07-17 +* Copyright (c) 2013 Jeff French; Licensed MIT */ +angular.module("shoppinpal.mobile-menu",[]).run(["$rootScope","$spMenu",function(a,b){a.$spMenu=b}]).provider("$spMenu",function(){this.$get=[function(){var a={};return a.show=function(){var a=angular.element(document.querySelector("#sp-nav"));console.log(a),a.addClass("show")},a.hide=function(){var a=angular.element(document.querySelector("#sp-nav"));a.removeClass("show")},a.toggle=function(){var a=angular.element(document.querySelector("#sp-nav"));a.toggleClass("show")},a}]}); \ No newline at end of file diff --git a/demo/skinny.html b/demo/skinny.html new file mode 100644 index 0000000..8545768 --- /dev/null +++ b/demo/skinny.html @@ -0,0 +1,30 @@ +
+
+
    +
  • Navigation Item 1
    • +
  • Navigation Item 2
    • +
  • Navigation Item 3
    • +
+
+
+ +
+
+
+ + + +
+
+

ng-mobile-menu Demo

+
+
+ + + +
+
+

This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's Topcoat. + Go to the wide demo. +

+
\ No newline at end of file diff --git a/demo/wide.html b/demo/wide.html index 156a8b8..ea652d9 100644 --- a/demo/wide.html +++ b/demo/wide.html @@ -1,26 +1,3 @@ - - - - - ng-mobile-menu Demo - - - - - - - - - -
    @@ -34,10 +11,7 @@
    - - - - +
    @@ -50,8 +24,7 @@

    ng-mobile-menu Demo

    -

    This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's Topcoat.

    +

    This demo shows the ng-mobile-menu in action. The styling is all provided by Adobe's Topcoat. + Go to the normal demo. +

- - - \ No newline at end of file diff --git a/dist/ng-mobile-menu.min.css b/dist/ng-mobile-menu.min.css index 92ddca5..5425ab1 100644 --- 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 index 954b7ba..c0bfce6 100644 --- a/dist/ng-mobile-menu.min.js +++ b/dist/ng-mobile-menu.min.js @@ -1,3 +1,3 @@ -/*! ng-mobile-menu - v0.1.2 - 2013-07-16 +/*! ng-mobile-menu - v0.2.0 - 2013-07-17 * Copyright (c) 2013 Jeff French; Licensed MIT */ -angular.module("shoppinpal.mobile-menu",[]).run(["$rootScope",function(a){console.log(a),a.$on("$locationChangeStart",function(a,b){-1!==b.indexOf("#sp-nav",b.length-"#sp-nav".length)&&a.preventDefault(),-1!==b.indexOf("#sp-page",b.length-"#sp-page".length)&&a.preventDefault()})}]); \ No newline at end of file +angular.module("shoppinpal.mobile-menu",[]).run(["$rootScope","$spMenu",function(a,b){a.$spMenu=b}]).provider("$spMenu",function(){this.$get=[function(){var a={};return a.show=function(){var a=angular.element(document.querySelector("#sp-nav"));console.log(a),a.addClass("show")},a.hide=function(){var a=angular.element(document.querySelector("#sp-nav"));a.removeClass("show")},a.toggle=function(){var a=angular.element(document.querySelector("#sp-nav"));a.toggleClass("show")},a}]}); \ No newline at end of file diff --git a/package.json b/package.json index 4291fa3..6a80e19 100644 --- 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 index 6f373b9..8dadb33 100644 --- 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%); } diff --git a/src/ng-mobile-menu.js b/src/ng-mobile-menu.js index e4f54a7..09beaab 100644 --- a/src/ng-mobile-menu.js +++ b/src/ng-mobile-menu.js @@ -1,12 +1,27 @@ angular.module('shoppinpal.mobile-menu', []) - .run(['$rootScope', function($rootScope){ - console.log($rootScope); - $rootScope.$on("$locationChangeStart", function(scope, future, current){ - if(future.indexOf('#sp-nav', future.length - '#sp-nav'.length) !== -1){ - scope.preventDefault(); - } - if(future.indexOf('#sp-page', future.length - '#sp-page'.length) !== -1){ - scope.preventDefault(); - } - }); - }]); \ No newline at end of file + .run(['$rootScope', '$spMenu', function($rootScope, $spMenu){ + $rootScope.$spMenu = $spMenu; + }]) + .provider("$spMenu", function(){ + this.$get = [function(){ + var menu = {}; + + menu.show = function show(){ + var menu = angular.element(document.querySelector('#sp-nav')); + console.log(menu); + menu.addClass('show'); + }; + + menu.hide = function hide(){ + var menu = angular.element(document.querySelector('#sp-nav')); + menu.removeClass('show'); + }; + + menu.toggle = function toggle() { + var menu = angular.element(document.querySelector('#sp-nav')); + menu.toggleClass('show'); + }; + + return menu; + }]; + }); \ No newline at end of file diff --git a/src/ng-mobile-menu.less b/src/ng-mobile-menu.less index d7b501e..9d5d98e 100644 --- a/src/ng-mobile-menu.less +++ b/src/ng-mobile-menu.less @@ -36,20 +36,20 @@ 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(@sp-nav-offset); transform: translateX(@sp-nav-offset); @@ -67,7 +67,7 @@ body { #sp-nav{ width: @sp-nav-offset-skinny; } - #sp-nav:target + #sp-page { + #sp-nav.show + #sp-page { -webkit-transform: translateX(@sp-nav-offset-skinny); transform: translateX(@sp-nav-offset-skinny); }