From d03d3aa106bb09ff403f0942076708659489eb57 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Fri, 27 Sep 2013 13:19:01 -0500
Subject: [PATCH] simple toggle

---
 Gruntfile.js                 |  1 +
 dist/ionic-ios7.css          | 10 ++---
 dist/ionic-simple.js         | 83 ++++++++++++++++++++++++++++++++----
 dist/ionic.css               | 10 ++---
 dist/ionic.js                | 23 ++++++++++
 dist/ionicIcons.css          | 10 ++---
 ext/simple/init.js           | 35 +++++++++++++--
 ext/simple/listview.js       | 18 ++++++++
 ext/simple/toggle.js         | 35 ++++++++++-----
 js/views/toggleView.js       | 23 ++++++++++
 scss/ionic-ios7/_toggle.scss | 22 +++++-----
 scss/ionic/_form.scss        |  2 +-
 scss/ionic/_toggle.scss      | 22 +++++-----
 scss/ionic/_variables.scss   | 10 ++---
 test/input-toggle-ios7.html  |  4 +-
 test/input-toggle.html       |  4 +-
 16 files changed, 242 insertions(+), 70 deletions(-)
 create mode 100644 ext/simple/listview.js
 create mode 100644 js/views/toggleView.js

diff --git a/Gruntfile.js b/Gruntfile.js
index b1fe8f1436..ddfe97b402 100644
--- a/Gruntfile.js
+++ b/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'
         ],
diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index 03ea645f72..878466797b 100644
--- a/dist/ionic-ios7.css
+++ b/dist/ionic-ios7.css
@@ -1840,9 +1840,9 @@ input[type="checkbox"][readonly] {
   cursor: pointer;
   transition: 0.4s ease; }
 
