Skip to content

Commit 63274c0

Browse files
OS-pedrolourencoOS-pedrolourenco
committed
Tweaks
1 parent a6f271f commit 63274c0

2 files changed

Lines changed: 89 additions & 84 deletions

File tree

‎core/src/components/item-sliding/item-sliding.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -293,9 +293,9 @@ export class ItemSliding implements ComponentInterface {
293293
* Calculate the swipe threshold distance required to trigger a full swipe animation.
294294
* Returns the maximum options width plus a margin to ensure it's achievable.
295295
*/
296-
private getSwipeThreshold(): number {
297-
const maxWidth = Math.max(this.optsWidthRightSide, this.optsWidthLeftSide);
298-
return maxWidth + 100; // Slightly larger than SWIPE_MARGIN to be achievable
296+
private getSwipeThreshold(direction: 'start' | 'end'): number {
297+
const maxWidth = direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
298+
return maxWidth + 30; // Slightly larger than SWIPE_MARGIN to be achievable
299299
}
300300

301301
/**
@@ -312,7 +312,6 @@ export class ItemSliding implements ComponentInterface {
312312
el.classList.add('item-sliding-full-swipe');
313313

314314
try {
315-
// Calculate which options we're using
316315
const options = direction === 'end' ? this.rightOptions : this.leftOptions;
317316

318317
// Trigger expandable state without moving the item
@@ -485,9 +484,9 @@ export class ItemSliding implements ComponentInterface {
485484

486485
const shouldTriggerFullSwipe =
487486
hasExpandable &&
488-
(rawSwipeDistance > this.getSwipeThreshold() ||
487+
(rawSwipeDistance > this.getSwipeThreshold(direction) ||
489488
(Math.abs(gesture.velocityX) > 0.5 &&
490-
rawSwipeDistance > Math.max(this.optsWidthRightSide, this.optsWidthLeftSide) * 0.5));
489+
rawSwipeDistance > (direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide) * 0.5));
491490

492491
if (shouldTriggerFullSwipe) {
493492
this.animateFullSwipe(direction);
@@ -507,14 +506,7 @@ export class ItemSliding implements ComponentInterface {
507506
restingPoint = 0;
508507
}
509508

510-
const state = this.state;
511509
this.setOpenAmount(restingPoint, true);
512-
513-
if ((state & SlidingState.SwipeEnd) !== 0 && this.rightOptions) {
514-
this.rightOptions.fireSwipeEvent();
515-
} else if ((state & SlidingState.SwipeStart) !== 0 && this.leftOptions) {
516-
this.leftOptions.fireSwipeEvent();
517-
}
518510
}
519511

520512
private calculateOptsWidth() {

‎core/src/components/item-sliding/test/full-swipe/index.html‎

Lines changed: 84 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,83 +15,96 @@
1515
</head>
1616

1717
<body>
18-
<ion-content>
19-
<h2>Full Swipe - Expandable Options</h2>
20-
<ion-list>
21-
<!-- Expandable option on end side -->
22-
<ion-item-sliding id="expandable-end">
23-
<ion-item>
24-
<ion-label>Expandable End (Swipe Left)</ion-label>
25-
</ion-item>
26-
<ion-item-options side="end">
27-
<ion-item-option expandable="true" color="danger">Delete</ion-item-option>
28-
</ion-item-options>
29-
</ion-item-sliding>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Item Sliding - Full Swipe</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
3024

31-
<!-- Expandable on start side -->
32-
<ion-item-sliding id="expandable-start">
33-
<ion-item>
34-
<ion-label>Expandable Start (Swipe Right)</ion-label>
35-
</ion-item>
36-
<ion-item-options side="start">
37-
<ion-item-option expandable="true" color="success">Archive</ion-item-option>
38-
</ion-item-options>
39-
</ion-item-sliding>
25+
<ion-content>
26+
<div class="ion-padding-start" style="padding-top: 30px">
27+
<ion-title>Full Swipe - Expandable Options</ion-title>
28+
</div>
29+
<ion-list>
30+
<!-- Expandable option on end side -->
31+
<ion-item-sliding id="expandable-end">
32+
<ion-item>
33+
<ion-label>Expandable End (Swipe Left)</ion-label>
34+
</ion-item>
35+
<ion-item-options side="end">
36+
<ion-item-option expandable="true" color="danger">Delete</ion-item-option>
37+
</ion-item-options>
38+
</ion-item-sliding>
4039

41-
<!-- Both sides with expandable -->
42-
<ion-item-sliding id="expandable-both">
43-
<ion-item>
44-
<ion-label>Expandable Both Sides</ion-label>
45-
</ion-item>
46-
<ion-item-options side="start">
47-
<ion-item-option expandable="true" color="success">Archive</ion-item-option>
48-
</ion-item-options>
49-
<ion-item-options side="end">
50-
<ion-item-option expandable="true" color="danger">Delete</ion-item-option>
51-
</ion-item-options>
52-
</ion-item-sliding>
53-
</ion-list>
40+
<!-- Expandable on start side -->
41+
<ion-item-sliding id="expandable-start">
42+
<ion-item>
43+
<ion-label>Expandable Start (Swipe Right)</ion-label>
44+
</ion-item>
45+
<ion-item-options side="start">
46+
<ion-item-option expandable="true" color="success">Archive</ion-item-option>
47+
</ion-item-options>
48+
</ion-item-sliding>
5449

55-
<h2>Non-Expandable Options (No Full Swipe)</h2>
56-
<ion-list>
57-
<!-- Non-expandable option -->
58-
<ion-item-sliding id="non-expandable">
59-
<ion-item>
60-
<ion-label>Non-Expandable (Should Show Options)</ion-label>
61-
</ion-item>
62-
<ion-item-options side="end">
63-
<ion-item-option color="primary">Edit</ion-item-option>
64-
</ion-item-options>
65-
</ion-item-sliding>
50+
<!-- Both sides with expandable -->
51+
<ion-item-sliding id="expandable-both">
52+
<ion-item>
53+
<ion-label>Expandable Both Sides</ion-label>
54+
</ion-item>
55+
<ion-item-options side="start">
56+
<ion-item-option expandable="true" color="success">Archive</ion-item-option>
57+
</ion-item-options>
58+
<ion-item-options side="end">
59+
<ion-item-option expandable="true" color="danger">Delete</ion-item-option>
60+
</ion-item-options>
61+
</ion-item-sliding>
62+
</ion-list>
6663

67-
<!-- Multiple non-expandable options -->
68-
<ion-item-sliding id="non-expandable-multiple">
69-
<ion-item>
70-
<ion-label>Multiple Non-Expandable Options</ion-label>
71-
</ion-item>
72-
<ion-item-options side="end">
73-
<ion-item-option color="primary">Edit</ion-item-option>
74-
<ion-item-option color="secondary">Share</ion-item-option>
75-
<ion-item-option color="danger">Delete</ion-item-option>
76-
</ion-item-options>
77-
</ion-item-sliding>
78-
</ion-list>
64+
<div class="ion-padding-start" style="padding-top: 30px">
65+
<ion-title>Non-Expandable Options (No Full Swipe)</ion-title>
66+
</div>
67+
<ion-list>
68+
<!-- Non-expandable option -->
69+
<ion-item-sliding id="non-expandable">
70+
<ion-item>
71+
<ion-label>Non-Expandable (Should Show Options)</ion-label>
72+
</ion-item>
73+
<ion-item-options side="end">
74+
<ion-item-option color="primary">Edit</ion-item-option>
75+
</ion-item-options>
76+
</ion-item-sliding>
7977

80-
<h2>Mixed Scenarios</h2>
81-
<ion-list>
82-
<!-- Expandable with multiple options -->
83-
<ion-item-sliding id="expandable-with-others">
84-
<ion-item>
85-
<ion-label>Expandable + Other Options</ion-label>
86-
</ion-item>
87-
<ion-item-options side="end">
88-
<ion-item-option color="primary">Edit</ion-item-option>
89-
<ion-item-option expandable="true" color="danger">Delete</ion-item-option>
90-
</ion-item-options>
91-
</ion-item-sliding>
92-
</ion-list>
93-
</ion-content>
78+
<!-- Multiple non-expandable options -->
79+
<ion-item-sliding id="non-expandable-multiple">
80+
<ion-item>
81+
<ion-label>Multiple Non-Expandable Options</ion-label>
82+
</ion-item>
83+
<ion-item-options side="end">
84+
<ion-item-option color="primary">Edit</ion-item-option>
85+
<ion-item-option color="secondary">Share</ion-item-option>
86+
<ion-item-option color="danger">Delete</ion-item-option>
87+
</ion-item-options>
88+
</ion-item-sliding>
89+
</ion-list>
9490

91+
<div class="ion-padding-start" style="padding-top: 30px">
92+
<ion-title>Mixed Scenarios</ion-title>
93+
</div>
94+
<ion-list>
95+
<!-- Expandable with multiple options -->
96+
<ion-item-sliding id="expandable-with-others">
97+
<ion-item>
98+
<ion-label>Expandable + Other Options</ion-label>
99+
</ion-item>
100+
<ion-item-options side="end">
101+
<ion-item-option color="primary">Edit</ion-item-option>
102+
<ion-item-option expandable="true" color="danger">Delete</ion-item-option>
103+
</ion-item-options>
104+
</ion-item-sliding>
105+
</ion-list>
106+
</ion-content>
107+
</ion-app>
95108
<script>
96109
// Log swipe events for debugging
97110
document.querySelectorAll('ion-item-sliding').forEach((item) => {

0 commit comments

Comments
 (0)