From 09a4e6c0ef55ab205e4dcfa51b0d906be2a96062 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Thu, 29 Aug 2013 15:20:43 -0500
Subject: [PATCH] Temporarily putting things into controllers folder, added
 disable feature otp anel

---
 example/panel_controller.html          | 184 +----------------------
 js/controllers/ionic-leftrightpanel.js | 199 +++++++++++++++++++++++++
 2 files changed, 201 insertions(+), 182 deletions(-)
 create mode 100644 js/controllers/ionic-leftrightpanel.js

diff --git a/example/panel_controller.html b/example/panel_controller.html
index 796ff94327..3afd299f9e 100644
--- a/example/panel_controller.html
+++ b/example/panel_controller.html
@@ -245,194 +245,14 @@
 
     <script src="../../js/ionic-events.js"></script>
     <script src="../../js/ionic-gestures.js"></script>
+    <script src="../../js/controllers/ionic-leftrightpanel.js"></script>
     <script>
-      var LeftRightPanelViewController = function(options) {
-        var _this = this;
-
-        this.animateClass = options.animateClass;
-        this.left = options.left;
-        this.leftWidth = options.leftWidth;
-        this.right = options.right;
-        this.rightWidth = options.rightWidth;
-        this.center = options.center;
-          
-        this._rightShowing = false;
-        this._leftShowing = false;
-
-        // Bind release and drag listeners
-        window.ion.onGesture('release', function(e) {
-          _this._endDrag(e);
-        }, document.body);
-
-        window.ion.onGesture('drag', function(e) {
-          _this._handleDrag(e);
-        }, document.body);
-
-        window.ion.onGesture('swiperight', function(e) {
-           console.log('SWIPERIGHT');
-          //_this.openPercentage(-100);
-        }, document.body);
-        window.ion.onGesture('swipeleft', function(e) {
-           console.log('SWIPELEFT');
-          //_this.openPercentage(-100);
-        }, document.body);
-      };
-
-      LeftRightPanelViewController.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() {
-          var r = /translate3d\((-?\d+)px/;
-          var d = r.exec(this.center.style.webkitTransform);
-
-          if(d && d.length > 0) {
-            return parseInt(d[1]);
-          }
-          return 0;
-        },
-        getOpenRatio: function() {
-          var amount = this.getOpenAmount();
-          if(amount >= 0) {
-            return amount / this.leftWidth;
-          }
-          return amount / this.rightWidth;
-        },
-        openPercentage: function(percentage) {
-          var p = percentage / 100;
-          var maxLeft = this.leftWidth;
-          var maxRight = this.rightWidth;
-          if(percentage >= 0) {
-            this.openAmount(maxLeft * p);
-          } else {
-            this.openAmount(maxRight * p);
-          }
-        },
-        openAmount: function(amount) {
-          var maxLeft = this.leftWidth;
-          var maxRight = this.rightWidth;
-
-          if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
-            return;
-          }
-          
-          this.center.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
-
-          if(amount >= 0) {
-            this._leftShowing = true;
-            this._rightShowing = false;
-            this.right.style.display = 'none';
-            this.left.style.display = 'block';
-          } else {
-            this._rightShowing = true;
-            this._leftShowing = false;
-            this.right.style.display = 'block';
-            this.left.style.display = 'none';
-          }
-        },
-        snapToRest: function(e) {
-          // We want to animate at the end of this
-          this.center.classList.add(this.animateClass);
-          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.center.classList.remove(this.animateClass);
-          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;
-        }
-      };
-
       
       // Grab the sections
       var page = document.getElementById('page');
       var leftPanel = document.getElementById('my-left-panel');
       var rightPanel = document.getElementById('my-right-panel');
-      var controller = new LeftRightPanelViewController({
+      var controller = new ion.controllers.LeftRightPanelViewController({
         left: leftPanel,
         leftWidth: 270,
         right: rightPanel,
diff --git a/js/controllers/ionic-leftrightpanel.js b/js/controllers/ionic-leftrightpanel.js
new file mode 100644
index 0000000000..5fd910f424
--- /dev/null
+++ b/js/controllers/ionic-leftrightpanel.js
@@ -0,0 +1,199 @@
+/**
+ * The LeftRightPanelViewController makes it easy to have an interface
+ * with two hidden menus: one on the left, and one on the right.
+ *
+ * The main content supports dragging to show either panel, or the panel can be
+ * show/hidden through buttons elsewhere in the app.
+ *
+ * Either panel can be disabled based on the context in the app.
+ */
+(function(window, document, ion) {
+  ion.controllers = ion.controllers || {};
+
+  ion.controllers.LeftRightPanelViewController = function(options) {
+    var _this = this;
+
+    this.animateClass = options.animateClass;
+    this.left = options.left;
+    this.leftWidth = options.leftWidth;
+    this.right = options.right;
+    this.rightWidth = options.rightWidth;
+    this.center = options.center;
+      
+    this._rightShowing = false;
+    this._leftShowing = false;
+
+    this._isLeftEnabled = true;
+    this._isRightEnabled = true;
+
+    // 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);
+  };
+
+  ion.controllers.LeftRightPanelViewController.prototype = {
+    setIsLeftEnabled: function(isLeftEnabled) {
+      this._isLeftEnabled = isLeftEnabled;
+    },
+    setIsRightEnabled: function(isRightEnabled) {
+      this._isRightEnabled = isRightEnabled;
+    },
+    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() {
+      var r = /translate3d\((-?\d+)px/;
+      var d = r.exec(this.center.style.webkitTransform);
+
+      if(d && d.length > 0) {
+        return parseInt(d[1]);
+      }
+      return 0;
+    },
+    getOpenRatio: function() {
+      var amount = this.getOpenAmount();
+      if(amount >= 0) {
+        return amount / this.leftWidth;
+      }
+      return amount / this.rightWidth;
+    },
+    openPercentage: function(percentage) {
+      var p = percentage / 100;
+      var maxLeft = this.leftWidth;
+      var maxRight = this.rightWidth;
+      if(percentage >= 0) {
+        this.openAmount(maxLeft * p);
+      } else {
+        this.openAmount(maxRight * p);
+      }
+    },
+    openAmount: function(amount) {
+      var maxLeft = this.leftWidth;
+      var maxRight = this.rightWidth;
+
+      // Check if we can move to that side, depending if the left/right panel is enabled
+      if((!this._isLeftEnabled && amount > 0) || (!this._isRightEnabled && amount < 0)) {
+        return;
+      }
+
+      if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
+        return;
+      }
+      
+      this.center.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
+
+      if(amount >= 0) {
+        this._leftShowing = true;
+        this._rightShowing = false;
+        this.right.style.display = 'none';
+        this.left.style.display = 'block';
+      } else {
+        this._rightShowing = true;
+        this._leftShowing = false;
+        this.right.style.display = 'block';
+        this.left.style.display = 'none';
+      }
+    },
+    snapToRest: function(e) {
+      // We want to animate at the end of this
+      this.center.classList.add(this.animateClass);
+      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.center.classList.remove(this.animateClass);
+      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;
+    }
+  };
+
+})(this, document, ion = this.ion || {});