simple toggle

Gruntfile.js

@@ -20,6 +20,7 @@ module.exports = function(grunt) {
           'js/views/headerBar.js',
           'js/views/tabBar.js',
           'js/views/sideMenu.js',
+          'js/views/toggleView.js',
           'js/controllers/**/*.js',
           'js/tapPolyfill.js'
         ],

dist/ionic-ios7.css

@@ -1840,9 +1840,9 @@ input[type="checkbox"][readonly] {
   cursor: pointer;
   transition: 0.4s ease; }
 
-.toggle .switch {
+.toggle .handle {
-  /* the switch (circle) thats inside the toggle's track area */
+  /* the handle (circle) thats inside the toggle's track area */
-  /* also the appearance when the switch is "off" */
+  /* also the appearance when the handle is "off" */
   position: absolute;
   display: block;
   width: auto;
@@ -1867,8 +1867,8 @@ input[type="checkbox"][readonly] {
   background-color: #ccc;
   box-shadow: inset 0 0 0 20px #4bd863;
   transition: 0.2s ease;
-  /* the switch when the toggle is "on" */ }
+  /* the handle when the toggle is "on" */ }
-  .toggle :checked + .track .switch {
+  .toggle :checked + .track .handle {
     background-color: white;
     right: 0;
     left: 20px;

dist/ionic-simple.js

@@ -1,12 +1,41 @@
 
 (function(window, document, ionic) {
 
-  ionic.Components = {};
+  ionic.Components = [];
 
-  ionic.registerComponent = function(name, className) {
+  ionic.registerComponent = function(instance) {
-    this.Components[name] = className;
+    ionic.Components.push(instance);
   };
 
+  function onTap(e) {
+    if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
+
+    var 
+    x,
+    e = e.gesture.srcEvent,
+    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++) {
+        if( ionic.Components[x].isComponent(el) ) {
+          // this element is a component
+          // 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;
+    }
+  }
+  ionic.on("tap", onTap, window);
+
   function initalize() {
     // remove the ready listeners
     document.removeEventListener( "DOMContentLoaded", initalize, false );
@@ -27,12 +56,48 @@
   }
 
 })(this, document, ionic);;
-(function(window, document, ionic) {
+(function(ionic) {
 
-  function initalize() {
+  ionic.registerComponent({
-     ionic.registerComponent("toggle", "toggle");
-  }
 
-  ionic.on("domready", initalize);
+    name: "listview",
 
-})(window, document, ionic);
+    isComponent: function(element) {
+      return false;
+    },
+
+    tap: function(e) {
+
+    }
+
+  });
+
+})(ionic);;
+(function(ionic) {
+
+  ionic.registerComponent({
+
+    isComponent: function(el) {
+      return el.classList.contains("toggle");
+    },
+
+    create: function(el) {
+      if(el) {
+
+        if(!el._instance) {
+          
+         el._instance = new ionic.views.Toggle({ 
+            el: el,
+            checkbox: el.querySelector("input[type='checkbox']"),
+            track: el.querySelector(".track"),
+            handle: el.querySelector(".handle")
+          });
+        }
+
+        return el._instance;
+      }
+    }
+
+  });
+
+})(ionic);

dist/ionic.css

@@ -1841,9 +1841,9 @@ input[type="checkbox"][readonly] {
   transition-duration: 0.1s;
   transition-timing-function: ease-in-out; }
 
-/* the switch (circle) thats inside the toggle's track area */
+/* the handle (circle) thats inside the toggle's track area */
-/* also the appearance when the switch is "off" */
+/* also the appearance when the handle is "off" */
-.toggle .switch {
+.toggle .handle {
   position: absolute;
   display: block;
   width: 28px;
@@ -1857,8 +1857,8 @@ input[type="checkbox"][readonly] {
   /* the track when the toggle is "on" */
   border-color: #5f85ef;
   background-color: #5f85ef;
-  /* the switch when the toggle is "on" */ }
+  /* the handle when the toggle is "on" */ }
-  .toggle :checked + .track .switch {
+  .toggle :checked + .track .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
 

dist/ionic.js

@@ -1964,6 +1964,29 @@ ionic.views.SideMenu.prototype = {
   }
 };
 })(window.ionic);
+;
+(function(ionic) {
+
+  ionic.views.Toggle = function(opts) {
+    this.el = opts.el;
+    this.checkbox = opts.checkbox;
+    this.track = opts.track;
+    this.handle = opts.handle;
+  };
+
+  ionic.views.Toggle.prototype = {
+
+    tap: function(e) {
+      alert( this.isOn() );
+    },
+
+    isOn: function() {
+      return this.checkbox.checked;
+    }
+
+  };
+
+})(ionic);
 ;(function(ionic) {
 
 ionic.controllers.NavController = function(opts) {

dist/ionicIcons.css

@@ -1911,9 +1911,9 @@ input[type="checkbox"][readonly] {
   transition-duration: 0.1s;
   transition-timing-function: ease-in-out; }
 
-/* the switch (circle) thats inside the toggle's track area */
+/* the handle (circle) thats inside the toggle's track area */
-/* also the appearance when the switch is "off" */
+/* also the appearance when the handle is "off" */
-.toggle .switch {
+.toggle .handle {
   position: absolute;
   display: block;
   width: 28px;
@@ -1927,8 +1927,8 @@ input[type="checkbox"][readonly] {
   /* the track when the toggle is "on" */
   border-color: #5f85ef;
   background-color: #5f85ef;
-  /* the switch when the toggle is "on" */ }
+  /* the handle when the toggle is "on" */ }
-  .toggle :checked + .track .switch {
+  .toggle :checked + .track .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
 

ext/simple/init.js

@@ -1,12 +1,41 @@
 
 (function(window, document, ionic) {
 
-  ionic.simple = {
+  ionic.Components = [];
-
-    
 
+  ionic.registerComponent = function(instance) {
+    ionic.Components.push(instance);
   };
 
+  function onTap(e) {
+    if (!e.gesture || !e.gesture.srcEvent || !e.gesture.srcEvent.target) return;
+
+    var 
+    x,
+    e = e.gesture.srcEvent,
+    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++) {
+        if( ionic.Components[x].isComponent(el) ) {
+          // this element is a component
+          // 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;
+    }
+  }
+  ionic.on("tap", onTap, window);
+
   function initalize() {
     // remove the ready listeners
     document.removeEventListener( "DOMContentLoaded", initalize, false );

ext/simple/listview.js

@@ -0,0 +1,18 @@
+
+(function(ionic) {
+
+  ionic.registerComponent({
+
+    name: "listview",
+
+    isComponent: function(element) {
+      return false;
+    },
+
+    tap: function(e) {
+
+    }
+
+  });
+
+})(ionic);

ext/simple/toggle.js

@@ -1,16 +1,29 @@
 
-(function(window, document, ionic) {
+(function(ionic) {
 
-  function initalize() {
+  ionic.registerComponent({
-    
-    ionic.on("swipe", swipe, document.body)
-    
-  }
 
-  function swipe(e) {
+    isComponent: function(el) {
-    alert(e.target.tagName)
+      return el.classList.contains("toggle");
-  }
+    },
 
-  ionic.on("domready", initalize);
+    create: function(el) {
+      if(el) {
 
-})(window, document, ionic);
+        if(!el._instance) {
+          
+         el._instance = new ionic.views.Toggle({ 
+            el: el,
+            checkbox: el.querySelector("input[type='checkbox']"),
+            track: el.querySelector(".track"),
+            handle: el.querySelector(".handle")
+          });
+        }
+
+        return el._instance;
+      }
+    }
+
+  });
+
+})(ionic);

js/views/toggleView.js

@@ -0,0 +1,23 @@
+
+(function(ionic) {
+
+  ionic.views.Toggle = function(opts) {
+    this.el = opts.el;
+    this.checkbox = opts.checkbox;
+    this.track = opts.track;
+    this.handle = opts.handle;
+  };
+
+  ionic.views.Toggle.prototype = {
+
+    tap: function(e) {
+      alert( this.isOn() );
+    },
+
+    isOn: function() {
+      return this.checkbox.checked;
+    }
+
+  };
+
+})(ionic);

scss/ionic-ios7/_toggle.scss

@@ -3,7 +3,7 @@ $toggle-height:                   32px;
 $toggle-border-width:             2px;
 $toggle-border-radius:            20px;
 
-$toggle-switch-radius:            20px;
+$toggle-handle-radius:            20px;
 
 $toggle-off-bg-color:             #fff;
 $toggle-off-border-color:         #ddd;
@@ -11,8 +11,8 @@ $toggle-off-border-color:         #ddd;
 $toggle-on-bg-color:              #4bd863;
 $toggle-on-border-color:          $toggle-on-bg-color;
 
-$toggle-switch-off-bg-color:      #fff;
+$toggle-handle-off-bg-color:      #fff;
-$toggle-switch-on-bg-color:       $toggle-switch-off-bg-color;
+$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
 
 $toggle-transition-duration:      .2s;
 
@@ -42,16 +42,16 @@ $toggle-transition-duration:      .2s;
   transition: $toggle-transition-duration + .2s ease;
 }
 
-.toggle .switch {
+.toggle .handle {
-  /* the switch (circle) thats inside the toggle's track area */
+  /* the handle (circle) thats inside the toggle's track area */
-  /* also the appearance when the switch is "off" */
+  /* also the appearance when the handle is "off" */
   position: absolute;
   display: block;
   width: auto; /* override defaults */
   height: auto; /* override defaults */
   box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
-  border-radius: $toggle-switch-radius;
+  border-radius: $toggle-handle-radius;
-  background-color: $toggle-switch-off-bg-color;
+  background-color: $toggle-handle-off-bg-color;
   left: 0;
   top: 0;
   bottom: 0;
@@ -72,9 +72,9 @@ $toggle-transition-duration:      .2s;
   box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color;
   transition: $toggle-transition-duration ease;
 
-  /* the switch when the toggle is "on" */
+  /* the handle when the toggle is "on" */
-  .switch {
+  .handle {
-    background-color: $toggle-switch-on-bg-color;
+    background-color: $toggle-handle-on-bg-color;
     right: 0;
     left: $toggle-border-radius;
     -webkit-transform: none;

scss/ionic/_form.scss

@@ -253,7 +253,7 @@ input[type="range"] {
     width: $range-slider-width;
     height: $range-slider-height;
     border-radius: $range-slider-border-radius;
-    background-color: $toggle-switch-off-bg-color;
+    background-color: $toggle-handle-off-bg-color;
     box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
     -webkit-appearance: none !important;
   }

scss/ionic/_toggle.scss

@@ -26,15 +26,15 @@
   transition-timing-function: ease-in-out;
 }
 
-/* the switch (circle) thats inside the toggle's track area */
+/* the handle (circle) thats inside the toggle's track area */
-/* also the appearance when the switch is "off" */
+/* also the appearance when the handle is "off" */
-.toggle .switch {
+.toggle .handle {
   position: absolute;
   display: block;
-  width: $toggle-switch-width;
+  width: $toggle-handle-width;
-  height: $toggle-switch-height;
+  height: $toggle-handle-height;
-  border-radius: $toggle-switch-radius;
+  border-radius: $toggle-handle-radius;
-  background-color: $toggle-switch-off-bg-color;
+  background-color: $toggle-handle-off-bg-color;
   transition: -webkit-transform $toggle-transition-duration ease-in-out;
 }
 
@@ -46,9 +46,9 @@
   border-color: $toggle-on-border-color;
   background-color: $toggle-on-bg-color;
 
-  /* the switch when the toggle is "on" */
+  /* the handle when the toggle is "on" */
-  .switch {
+  .handle {
-    background-color: $toggle-switch-on-bg-color;
+    background-color: $toggle-handle-on-bg-color;
-    -webkit-transform: translate3d( $toggle-width - $toggle-switch-width - ($toggle-border-width * 2) ,0,0);
+    -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
   }
 }

scss/ionic/_variables.scss

@@ -145,9 +145,9 @@ $toggle-height:                   32px;
 $toggle-border-width:             2px;
 $toggle-border-radius:            20px;
 
-$toggle-switch-width:             $toggle-height - ($toggle-border-width * 2);
+$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2);
-$toggle-switch-height:            $toggle-switch-width;
+$toggle-handle-height:            $toggle-handle-width;
-$toggle-switch-radius:            50%;
+$toggle-handle-radius:            50%;
 
 $toggle-off-bg-color:             #E5E5E5;
 $toggle-off-border-color:         #E5E5E5;
@@ -155,8 +155,8 @@ $toggle-off-border-color:         #E5E5E5;
 $toggle-on-bg-color:              #5f85ef;
 $toggle-on-border-color:          $toggle-on-bg-color;
 
-$toggle-switch-off-bg-color:      $white;
+$toggle-handle-off-bg-color:      $white;
-$toggle-switch-on-bg-color:       $toggle-switch-off-bg-color;
+$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
 
 $toggle-transition-duration:      .1s;
 

test/input-toggle-ios7.html

@@ -24,7 +24,7 @@
             <label class="toggle">
                <input type="checkbox" name="airplaneMode">
                <div class="track">
-                <div class="switch"></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="switch"></div>
+                <div class="handle"></div>
               </div>
             </label>
           </li>

test/input-toggle.html

@@ -24,7 +24,7 @@
             <label class="toggle">
                <input type="checkbox" name="airplaneMode">
                <div class="track">
-                <div class="switch" draggable="true"></div>
+                <div class="handle" draggable="true"></div>
               </div>
             </label>
           </li>
@@ -33,7 +33,7 @@
             <label class="toggle">
                <input type="checkbox" name="doNotDisturb" checked="checked">
                <div class="track">
-                <div class="switch" draggable="true"></div>
+                <div class="handle" draggable="true"></div>
               </div>
             </label>
           </li>