simple jquery

dist/ionic-simple.js

@@ -7,8 +7,16 @@
     ionic.Components.push(instance);
   };
 
+  ionic.get = function(elementId) {
+    return ionic.component( document.getElementById(elementId) );
+  };
+
   ionic.component = function(el) {
     if(el) {
+      if(el.component) {
+        // this element has already been initialized as a component
+        return el.component;
+      }
       for(var x = 0; x < ionic.Components.length; x++) {
         if( ionic.Components[x].isComponent(el) ) {
           // this element is a component, init its view
@@ -27,14 +35,20 @@
 
     while(el) {
       // climb up the tree looking to see if the target
-      // is or is in a registered component
+      // is or is in a registered component. If its already
-      component = ionic.component(el);
+      // been set that its NOT a component don't bother.
-      if(component) {
+      if(el.isComponent !== false) {
-        component[eventName] && component[eventName](e.gesture.srcEvent);
+        component = ionic.component(el);
-        return;
+        if(component) {
+          component[eventName] && component[eventName](e.gesture.srcEvent);
+          return;
+        }
+        // not sure if this element is a component yet,
+        // keep climbing up the tree and check again
+        // remember that this element is not a component so 
+        // it can skip this process in the future
+        el.isComponent = false;
       }
-      // not sure if this element is a component yet,
-      // keep climbing up the tree and check again
       el = el.parentElement;
     }
   }
@@ -92,6 +106,68 @@
   });
 
 })(ionic);;
