Fixed side menu right/left issue, improved API

js/controllers/sideMenuController.js

@@ -25,7 +25,7 @@
           self._handleDrag(e);
         };
 
-        this.content.endDrag = function(e) {
+        this.content.onEndDrag =function(e) {
           self._endDrag(e);
         };
       }
@@ -115,12 +115,12 @@
      */
     openPercentage: function(percentage) {
       var p = percentage / 100;
-      var maxLeft = this.left.width;
-      var maxRight = this.right.width;
-      if(percentage >= 0) {
-        this.openAmount(maxLeft * p);
-      } else {
-        this.openAmount(maxRight * p);
+
+      if(this.left && percentage >= 0) {
+        this.openAmount(this.left.width * p);
+      } else if(this.right && percentage < 0) {
+        var maxRight = this.right.width;
+        this.openAmount(this.right.width * p);
       }
     },
 
@@ -130,11 +130,11 @@
      * negative value for right menu (only one menu will be visible at a time).
      */
     openAmount: function(amount) {
-      var maxLeft = this.left.width;
-      var maxRight = this.right.width;
+      var maxLeft = this.left && this.left.width || 0;
+      var maxRight = this.right && this.right.width || 0;
 
       // Check if we can move to that side, depending if the left/right panel is enabled
-      if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
+      if((!(this.left && this.left.isEnabled) && amount > 0) || (!(this.right && this.right.isEnabled) && amount < 0)) {
         return;
       }
 
@@ -149,17 +149,17 @@
         this._rightShowing = false;
 
         // Push the z-index of the right menu down
-        this.right.pushDown();
+        this.right && this.right.pushDown();
         // Bring the z-index of the left menu up
-        this.left.bringUp();
+        this.left && this.left.bringUp();
       } else {
         this._rightShowing = true;
         this._leftShowing = false;
 
         // Bring the z-index of the right menu up
-        this.right.bringUp();
+        this.right && this.right.bringUp();
         // Push the z-index of the left menu down
-        this.left.pushDown();
+        this.left && this.left.pushDown();
       }
     },
 

js/ext/angular/src/directive/ionicSideMenu.js

@@ -20,27 +20,18 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
   angular.extend(this, ionic.controllers.SideMenuController.prototype);
 
   ionic.controllers.SideMenuController.call(this, {
+    // Our quick implementation of the left side menu
     left: {
       width: 270,
-      pushDown: function() {
-        $scope.leftZIndex = -1;
-      },
-      bringUp: function() {
-        $scope.leftZIndex = 0;
-      }
     },
+
+    // Our quick implementation of the right side menu
     right: {
       width: 270,
-      pushDown: function() {
-        $scope.rightZIndex = -1;
-      },
-      bringUp: function() {
-        $scope.rightZIndex = 0;
-      }
     }
   });
 
-  $scope.contentTranslateX = 0;
+  $scope.sideMenuContentTranslateX = 0;
 
   $scope.sideMenuCtrl = this;
 })
@@ -72,28 +63,32 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
           defaultPrevented = e.defaultPrevented;
         });
 
-        Gesture.on('drag', function(e) {
+        var dragFn = function(e) {
           if(defaultPrevented) {
             return;
           }
           sideMenuCtrl._handleDrag(e);
-        }, $element[0]);
+        };
 
-        Gesture.on('release', function(e) {
+        Gesture.on('drag', dragFn, $element[0]);
+
+        var dragReleaseFn = function(e) {
           if(!defaultPrevented) {
             sideMenuCtrl._endDrag(e);
           }
           defaultPrevented = false;
-        }, $element[0]);
+        };
+
+        Gesture.on('release', dragReleaseFn, $element[0]);
 
         sideMenuCtrl.setContent({
           onDrag: function(e) {},
           endDrag: function(e) {},
           getTranslateX: function() {
-            return $scope.contentTranslateX || 0;
+            return $scope.sideMenuContentTranslateX || 0;
           },
           setTranslateX: function(amount) {
-            $scope.contentTranslateX = amount;
+            $scope.sideMenuContentTranslateX = amount;
             $element[0].style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
           },
           enableAnimation: function() {
@@ -107,6 +102,12 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
             $element[0].classList.remove('menu-animated');
           }
         });
+
+        // Cleanup
+        $scope.$on('$destroy', function() {
+          Gesture.off('drag', dragFn);
+          Gesture.off('release', dragReleaseFn);
+        });
       };
     }
   };
