From c77128eeae82aaf0ac67335619ff5e31b78c5194 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Mon, 23 Sep 2013 00:07:41 -0500
Subject: [PATCH] Namespacing for controllers and views

---
 example/toderp/index.html            |   2 +-
 js/controllers/navController.js      | 179 +++++++-------
 js/controllers/sideMenuController.js | 358 ++++++++++++++-------------
 js/controllers/tabBarController.js   |   6 +-
 js/views/navBar.js                   |  63 +++--
 js/views/sideMenu.js                 |  41 +--
 js/views/tabBar.js                   |  10 +-
 test/tab-bars.html                   |   9 +-
 8 files changed, 339 insertions(+), 329 deletions(-)

diff --git a/example/toderp/index.html b/example/toderp/index.html
index 99d356bd75..0a4da84138 100644
--- a/example/toderp/index.html
+++ b/example/toderp/index.html
@@ -20,7 +20,7 @@
 
     <script src="../../js/events.js"></script>
     <script src="../../js/gestures.js"></script>
-    <script src="../../js/controllers/sideMenuViewController.js"></script>
+    <script src="../../js/controllers/sideMenuController.js"></script>
     
     <script src="js/toderp.js"></script>
     <style>
diff --git a/js/controllers/navController.js b/js/controllers/navController.js
index 2546ae5c2c..5c5ba1e052 100644
--- a/js/controllers/navController.js
+++ b/js/controllers/navController.js
@@ -1,105 +1,108 @@
 (function(ionic) {
-  NavController = function(opts) {
-    var _this = this;
 
-    this.navBar = opts.navBar;
-    this.content = opts.content;
-    this.controllers = opts.controllers || [];
+ionic.controllers = ionic.controllers || {};
+
+ionic.controllers.NavController = function(opts) {
+  var _this = this;
+
+  this.navBar = opts.navBar;
+  this.content = opts.content;
+  this.controllers = opts.controllers || [];
+
+  this._updateNavBar();
+
+  // TODO: Is this the best way?
+  this.navBar.shouldGoBack = function() {
+    _this.pop();
+  }
+};
+
+ionic.controllers.NavController.prototype = {
+  getControllers: function() {
+    return this.controllers;
+  },
+  getTopController: function() {
+    return this.controllers[this.controllers.length-1];
+  },
+  push: function(controller) {
+    var last = this.controllers[this.controllers.length - 1];
+
+    this.controllers.push(controller);
+
+    // Indicate we are switching controllers
+    var shouldSwitch = this.switchingController && this.switchingController(controller) || true;
+
+    // Return if navigation cancelled
+    if(shouldSwitch === false)
+      return;
+
+    // Actually switch the active controllers
+
+    // Remove the old one
+    //last && last.detach();
+    if(last) {
+      last.isVisible = false;
+      last.visibilityChanged && last.visibilityChanged();
+    }
+
+    // Grab the top controller on the stack
+    var next = this.controllers[this.controllers.length - 1];
+
+    // TODO: No DOM stuff here
+    //this.content.el.appendChild(next.el);
+    next.isVisible = true;
+    next.visibilityChanged && next.visibilityChanged();
 
     this._updateNavBar();
 
-    // TODO: Is this the best way?
-    this.navBar.shouldGoBack = function() {
-      _this.pop();
+    return controller;
+  },
+
+  pop: function() {
+    var next, last;
+
+    // Make sure we keep one on the stack at all times
+    if(this.controllers.length < 2) {
+      return;
     }
-  };
 
-  NavController.prototype = {
-    getControllers: function() {
-      return this.controllers;
-    },
-    getTopController: function() {
-      return this.controllers[this.controllers.length-1];
-    },
-    push: function(controller) {
-      var last = this.controllers[this.controllers.length - 1];
+    // Grab the controller behind the top one on the stack
+    last = this.controllers.pop();
+    if(last) {
+      last.isVisible = false;
+      last.visibilityChanged && last.visibilityChanged();
+    }
+    
+    // Remove the old one
+    //last && last.detach();
 
-      this.controllers.push(controller);
+    next = this.controllers[this.controllers.length - 1];
 
-      // Indicate we are switching controllers
-      var shouldSwitch = this.switchingController && this.switchingController(controller) || true;
+    // TODO: No DOM stuff here
+    //this.content.el.appendChild(next.el);
+    next.isVisible = true;
+    next.visibilityChanged && next.visibilityChanged();
 
-      // Return if navigation cancelled
-      if(shouldSwitch === false)
-        return;
+    // Switch to it (TODO: Animate or such things here)
 
-      // Actually switch the active controllers
+    this._updateNavBar();
 
-      // Remove the old one
-      //last && last.detach();
-      if(last) {
-        last.isVisible = false;
-        last.visibilityChanged && last.visibilityChanged();
-      }
+    return last;
+  },
 
-      // Grab the top controller on the stack
-      var next = this.controllers[this.controllers.length - 1];
+  _updateNavBar: function() {
+    if(!this.getTopController()) {
+      return;
+    }
 
-      // TODO: No DOM stuff here
-      //this.content.el.appendChild(next.el);
-      next.isVisible = true;
-      next.visibilityChanged && next.visibilityChanged();
+    this.navBar.setTitle(this.getTopController().title);
 
-      this._updateNavBar();
+    if(this.controllers.length > 1) {
+      this.navBar.showBackButton(true);
+    } else {
+      this.navBar.showBackButton(false);
+    }
+  },
 
-      return controller;
-    },
-
-    pop: function() {
-      var next, last;
-
-      // Make sure we keep one on the stack at all times
-      if(this.controllers.length < 2) {
-        return;
-      }
-
-      // Grab the controller behind the top one on the stack
-      last = this.controllers.pop();
-      if(last) {
-        last.isVisible = false;
-        last.visibilityChanged && last.visibilityChanged();
-      }
-      
-      // Remove the old one
-      //last && last.detach();
-
-      next = this.controllers[this.controllers.length - 1];
-
-      // TODO: No DOM stuff here
-      //this.content.el.appendChild(next.el);
-      next.isVisible = true;
-      next.visibilityChanged && next.visibilityChanged();
-
-      // Switch to it (TODO: Animate or such things here)
-
-      this._updateNavBar();
-
-      return last;
-    },
-
-    _updateNavBar: function() {
-      if(!this.getTopController()) {
-        return;
-      }
-
-      this.navBar.setTitle(this.getTopController().title);
-
-      if(this.controllers.length > 1) {
-        this.navBar.showBackButton(true);
-      } else {
-        this.navBar.showBackButton(false);
-      }
-    },
-
-  };
+};
 })(ionic = window.ionic || {});
diff --git a/js/controllers/sideMenuController.js b/js/controllers/sideMenuController.js
index 52db8762e2..5bb3482397 100644
--- a/js/controllers/sideMenuController.js
+++ b/js/controllers/sideMenuController.js
@@ -1,191 +1,193 @@
 (function(ionic) {
 
-  SideMenuController = function(options) {
-    var _this = this;
+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.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);
-    */
+  this.content.onDrag = function(e) {
+    _this._handleDrag(e);
   };
 
-  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;
+  this.content.endDrag = function(e) {
+    _this._endDrag(e);
+  };
 
-      // 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;
-      }
+  /*
+  // Bind release and drag listeners
+  window.ion.onGesture('release', function(e) {
+    _this._endDrag(e);
+  }, this.center);
 
-      if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
-        return;
-      }
-      
-      this.content.setTranslateX(amount);
+  window.ion.onGesture('drag', function(e) {
+    _this._handleDrag(e);
+  }, this.center);
+  */
+};
 
-      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.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/js/controllers/tabBarController.js b/js/controllers/tabBarController.js
index 1be132017c..49ea03c0aa 100644
--- a/js/controllers/tabBarController.js
+++ b/js/controllers/tabBarController.js
@@ -1,6 +1,8 @@
 (function(ionic) {
 
-TabBarController = function(options) {
+ionic.controllers = ionic.controllers || {};
+
+ionic.controllers.TabBarController = function(options) {
   this.tabBar = options.tabBar;
 
   this._bindEvents();
@@ -20,7 +22,7 @@ TabBarController = function(options) {
   this.setSelectedController(0);
 };
 
-TabBarController.prototype = {
+ionic.controllers.TabBarController.prototype = {
   // Start listening for events on our tab bar
   _bindEvents: function() {
     var _this = this;
diff --git a/js/views/navBar.js b/js/views/navBar.js
index bc70aabe90..7569ca11a1 100644
--- a/js/views/navBar.js
+++ b/js/views/navBar.js
@@ -1,42 +1,41 @@
 (function(ionic) {
+ionic.ui.NavBar = function(opts) {
+  this.el = opts.el;
 
-  NavBar = function(opts) {
-    this.el = opts.el;
+  this._titleEl = this.el.querySelector('.title');
+};
 
-    this._titleEl = this.el.querySelector('.title');
-  };
+ionic.ui.NavBar.prototype = {
+  shouldGoBack: function() {},
 
-  NavBar.prototype = {
-    shouldGoBack: function() {},
+  setTitle: function(title) {
+    if(!this._titleEl) {
+      return;
+    }
+    this._titleEl.innerHTML = title;
+  },
 
-    setTitle: function(title) {
-      if(!this._titleEl) {
-        return;
-      }
-      this._titleEl.innerHTML = title;
-    },
+  showBackButton: function(shouldShow) {
+    var _this = this;
 
-    showBackButton: function(shouldShow) {
-      var _this = this;
+    if(!this._currentBackButton) {
+      var back = document.createElement('a');
+      back.className = 'button back';
+      back.innerHTML = 'Back';
 
-      if(!this._currentBackButton) {
-        var back = document.createElement('a');
-        back.className = 'button back';
-        back.innerHTML = 'Back';
-
-        this._currentBackButton = back;
-        this._currentBackButton.onclick = function(event) {
-          _this.shouldGoBack && _this.shouldGoBack();
-        }
-      }
-
-      if(shouldShow && !this._currentBackButton.parentNode) {
-        // Prepend the back button
-        this.el.insertBefore(this._currentBackButton, this.el.firstChild);
-      } else if(!shouldShow && this._currentBackButton.parentNode) {
-        // Remove the back button if it's there
-        this._currentBackButton.parentNode.removeChild(this._currentBackButton);
+      this._currentBackButton = back;
+      this._currentBackButton.onclick = function(event) {
+        _this.shouldGoBack && _this.shouldGoBack();
       }
     }
-  };
+
+    if(shouldShow && !this._currentBackButton.parentNode) {
+      // Prepend the back button
+      this.el.insertBefore(this._currentBackButton, this.el.firstChild);
+    } else if(!shouldShow && this._currentBackButton.parentNode) {
+      // Remove the back button if it's there
+      this._currentBackButton.parentNode.removeChild(this._currentBackButton);
+    }
+  }
+};
 })(ionic = window.ionic || {});
diff --git a/js/views/sideMenu.js b/js/views/sideMenu.js
index 5517e32a5f..f577331b3d 100644
--- a/js/views/sideMenu.js
+++ b/js/views/sideMenu.js
@@ -1,22 +1,25 @@
 (function(ionic) {
-  SideMenu = function(opts) {
-    this.el = opts.el;
-    this.width = opts.width;
-    this.isEnabled = opts.isEnabled || true;
-  };
 
-  SideMenu.prototype = {
-    getFullWidth: function() {
-      return this.width;
-    },
-    setIsEnabled: function(isEnabled) {
-      this.isEnabled = isEnabled;
-    },
-    bringUp: function() {
-      this.el.style.zIndex = 0;
-    },
-    pushDown: function() {
-      this.el.style.zIndex = -1;
-    }
-  };
+ionic.ui = ionic.ui || {};
+
+ionic.ui.SideMenu = function(opts) {
+  this.el = opts.el;
+  this.width = opts.width;
+  this.isEnabled = opts.isEnabled || true;
+};
+
+ionic.ui.SideMenu.prototype = {
+  getFullWidth: function() {
+    return this.width;
+  },
+  setIsEnabled: function(isEnabled) {
+    this.isEnabled = isEnabled;
+  },
+  bringUp: function() {
+    this.el.style.zIndex = 0;
+  },
+  pushDown: function() {
+    this.el.style.zIndex = -1;
+  }
+};
 })(ionic = window.ionic || {});
diff --git a/js/views/tabBar.js b/js/views/tabBar.js
index 5e5e00e13b..5d4fb35e28 100644
--- a/js/views/tabBar.js
+++ b/js/views/tabBar.js
@@ -1,11 +1,13 @@
 (function(ionic) {
 
-TabBarItem = function(el) {
+ionic.ui = ionic.ui || {};
+
+ionic.ui.TabBarItem = function(el) {
   this.el = el;
 
   this._buildItem();
 };
-TabBarItem.prototype = {
+ionic.ui.TabBarItem.prototype = {
   // Factory for creating an item from a given javascript object
   create: function(itemData) {
     var item = document.createElement('a');
@@ -74,7 +76,7 @@ TabBarItem.prototype = {
   }
 };
 
-TabBar = function(opts) {
+ionic.ui.TabBar = function(opts) {
   this.el = opts.el;
    
   this.items = [];
@@ -82,7 +84,7 @@ TabBar = function(opts) {
   this._buildItems();
 };
 
-TabBar.prototype = {
+ionic.ui.TabBar.prototype = {
   // get all the items for the TabBar
   getItems: function() {
     return this.items;
diff --git a/test/tab-bars.html b/test/tab-bars.html
index d863c38571..e9640050cb 100644
--- a/test/tab-bars.html
+++ b/test/tab-bars.html
@@ -134,14 +134,13 @@
 
     </section>
 
-    <script src="../../js/ionic-events.js"></script>
-    <script src="../../js/ionic-gestures.js"></script>
-    <script src="../../js/controllers/ionic-tabcontroller.js"></script>
+    <script src="../../js/events.js"></script>
+    <script src="../../js/gestures.js"></script>
+    <script src="../../js/controllers/tabBarController.js"></script>
     <script>
-      
       // Grab the sections
       var tab = document.getElementById('tab-bar');
-      var controller = new ion.controllers.TabController({
+      var controller = new ionic.controllers.TabController({
         tab: tab
       });
     </script>