javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): improve open/close logic, update demos

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-06-12 03:07:08 +02:00
committed by Adam Bradley
parent 0660cb6b4a
commit db9fa7ead3
6 changed files with 163 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/item/item-sliding.scss
View File

@@ -87,10 +87,10 @@ ion-item-sliding.active-slide {
}
}
// Item Swipeable Animation
// Item Expandable Animation
// --------------------------------------------------
button[swipeable] {
.button-expandable {
flex-shrink: 0;
transition-duration: 0;
@@ -105,7 +105,7 @@ ion-item-sliding.active-swipe-left {
}
}
ion-item-sliding.active-swipe-right button[swipeable] {
ion-item-sliding.active-swipe-right .button-expandable {
order: 1;
padding-left: 90%;
@@ -114,7 +114,7 @@ ion-item-sliding.active-swipe-right button[swipeable] {
transition-property: padding-left;
}
ion-item-sliding.active-swipe-left button[swipeable] {
ion-item-sliding.active-swipe-left .button-expandable {
order: -1;
padding-right: 90%;

28
src/components/item/item-sliding.ts
View File

@@ -269,10 +269,10 @@ export class ItemSliding {
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
let isOnResetZone = Math.abs(this._openAmount) < Math.abs(restingPoint / 2);
let isMovingSlow = Math.abs(velocity) < 0.3;
let isDirection = (this._openAmount > 0) === (velocity > 0);
if (isOnResetZone && (isMovingSlow || isDirection)) {
let isCloseDirection = (this._openAmount > 0) === !(velocity < 0);
let isMovingFast = Math.abs(velocity) > 0.3;
let isOnCloseZone = Math.abs(this._openAmount) < Math.abs(restingPoint / 2);
if (shouldClose(isCloseDirection, isMovingFast, isOnCloseZone)) {
restingPoint = 0;
}
@@ -402,3 +402,23 @@ export class ItemSliding {
}
}
function shouldClose(isCloseDirection: boolean, isMovingFast: boolean, isOnCloseZone: boolean): boolean {
// The logic required to know when the sliding item should close (openAmount=0)
// depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone)
// and it ended up being too complicated to be written manually without errors
// so the truth table is attached below: (0=false, 1=true)
// isCloseDirection | isMovingFast | isOnCloseZone || shouldClose
// 0 | 0 | 0 || 0
// 0 | 0 | 1 || 1
// 0 | 1 | 0 || 0
// 0 | 1 | 1 || 0
// 1 | 0 | 0 || 0
// 1 | 0 | 1 || 1
// 1 | 1 | 0 || 1
// 1 | 1 | 1 || 1
// The resulting expression was generated by resolving the K-map (Karnaugh map):
let shouldClose = (!isMovingFast && isOnCloseZone) || (isCloseDirection && isMovingFast);
return shouldClose;
}

16
src/components/item/test/sliding/main.html
View File

@@ -32,7 +32,7 @@
</ion-item>
<ion-item-options side="left" (ionSwipe)="del($event)" *ngIf="slidingEnabled">
<button primary (click)="archive(item1)">Archive</button>
<button danger (click)="del(item1)" swipeable>Delete</button>
<button danger (click)="del(item1)">Delete</button>
</ion-item-options>
</ion-item-sliding>
@@ -43,7 +43,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-item>
<ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
<button secondary swipeable (click)="unread(item2)">
<button secondary expandable (click)="unread(item2)">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</button>
</ion-item-options>
@@ -52,7 +52,7 @@
<button primary (click)="archive(item2)">
<ion-icon name="mail"></ion-icon>Archive
</button>
<button danger (click)="del(item2)" swipeable>
<button danger (click)="del(item2)" expandable>
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options>
@@ -65,7 +65,7 @@
<p>I think I figured out how to get more Mountain Dew</p>
</ion-item>
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
<button secondary swipeable (click)="unread(item3)">
<button secondary expandable (click)="unread(item3)">
<ion-icon name="ios-checkmark"></ion-icon>Unread
</button>
</ion-item-options>
@@ -74,7 +74,7 @@
<button primary (click)="archive(item3)">
<ion-icon name="mail"></ion-icon>Archive
</button>
<button danger (click)="del(item3)" swipeable *ngIf="slidingEnabled">
<button danger (click)="del(item3)" expandable *ngIf="slidingEnabled">
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options>
@@ -87,7 +87,7 @@
One Line w/ Icon, div only text
</ion-item>
<ion-item-options icon-left (ionSwipe)="archive($event)">
<button primary (click)="archive(item4)" swipeable *ngIf="slidingEnabled">
<button primary (click)="archive(item4)" expandable *ngIf="slidingEnabled">
<ion-icon name="archive"></ion-icon>Archive
</button>
</ion-item-options>
@@ -102,7 +102,7 @@
One Line w/ Avatar, div only text
</ion-item>
<ion-item-options>
<button primary swipeable>
<button primary expandable>
<ion-icon name="more"></ion-icon>More
</button>
<button secondary (click)="archive(item5)">
@@ -158,7 +158,7 @@
<button primary (click)="archive(item8)">
<ion-icon name="archive"></ion-icon>Archive
</button>
<button secondary swipeable (click)="download(item8)">
<button secondary expandable (click)="download(item8)">
<ion-icon name="download" class="download-hide"></ion-icon>
<div class="download-hide">Download</div>
<ion-spinner id="download-spinner"></ion-spinner>

2
src/components/menu/menu.ts
View File

@@ -366,7 +366,7 @@ export class Menu extends Ion {
/**
* @private
*/
bdClick(ev) {
bdClick(ev: Event) {
console.debug('backdrop clicked');
ev.preventDefault();
ev.stopPropagation();