ionic-team · redfox05 · Feb 19, 2015 · Feb 19, 2015 · Feb 19, 2015 · Feb 19, 2015
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .*.sw*
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,20 @@
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    connect: {
+      demo: {
+        options: {
+          open: true,
+          port: 8888,
+          keepalive: true,
+          base: '.'
+        }  
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.registerTask('default', 'connect');
+
+};
diff --git a/README.md b/README.md
@@ -2,3 +2,59 @@ ionic-contrib-drawer
 ====================
 
 A side menu drawer for Ionic apps
+
+#####Setting up:
+
+Clone the ionic-ion-drawer repo into the lib folder in your ionic project so it looks like:
+
+*yourProjectName/www/lib/ionic-ion-drawer*
+
+Add the ionic-contrib-drawer.js and ionic-contrib-drawer.css files to your index file
+
+    <link href="lib/ionic-ion-drawer/ionic.contrib.drawer.css" rel="stylesheet">
+    <script src="lib/ionic-ion-drawer/ionic.contrib.drawer.js"></script>
+
+Add ionic.contrib.drawer to your Angular app:
+
+    angular.module('App', [
+      'ionic',
+      'ionic.contrib.drawer'
+    ])
+
+#####Usage:
+
+ Add the `<drawer>` directive to your ionic templates or index.html files.
+
+#####Example:
+
+    <ion-view>
+      <ion-content>
+        <div class="bar bar-header bar-dark">
+          <h1 class="title">Example</h1>
+        </div>
+      </ion-content>
+      <drawer side="right">
+        <ion-content>
+          <h2>Menu</h2>
+          <button ng-click="closeDrawer()">Close</button>
+          <ion-list>
+            <ion-item>Friends</ion-item>
+            <ion-item>Favorites</ion-item>
+            <ion-item>Search</ion-item>
+          </ion-list>
+        </ion-content>
+      </drawer>
+    </ion-view>
+
+
+
+Change the 'side' attribute of the `<drawer>` to either "right" or "left" to switch the side the drawer opens from.
+
+#####Credits:
+
+driftyco: https://github.com/driftyco (original build)
+
+vitalyrotari: https://github.com/vitalyrotari (bug fixes, improved performance, background fading 
+transition)
+
+brybott: https://github.com/brybott (right side functionality)
diff --git a/bower.json b/bower.json
diff --git a/custom.css b/custom.css
@@ -0,0 +1,27 @@
+drawer, drawer.left, drawer.right {
+  background-color: #222;
+  top: 44px;
+  width:20%;
+}
+.drawer-overlay {
+  top: 44px;
+}
+drawer h2 {
+  color: #fff;
+  margin-top: 40px !important;
+  margin-left: 15px;
+  font-weight: 200;
+}
+
+.item {
+  background: none;
+  color: #fff;
+}
+
+.item:first-child {
+  border-top: 0px;
+}
+
+.item:last-child {
+  border-bottom: 0px;
+}
diff --git a/index.html b/index.html
@@ -4,47 +4,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <title>Ionic Seed App</title>
-
-    <!-- ionic css -->
-    <!--<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">-->
-    <link href="../ionic/dist/css/ionic.css" rel="stylesheet">
+    <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
     <link rel="stylesheet" href="ionic.contrib.drawer.css">
-
+    <link rel="stylesheet" href="custom.css">
     <!-- angularjs scripts -->
-    <script src="../ionic/dist/js/ionic.bundle.js"></script>
-
+    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
     <script src="ionic.contrib.drawer.js"></script>
-    <style>
-      drawer {
-        background-color: #222;
-      }
-      drawer h2 {
-        color: #fff;
-        margin-top: 40px !important;
-        margin-left: 15px;
-        font-weight: 200;
-      }
-      .item {
-        background: none;
-        color: #fff;
-      }
-      .item:first-child {
-        border-top: 0px;
-      }
-      .item:last-child {
-        border-bottom: 0px;
-      }
-    </style>
-  </head>
 
-  <!-- 
-    'starter' is the name of this angular module (js/app.js)
-  -->
+  </head>
   <body ng-app="app">
     <drawer side="left">
       <ion-content>
         <h2>Menu</h2>
-        <button ng-click="closeDrawer()">Close</button>
         <ion-list>
           <ion-item>Friends</ion-item>
           <ion-item>Favorites</ion-item>
@@ -54,7 +25,10 @@ <h2>Menu</h2>
     </drawer>
     <ion-pane>
       <ion-content>
-        <button ng-click="openDrawer()">Open</button>
+        <ion-header-bar class="bar-positive text-right">
+          <button class="drawer-button" ng-show="!drawerIsOpen()" ng-click="openDrawer()" ng-class="{'drawer-open': drawerIsOpen()}">Open</button>
+          <button class="drawer-button" ng-show="drawerIsOpen()" ng-click="closeDrawer()" ng-class="{'drawer-open': drawerIsOpen()}">Close</button>
+        </ion-header-bar>
       </ion-content>
     </ion-pane>
     <script>

diff --git a/ionic.contrib.drawer.css b/ionic.contrib.drawer.css
@@ -1,26 +1,49 @@
 drawer {
   display: block;
   position: fixed;
-  width: 270px;
   height: 100%;
+  width: 90%;
   z-index: 100;
   background: #ffffff;
 }
 
-drawer.animate {
-  -webkit-transition: 0.4s all ease-in-out;
-  transition: 0.4s all ease-in-out;
+drawer.animate, .menu-animated {
+  -webkit-transition: -webkit-transform 0.4s ease-in-out;
+  transition: transform 0.4s ease-in-out;
 }
 
 drawer.left {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
   box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
 }
+
 drawer.right {
   right: 0;
   top: 0;
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   box-shadow: -1px 0px 10px rgba(0,0,0,0.3);
 }
+
+drawer.closed {
+  box-shadow: none;
+}
+
+.drawer-overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+
+.drawer-overlay.animate {
+  -webkit-transition: 0.4s opacity ease-in-out;
+  transition: 0.4s opacity ease-in-out;
+}