fix(item): slide close on tap

This commit is contained in:
Max Lynch
2015-10-06 19:10:44 -05:00
parent 6263943aeb
commit 7fb6099e1e
3 changed files with 37 additions and 6 deletions

View File

@ -88,8 +88,12 @@ export class ItemSliding {
this.openAmount = 0;
// Enable it once, it'll get disabled on the next drag
this.enableAnimation();
el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
raf(() => {
this.enableAnimation();
if(this.itemSlidingContent) {
this.itemSlidingContent.style[CSS.transform] = 'translateX(0)';
}
});
}
open(amt) {
let el = this.itemSlidingContent;
@ -101,7 +105,7 @@ export class ItemSliding {
el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
}
}
get isOpen() {
isOpen() {
return this.openAmount > 0;
}
getOpenAmt() {
@ -130,6 +134,12 @@ class ItemSlideGesture extends DragGesture {
this.el = el;
this.item = item;
this.listen();
this.el.addEventListener('touchstart', (e) => {
if(this.item.isOpen()) {
this.item.close();
}
})
}
onDragStart(ev) {

View File

@ -213,13 +213,24 @@ button.item {
.card {
button[ion-item]:not([detail-none]),
a[ion-item]:not([detail-none]),
[detail-push] {
[detail-push]:not(ion-item-sliding) {
@include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
}
ion-item-sliding[detail-push] {
ion-item-sliding-content {
@include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
}
}
}

View File

@ -2,7 +2,7 @@
<ion-list>
<ion-item-sliding class="item-text-wrap">
<ion-item-sliding class="item-text-wrap" detail-push>
<h3>Max Lynch</h3>
<p>
Hey do you want to go to the game tonight?
@ -12,7 +12,7 @@
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding class="item-text-wrap">
<ion-item-sliding class="item-text-wrap" detail-push>
<h3>Adam Bradley</h3>
<p>
I think I figured out how to get more Mountain Dew
@ -21,4 +21,14 @@
<button primary>Archive</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding class="item-text-wrap" detail-push>
<h3>Ben Sperry</h3>
<p>
I like paper
</p>
<ion-item-options>
<button primary>Archive</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>