From ad12ddaa831c64d97e85a10aac296b3c2d769764 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Thu, 5 Dec 2013 11:46:01 -0600
Subject: [PATCH 1/3] Initial work

---
 dist/css/ionic.css                         | 15 +++++-
 dist/css/themes/ionic-ios7.css             |  1 -
 dist/js/ionic-angular.js                   | 49 +++++++++++++++++++
 js/ext/angular/src/directive/ionicRadio.js | 49 +++++++++++++++++++
 js/ext/angular/test/radioButton.html       | 55 ++++++++++++++++++++++
 scss/_button-bar.scss                      | 13 +++++
 6 files changed, 180 insertions(+), 2 deletions(-)
 create mode 100644 js/ext/angular/test/radioButton.html

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 4019a22dc2..2a3f7c72a0 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
@@ -5079,6 +5078,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;
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 1e5a055c50..23bcd03921 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 12193a16e8..ec57c7d502 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -1441,6 +1441,55 @@ angular.module('ionic.ui.radio', [])
                 <i class="radio-icon icon ion-checkmark"></i>\
               </label>',
 
+    link: function($scope, $element, $attr, ngModel) {
+      var radio;
+
+      if(!ngModel) { return; }
+
+      radio = $element.children().eq(0);
+
+      if(!radio.length) { return; }
+
+      $scope.tapHandler = function(e) {
+        radio[0].checked = true;
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+        e.alreadyHandled = true;
+      };
+
+      var clickHandler = function(e) {
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+      };
+
+      if(ngModel) {
+        //$element.bind('tap', tapHandler);
+        $element.bind('click', clickHandler);
+
+        ngModel.$render = function() {
+          var val = $scope.$eval($attr.ngValue);
+          if(val === ngModel.$viewValue) {
+            radio.attr('checked', 'checked');
+          } else {
+            radio.removeAttr('checked');
+          }
+        };
+      }
+    }
+  };
+})
+
+// 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;
 
diff --git a/js/ext/angular/src/directive/ionicRadio.js b/js/ext/angular/src/directive/ionicRadio.js
index 2e359417e5..dc8400053d 100644
--- a/js/ext/angular/src/directive/ionicRadio.js
+++ b/js/ext/angular/src/directive/ionicRadio.js
@@ -21,6 +21,55 @@ angular.module('ionic.ui.radio', [])
                 <i class="radio-icon icon ion-checkmark"></i>\
               </label>',
 
+    link: function($scope, $element, $attr, ngModel) {
+      var radio;
+
+      if(!ngModel) { return; }
+
+      radio = $element.children().eq(0);
+
+      if(!radio.length) { return; }
+
+      $scope.tapHandler = function(e) {
+        radio[0].checked = true;
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+        e.alreadyHandled = true;
+      };
+
+      var clickHandler = function(e) {
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+      };
+
+      if(ngModel) {
+        //$element.bind('tap', tapHandler);
+        $element.bind('click', clickHandler);
+
+        ngModel.$render = function() {
+          var val = $scope.$eval($attr.ngValue);
+          if(val === ngModel.$viewValue) {
+            radio.attr('checked', 'checked');
+          } else {
+            radio.removeAttr('checked');
+          }
+        };
+      }
+    }
+  };
+})
+
+// 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;
 
diff --git a/js/ext/angular/test/radioButton.html b/js/ext/angular/test/radioButton.html
new file mode 100644
index 0000000000..a2411c5ae4
--- /dev/null
+++ b/js/ext/angular/test/radioButton.html
@@ -0,0 +1,55 @@
+<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="cycle()" class="button button-warning">Cycle</button>
+          <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>
+
diff --git a/scss/_button-bar.scss b/scss/_button-bar.scss
index 2a4780d28b..93137baa3a 100644
--- a/scss/_button-bar.scss
+++ b/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 {

From 4e75b1b5919d2f2884b7144d0e4a7a9d7ac29afa Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Thu, 5 Dec 2013 12:48:20 -0600
Subject: [PATCH 2/3] yay

---
 dist/css/ionic.css                         |  1 +
 dist/css/themes/ionic-ios7.css             |  1 +
 dist/js/ionic-angular.js                   | 54 ++++++++++++++--------
 js/ext/angular/src/directive/ionicRadio.js | 54 ++++++++++++++--------
 4 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 2a3f7c72a0..3243f51b84 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 23bcd03921..1e5a055c50 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index ec57c7d502..944cc95f75 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -1493,37 +1493,55 @@ angular.module('ionic.ui.radio', [])
     link: function($scope, $element, $attr, ngModel) {
       var radio;
 
-      if(!ngModel) { return; }
-
-      radio = $element.children().eq(0);
-
-      if(!radio.length) { return; }
-
-      $scope.tapHandler = function(e) {
-        radio[0].checked = true;
-        ngModel.$setViewValue($scope.$eval($attr.ngValue));
-        e.alreadyHandled = true;
-      };
-
-      var clickHandler = function(e) {
-        ngModel.$setViewValue($scope.$eval($attr.ngValue));
-      };
 
       if(ngModel) {
         //$element.bind('tap', tapHandler);
-        $element.bind('click', clickHandler);
 
         ngModel.$render = function() {
           var val = $scope.$eval($attr.ngValue);
           if(val === ngModel.$viewValue) {
-            radio.attr('checked', 'checked');
           } else {
-            radio.removeAttr('checked');
           }
         };
+        $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);
diff --git a/js/ext/angular/src/directive/ionicRadio.js b/js/ext/angular/src/directive/ionicRadio.js
index dc8400053d..ae50cec33c 100644
--- a/js/ext/angular/src/directive/ionicRadio.js
+++ b/js/ext/angular/src/directive/ionicRadio.js
@@ -73,37 +73,55 @@ angular.module('ionic.ui.radio', [])
     link: function($scope, $element, $attr, ngModel) {
       var radio;
 
-      if(!ngModel) { return; }
-
-      radio = $element.children().eq(0);
-
-      if(!radio.length) { return; }
-
-      $scope.tapHandler = function(e) {
-        radio[0].checked = true;
-        ngModel.$setViewValue($scope.$eval($attr.ngValue));
-        e.alreadyHandled = true;
-      };
-
-      var clickHandler = function(e) {
-        ngModel.$setViewValue($scope.$eval($attr.ngValue));
-      };
 
       if(ngModel) {
         //$element.bind('tap', tapHandler);
-        $element.bind('click', clickHandler);
 
         ngModel.$render = function() {
           var val = $scope.$eval($attr.ngValue);
           if(val === ngModel.$viewValue) {
-            radio.attr('checked', 'checked');
           } else {
-            radio.removeAttr('checked');
           }
         };
+        $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);

From 29cb19a03e7b088d9f27d46031c55fef9c74be59 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Thu, 5 Dec 2013 14:58:03 -0600
Subject: [PATCH 3/3] Radio button working

---
 js/ext/angular/test/radioButton.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/ext/angular/test/radioButton.html b/js/ext/angular/test/radioButton.html
index a2411c5ae4..ee17aa2f24 100644
--- a/js/ext/angular/test/radioButton.html
+++ b/js/ext/angular/test/radioButton.html
@@ -28,7 +28,6 @@
         </radio-buttons>
 
         <form>
-          <button ng-click="cycle()" class="button button-warning">Cycle</button>
           <button ng-click="doIt()" class="button button-warning">Print</button>
         </form>
       </div>