Fixed side menu right/left issue, improved API

dist/js/ionic-angular.js

@@ -975,27 +975,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;
 })
@@ -1027,28 +1018,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() {
@@ -1062,6 +1057,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);
+        });
       };
     }
   };
@@ -1080,10 +1081,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));

dist/js/ionic.js

@@ -1836,6 +1836,15 @@ window.ionic = {
 (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;
@@ -1915,9 +1924,11 @@ window.ionic = {
     }
   };
 
+  // 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);
 ;
@@ -3467,6 +3478,39 @@ window.ionic = {
     }
   });
 
+  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);
 ;
 /**
@@ -4264,7 +4308,7 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
           self._handleDrag(e);
         };
 
-        this.content.endDrag = function(e) {
+        this.content.onEndDrag =function(e) {
           self._endDrag(e);
         };
       }
@@ -4354,12 +4398,12 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
      */
     openPercentage: function(percentage) {
       var p = percentage / 100;
-      var maxLeft = this.left.width;
+
-      var maxRight = this.right.width;
+      if(this.left && percentage >= 0) {
-      if(percentage >= 0) {
+        this.openAmount(this.left.width * p);
-        this.openAmount(maxLeft * p);
+      } else if(this.right && percentage < 0) {
-      } else {
+        var maxRight = this.right.width;
-        this.openAmount(maxRight * p);
+        this.openAmount(this.right.width * p);
       }
     },
 
@@ -4369,11 +4413,11 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
      * negative value for right menu (only one menu will be visible at a time).
      */
     openAmount: function(amount) {
-      var maxLeft = this.left.width;
+      var maxLeft = this.left && this.left.width || 0;
-      var maxRight = this.right.width;
+      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;
       }
 
@@ -4388,17 +4432,17 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
         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/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(this.left && percentage >= 0) {
-      if(percentage >= 0) {
+        this.openAmount(this.left.width * p);
-        this.openAmount(maxLeft * p);
+      } else if(this.right && percentage < 0) {
-      } else {
+        var maxRight = this.right.width;
-        this.openAmount(maxRight * p);
+        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 maxLeft = this.left && this.left.width || 0;
-      var maxRight = this.right.width;
+      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">
+          <header class="bar bar-header bar-primary">
-            <button class="button" ng-click="openLeft()"><i class="icon-reorder"></i></button>
+            <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>
+          <header class="bar bar-header bar-primary">
-          <ul class="list">
+            <h1 class="title">Left</h1>
-            <a href="#" class="list-item" ng-repeat="item in list">
+          </header>
-              {{item.text}}
+          <content has-header="true">
-            </a>
+            <ul class="list">
-          </ul>
+              <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);

test/side-menus.html

@@ -4,77 +4,54 @@
     <title>Side Menus</title>
 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
   </head>
   <body>
 
-    <section id="page" class="pane menu-animated">
+    <div id="content" class="pane">
       <header class="bar bar-header bar-dark">
-        <div class="buttons">
+        <h1 class="title">Center</h1>
-          <a id="left-button" class="button button-dark" href="#">
-            <i class="icon ion-reorder"></i>
-          </a>
-        </div>
-        <h1 class="title">Chats</h1>
-        <div class="buttons">
-          <button id="right-button" class="button button-dark">
-            <i class="icon ion-cog"></i>
-          </button>
-        </div>
       </header>
+    </div>
 
-      <main class="content padding has-header">
+    <div id="menu-left" class="menu menu-left">
-        <div class="panel panel-default">
+      <header class="bar bar-header bar-dark">
-          <div class="panel-heading">
+        <h1 class="title">Left</h1>
-            <h3 class="panel-title">Panel title</h3>
+      </header>
-          </div>
+    </div>
-          <div class="panel-body">
-            Is this
-          </div>
-        </div>
 
-        <div class="panel panel-success">
+    <div id="menu-right" class="menu menu-right">
-          <div class="panel-heading">
+      <header class="bar bar-header bar-dark">
-            <h3 class="panel-title">Panel title</h3>
+        <h1 class="title">Right</h1>
-          </div>
+      </header>
-          <div class="panel-body">
+    </div>
-            Is this
-          </div>
-        </div>
-        <div class="panel panel-danger">
-          <div class="panel-heading">
-            <h3 class="panel-title">Panel title</h3>
-          </div>
-          <div class="panel-body">
-            Is this
-          </div>
-        </div>
-        <div class="panel panel-warning">
-          <div class="panel-heading">
-            <h3 class="panel-title">Panel title</h3>
-          </div>
-          <div class="panel-body">
-            Is this
-          </div>
-        </div>
-        <div class="panel panel-info">
-          <div class="panel-heading">
-            <h3 class="panel-title">Panel title</h3>
-          </div>
-          <div class="panel-body">
-            Is this
-          </div>
-        </div>
-      </main>
-
-      <footer class="bar bar-footer bar-dark">
-        <h3 class="title"></h3>
-      </footer>
-    </section>
     
-    <script src="../dist/ionic.js"></script>
+    <script src="../dist/js/ionic.js"></script>
-    <script src="../dist/ionic-simple.js"></script>
+
+    <script>
+      var contentEl = document.getElementById('content');
+      var content = new ionic.views.SideMenuContent({
+        el: contentEl
+      });
+
+      var leftMenuEl = document.getElementById('menu-left');
+      var leftMenu = new ionic.views.SideMenu({
+        el: leftMenuEl,
+        width: 270
+      });
+
+      var rightMenuEl = document.getElementById('menu-right');
+      var rightMenu = new ionic.views.SideMenu({
+        el: rightMenuEl,
+        width: 270
+      });
+
+      var sm = new ionic.controllers.SideMenuController({
+        content: content,
+        left: leftMenu,
+        right: rightMenu
+      });
+    </script>
     
   </body>
 </html>