From 29569cac81409c4bb1235b19dbb963e3b8125dad Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Mon, 23 Sep 2013 11:56:14 -0500
Subject: [PATCH] renamed .content-padded to just .padded

---
 example/events.html                |   2 +-
 example/events/drag.html           |   2 +-
 example/login/index.html           |   2 +-
 example/toderp/index.html          |   6 +-
 ext/simple/toggle.js               |   5 +
 hacking/sideMenu.html              |   2 +-
 js/controllers/toggleController.js | 193 +++++++++++++++++++++++++++++
 scss/ionic.scss                    |   1 -
 scss/ionic/_form.scss              |   2 +-
 scss/ionic/_menu.scss              |  11 --
 scss/ionic/_scaffolding.scss       |  16 +--
 scss/ionic/_util.scss              |  13 ++
 test/alerts.html                   |   2 +-
 test/button-groups.html            |   2 +-
 test/buttons.html                  |   2 +-
 test/footers.html                  |   2 +-
 test/forms.html                    |   2 +-
 test/grids.html                    |   2 +-
 test/headers.html                  |   2 +-
 test/image-swipe.html              |   2 +-
 test/index.html                    |   2 +-
 test/input-slider.html             |   2 +-
 test/input-text.html               |   6 +-
 test/input-textarea.html           |   6 +-
 test/menu_controller.html          |   2 +-
 test/menus.html                    |   2 +-
 test/modals.html                   |   2 +-
 test/panels.html                   |   2 +-
 test/popovers.html                 |   2 +-
 test/pull-to-refresh.html          |   2 +-
 test/tab-bars.html                 |   2 +-
 test/type.html                     |   2 +-
 32 files changed, 244 insertions(+), 59 deletions(-)
 create mode 100644 ext/simple/toggle.js
 create mode 100644 js/controllers/toggleController.js
 create mode 100644 scss/ionic/_util.scss
diff --git a/example/events.html b/example/events.html
index 29e7e48db8..56e2e11eb3 100644
--- a/example/events.html
+++ b/example/events.html
@@ -35,7 +35,7 @@
     </style>
   </head>
   <body>
-    <div class="content content-padded">
+    <div class="content padded">
       <a href="#" id="tap-button" class="button button-success">Tap me!</a>
       <a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
       <div id="remove-box" class="relative">
diff --git a/example/events/drag.html b/example/events/drag.html
index ba831aec8c..c03834f884 100644
--- a/example/events/drag.html
+++ b/example/events/drag.html
@@ -16,7 +16,7 @@
     </style>
   </head>
   <body>
-    <div class="content content-padded">
+    <div class="content padded">
       <div id="drag-me">Drag me around!</div>
     </div>
     <script src="../../js/utils.js"></script>
diff --git a/example/login/index.html b/example/login/index.html
index 9c4d6d8efc..e2860a71dd 100644
--- a/example/login/index.html
+++ b/example/login/index.html
@@ -33,7 +33,7 @@
       <header class="bar bar-header bar-danger">
         <h1 class="title">Sign up for your account</h1>
       </header>
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <form class="form-horizontal">
           <label class="input-wrapper row-fluid">
             <span class="input-label col-xs-4">Full name</span>
diff --git a/example/toderp/index.html b/example/toderp/index.html
index a63d2c7248..178f3295f1 100644
--- a/example/toderp/index.html
+++ b/example/toderp/index.html
@@ -32,7 +32,7 @@
       <div id="start" ng-switch-when="splash" class="pane">
       </div>
       <div id="login" ng-switch-when="login" ng-controller="LoginCtrl" class="pane">
-        <main class="content content-padded has-header">
+        <main class="content padded has-header">
           <div class="container" style="text-align: center">
             <h1>ToDerp</h1>
             <h3>Finish your Top Three Tasks Today</h3>