+(function(window, document, ionic) {
+
+  ionic.fn = {
+    val: function() {
+      var ret, x;
+      for(x = 0; x < this.length; x++) {
+        ret = this[x].component.val.apply(this[x].component, arguments);
+      }
+      return ret;
+    }
+  }
+
+  if (window.jQuery) {
+    // if jQuery is present then it should be the default
+    jq = window.jQuery;
+
+    // extend the methods which are in ionic.fn and in jQuery.fn
+    for(var name in ionic.fn) {
+      var jQueryFn = jq.fn[name];
+      jq.fn[name] = function() {
+        var 
+        x,
+        ret; // if incase this isn't an ionic component
+
+        for(x = 0; x < this.length; x++) {
+          ionic.component( this[x] );
+          if( this[x].component ) {
+            ret = this[x].component[name].apply(this[x].component, arguments);
+          }
+        }
+
+        // if this isn't an ionic component, run the usual jQuery fn
+        return jQueryFn.apply(this, arguments); 
+      }
+    }
+
+  } else {
+    // jQuery is not already present, so use our 'lil version instead
+    jq = {
+
+      init: function(selector, context) {
+        context = context || document;
+        var 
+        x,
+        dom = context.querySelectorAll(selector) || [];
+        for(x = 0; x < dom.length; x++) {
+          ionic.component( dom[x] );
+        }
+        dom.__proto__ = ionic.fn;
+        dom.selector = selector || '';
+        return dom;
+      }
+
+    };
+
+    $ = function(selector, context) {
+      return jq.init(selector, context);
+    }
+  }
+
+})(this, document, ionic);
+;
 (function(ionic) {
 
   ionic.registerComponent({
@@ -105,7 +181,7 @@
       if(el) {
 
         // check if we've already created a Toggle instance for this element
-        if(!el._instance) {
+        if(!el.component) {
 
           // find all the required elements that make up a toggle
           var opts = { 
@@ -116,18 +192,13 @@
           };
 
           // validate its a well formed toggle with the required pieces
-          if(!opts.checkbox || !opts.track || !opts.handle) {
+          if(!opts.checkbox || !opts.track || !opts.handle) return;
-            return;
-          }
-
-          // ensure the handle is draggable
-          opts.handle.draggable = true;
 
           // initialize an instance of a Toggle
-          el._instance = new ionic.views.Toggle(opts);
+          el.component = new ionic.views.Toggle(opts);
         }
 
-        return el._instance;
+        return el.component;
       }
     }
 

dist/ionic.js

@@ -1971,12 +1971,25 @@ ionic.views.TabBar.prototype = {
     this.checkbox = opts.checkbox;
     this.track = opts.track;
     this.handle = opts.handle;
+
+    // remember that this element, and all its children are apart of a component
+    // and assign the component instance to each element so the lookups
+    // only has to go through this process just once
+    this.el.isComponent = true;
+    this.track.component = this;
+    this.track.isComponent = true;
+    this.handle.component = this;
+    this.handle.isComponent = true;
+
+    // ensure the handle is draggable
+    this.handle.draggable = true;
   };
 
   ionic.views.Toggle.prototype = {
 
     tap: function(e) {
-      
+      e.stopPropa
+      return false;
     },
 
     val: function(value) {

ext/simple/init.js

@@ -7,8 +7,16 @@
     ionic.Components.push(instance);
   };
 
+  ionic.get = function(elementId) {
+    return ionic.component( document.getElementById(elementId) );
+  };
+
   ionic.component = function(el) {
     if(el) {
+      if(el.component) {
+        // this element has already been initialized as a component
+        return el.component;
+      }
       for(var x = 0; x < ionic.Components.length; x++) {
         if( ionic.Components[x].isComponent(el) ) {
           // this element is a component, init its view
@@ -27,14 +35,20 @@
 
     while(el) {
       // climb up the tree looking to see if the target
-      // is or is in a registered component
+      // is or is in a registered component. If its already
-      component = ionic.component(el);
+      // been set that its NOT a component don't bother.
-      if(component) {
+      if(el.isComponent !== false) {
-        component[eventName] && component[eventName](e.gesture.srcEvent);
+        component = ionic.component(el);
-        return;
+        if(component) {
+          component[eventName] && component[eventName](e.gesture.srcEvent);
+          return;
+        }
+        // not sure if this element is a component yet,
+        // keep climbing up the tree and check again
+        // remember that this element is not a component so 
+        // it can skip this process in the future
+        el.isComponent = false;
       }
-      // not sure if this element is a component yet,
-      // keep climbing up the tree and check again
       el = el.parentElement;
     }
   }

ext/simple/selector.js

@@ -0,0 +1,62 @@
+
+(function(window, document, ionic) {
+
+  ionic.fn = {
+    val: function() {
+      var ret, x;
+      for(x = 0; x < this.length; x++) {
+        ret = this[x].component.val.apply(this[x].component, arguments);
+      }
+      return ret;
+    }
+  }
+
+  if (window.jQuery) {
+    // if jQuery is present then it should be the default
+    jq = window.jQuery;
+
+    // extend the methods which are in ionic.fn and in jQuery.fn
+    for(var name in ionic.fn) {
+      var jQueryFn = jq.fn[name];
+      jq.fn[name] = function() {
+        var 
+        x,
+        ret; // if incase this isn't an ionic component
+
+        for(x = 0; x < this.length; x++) {
+          ionic.component( this[x] );
+          if( this[x].component ) {
+            ret = this[x].component[name].apply(this[x].component, arguments);
+          }
+        }
+
+        // if this isn't an ionic component, run the usual jQuery fn
+        return jQueryFn.apply(this, arguments); 
+      }
+    }
+
+  } else {
+    // jQuery is not already present, so use our 'lil version instead
+    jq = {
+
+      init: function(selector, context) {
+        context = context || document;
+        var 
+        x,
+        dom = context.querySelectorAll(selector) || [];
+        for(x = 0; x < dom.length; x++) {
+          ionic.component( dom[x] );
+        }
+        dom.__proto__ = ionic.fn;
+        dom.selector = selector || '';
+        return dom;
+      }
+
+    };
+
+    $ = function(selector, context) {
+      return jq.init(selector, context);
+    }
+  }
+
+})(this, document, ionic);

ext/simple/toggle.js

@@ -12,7 +12,7 @@
       if(el) {
 
         // check if we've already created a Toggle instance for this element
-        if(!el._instance) {
+        if(!el.component) {
 
           // find all the required elements that make up a toggle
           var opts = { 
@@ -23,18 +23,13 @@
           };
 
           // validate its a well formed toggle with the required pieces
-          if(!opts.checkbox || !opts.track || !opts.handle) {
+          if(!opts.checkbox || !opts.track || !opts.handle) return;
-            return;
-          }
-
-          // ensure the handle is draggable
-          opts.handle.draggable = true;
 
           // initialize an instance of a Toggle
-          el._instance = new ionic.views.Toggle(opts);
+          el.component = new ionic.views.Toggle(opts);
         }
 
-        return el._instance;
+        return el.component;
       }
     }
 

js/views/toggleView.js

@@ -6,12 +6,25 @@
     this.checkbox = opts.checkbox;
     this.track = opts.track;
     this.handle = opts.handle;
+
+    // remember that this element, and all its children are apart of a component
+    // and assign the component instance to each element so the lookups
+    // only has to go through this process just once
+    this.el.isComponent = true;
+    this.track.component = this;
+    this.track.isComponent = true;
+    this.handle.component = this;
+    this.handle.isComponent = true;
+
+    // ensure the handle is draggable
+    this.handle.draggable = true;
   };
 
   ionic.views.Toggle.prototype = {
 
     tap: function(e) {
-      
+      e.stopPropa
+      return false;
     },
 
     val: function(value) {

test/input-toggle.html

@@ -30,7 +30,7 @@
           </li>
           <li class="list-item">
             Do Not Disturb
-            <label class="toggle">
+            <label class="toggle" id="doNotDisturb">
                <input type="checkbox" name="doNotDisturb" checked="checked">
                <div class="track">
                 <div class="handle"></div>
@@ -56,16 +56,16 @@
 
     </section>
 
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="../dist/ionic.js"></script>
     <script src="../dist/ionic-simple.js"></script>
 
 
     <!-- for testing only -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script>
 
       $("#btnTest1").click(function(){
-        var toggle = ionic.component( document.getElementById("airplaneMode") );
+        var toggle = $("#airplaneMode");
         if( toggle.val() === true ) {
           toggle.val(false);
         } else {
@@ -74,13 +74,14 @@
       });
 
       $("#btnTest2").click(function(){
-        var toggle = $("[name='doNotDisturb']")
+        var toggle = $("#doNotDisturb");
-        if( toggle.prop("checked") ) {
+        val = toggle.val();
-          toggle.prop("checked", false);
+        return
+        if( toggle.val() === true ) {
+          toggle.val(false);
         } else {
-          toggle.prop("checked", true);
+          toggle.val(true);
         }
-        return;
       });
 
     </script>