feat(sidemenu): adding display-type attribute to ion-side-menu directive

Author: dennybiasiolli

js/angular/directive/sideMenu.js

@@ -13,7 +13,8 @@
  * <ion-side-menu
  *   side="left"
  *   width="myWidthValue + 20"
- *   is-enabled="shouldLeftSideMenuBeEnabled()">
+ *   is-enabled="shouldLeftSideMenuBeEnabled()"
+ *   display-type="push">
  * </ion-side-menu>
  * ```
  * For a complete side menu example, see the
@@ -22,6 +23,7 @@
  * @param {string} side Which side the side menu is currently on.  Allowed values: 'left' or 'right'.
  * @param {boolean=} is-enabled Whether this side menu is enabled.
  * @param {number=} width How many pixels wide the side menu should be.  Defaults to 275.
+ * @param {string} display-type Which type of display the menu should have.  Allowed values: 'push' or 'overlay'.  Defaults to 'push'.
  */
 IonicModule
 .directive('ionSideMenu', function() {
@@ -32,6 +34,7 @@ IonicModule
     compile: function(element, attr) {
       angular.isUndefined(attr.isEnabled) && attr.$set('isEnabled', 'true');
       angular.isUndefined(attr.width) && attr.$set('width', '275');
+      angular.isUndefined(attr.displayType) && attr.$set('displayType', 'push');
 
       element.addClass('menu menu-' + attr.side);
 
@@ -41,7 +44,8 @@ IonicModule
         var sideMenu = sideMenuCtrl[$scope.side] = new ionic.views.SideMenu({
           width: attr.width,
           el: $element[0],
-          isEnabled: true
+          isEnabled: true,
+          displayType: attr.displayType
         });
 
         $scope.$watch($attr.width, function(val) {
@@ -53,8 +57,12 @@ IonicModule
         $scope.$watch($attr.isEnabled, function(val) {
           sideMenu.setIsEnabled(!!val);
         });
+        $scope.$watch($attr.displayType, function(val) {
+          if (val == 'push' || val == 'overlay') {
+            sideMenu.setDisplayType(val);
+          }
+        });
       };
     }
   };
 });
-

js/views/sideMenuView.js

@@ -11,6 +11,7 @@
       this.el = opts.el;
       this.isEnabled = (typeof opts.isEnabled === 'undefined') ? true : opts.isEnabled;
       this.setWidth(opts.width);
+      this.displayType = (typeof opts.displayType === 'undefined') ? 'push' : opts.displayType;
     },
     getFullWidth: function() {
       return this.width;
@@ -31,6 +32,9 @@
       if(this.el.style.zIndex !== '-1') {
         this.el.style.zIndex = '-1';
       }
+    },
+    setDisplayType: function(displayType) {
+      this.displayType = displayType;
     }
   });