Merge branch 'master' of https://github.com/driftyco/ionic

Conflicts:
	dist/ionic-simple.js
	dist/ionic.js

Gruntfile.js

@@ -9,32 +9,35 @@ module.exports = function(grunt) {
       },
       dist: {
         src: [
+
+          // Base
           'js/ionic.js',
-          'js/platform.js',
-          'js/utils.js',
-          'js/events.js',
-          'js/gestures.js',
-          'js/animate.js',
-          'js/viewController.js',
-          'js/views/navBar.js',
-          'js/views/headerBar.js',
-          'js/views/tabBar.js',
-          'js/views/sideMenu.js',
+
+          // Utils
+          'js/utils/**/*.js',
+
+          // Views
+          'js/views/navBarView.js',
+          'js/views/headerBarView.js',
+          'js/views/sideMenuView.js',
+          'js/views/tabBarView.js',
           'js/views/toggleView.js',
-          'js/controllers/**/*.js',
-          'js/tapPolyfill.js'
+
+          // Controllers
+          'js/controllers/**/*.js'
+
         ],
         dest: 'dist/<%= pkg.name %>.js'
       },
       distAngular: {
         src: [
-          'ext/angular/src/*.js'
+          'js/ext/angular/src/*.js'
         ],
         dest: 'dist/<%= pkg.name %>-angular.js'
       },
       distSimple: {
         src: [
-          'ext/simple/*.js'
+          'js/ext/simple/*.js'
         ],
         dest: 'dist/<%= pkg.name %>-simple.js'
       }

dist/ionic.css

@@ -1909,6 +1909,13 @@ input[type="checkbox"][readonly] {
   border-radius: 50%;
   background-color: white;
   transition: -webkit-transform 0.1s ease-in-out; }
+  .toggle .handle:before {
+    position: absolute;
+    content: '.';
+    color: transparent;
+    left: -14px;
+    top: -11px;
+    padding: 14px 30px; }
 
 /* When the toggle is "on" */
 .toggle :checked + .track {

dist/ionicIcons.css

@@ -1909,6 +1909,13 @@ input[type="checkbox"][readonly] {
   border-radius: 50%;
   background-color: white;
   transition: -webkit-transform 0.1s ease-in-out; }
+  .toggle .handle:before {
+    position: absolute;
+    content: '.';
+    color: transparent;
+    left: -14px;
+    top: -11px;
+    padding: 14px 30px; }
 
 /* When the toggle is "on" */
 .toggle :checked + .track {

js/ext/simple/init.js

@@ -7,10 +7,6 @@
     ionic.Components.push(instance);
   };
 
-  ionic.get = function(elementId) {
-    return ionic.component( document.getElementById(elementId) );
-  };
-
   ionic.component = function(el) {
     if(el) {
       if(el.component) {

js/utils/animate.js

@@ -1,3 +1,4 @@
+
 (function(ionic) {
   ionic.Animator = {
     animate: function(element, className, fn) {
@@ -40,4 +41,4 @@
       };
     }
   };
-})(window.ionic);
+})(ionic);

js/utils/gestures.js

@@ -93,6 +93,8 @@
     if(this === this.window) {
       // this is a window, then only allow the Tap gesture to be added
       ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
+      ionic.Gestures.detection.register(ionic.Gestures.gestures.Drag);
+      ionic.Gestures.detection.register(ionic.Gestures.gestures.Release);
     } else {
       // everything else but the window
       for(var name in ionic.Gestures.gestures) {

js/views/headerBarView.js

@@ -1,3 +1,4 @@
+
 (function(ionic) {
 
   ionic.views.HeaderBar = function(opts) {

js/views/toggleView.js

@@ -6,6 +6,7 @@
     this.checkbox = opts.checkbox;
     this.track = opts.track;
     this.handle = opts.handle;
+    this.openPercent = -1;
 
     // remember that this element, and all its children are apart of a component
     // and assign the component instance to each element so the lookups
@@ -15,21 +16,55 @@
     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;
+      this.val( !this.checkbox.checked );
+    },
+
+    drag: function(e) {
+      var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
+      var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
+
+      if(e.pageX >= slidePageRight - 4) {
+        this.val(true);
+      } else if(e.pageX <= slidePageLeft) {
+        this.val(false);
+      } else {
+        this.setOpenPercent( Math.round( (1 - ((slidePageRight - e.pageX) / (slidePageRight - slidePageLeft) )) * 100) );
+      }
+    },
+
+    setOpenPercent: function(openPercent) {
+      // only make a change if the new open percent has changed
+      if(this.openPercent < 0 || (openPercent < (this.openPercent - 3) || openPercent > (this.openPercent + 3) ) ) {
+        this.openPercent = openPercent;
+
+        if(openPercent === 0) {
+          this.val(false);
+        } else if(openPercent === 100) {
+          this.val(true);
+        } else {
+          var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
+          openPixel = (openPixel < 1 ? 0 : openPixel);
+          this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
+        }
+      }
+    },
+
+    release: function(e) {
+      this.val( this.openPercent >= 50 );
     },
 
     val: function(value) {
       if(value === true || value === false) {
+        if(this.handle.style.webkitTransform !== "") {
+          this.handle.style.webkitTransform = "";
+        }
         this.checkbox.checked = value;
+        this.openPercent = (value ? 100 : 0);
       }
       return this.checkbox.checked;
     }

scss/ionic/_toggle.scss

@@ -36,6 +36,15 @@
   border-radius: $toggle-handle-radius;
   background-color: $toggle-handle-off-bg-color;
   transition: -webkit-transform $toggle-transition-duration ease-in-out;
+
+  &:before {
+    position: absolute;
+    content: '.';
+    color: transparent;
+    left: ( ($toggle-handle-width / 2) * -1);
+    top: ( ($toggle-handle-height / 2) * -1) + 3;
+    padding: ($toggle-handle-height / 2) ($toggle-handle-width + 2);
+  }
 }
 
 

test/index.html

@@ -16,6 +16,8 @@
         <h1 class="title">Ionic Tests</h1>
       </header>
 
+      <div class="content-wrapper">
+        
         <main class="content padded has-header">
           <p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
           <p><a class="button button-block button-default" href="buttons.html"><i class="icon-star-half-empty"></i> Buttons</a></p>
@@ -39,6 +41,8 @@
           <p><a class="button button-block button-default" href="type.html"><i class="icon-star"></i> Type</a></p>
         </main>
 
+    </div>
+
     </section>
 
     <script>

test/input-toggle.html

@@ -21,21 +21,21 @@
         <ul class="list">
           <li class="list-item">
             Airplane Mode
-            <label class="toggle" id="airplaneMode">
+            <div class="toggle" id="airplaneMode">
                <input type="checkbox" name="airplaneMode">
                <div class="track">
                 <div class="handle"></div>
               </div>
-            </label>
+            </div>
           </li>
           <li class="list-item">
             Do Not Disturb
-            <label class="toggle" id="doNotDisturb">
+            <div class="toggle" id="doNotDisturb">
                <input type="checkbox" name="doNotDisturb" checked="checked">
                <div class="track">
                 <div class="handle"></div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>