diff --git a/Gruntfile.js b/Gruntfile.js
index 04af4b649d..afd1a967be 100644
--- a/Gruntfile.js
+++ b/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'
}
diff --git a/dist/ionic.css b/dist/ionic.css
index 78049739f0..f8fd1689b3 100644
--- a/dist/ionic.css
+++ b/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 {
diff --git a/dist/ionicIcons.css b/dist/ionicIcons.css
index 78049739f0..f8fd1689b3 100644
--- a/dist/ionicIcons.css
+++ b/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 {
diff --git a/js/viewController.js b/js/controllers/viewController.js
similarity index 100%
rename from js/viewController.js
rename to js/controllers/viewController.js
diff --git a/js/ext/simple/init.js b/js/ext/simple/init.js
index 308f2b6894..fd7afd64c9 100644
--- a/js/ext/simple/init.js
+++ b/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) {
diff --git a/js/animate.js b/js/utils/animate.js
similarity index 98%
rename from js/animate.js
rename to js/utils/animate.js
index bedaad67b2..89cca3b0ef 100644
--- a/js/animate.js
+++ b/js/utils/animate.js
@@ -1,3 +1,4 @@
+
(function(ionic) {
ionic.Animator = {
animate: function(element, className, fn) {
@@ -40,4 +41,4 @@
};
}
};
-})(window.ionic);
+})(ionic);
diff --git a/js/events.js b/js/utils/events.js
similarity index 100%
rename from js/events.js
rename to js/utils/events.js
diff --git a/js/gestures.js b/js/utils/gestures.js
similarity index 99%
rename from js/gestures.js
rename to js/utils/gestures.js
index e836e94232..32346c3d99 100644
--- a/js/gestures.js
+++ b/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) {
diff --git a/js/platform.js b/js/utils/platform.js
similarity index 100%
rename from js/platform.js
rename to js/utils/platform.js
diff --git a/js/tapPolyfill.js b/js/utils/tapPolyfill.js
similarity index 100%
rename from js/tapPolyfill.js
rename to js/utils/tapPolyfill.js
diff --git a/js/utils.js b/js/utils/utils.js
similarity index 100%
rename from js/utils.js
rename to js/utils/utils.js
diff --git a/js/views/headerBar.js b/js/views/headerBarView.js
similarity index 99%
rename from js/views/headerBar.js
rename to js/views/headerBarView.js
index 4b43c58bbe..636e1181ee 100644
--- a/js/views/headerBar.js
+++ b/js/views/headerBarView.js
@@ -1,3 +1,4 @@
+
(function(ionic) {
ionic.views.HeaderBar = function(opts) {
diff --git a/js/views/navBar.js b/js/views/navBarView.js
similarity index 100%
rename from js/views/navBar.js
rename to js/views/navBarView.js
diff --git a/js/views/sideMenu.js b/js/views/sideMenuView.js
similarity index 100%
rename from js/views/sideMenu.js
rename to js/views/sideMenuView.js
diff --git a/js/views/tabBar.js b/js/views/tabBarView.js
similarity index 100%
rename from js/views/tabBar.js
rename to js/views/tabBarView.js
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
index e8fe6af0b6..5c3c27c8e0 100644
--- a/js/views/toggleView.js
+++ b/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;
}
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index 105fd34e33..8e21465a44 100644
--- a/scss/ionic/_toggle.scss
+++ b/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);
+ }
}
diff --git a/test/index.html b/test/index.html
index d407da003b..7fe863d48a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -16,28 +16,32 @@
Ionic Tests
-
+
+
+
+
+
diff --git a/test/input-toggle.html b/test/input-toggle.html
index 3c54c77ef8..02b15edc5e 100644
--- a/test/input-toggle.html
+++ b/test/input-toggle.html
@@ -21,21 +21,21 @@
-
Airplane Mode
-
-
Do Not Disturb
-