simple toggle stuff

dist/ionic-simple.js

@@ -7,35 +7,54 @@
     ionic.Components.push(instance);
   };
 
-  function onTap(e) {
+  ionic.component = function(el) {
+    if(el) {
+      for(var x = 0; x < ionic.Components.length; x++) {
+        if( ionic.Components[x].isComponent(el) ) {
+          // this element is a component, init its view
+          return ionic.Components[x].init(el);
+        }
+      }
+    }
+  };
+
+  function componentEvent(eventName, e) {
     if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
 
     var 
-    x,
+    component,
-    e = e.gesture.srcEvent,
+    el = e.gesture.srcEvent.target; // get the original source event's target
-    el = e.target,
-    component;
 
     while(el) {
       // climb up the tree looking to see if the target
       // is or is in a registered component
-      for(x = 0; x < ionic.Components.length; x++) {
+      component = ionic.component(el);
-        if( ionic.Components[x].isComponent(el) ) {
+      if(component) {
-          // this element is a component
+        component[eventName] && component[eventName](e.gesture.srcEvent);
-          // create its view and call it's event handler
+        return;
-          component = ionic.Components[x].create(el);
-          component && component.tap && component.tap(e);
-          return;
-        }
       }
-
       // not sure if this element is a component yet,
       // keep climbing up the tree and check again
       el = el.parentElement;
     }
   }
+
+  function onTap(e) {
+    componentEvent("tap", e);
+  }
   ionic.on("tap", onTap, window);
 
+  function onDrag(e) {
+    componentEvent("drag", e);
+  }
+  ionic.on("drag", onDrag, window);
+
+  function onRelease(e) {
+    componentEvent("release", e);
+  }
+  ionic.on("release", onRelease, window);
+
+
   function initalize() {
     // remove the ready listeners
     document.removeEventListener( "DOMContentLoaded", initalize, false );
@@ -78,20 +97,34 @@
   ionic.registerComponent({
 
     isComponent: function(el) {
+      // this is a Toggle component if it has a "toggle" classname
       return el.classList.contains("toggle");
     },
 
-    create: function(el) {
+    init: function(el) {
       if(el) {
 
+        // check if we've already created a Toggle instance for this element
         if(!el._instance) {
 
-         el._instance = new ionic.views.Toggle({ 
+          // find all the required elements that make up a toggle
+          var opts = { 
             el: el,
             checkbox: el.querySelector("input[type='checkbox']"),
             track: el.querySelector(".track"),
             handle: el.querySelector(".handle")
-          });
+          };
+
+          // validate its a well formed toggle with the required pieces
+          if(!opts.checkbox || !opts.track || !opts.handle) {
+            return;
+          }
+
+          // ensure the handle is draggable
+          opts.handle.draggable = true;
+
+          // initialize an instance of a Toggle
+          el._instance = new ionic.views.Toggle(opts);
         }
 
         return el._instance;

dist/ionic.js

@@ -1666,48 +1666,50 @@ window.ionic = {
     }
   };
 })(window.ionic);
-;(function(ionic) {
+;
+(function(ionic) {
 
-ionic.views.NavBar = function(opts) {
+  ionic.views.NavBar = function(opts) {
-  this.el = opts.el;
+    this.el = opts.el;
 
-  this._titleEl = this.el.querySelector('.title');
+    this._titleEl = this.el.querySelector('.title');
-};
+  };
 
-ionic.views.NavBar.prototype = {
+  ionic.views.NavBar.prototype = {
-  shouldGoBack: function() {},
+    shouldGoBack: function() {},
 
-  setTitle: function(title) {
+    setTitle: function(title) {
-    if(!this._titleEl) {
+      if(!this._titleEl) {
-      return;
+        return;
-    }
+      }
-    this._titleEl.innerHTML = title;
+      this._titleEl.innerHTML = title;
-  },
+    },
 
-  showBackButton: function(shouldShow) {
+    showBackButton: function(shouldShow) {
-    var _this = this;
+      var _this = this;
 
-    if(!this._currentBackButton) {
+      if(!this._currentBackButton) {
-      var back = document.createElement('a');
+        var back = document.createElement('a');
-      back.className = 'button back';
+        back.className = 'button back';
-      back.innerHTML = 'Back';
+        back.innerHTML = 'Back';
 
-      this._currentBackButton = back;
+        this._currentBackButton = back;
-      this._currentBackButton.onclick = function(event) {
+        this._currentBackButton.onclick = function(event) {
-        _this.shouldGoBack && _this.shouldGoBack();
+          _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);
       }
     }
+  };
 
-    if(shouldShow && !this._currentBackButton.parentNode) {
+})(ionic);
-      // 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);
-    }
-  }
-};
-})(window.ionic);
 ;(function(ionic) {
 
   ionic.views.HeaderBar = function(opts) {
@@ -1939,31 +1941,31 @@ ionic.views.TabBar.prototype = {
 };
 
 })(window.ionic);
-;(function(ionic) {
+;
+(function(ionic) {
 
-ionic.views = ionic.views || {};
+  ionic.views.SideMenu = function(opts) {
+    this.el = opts.el;
+    this.width = opts.width;
+    this.isEnabled = opts.isEnabled || true;
+  };
 
-ionic.views.SideMenu = function(opts) {
+  ionic.views.SideMenu.prototype = {
-  this.el = opts.el;
+    getFullWidth: function() {
-  this.width = opts.width;
+      return this.width;
-  this.isEnabled = opts.isEnabled || true;
+    },
-};
+    setIsEnabled: function(isEnabled) {
+      this.isEnabled = isEnabled;
+    },
+    bringUp: function() {
+      this.el.style.zIndex = 0;
+    },
+    pushDown: function() {
+      this.el.style.zIndex = -1;
+    }
+  };
 
-ionic.views.SideMenu.prototype = {
+})(ionic);
-  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;
-  }
-};
-})(window.ionic);
 ;
 (function(ionic) {
 
@@ -1977,10 +1979,13 @@ ionic.views.SideMenu.prototype = {
   ionic.views.Toggle.prototype = {
 
     tap: function(e) {
-      alert( this.isOn() );
+      
     },
 
-    isOn: function() {
+    val: function(value) {
+      if(value === true || value === false) {
+        this.checkbox.checked = value;
+      }
       return this.checkbox.checked;
     }
 
@@ -2093,199 +2098,197 @@ ionic.controllers.NavController.prototype = {
 
 };
 })(window.ionic);
-;(function(ionic) {
+;
+(function(ionic) {
 
-ionic.controllers = ionic.controllers || {};
+  ionic.controllers.SideMenuController = function(options) {
+    var self = this;
 
-ionic.controllers.SideMenuController = function(options) {
+    self.left = options.left;
-  var _this = this;
+    self.right = options.right;
+    self.content = options.content;
       
+    self._rightShowing = false;
+    self._leftShowing = false;
 
-  this.left = options.left;
+    this.content.onDrag = function(e) {
-  this.right = options.right;
+      self._handleDrag(e);
-  this.content = options.content;
+    };
 
-  this._rightShowing = false;
+    this.content.endDrag = function(e) {
-  this._leftShowing = false;
+      self._endDrag(e);
+    };
 
-  this.content.onDrag = function(e) {
+    /*
-    _this._handleDrag(e);
+    // Bind release and drag listeners
+    window.ion.onGesture('release', function(e) {
+      self._endDrag(e);
+    }, self.center);
+
+    window.ion.onGesture('drag', function(e) {
+      self._handleDrag(e);
+    }, self.center);
+    */
   };
 
-  this.content.endDrag = function(e) {
+  ionic.controllers.SideMenuController.prototype = {
-    _this._endDrag(e);
+    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);
-  // 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 || {});
 ;(function(ionic) {
 
 ionic.controllers = ionic.controllers || {};
@@ -2428,14 +2431,12 @@ ionic.controllers.TabBarController.prototype = {
 
   function tapPolyfill(e) {
     // if the source event wasn't from a touch event then don't use this polyfill
-    if(!e.gesture || e.gesture.pointerType !== "touch") return;
+    if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
 
     var 
     e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
     ele = e.target;
 
-    if(!e) return; 
-
     while(ele) {
       if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
         return inputTapPolyfill(ele, e);

ext/simple/init.js

@@ -7,35 +7,54 @@
     ionic.Components.push(instance);
   };
 
-  function onTap(e) {
+  ionic.component = function(el) {
+    if(el) {
+      for(var x = 0; x < ionic.Components.length; x++) {
+        if( ionic.Components[x].isComponent(el) ) {
+          // this element is a component, init its view
+          return ionic.Components[x].init(el);
+        }
+      }
+    }
+  };
+
+  function componentEvent(eventName, e) {
     if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
 
     var 
-    x,
+    component,
-    e = e.gesture.srcEvent,
+    el = e.gesture.srcEvent.target; // get the original source event's target
-    el = e.target,
-    component;
 
     while(el) {
       // climb up the tree looking to see if the target
       // is or is in a registered component
-      for(x = 0; x < ionic.Components.length; x++) {
+      component = ionic.component(el);
-        if( ionic.Components[x].isComponent(el) ) {
+      if(component) {
-          // this element is a component
+        component[eventName] && component[eventName](e.gesture.srcEvent);
-          // create its view and call it's event handler
+        return;
-          component = ionic.Components[x].create(el);
-          component && component.tap && component.tap(e);
-          return;
-        }
       }
-
       // not sure if this element is a component yet,
       // keep climbing up the tree and check again
       el = el.parentElement;
     }
   }
+
+  function onTap(e) {
+    componentEvent("tap", e);
+  }
   ionic.on("tap", onTap, window);
 
+  function onDrag(e) {
+    componentEvent("drag", e);
+  }
+  ionic.on("drag", onDrag, window);
+
+  function onRelease(e) {
+    componentEvent("release", e);
+  }
+  ionic.on("release", onRelease, window);
+
+
   function initalize() {
     // remove the ready listeners
     document.removeEventListener( "DOMContentLoaded", initalize, false );

ext/simple/toggle.js

@@ -4,20 +4,34 @@
   ionic.registerComponent({
 
     isComponent: function(el) {
+      // this is a Toggle component if it has a "toggle" classname
       return el.classList.contains("toggle");
     },
 
-    create: function(el) {
+    init: function(el) {
       if(el) {
 
+        // check if we've already created a Toggle instance for this element
         if(!el._instance) {
 
-         el._instance = new ionic.views.Toggle({ 
+          // find all the required elements that make up a toggle
+          var opts = { 
             el: el,
             checkbox: el.querySelector("input[type='checkbox']"),
             track: el.querySelector(".track"),
             handle: el.querySelector(".handle")
-          });
+          };
+
+          // validate its a well formed toggle with the required pieces
+          if(!opts.checkbox || !opts.track || !opts.handle) {
+            return;
+          }
+
+          // ensure the handle is draggable
+          opts.handle.draggable = true;
+
+          // initialize an instance of a Toggle
+          el._instance = new ionic.views.Toggle(opts);
         }
 
         return el._instance;

js/controllers/sideMenuController.js

@@ -1,193 +1,191 @@
+
 (function(ionic) {
 
-ionic.controllers = ionic.controllers || {};
+  ionic.controllers.SideMenuController = function(options) {
+    var self = this;
 
-ionic.controllers.SideMenuController = function(options) {
+    self.left = options.left;
-  var _this = this;
+    self.right = options.right;
+    self.content = options.content;
       
+    self._rightShowing = false;
+    self._leftShowing = false;
 
-  this.left = options.left;
+    this.content.onDrag = function(e) {
-  this.right = options.right;
+      self._handleDrag(e);
-  this.content = options.content;
+    };
 
-  this._rightShowing = false;
+    this.content.endDrag = function(e) {
-  this._leftShowing = false;
+      self._endDrag(e);
+    };
 
-  this.content.onDrag = function(e) {
+    /*
-    _this._handleDrag(e);
+    // Bind release and drag listeners
+    window.ion.onGesture('release', function(e) {
+      self._endDrag(e);
+    }, self.center);
+
+    window.ion.onGesture('drag', function(e) {
+      self._handleDrag(e);
+    }, self.center);
+    */
   };
 
-  this.content.endDrag = function(e) {
+  ionic.controllers.SideMenuController.prototype = {
-    _this._endDrag(e);
+    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);
-  // 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 || {});

js/tapPolyfill.js

@@ -16,14 +16,12 @@
 
   function tapPolyfill(e) {
     // if the source event wasn't from a touch event then don't use this polyfill
-    if(!e.gesture || e.gesture.pointerType !== "touch") return;
+    if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
 
     var 
     e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
     ele = e.target;
 
-    if(!e) return; 
-
     while(ele) {
       if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
         return inputTapPolyfill(ele, e);

js/views/navBar.js

@@ -1,42 +1,44 @@
+
 (function(ionic) {
 
-ionic.views.NavBar = function(opts) {
+  ionic.views.NavBar = function(opts) {
-  this.el = opts.el;
+    this.el = opts.el;
 
-  this._titleEl = this.el.querySelector('.title');
+    this._titleEl = this.el.querySelector('.title');
-};
+  };
 
-ionic.views.NavBar.prototype = {
+  ionic.views.NavBar.prototype = {
-  shouldGoBack: function() {},
+    shouldGoBack: function() {},
 
-  setTitle: function(title) {
+    setTitle: function(title) {
-    if(!this._titleEl) {
+      if(!this._titleEl) {
-      return;
+        return;
-    }
+      }
-    this._titleEl.innerHTML = title;
+      this._titleEl.innerHTML = title;
-  },
+    },
 
-  showBackButton: function(shouldShow) {
+    showBackButton: function(shouldShow) {
-    var _this = this;
+      var _this = this;
 
-    if(!this._currentBackButton) {
+      if(!this._currentBackButton) {
-      var back = document.createElement('a');
+        var back = document.createElement('a');
-      back.className = 'button back';
+        back.className = 'button back';
-      back.innerHTML = 'Back';
+        back.innerHTML = 'Back';
 
-      this._currentBackButton = back;
+        this._currentBackButton = back;
-      this._currentBackButton.onclick = function(event) {
+        this._currentBackButton.onclick = function(event) {
-        _this.shouldGoBack && _this.shouldGoBack();
+          _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);
       }
     }
+  };
 
-    if(shouldShow && !this._currentBackButton.parentNode) {
+})(ionic);
-      // 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);
-    }
-  }
-};
-})(window.ionic);

js/views/sideMenu.js

@@ -1,25 +1,25 @@
+
 (function(ionic) {
 
-ionic.views = ionic.views || {};
+  ionic.views.SideMenu = function(opts) {
+    this.el = opts.el;
+    this.width = opts.width;
+    this.isEnabled = opts.isEnabled || true;
+  };
 
-ionic.views.SideMenu = function(opts) {
+  ionic.views.SideMenu.prototype = {
-  this.el = opts.el;
+    getFullWidth: function() {
-  this.width = opts.width;
+      return this.width;
-  this.isEnabled = opts.isEnabled || true;
+    },
-};
+    setIsEnabled: function(isEnabled) {
+      this.isEnabled = isEnabled;
+    },
+    bringUp: function() {
+      this.el.style.zIndex = 0;
+    },
+    pushDown: function() {
+      this.el.style.zIndex = -1;
+    }
+  };
 
-ionic.views.SideMenu.prototype = {
+})(ionic);
-  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;
-  }
-};
-})(window.ionic);

js/views/toggleView.js

@@ -11,10 +11,13 @@
   ionic.views.Toggle.prototype = {
 
     tap: function(e) {
-      alert( this.isOn() );
+      
     },
 
-    isOn: function() {
+    val: function(value) {
+      if(value === true || value === false) {
+        this.checkbox.checked = value;
+      }
       return this.checkbox.checked;
     }
 

test/input-toggle.html

@@ -21,10 +21,10 @@
         <ul class="list">
           <li class="list-item">
             Airplane Mode
-            <label class="toggle">
+            <label class="toggle" id="airplaneMode">
                <input type="checkbox" name="airplaneMode">
                <div class="track">
-                <div class="handle" draggable="true"></div>
+                <div class="handle"></div>
               </div>
             </label>
           </li>
@@ -33,7 +33,7 @@
             <label class="toggle">
                <input type="checkbox" name="doNotDisturb" checked="checked">
                <div class="track">
-                <div class="handle" draggable="true"></div>
+                <div class="handle"></div>
               </div>
             </label>
           </li>
@@ -65,13 +65,12 @@
     <script>
 
       $("#btnTest1").click(function(){
-        var toggle = $("[name='airplaneMode']")
+        var toggle = ionic.component( document.getElementById("airplaneMode") );
-        if( toggle.prop("checked") ) {
+        if( toggle.val() === true ) {
-          toggle.prop("checked", false);
+          toggle.val(false);
         } else {
-          toggle.prop("checked", true);
+          toggle.val(true);
         }
-        return;
       });
 
       $("#btnTest2").click(function(){