@@ -62,7 +62,7 @@
           <a href="#" class="button" ng-click="setScreen('login')">Back</a>
           <h1 class="title">Sign up (it's free!)</h1>
         </header>
-        <main class="content content-padded has-header">
+        <main class="content padded has-header">
           <form class="form-horizontal" ng-submit="trySignup(signupForm)">
             <div class="input-group inset">
               <label class="input-wrapper row">
@@ -87,7 +87,7 @@
           <a href="#" class="button button-icon"><i class="icon-reorder"></i></a>
           <h1 class="title">Your Tasks</h1>
         </header>
-        <main class="content content-padded has-header">
+        <main class="content padded has-header">
           <form ng-submit="addTask(task)">
             <input type="text" ng-model="task.text">
             <button type="submit" class="button button-block button-success">Add</button>
diff --git a/ext/simple/toggle.js b/ext/simple/toggle.js
new file mode 100644
index 0000000000..fb234ec755
--- /dev/null
+++ b/ext/simple/toggle.js
@@ -0,0 +1,5 @@
+(function(window, document, ionic) {
+
+  
+
+})(this, document, ionic);
diff --git a/hacking/sideMenu.html b/hacking/sideMenu.html
index 47db5568ca..a28929f598 100644
--- a/hacking/sideMenu.html
+++ b/hacking/sideMenu.html
@@ -17,7 +17,7 @@
         <h1 class="title">Tab Bars</h1>
       </header>
 
-      <main class="has-header content content-padded">
+      <main class="has-header content padded">
         <h1>Swipe me, side to side</h1>
       </main>
     </section>
diff --git a/js/controllers/toggleController.js b/js/controllers/toggleController.js
new file mode 100644
index 0000000000..5bb3482397
--- /dev/null
+++ b/js/controllers/toggleController.js
@@ -0,0 +1,193 @@
+(function(ionic) {
+
+ionic.controllers = ionic.controllers || {};
+
+ionic.controllers.SideMenuController = function(options) {
+  var _this = this;
+
+
+  this.left = options.left;
+  this.right = options.right;
+  this.content = options.content;
+    
+  this._rightShowing = false;
+  this._leftShowing = false;
+
+  this.content.onDrag = function(e) {
+    _this._handleDrag(e);
+  };
+
+  this.content.endDrag = function(e) {
+    _this._endDrag(e);
+  };
+
+  /*
+  // Bind release and drag listeners
+  window.ion.onGesture('release', function(e) {
+    _this._endDrag(e);
+  }, this.center);
+
+  window.ion.onGesture('drag', function(e) {
+    _this._handleDrag(e);
+  }, this.center);
+  */
+};
+
+ionic.controllers.SideMenuController.prototype = {
+  toggleLeft: function() {
+    var openAmount = this.getOpenAmount();
+    if(openAmount > 0) {
+      this.openPercentage(0);
+    } else {
+      this.openPercentage(100);
+    }
+  },
+  toggleRight: function() {
+    var openAmount = this.getOpenAmount();
+    if(openAmount < 0) {
+      this.openPercentage(0);
+    } else {
+      this.openPercentage(-100);
+    }
+  },
+  getOpenAmount: function() {
+    return this.content.getTranslateX() || 0;
+  },
+  getOpenRatio: function() {
+    var amount = this.getOpenAmount();
+    if(amount >= 0) {
+      return amount / this.left.width;
+    }
+    return amount / this.right.width;
+  },
+  getOpenPercentage: function() {
+    return this.getOpenRatio() * 100;
+  },
+  openPercentage: function(percentage) {
+    var p = percentage / 100;
+    var maxLeft = this.left.width;
+    var maxRight = this.right.width;
+    if(percentage >= 0) {
+      this.openAmount(maxLeft * p);
+    } else {
+      this.openAmount(maxRight * p);
+    }
+  },
+  openAmount: function(amount) {
+    var maxLeft = this.left.width;
+    var maxRight = this.right.width;
+
+    // Check if we can move to that side, depending if the left/right panel is enabled
+    if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
+      return;
+    }
+
+    if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
+      return;
+    }
+    
+    this.content.setTranslateX(amount);
+
+    if(amount >= 0) {
+      this._leftShowing = true;
+      this._rightShowing = false;
+
+      // Push the z-index of the right menu down
+      this.right.pushDown();
+      // Bring the z-index of the left menu up
+      this.left.bringUp();
+    } else {
+      this._rightShowing = true;
+      this._leftShowing = false;
+
+      // Bring the z-index of the right menu up
+      this.right.bringUp();
+      // Push the z-index of the left menu down
+      this.left.pushDown();
+    }
+  },
+  snapToRest: function(e) {
+    // We want to animate at the end of this
+    this.content.enableAnimation();
+    this._isDragging = false;
+
+    // Check how much the panel is open after the drag, and
+    // what the drag velocity is
+    var ratio = this.getOpenRatio();
+
+    if(ratio == 0)
+      return;
+
+    var velocityThreshold = 0.3;
+    var velocityX = e.gesture.velocityX
+    var direction = e.gesture.direction;
+
+    // Less than half, going left 
+    //if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
+    //this.openPercentage(0);
+    //}
+
+    // Going right, less than half, too slow (snap back)
+    if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
+      this.openPercentage(0);
+    }
+
+    // Going left, more than half, too slow (snap back)
+    else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
+      this.openPercentage(100);
+    }
+
+    // Going left, less than half, too slow (snap back)
+    else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
+      this.openPercentage(0);
+    }
+
+    // Going right, more than half, too slow (snap back)
+    else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
+      this.openPercentage(-100);
+    }
+    
+    // Going right, more than half, or quickly (snap open)
+    else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
+      this.openPercentage(100);
+    }
+    
+    // Going left, more than half, or quickly (span open)
+    else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
+      this.openPercentage(-100);
+    }
+    
+    // Snap back for safety
+    else {
+      this.openPercentage(0);
+    }
+  },
+  _endDrag: function(e) {
+    this.snapToRest(e);
+  },
+  _initDrag: function(e) {
+    this.content.disableAnimation();
+    this._isDragging = true;
+    this._startX = 0;
+    this._offsetX = 0;
+    this._lastX = 0;
+  },
+  _handleDrag: function(e) {
+    if(!this._isDragging) {
+      this._initDrag(e);
+
+      this._startX = e.gesture.touches[0].pageX;
+      this._lastX = this._startX;
+
+      this._offsetX = this.getOpenAmount();
+    }
+    //console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
+    var newX = this._offsetX + (this._lastX - this._startX);
+
+    this.openAmount(newX);
+
+    this._lastX = e.gesture.touches[0].pageX;
+  }
+};
+
+})(ionic = window.ionic || {});
diff --git a/scss/ionic.scss b/scss/ionic.scss
index eb6e7e0bdc..502ec60e2e 100644
--- a/scss/ionic.scss
+++ b/scss/ionic.scss
@@ -31,7 +31,6 @@
   "ionic/alerts",
   "ionic/card",
   "ionic/form",
