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
-          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,15 +1666,16 @@ window.ionic = {
     }
   };
 })(window.ionic);
-;(function(ionic) {
+;
+(function(ionic) {
 
-ionic.views.NavBar = function(opts) {
+  ionic.views.NavBar = function(opts) {
     this.el = opts.el;
 
     this._titleEl = this.el.querySelector('.title');
-};
+  };
 
-ionic.views.NavBar.prototype = {
+  ionic.views.NavBar.prototype = {
     shouldGoBack: function() {},
 
     setTitle: function(title) {
@@ -1706,8 +1707,9 @@ ionic.views.NavBar.prototype = {
         this._currentBackButton.parentNode.removeChild(this._currentBackButton);
       }
     }
-};
+  };
-})(window.ionic);
+
+})(ionic);
 ;(function(ionic) {
 
   ionic.views.HeaderBar = function(opts) {
@@ -1939,17 +1941,16 @@ ionic.views.TabBar.prototype = {
 };
 
 })(window.ionic);
-;(function(ionic) {
+;
+(function(ionic) {
 
-ionic.views = ionic.views || {};
+  ionic.views.SideMenu = function(opts) {
-
-ionic.views.SideMenu = function(opts) {
     this.el = opts.el;
     this.width = opts.width;
     this.isEnabled = opts.isEnabled || true;
-};
+  };
 
-ionic.views.SideMenu.prototype = {
+  ionic.views.SideMenu.prototype = {
     getFullWidth: function() {
       return this.width;
     },
@@ -1962,8 +1963,9 @@ ionic.views.SideMenu.prototype = {
     pushDown: function() {
       this.el.style.zIndex = -1;
     }
-};
+  };
-})(window.ionic);
+
+})(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,42 +2098,40 @@ 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;
-  this.left = options.left;
+    self._leftShowing = false;
-  this.right = options.right;
-  this.content = options.content;
-    
-  this._rightShowing = false;
-  this._leftShowing = false;
 
     this.content.onDrag = function(e) {
-    _this._handleDrag(e);
+      self._handleDrag(e);
     };
 
     this.content.endDrag = function(e) {
-    _this._endDrag(e);
+      self._endDrag(e);
     };
 
     /*
     // Bind release and drag listeners
     window.ion.onGesture('release', function(e) {
-    _this._endDrag(e);
+      self._endDrag(e);
-  }, this.center);
+    }, self.center);
 
     window.ion.onGesture('drag', function(e) {
-    _this._handleDrag(e);
+      self._handleDrag(e);
-  }, this.center);
+    }, self.center);
     */
-};
+  };
 
-ionic.controllers.SideMenuController.prototype = {
+  ionic.controllers.SideMenuController.prototype = {
     toggleLeft: function() {
       var openAmount = this.getOpenAmount();
       if(openAmount > 0) {
@@ -2283,9 +2286,9 @@ ionic.controllers.SideMenuController.prototype = {
 
       this._lastX = e.gesture.touches[0].pageX;
     }
-};
+  };
 
-})(ionic = window.ionic || {});
+})(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
-          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,39 +1,37 @@
+
 (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;
-  this.left = options.left;
+    self._leftShowing = false;
-  this.right = options.right;
-  this.content = options.content;
-    
-  this._rightShowing = false;
-  this._leftShowing = false;
 
     this.content.onDrag = function(e) {
-    _this._handleDrag(e);
+      self._handleDrag(e);
     };
 
     this.content.endDrag = function(e) {
-    _this._endDrag(e);
+      self._endDrag(e);
     };
 
     /*
     // Bind release and drag listeners
     window.ion.onGesture('release', function(e) {
-    _this._endDrag(e);
+      self._endDrag(e);
-  }, this.center);
+    }, self.center);
 
     window.ion.onGesture('drag', function(e) {
-    _this._handleDrag(e);
+      self._handleDrag(e);
-  }, this.center);
+    }, self.center);
     */
-};
+  };
 
-ionic.controllers.SideMenuController.prototype = {
+  ionic.controllers.SideMenuController.prototype = {
     toggleLeft: function() {
       var openAmount = this.getOpenAmount();
       if(openAmount > 0) {
@@ -188,6 +186,6 @@ ionic.controllers.SideMenuController.prototype = {
 
       this._lastX = e.gesture.touches[0].pageX;
     }
-};
+  };
 
-})(ionic = window.ionic || {});
+})(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,12 +1,13 @@
+
 (function(ionic) {
 
-ionic.views.NavBar = function(opts) {
+  ionic.views.NavBar = function(opts) {
     this.el = opts.el;
 
     this._titleEl = this.el.querySelector('.title');
-};
+  };
 
-ionic.views.NavBar.prototype = {
+  ionic.views.NavBar.prototype = {
     shouldGoBack: function() {},
 
     setTitle: function(title) {
@@ -38,5 +39,6 @@ ionic.views.NavBar.prototype = {
         this._currentBackButton.parentNode.removeChild(this._currentBackButton);
       }
     }
-};
+  };
-})(window.ionic);
+
+})(ionic);

js/views/sideMenu.js

@@ -1,14 +1,13 @@
+
 (function(ionic) {
 
-ionic.views = ionic.views || {};
+  ionic.views.SideMenu = function(opts) {
-
-ionic.views.SideMenu = function(opts) {
     this.el = opts.el;
     this.width = opts.width;
     this.isEnabled = opts.isEnabled || true;
-};
+  };
 
-ionic.views.SideMenu.prototype = {
+  ionic.views.SideMenu.prototype = {
     getFullWidth: function() {
       return this.width;
     },
@@ -21,5 +20,6 @@ ionic.views.SideMenu.prototype = {
     pushDown: function() {
       this.el.style.zIndex = -1;
     }
-};
+  };
-})(window.ionic);
+
+})(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(){