javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

toggle drag

Browse Source
This commit is contained in:
Adam Bradley
2013-10-01 09:42:54 -05:00
parent 04bfa7c524
commit c7b96cb52d
10 changed files with 137 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/ext/simple/init.js
View File

@ -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) {

2
js/gestures.js
View File

@ -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) {

45
js/views/toggleView.js
View File

@ -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;
}