javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +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
dist/ionic-simple.js vendored
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) {

7
dist/ionic.css vendored
View File

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

47
dist/ionic.js vendored
View File

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

7
dist/ionicIcons.css vendored
View File

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

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

9
scss/ionic/_toggle.scss
View File

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

48
test/index.html
View File

@ -16,28 +16,32 @@
<h1 class="title">Ionic Tests</h1>
</header>
<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>
<p><a class="button button-block button-default" href="button-groups.html"><i class="icon-star"></i> Button Groups</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
<p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon-star-empty"></i> Pull To Refresh</a></p>
<p><a class="button button-block button-default" href="side-menus.html"><i class="icon-star-empty"></i> Side Menus</a></p>
<p><a class="button button-block button-default" href="swipe.html"><i class="icon-star-empty"></i> Swipe</a></p>
<p><a class="button button-block button-default" href="tab-bars.html"><i class="icon-star-half-empty"></i> Tab Bars</a></p>
<p><a class="button button-block button-default" href="type.html"><i class="icon-star"></i> Type</a></p>
</main>
<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>
<p><a class="button button-block button-default" href="button-groups.html"><i class="icon-star"></i> Button Groups</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
<p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon-star-empty"></i> Pull To Refresh</a></p>
<p><a class="button button-block button-default" href="side-menus.html"><i class="icon-star-empty"></i> Side Menus</a></p>
<p><a class="button button-block button-default" href="swipe.html"><i class="icon-star-empty"></i> Swipe</a></p>
<p><a class="button button-block button-default" href="tab-bars.html"><i class="icon-star-half-empty"></i> Tab Bars</a></p>
<p><a class="button button-block button-default" href="type.html"><i class="icon-star"></i> Type</a></p>
</main>
</div>
</section>

8
test/input-toggle.html
View File

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