@@ -125,10 +126,23 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
       return function($scope, $element, $attr, sideMenuCtrl) {
         $scope.side = $attr.side;
 
+
         if($scope.side == 'left') {
           sideMenuCtrl.left.isEnabled = true;
+          sideMenuCtrl.left.pushDown = function() {
+            $element[0].style.zIndex = -1;
+          };
+          sideMenuCtrl.left.bringUp = function() {
+            $element[0].style.zIndex = 0;
+          };
         } else if($scope.side == 'right') {
           sideMenuCtrl.right.isEnabled = true;
+          sideMenuCtrl.right.pushDown = function() {
+            $element[0].style.zIndex = -1;
+          };
+          sideMenuCtrl.right.bringUp = function() {
+            $element[0].style.zIndex = 0;
+          };
         }
 
         $element.append(transclude($scope));

js/ext/angular/test/sideMenu.html

@@ -16,24 +16,37 @@
     <div ng-controller="MenuCtrl">
       <side-menu>
         <pane side-menu-content>
-          <header class="bar bar-header bar-dark">
-            <button class="button" ng-click="openLeft()"><i class="icon-reorder"></i></button>
+          <header class="bar bar-header bar-primary">
+            <button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
             <h1 class="title">Slide me</h1>
           </header>
           <div class="content has-header">
-            <h1>Slide me side to side!</h1>
+            <h1>Content</h1>
           </div>
         </pane>
         <menu side="left">
-          <h2>Left</h2>
-          <ul class="list">
-            <a href="#" class="list-item" ng-repeat="item in list">
-              {{item.text}}
-            </a>
-          </ul>
+          <header class="bar bar-header bar-primary">
+            <h1 class="title">Left</h1>
+          </header>
+          <content has-header="true">
+            <ul class="list">
+              <a href="#" class="item" ng-repeat="item in list">
+                {{item.text}}
+              </a>
+            </ul>
+          </content>
         </menu>
         <menu side="right">
-          <h2>Items</h2>
+          <header class="bar bar-header bar-primary">
+            <h1 class="title">Right</h1>
+          </header>
+          <content has-header="true">
+            <ul class="list">
+              <a href="#" class="item" ng-repeat="item in list">
+                {{item.text}}
+              </a>
+            </ul>
+          </content>
         </menu>
       </side-menu>
     </div>
@@ -43,6 +56,12 @@
       angular.module('sideMenuTest', ['ionic'])
 
       .controller('MenuCtrl', function($scope) {
+        $scope.list = [];
+        for(var i = 0; i < 20; i++) {
+          $scope.list.push({
+            text: 'Item ' + i
+          });
+        }
         $scope.openLeft = function() {
           $scope.sideMenuCtrl.toggleLeft();
         };

js/utils/utils.js

@@ -1,6 +1,15 @@
 (function(ionic) {
   
   ionic.Utils = {
+
+    // Return a function that will be called with the given context
+    proxy: function(func, context) {
+      var args = Array.prototype.slice.call(arguments, 2);
+      return function() {
+        return func.apply(context, args.concat(Array.prototype.slice.call(arguments)));
+      };
+    },
+
     throttle: function(func, wait, options) {
       var context, args, result;
       var timeout = null;
@@ -80,8 +89,10 @@
     }
   };
 
+  // Bind a few of the most useful functions to the ionic scope
   ionic.inherit = ionic.Utils.inherit;
   ionic.extend = ionic.Utils.extend;
   ionic.throttle = ionic.Utils.throttle;
+  ionic.proxy = ionic.Utils.proxy;
 
 })(window.ionic);

js/views/sideMenuView.js

@@ -22,4 +22,37 @@
     }
   });
 
+  ionic.views.SideMenuContent = ionic.views.View.inherit({
+    initialize: function(opts) {
+      var _this = this;
+
+      ionic.extend(this, {
+        animationClass: 'menu-animated',
+        onDrag: function(e) {},
+        onEndDrag: function(e) {},
+      }, opts);
+
+      ionic.onGesture('drag', ionic.proxy(this._onDrag, this), this.el);
+      ionic.onGesture('release', ionic.proxy(this._onEndDrag, this), this.el);
+    },
+    _onDrag: function(e) {
+      this.onDrag && this.onDrag(e);
+    },
+    _onEndDrag: function(e) {
+      this.onEndDrag && this.onEndDrag(e);
+    },
+    disableAnimation: function() {
+      this.el.classList.remove(this.animationClass);
+    },
+    enableAnimation: function() {
+      this.el.classList.add(this.animationClass);
+    },
+    getTranslateX: function() {
+      return parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]);
+    },
+    setTranslateX: function(x) {
+      this.el.style.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
+    }
+  });
+
 })(ionic);