-.toggle .switch {
-  /* the switch (circle) thats inside the toggle's track area */
-  /* also the appearance when the switch is "off" */
+.toggle .handle {
+  /* the handle (circle) thats inside the toggle's track area */
+  /* 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" */ }
-  .toggle :checked + .track .switch {
+  /* the handle when the toggle is "on" */ }
+  .toggle :checked + .track .handle {
     background-color: white;
     right: 0;
     left: 20px;
diff --git a/dist/ionic-simple.js b/dist/ionic-simple.js
index d30a560bfb..0d12743ab5 100644
--- a/dist/ionic-simple.js
+++ b/dist/ionic-simple.js
@@ -1,12 +1,41 @@
 
 (function(window, document, ionic) {
 
-  ionic.Components = {};
+  ionic.Components = [];
 
-  ionic.registerComponent = function(name, className) {
-    this.Components[name] = className;
+  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 );
@@ -27,12 +56,48 @@
   }
 
 })(this, document, ionic);;
-(function(window, document, ionic) {
+(function(ionic) {
 
-  function initalize() {
-     ionic.registerComponent("toggle", "toggle");
-  }
+  ionic.registerComponent({
 
-  ionic.on("domready", initalize);
+    name: "listview",
 
-})(window, document, ionic);
\ No newline at end of file
+    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);
\ No newline at end of file
diff --git a/dist/ionic.css b/dist/ionic.css
index cb1491359f..89865910e9 100644
--- a/dist/ionic.css
+++ b/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 */
-/* also the appearance when the switch is "off" */
-.toggle .switch {
+/* the handle (circle) thats inside the toggle's track area */
+/* also the appearance when the handle is "off" */
+.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" */ }
-  .toggle :checked + .track .switch {
+  /* the handle when the toggle is "on" */ }
+  .toggle :checked + .track .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
 
diff --git a/dist/ionic.js b/dist/ionic.js
index 336429a386..c31ddfea4c 100644
--- a/dist/ionic.js
+++ b/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) {
diff --git a/dist/ionicIcons.css b/dist/ionicIcons.css
index 747e666619..8ee435357f 100644
--- a/dist/ionicIcons.css
+++ b/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 */
-/* also the appearance when the switch is "off" */
-.toggle .switch {
+/* the handle (circle) thats inside the toggle's track area */
+/* also the appearance when the handle is "off" */
+.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" */ }
-  .toggle :checked + .track .switch {
+  /* the handle when the toggle is "on" */ }
+  .toggle :checked + .track .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
 
diff --git a/ext/simple/init.js b/ext/simple/init.js
index 51b8d748ce..4159de9b83 100644
--- a/ext/simple/init.js
+++ b/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 );
diff --git a/ext/simple/listview.js b/ext/simple/listview.js
new file mode 100644
index 0000000000..bb9ba8bb00
--- /dev/null
+++ b/ext/simple/listview.js
@@ -0,0 +1,18 @@
+
+(function(ionic) {
+
+  ionic.registerComponent({
+
+    name: "listview",
+
+    isComponent: function(element) {
+      return false;
+    },
+
+    tap: function(e) {
+
+    }
+
+  });
+
+})(ionic);
\ No newline at end of file
diff --git a/ext/simple/toggle.js b/ext/simple/toggle.js
index 411c90b885..0e3e296368 100644
--- a/ext/simple/toggle.js
+++ b/ext/simple/toggle.js
@@ -1,16 +1,29 @@
 
-(function(window, document, ionic) {
+(function(ionic) {
 
-  function initalize() {
-    
-    ionic.on("swipe", swipe, document.body)
-    
-  }
+  ionic.registerComponent({
 
-  function swipe(e) {
-    alert(e.target.tagName)
-  }
+    isComponent: function(el) {
+      return el.classList.contains("toggle");
+    },
 
-  ionic.on("domready", initalize);
+    create: function(el) {
+      if(el) {
 
-})(window, document, ionic);
\ No newline at end of file
+        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);
\ No newline at end of file
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
new file mode 100644
index 0000000000..c4fcfe8564
--- /dev/null
+++ b/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);
diff --git a/scss/ionic-ios7/_toggle.scss b/scss/ionic-ios7/_toggle.scss
index 868f635d82..0b3502064f 100644
--- a/scss/ionic-ios7/_toggle.scss
+++ b/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-switch-on-bg-color:       $toggle-switch-off-bg-color;
+$toggle-handle-off-bg-color:      #fff;
+$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 {
-  /* the switch (circle) thats inside the toggle's track area */
-  /* also the appearance when the switch is "off" */
+.toggle .handle {
+  /* the handle (circle) thats inside the toggle's track area */
+  /* 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;
-  background-color: $toggle-switch-off-bg-color;
+  border-radius: $toggle-handle-radius;
+  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" */
-  .switch {
-    background-color: $toggle-switch-on-bg-color;
+  /* the handle when the toggle is "on" */
+  .handle {
+    background-color: $toggle-handle-on-bg-color;
     right: 0;
     left: $toggle-border-radius;
     -webkit-transform: none;
diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index 3f3ba9cc41..aa4d86221a 100644
--- a/scss/ionic/_form.scss
+++ b/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;
   }
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index b000d29b2f..105fd34e33 100644
--- a/scss/ionic/_toggle.scss
+++ b/scss/ionic/_toggle.scss
@@ -26,15 +26,15 @@
   transition-timing-function: ease-in-out;
 }
 
-/* the switch (circle) thats inside the toggle's track area */
-/* also the appearance when the switch is "off" */
-.toggle .switch {
+/* the handle (circle) thats inside the toggle's track area */
+/* also the appearance when the handle is "off" */
+.toggle .handle {
   position: absolute;
   display: block;
-  width: $toggle-switch-width;
-  height: $toggle-switch-height;
-  border-radius: $toggle-switch-radius;
-  background-color: $toggle-switch-off-bg-color;
+  width: $toggle-handle-width;
+  height: $toggle-handle-height;
+  border-radius: $toggle-handle-radius;
+  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" */
-  .switch {
-    background-color: $toggle-switch-on-bg-color;
-    -webkit-transform: translate3d( $toggle-width - $toggle-switch-width - ($toggle-border-width * 2) ,0,0);
+  /* the handle when the toggle is "on" */
+  .handle {
+    background-color: $toggle-handle-on-bg-color;
+    -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
   }
 }
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index e5da337bd9..44554ba1b0 100644
--- a/scss/ionic/_variables.scss
+++ b/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-switch-height:            $toggle-switch-width;
-$toggle-switch-radius:            50%;
+$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2);
+$toggle-handle-height:            $toggle-handle-width;
+$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-switch-on-bg-color:       $toggle-switch-off-bg-color;
+$toggle-handle-off-bg-color:      $white;
+$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
 
 $toggle-transition-duration:      .1s;
 
diff --git a/test/input-toggle-ios7.html b/test/input-toggle-ios7.html
index cfcda20584..903e7fbf5f 100644
--- a/test/input-toggle-ios7.html
+++ b/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>
diff --git a/test/input-toggle.html b/test/input-toggle.html
index 4451d28b07..ee420524fe 100644
--- a/test/input-toggle.html
+++ b/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>