-  "ionic/table",
   "ionic/toggle",
 
   // Animations
diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index 20b1f45352..167d08a1f4 100644
--- a/scss/ionic/_form.scss
+++ b/scss/ionic/_form.scss
@@ -53,7 +53,7 @@ textarea {
   border-bottom: $input-border-width solid $input-border-color;
   background-color: $input-bg;
 }
-.content-padded > .input-group,
+.padded > .input-group,
 .input-group.inset {
   @include border-radius($input-border-radius);
   border-right: $input-border-width solid $input-border-color;
diff --git a/scss/ionic/_menu.scss b/scss/ionic/_menu.scss
index a6e2b358ba..47f87a4875 100644
--- a/scss/ionic/_menu.scss
+++ b/scss/ionic/_menu.scss
@@ -28,14 +28,3 @@
   transition: transform $menu-animation-speed ease;
 }
 
-.ion-panel {
-  background: $menu-bg;
-}
-
-.ion-panel-left .ion-panel {
-  border-right: 1px solid $menu-inset-border-color;
-}
-
-.ion-panel-right .ion-panel {
-  border-left: 1px solid $menu-inset-border-color;
-}
diff --git a/scss/ionic/_scaffolding.scss b/scss/ionic/_scaffolding.scss
index 2d11e7e182..469501fcc6 100644
--- a/scss/ionic/_scaffolding.scss
+++ b/scss/ionic/_scaffolding.scss
@@ -40,24 +40,14 @@ body {
   bottom: 0;
   left: 0;
   overflow: auto;
-  // TODO: Fix the dynamic content height issue
-  //height: 100%;
 }
 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
    Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
