Merge branch '90-button-bar-logic'

dist/css/ionic.css

@@ -5079,6 +5079,20 @@ a.button {
   -ms-flex: 1;
   flex: 1;
   width: 100%; }
+  .button-bar.button-bar-inline {
+    display: block;
+    width: auto;
+    *zoom: 1; }
+    .button-bar.button-bar-inline:before, .button-bar.button-bar-inline:after {
+      display: table;
+      content: "";
+      line-height: 0; }
+    .button-bar.button-bar-inline:after {
+      clear: both; }
+    .button-bar.button-bar-inline > .button {
+      width: auto;
+      display: inline-block;
+      float: left; }
 
 .button-bar > .button {
   -webkit-box-flex: 1;

dist/js/ionic-angular.js

@@ -1475,6 +1475,73 @@ angular.module('ionic.ui.radio', [])
       }
     }
   };
+})
+
+// The radio button is a radio powered element with only
+// one possible selection in a set of options.
+.directive('radioButtons', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '?ngModel',
+    scope: {
+      value: '@'
+    },
+    transclude: true,
+    template: '<div class="button-bar button-bar-inline" ng-transclude></div>',
+
+    link: function($scope, $element, $attr, ngModel) {
+      var radio;
+
+
+      if(ngModel) {
+        //$element.bind('tap', tapHandler);
+
+        ngModel.$render = function() {
+          var val = $scope.$eval($attr.ngValue);
+          if(val === ngModel.$viewValue) {
+          } else {
+          }
+        };
+        $scope.$parent.$on('button.toggled', function(e, element) {
+          var c, children = $element.children();
+          for(var i = 0; i < children.length; i++) {
+            c = children[i];
+            if(c != element[0]) {
+              c.classList.remove('active');
+            }
+          }
+        });
+      }
+    }
+  };
+})
+
+.directive('button', function() {
+  return {
+    restrict: 'E',
+    require: '?^ngModel',
+    link: function($scope, $element, $attr, ngModel) {
+      if(!ngModel) { return; }
+
+      var setIt = function() {
+        $element.addClass('active');
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+        $scope.$emit('button.toggled', $element);
+      };
+
+      $scope.tapHandler = function(e) {
+        setIt();
+        e.alreadyHandled = true;
+      };
+
+      var clickHandler = function(e) {
+        setIt();
+      };
+        
+      $element.bind('click', clickHandler);
+    }
+  }
 });
 
 })(window.ionic);

js/ext/angular/src/directive/ionicRadio.js

@@ -55,6 +55,73 @@ angular.module('ionic.ui.radio', [])
       }
     }
   };
+})
+
+// The radio button is a radio powered element with only
+// one possible selection in a set of options.
+.directive('radioButtons', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '?ngModel',
+    scope: {
+      value: '@'
+    },
+    transclude: true,
+    template: '<div class="button-bar button-bar-inline" ng-transclude></div>',
+
+    link: function($scope, $element, $attr, ngModel) {
+      var radio;
+
+
+      if(ngModel) {
+        //$element.bind('tap', tapHandler);
+
+        ngModel.$render = function() {
+          var val = $scope.$eval($attr.ngValue);
+          if(val === ngModel.$viewValue) {
+          } else {
+          }
+        };
+        $scope.$parent.$on('button.toggled', function(e, element) {
+          var c, children = $element.children();
+          for(var i = 0; i < children.length; i++) {
+            c = children[i];
+            if(c != element[0]) {
+              c.classList.remove('active');
+            }
+          }
+        });
+      }
+    }
+  };
+})
+
+.directive('button', function() {
+  return {
+    restrict: 'E',
+    require: '?^ngModel',
+    link: function($scope, $element, $attr, ngModel) {
+      if(!ngModel) { return; }
+
+      var setIt = function() {
+        $element.addClass('active');
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+        $scope.$emit('button.toggled', $element);
+      };
+
+      $scope.tapHandler = function(e) {
+        setIt();
+        e.alreadyHandled = true;
+      };
+
+      var clickHandler = function(e) {
+        setIt();
+      };
+        
+      $element.bind('click', clickHandler);
+    }
+  }
 });
 
 })(window.ionic);

js/ext/angular/test/radioButton.html

@@ -0,0 +1,54 @@
+<html ng-app="radioButtonTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Radio</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-route.js"></script>
+    <script src="../../../../dist/js/angular/angular-touch.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-danger">
+      <h1 class="title">Beans</h1>
+    </header>
+    <content has-header="true"class="reveal-animation">
+      <div ng-controller="TestCtrl">
+        <radio-buttons ng-model="data.isLovely">
+          <button class="button button-assertive" ng-value="'magical'">Magical</button>
+          <button class="button button-assertive" ng-value="'black'">Black</button>
+          <button class="button button-assertive" ng-value="'pinto'">Pinto</button>
+        </radio-buttons>
+
+        <form>
+          <button ng-click="doIt()" class="button button-warning">Print</button>
+        </form>
+      </div>
+    </content>
+
+    <script>
+      angular.module('radioButtonTest', ['ionic'])
+
+      .controller('TestCtrl', function($scope) {
+        $scope.data = {};
+        var items = ['magical', 'black', 'pinto'];
+        var i = 0;
+        $scope.cycle = function() {
+          $scope.data.isLovely = items[i++ % items.length];
+        };
+        $scope.doIt = function() {
+          console.log('DOIT', $scope.data);
+        }
+      });
+
+    </script>
+  </body>
+</html>
+

scss/_button-bar.scss

@@ -8,6 +8,19 @@
   @include display-flex();
   @include flex(1);
   width: 100%;
+
+  &.button-bar-inline {
+    display: block;
+    width: auto;
+
+    @include clearfix();
+
+    > .button {
+      width: auto;
+      display: inline-block;
+      float: left;
+    }
+  }
 }
 
 .button-bar > .button {