From c7b96cb52d25d1fb92d7bab7db8f7b485bb30544 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 1 Oct 2013 09:42:54 -0500 Subject: [PATCH] toggle drag --- dist/ionic-simple.js | 4 ---- dist/ionic.css | 7 ++++++ dist/ionic.js | 47 +++++++++++++++++++++++++++++++++++----- dist/ionicIcons.css | 7 ++++++ js/ext/simple/init.js | 4 ---- js/gestures.js | 2 ++ js/views/toggleView.js | 45 +++++++++++++++++++++++++++++++++----- scss/ionic/_toggle.scss | 9 ++++++++ test/index.html | 48 ++++++++++++++++++++++------------------- test/input-toggle.html | 8 +++---- 10 files changed, 137 insertions(+), 44 deletions(-) diff --git a/dist/ionic-simple.js b/dist/ionic-simple.js index fbff374a68..fdc2fa738a 100644 --- a/dist/ionic-simple.js +++ b/dist/ionic-simple.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/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/ionic.js b/dist/ionic.js index 7ae84f94a8..3d2a2b7df0 100644 --- a/dist/ionic.js +++ b/dist/ionic.js @@ -270,6 +270,8 @@ window.ionic = { 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) { @@ -1971,6 +1973,7 @@ ionic.views.TabBar.prototype = { 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 @@ -1980,21 +1983,55 @@ ionic.views.TabBar.prototype = { 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/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/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/gestures.js b/js/gestures.js index e836e94232..32346c3d99 100644 --- a/js/gestures.js +++ b/js/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/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

-
-

Alerts

-

Buttons

-

Button Groups

-

Cards

-

Footers

-

Headers

-

Input: Text (single-line)

-

Input: Text (multi-line)

-

Input: Radio Buttons

-

Input: Range

-

Input: Select

-

Input: Toggle

-

Lists

-

Modals

-

Popovers

-

Pull To Refresh

-

Side Menus

-

Swipe

-

Tab Bars

-

Type

-
+
+ +
+

Alerts

+

Buttons

+

Button Groups

+

Cards

+

Footers

+

Headers

+

Input: Text (single-line)

+

Input: Text (multi-line)

+

Input: Radio Buttons

+

Input: Range

+

Input: Select

+

Input: Toggle

+

Lists

+

Modals

+

Popovers

+

Pull To Refresh

+

Side Menus

+

Swipe

+

Tab Bars

+

Type

+
+ +
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 @@