feat(sideMenu): allow and watch attrs width & is-enabled

Author: ajoslin

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

@@ -23,21 +23,14 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
 .directive('sideMenus', function() {
   return {
     restrict: 'ECA',
-    controller: ['$scope', function($scope) {
+    controller: ['$scope', '$attrs', function($scope, $attrs) {
       var _this = this;
 
       angular.extend(this, ionic.controllers.SideMenuController.prototype);
 
       ionic.controllers.SideMenuController.call(this, {
-        // Our quick implementation of the left side menu
-        left: {
-          width: 275,
-        },
-
-        // Our quick implementation of the right side menu
-        right: {
-          width: 275,
-        }
+        left: { width: 275 },
+        right: { width: 275 }
       });
 
       $scope.sideMenuContentTranslateX = 0;
@@ -158,30 +151,29 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
     replace: true,
     transclude: true,
     scope: true,
-    template: '<div class="menu menu-{{side}}"></div>',
+    template: '<div class="menu menu-{{side}}" ng-transclude></div>',
     compile: function(element, attr, transclude) {
+      angular.isUndefined(attr.isEnabled) && attr.$set('isEnabled', 'true');
+      angular.isUndefined(attr.width) && attr.$set('width', '275');
+
       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;
-          };
-        }
+        var sideMenu = sideMenuCtrl[$scope.side] = new ionic.views.SideMenu({
+          width: 275,
+          el: $element[0],
+          isEnabled: true
+        });
 
-        $element.append(transclude($scope));
+        $scope.$watch($attr.width, function(val) {
+          var numberVal = +val;
+          if (numberVal && numberVal == val) {
+            sideMenu.setWidth(+val);
+          }
+        });
+        $scope.$watch($attr.isEnabled, function(val) {
+          sideMenu.setIsEnabled(!!val);
+        });
       };
     }
   };

js/ext/angular/test/directive/ionicSideMenu.unit.js

@@ -38,20 +38,23 @@ describe('Ionic Side Menu Content Directive', function () {
   }));
 });
 
-describe('Ionic Side Menu Directive', function () {
+ddescribe('Ionic Side Menu Directive', function () {
   var element, scope, sideMenuCtrl;
 
   beforeEach(module('ionic.ui.sideMenu'));
 
   beforeEach(inject(function (_$compile_, _$rootScope_) {
     var $compile = _$compile_;
-    var $rootScope = _$rootScope_;
+    var $rootScope = _$rootScope_.$new();
+
+    $rootScope.widthVal = 250;
+    $rootScope.enabledVal = true;
 
     var sideMenus = $compile('<side-menus>')($rootScope);
 
     sideMenuCtrl = sideMenus.controller('sideMenus');
 
-    element = angular.element('<side-menu side="left">').appendTo(sideMenus);
+    element = angular.element('<side-menu side="left" is-enabled="enabledVal" width="widthVal">').appendTo(sideMenus);
     $compile(element)($rootScope);
 
     scope = element.scope();
@@ -63,4 +66,18 @@ describe('Ionic Side Menu Directive', function () {
     expect(sideMenuCtrl.left.pushDown).not.toBe(undefined);
     expect(sideMenuCtrl.left.bringUp).not.toBe(undefined);
   });
+
+  it('should watch isEnabled', function() {
+    expect(sideMenuCtrl.left.isEnabled).toBe(true);
+    scope.$apply('enabledVal = false');
+    expect(sideMenuCtrl.left.isEnabled).toBe(false);
+  });
+
+  it('should watch width', function() {
+    expect(sideMenuCtrl.left.width).toBe(250);
+    expect(sideMenuCtrl.left.el.style.width).toBe('250px');
+    scope.$apply('widthVal = 222');
+    expect(sideMenuCtrl.left.width).toBe(222);
+    expect(sideMenuCtrl.left.el.style.width).toBe('222px');
+  });
 });

js/ext/angular/test/sideMenu.html

@@ -19,10 +19,11 @@ <h1 class="title">Slide me</h1>
           </header>
           <content has-header="true">
             <toggle ng-model="$root.$draggy">Hello</toggle>
+            <input type="range" ng-model="$root.menuWidth" min="0" max="300">
             <h1>Content</h1>
           </content>
         </pane>
-        <side-menu side="left">
+        <side-menu side="left" width="$root.menuWidth || 200">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Left</h1>
           </header>

js/views/sideMenuView.js

@@ -9,13 +9,17 @@
   ionic.views.SideMenu = ionic.views.View.inherit({
     initialize: function(opts) {
       this.el = opts.el;
-      this.width = opts.width;
       this.isEnabled = opts.isEnabled || true;
+      this.setWidth(opts.width);
     },
 
     getFullWidth: function() {
       return this.width;
     },
+    setWidth: function(width) {
+      this.width = width;
+      this.el.style.width = width + 'px';
+    },
     setIsEnabled: function(isEnabled) {
       this.isEnabled = isEnabled;
     },