-.content > *, .content-padded > * {
+.content > * {
   -webkit-transform: translateZ(0px);
           transform: translateZ(0px);
 }
 
-.content-padded {
-  padding: $content-padding;
-}
-
-.inset {
-  margin: $inset-margin;
-}
-
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
 .has-header {
@@ -73,10 +63,6 @@ body {
   bottom: $tabs-height;
 }
 
-.rounded {
-  border-radius: $border-radius-base;
-}
-
 .page, .full-section {
   position: fixed;
   top: 0;
diff --git a/scss/ionic/_util.scss b/scss/ionic/_util.scss
new file mode 100644
index 0000000000..f408e78f9c
--- /dev/null
+++ b/scss/ionic/_util.scss
@@ -0,0 +1,13 @@
+
+
+.padded {
+  padding: $content-padding;
+}
+
+.inset {
+  margin: $inset-margin;
+}
+
+.rounded {
+  border-radius: $border-radius-base;
+}
\ No newline at end of file
diff --git a/test/alerts.html b/test/alerts.html
index 86c32e1535..1d411a6975 100644
--- a/test/alerts.html
+++ b/test/alerts.html
@@ -16,7 +16,7 @@
         <h1 class="title">Alerts</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
 
         <p class="alert">
           <strong>Warning!</strong> Best check yo self, you're not looking too good.
diff --git a/test/button-groups.html b/test/button-groups.html
index c8dbd42377..455e6801a8 100644
--- a/test/button-groups.html
+++ b/test/button-groups.html
@@ -16,7 +16,7 @@
         <h1 class="title">Button Group</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <p>
           <div class="button-group">
             <a class="button button-primary">Success</a>
diff --git a/test/buttons.html b/test/buttons.html
index 66b0ecf808..5c93fb92bd 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -16,7 +16,7 @@
         <h1 class="title">Buttons</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <p>
           <a class="button button-default">Default</a>
           <a class="button button-secondary">Secondary</a>
diff --git a/test/footers.html b/test/footers.html
index 86793f2c4e..b868c00aa0 100644
--- a/test/footers.html
+++ b/test/footers.html
@@ -16,7 +16,7 @@
         <h1 class="title">Footer</h1>
       </header>
 
-      <main class="content content-padded has-header has-footer">
+      <main class="content padded has-header has-footer">
         <p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
         <p>Content element must have "has-footer" as a classname.</p>
         <ul>
diff --git a/test/forms.html b/test/forms.html
index 1a2d4713df..a5c99ab961 100644
--- a/test/forms.html
+++ b/test/forms.html
@@ -16,7 +16,7 @@
         <h1 class="title">Forms</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <h2>Default form layout</h2>
         <form>
diff --git a/test/grids.html b/test/grids.html
index 1134f30f1d..7f26c02f3c 100644
--- a/test/grids.html
+++ b/test/grids.html
@@ -16,7 +16,7 @@
         <h1 class="title">Grids</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/headers.html b/test/headers.html
index 0a4defb1a0..288af953f7 100644
--- a/test/headers.html
+++ b/test/headers.html
@@ -41,7 +41,7 @@
         <a class="button">This</a>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <p>Content element must have "has-header" as a classname.</p>
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/image-swipe.html b/test/image-swipe.html
index 14ba2c16d3..27f96a8216 100644
--- a/test/image-swipe.html
+++ b/test/image-swipe.html
@@ -16,7 +16,7 @@
         <h1 class="title">Image Swipe</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/index.html b/test/index.html
index 2e12a11099..2ba15fa602 100644
--- a/test/index.html
+++ b/test/index.html
@@ -16,7 +16,7 @@
         <h1 class="title">Ionic Tests</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <p><a class="button button-block button-default" href="alerts.html">Alerts</a></p>
         <p><a class="button button-block button-default" href="buttons.html">Buttons</a></p>
         <p><a class="button button-block button-default" href="button-groups.html">Button Groups</a></p>
diff --git a/test/input-slider.html b/test/input-slider.html
index d740cb0482..4fb4ea68fd 100644
--- a/test/input-slider.html
+++ b/test/input-slider.html
@@ -16,7 +16,7 @@
         <h1 class="title">Input: Slider</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/input-text.html b/test/input-text.html
index cac5c3ae48..7630eb9509 100644
--- a/test/input-text.html
+++ b/test/input-text.html
@@ -48,7 +48,7 @@
           </label>
         </div>
 
-        <div class="content-padded">
+        <div class="padded">
 
           <h3>Default Text Input, Not Inset, With Content Padding</h3>
           <div class="input-group">
@@ -105,7 +105,7 @@
           </label>
         </div>
 
-        <div class="content-padded">
+        <div class="padded">
 
           <h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
           <div class="input-group">
@@ -168,7 +168,7 @@
           </label>
         </div>
 
-        <div class="content-padded">
+        <div class="padded">
 
           <h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
           <div class="input-group stacked-label">
diff --git a/test/input-textarea.html b/test/input-textarea.html
index babf5f4f29..1102825752 100644
--- a/test/input-textarea.html
+++ b/test/input-textarea.html
@@ -45,7 +45,7 @@
           </label>
         </div>
 
-        <div class="content-padded">
+        <div class="padded">
 
           <h3>Default Text Area, Not Inset, With Content Padding</h3>
           <div class="input-group">
@@ -102,7 +102,7 @@
           </label>
         </div>
 
-        <div class="content-padded">
+        <div class="padded">
 
           <h3>Inline Label On Top Of Text Area, Not Inset, With Content Padding</h3>
           <div class="input-group">
@@ -165,7 +165,7 @@
           </label>
         </div>
 
-        <div class="content-padded">
+        <div class="padded">
 
           <h3>Stacked Label On Top Of Text Area, Not Inset, With Content Padding</h3>
           <div class="input-group stacked-label">
diff --git a/test/menu_controller.html b/test/menu_controller.html
index 46a6bbdd56..86b5c96fef 100644
--- a/test/menu_controller.html
+++ b/test/menu_controller.html
@@ -25,7 +25,7 @@
         </div>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">Panel title</h3>
diff --git a/test/menus.html b/test/menus.html
index 9dd2af700e..df5e650c47 100644
--- a/test/menus.html
+++ b/test/menus.html
@@ -22,7 +22,7 @@
         </button>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <p><button class="button button-primary" data-panel-toggle="my-other-left-panel">Other Left Side Panel</button></p>
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/modals.html b/test/modals.html
index bb8046f88a..ec2812b516 100644
--- a/test/modals.html
+++ b/test/modals.html
@@ -16,7 +16,7 @@
         <h1 class="title">Modals</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/panels.html b/test/panels.html
index b24b28c6a1..4c873aa76d 100644
--- a/test/panels.html
+++ b/test/panels.html
@@ -24,7 +24,7 @@
         </div>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">Panel title</h3>
diff --git a/test/popovers.html b/test/popovers.html
index 4cf351a71f..7973efc858 100644
--- a/test/popovers.html
+++ b/test/popovers.html
@@ -16,7 +16,7 @@
         <h1 class="title">Popovers</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/pull-to-refresh.html b/test/pull-to-refresh.html
index 357d15022d..583c89ba80 100644
--- a/test/pull-to-refresh.html
+++ b/test/pull-to-refresh.html
@@ -16,7 +16,7 @@
         <h1 class="title">Pull To Refresh</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         todo
         <p>Pull the content down to refresh.</p>
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
diff --git a/test/tab-bars.html b/test/tab-bars.html
index 76c2512d69..8af3938bee 100644
--- a/test/tab-bars.html
+++ b/test/tab-bars.html
@@ -21,7 +21,7 @@
         <h1 class="title">Tab Bars</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         content
       </main>
       
diff --git a/test/type.html b/test/type.html
index 6cc5da3004..c55478d14d 100644
--- a/test/type.html
+++ b/test/type.html
@@ -16,7 +16,7 @@
         <h1 class="title">Type</h1>
       </header>
 
-      <main class="content content-padded has-header">
+      <main class="content padded has-header">
         <h1>I'm an H1 Element</h1>
         <h2>I'm an H2 Element</h2>
         <h3>I'm an H3 Element</h3>
