From c73cc43c21ccb2e89a003d644cfae1f7ba5c739f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 8 Nov 2013 17:57:04 -0600
Subject: [PATCH] Updated toggle and moved to view inheritance

---
 dist/js/ionic.js                  | 63 +++++++++++++++----------------
 js/ext/angular/test/slideBox.html |  6 +--
 js/ext/angular/test/tabs.html     |  2 +-
 js/ext/angular/test/toggle.html   |  9 ++++-
 js/views/slideBox.js              | 46 +++++++++++-----------
 js/views/toggleView.js            | 17 ++++-----
 test/slideBox.html                |  2 +-
 7 files changed, 74 insertions(+), 71 deletions(-)

diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index 93ba911c2c..3b250409bc 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -3465,33 +3465,33 @@ window.ionic = {
 (function(ionic) {
 'use strict';
 
-  ionic.views.SlideBox = function(opts) {
-    var _this = this;
+  ionic.views.SlideBox = ionic.views.View.inherit({
+    initialize: function(opts) {
+      var _this = this;
 
-    this.el = opts.el;
-    this.pager = this.el.querySelector('.slide-box-pager');
+      this.el = opts.el;
+      this.pager = this.el.querySelector('.slide-box-pager');
 
-    // The drag threshold is the pixel delta that will trigger a drag (to 
-    // avoid accidental dragging)
-    this.dragThresholdX = opts.dragThresholdX || 10;
-    // The velocity threshold is a velocity of drag that indicates a "swipe". This
-    // number is taken from hammer.js's calculations
-    this.velocityXThreshold = opts.velocityXThreshold || 0.3;
+      // The drag threshold is the pixel delta that will trigger a drag (to 
+      // avoid accidental dragging)
+      this.dragThresholdX = opts.dragThresholdX || 10;
+      // The velocity threshold is a velocity of drag that indicates a "swipe". This
+      // number is taken from hammer.js's calculations
+      this.velocityXThreshold = opts.velocityXThreshold || 0.3;
 
-    // Initialize the slide index to the first page and update the pager
-    this.slideIndex = 0;
-    this._updatePager();
+      // Initialize the slide index to the first page and update the pager
+      this.slideIndex = 0;
+      this._updatePager();
 
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
-  };
+      // Listen for drag and release events
+      window.ionic.onGesture('drag', function(e) {
+        _this._handleDrag(e);
+      }, this.el);
+      window.ionic.onGesture('release', function(e) {
+        _this._handleEndDrag(e);
+      }, this.el);
+    },
 
-  ionic.views.SlideBox.prototype = {
     /**
      * Tell the pager to update itself if content is added or
      * removed. 
@@ -3780,7 +3780,7 @@ window.ionic = {
         }
       });
     }
-  };
+  });
 
 })(window.ionic);
 ;
@@ -3989,14 +3989,13 @@ ionic.views.TabBar.prototype = {
 (function(ionic) {
 'use strict';
 
-  ionic.views.Toggle = function(opts) {
-    this.el = opts.el;
-    this.checkbox = opts.checkbox;
-    this.handle = opts.handle;
-    this.openPercent = -1;
-  };
-
-  ionic.views.Toggle.prototype = {
+  ionic.views.Toggle = ionic.views.View.inherit({
+    initialize: function(opts) {
+      this.el = opts.el;
+      this.checkbox = opts.checkbox;
+      this.handle = opts.handle;
+      this.openPercent = -1;
+    },
 
     tap: function(e) {
       this.val( !this.checkbox.checked );
@@ -4047,7 +4046,7 @@ ionic.views.TabBar.prototype = {
       return this.checkbox.checked;
     }
 
-  };
+  });
 
 })(ionic);
 ;
diff --git a/js/ext/angular/test/slideBox.html b/js/ext/angular/test/slideBox.html
index 4d55badb3f..e686e13d86 100644
--- a/js/ext/angular/test/slideBox.html
+++ b/js/ext/angular/test/slideBox.html
@@ -7,9 +7,9 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
-    <script src="/vendor/angular/angular-touch.js"></script>
-    <script src="/vendor/angular/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
     <style>
       .box {
         width: 100%;
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
index 5fd01b432f..f7fde31dc3 100644
--- a/js/ext/angular/test/tabs.html
+++ b/js/ext/angular/test/tabs.html
@@ -3,7 +3,7 @@
     <meta charset="utf-8">
     <title>Tab Bars</title>
 
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
diff --git a/js/ext/angular/test/toggle.html b/js/ext/angular/test/toggle.html
index 08103b4107..1551ca600d 100644
--- a/js/ext/angular/test/toggle.html
+++ b/js/ext/angular/test/toggle.html
@@ -13,9 +13,11 @@
   <body>
 
     <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
-      <form ng-submit="doIt()">
+      <form>
         <toggle ng-model="data.isLovely"></toggle>
-        <button type="submit" class="button button-danger">Do it</button>
+        <button ng-click="toggle()" class="button button-danger">Toggle</button>
+        <button ng-click="doIt()" class="button button-warning">Print</button>
+      </form>
     </content>
 
     <script src="../../../../dist/js/ionic.js"></script>
@@ -28,6 +30,9 @@
         $scope.doIt = function() {
           console.log('DOIT', $scope.data);
         }
+        $scope.toggle = function() {
+          $scope.data.isLovely = !$scope.data.isLovely;
+        };
       });
 
     </script>
diff --git a/js/views/slideBox.js b/js/views/slideBox.js
index 7d516d9146..6980ddc855 100644
--- a/js/views/slideBox.js
+++ b/js/views/slideBox.js
@@ -8,33 +8,33 @@
 (function(ionic) {
 'use strict';
 
-  ionic.views.SlideBox = function(opts) {
-    var _this = this;
+  ionic.views.SlideBox = ionic.views.View.inherit({
+    initialize: function(opts) {
+      var _this = this;
 
-    this.el = opts.el;
-    this.pager = this.el.querySelector('.slide-box-pager');
+      this.el = opts.el;
+      this.pager = this.el.querySelector('.slide-box-pager');
 
-    // The drag threshold is the pixel delta that will trigger a drag (to 
-    // avoid accidental dragging)
-    this.dragThresholdX = opts.dragThresholdX || 10;
-    // The velocity threshold is a velocity of drag that indicates a "swipe". This
-    // number is taken from hammer.js's calculations
-    this.velocityXThreshold = opts.velocityXThreshold || 0.3;
+      // The drag threshold is the pixel delta that will trigger a drag (to 
+      // avoid accidental dragging)
+      this.dragThresholdX = opts.dragThresholdX || 10;
+      // The velocity threshold is a velocity of drag that indicates a "swipe". This
+      // number is taken from hammer.js's calculations
+      this.velocityXThreshold = opts.velocityXThreshold || 0.3;
 
-    // Initialize the slide index to the first page and update the pager
-    this.slideIndex = 0;
-    this._updatePager();
+      // Initialize the slide index to the first page and update the pager
+      this.slideIndex = 0;
+      this._updatePager();
 
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
-  };
+      // Listen for drag and release events
+      window.ionic.onGesture('drag', function(e) {
+        _this._handleDrag(e);
+      }, this.el);
+      window.ionic.onGesture('release', function(e) {
+        _this._handleEndDrag(e);
+      }, this.el);
+    },
 
-  ionic.views.SlideBox.prototype = {
     /**
      * Tell the pager to update itself if content is added or
      * removed. 
@@ -323,6 +323,6 @@
         }
       });
     }
-  };
+  });
 
 })(window.ionic);
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
index f5d2a09543..d510e77d1c 100644
--- a/js/views/toggleView.js
+++ b/js/views/toggleView.js
@@ -1,14 +1,13 @@
 (function(ionic) {
 'use strict';
 
-  ionic.views.Toggle = function(opts) {
-    this.el = opts.el;
-    this.checkbox = opts.checkbox;
-    this.handle = opts.handle;
-    this.openPercent = -1;
-  };
-
-  ionic.views.Toggle.prototype = {
+  ionic.views.Toggle = ionic.views.View.inherit({
+    initialize: function(opts) {
+      this.el = opts.el;
+      this.checkbox = opts.checkbox;
+      this.handle = opts.handle;
+      this.openPercent = -1;
+    },
 
     tap: function(e) {
       this.val( !this.checkbox.checked );
@@ -59,6 +58,6 @@
       return this.checkbox.checked;
     }
 
-  };
+  });
 
 })(ionic);
diff --git a/test/slideBox.html b/test/slideBox.html
index 262977a937..d0347c91e0 100644
--- a/test/slideBox.html
+++ b/test/slideBox.html
@@ -8,7 +8,7 @@
     <link href="../dist/css/ionic.css" rel="stylesheet">
     <style>
       #slide-box {
-        max-height: 200px;
+        max-height: 400px;
       }
     </style>
   </head>