Skip to content

Commit 14d29e6

Browse files
manucorporatadamdbradley
manucorporat
authored and
adamdbradley
committed
fix(item): sliding item supports dynamic options + tests
Closes #5192
1 parent c1d09dd commit 14d29e6

File tree

3 files changed

+45
-40
lines changed

3 files changed

+45
-40
lines changed

‎src/components/item/item-sliding.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,9 +224,9 @@ export class ItemSliding {
224224
*/
225225
startSliding(startX: number) {
226226
if (this._openAmount === 0) {
227-
this._optsDirty = true;
228227
this._setState(SlidingState.Enabled);
229228
}
229+
this._optsDirty = true;
230230
this._startX = startX + this._openAmount;
231231
this.item.setCssStyle(CSS.transition, 'none');
232232
}
@@ -290,9 +290,11 @@ export class ItemSliding {
290290

291291
calculateOptsWidth() {
292292
if (this._optsDirty) {
293+
this._optsWidthRightSide = 0;
293294
if (this._rightOptions) {
294295
this._optsWidthRightSide = this._rightOptions.width();
295296
}
297+
this._optsWidthLeftSide = 0;
296298
if (this._leftOptions) {
297299
this._optsWidthLeftSide = this._leftOptions.width();
298300
}

‎src/components/item/test/sliding/index.ts

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,28 @@ class E2EPage {
99
@ViewChild('myList', {read: List}) list: List;
1010

1111
items: number[] = [];
12-
shouldShow: boolean = true;
12+
slidingEnabled: boolean = true;
1313

14-
moreText: string = "Dynamic More";
15-
archiveText: string = "Dynamic Archive";
14+
moreText: string = 'Dynamic More';
15+
archiveText: string = 'Dynamic Archive';
1616

1717
constructor(private app: App, private nav: NavController) {
1818
for (let x = 0; x < 5; x++) {
1919
this.items.push(x);
2020
}
2121
}
2222

23+
toggleSliding() {
24+
this.slidingEnabled = !this.slidingEnabled;
25+
}
26+
2327
changeDynamic() {
24-
if (this.moreText.includes("Dynamic")) {
25-
this.moreText = "Changed More";
26-
this.archiveText = "Changed Archive";
28+
if (this.moreText.includes('Dynamic')) {
29+
this.moreText = 'Changed More';
30+
this.archiveText = 'Changed Archive';
2731
} else {
28-
this.moreText = "Dynamic More";
29-
this.archiveText = "Dynamic Archive";
32+
this.moreText = 'Dynamic More';
33+
this.archiveText = 'Dynamic Archive';
3034
}
3135
}
3236

‎src/components/item/test/sliding/main.html

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,21 @@
77
</ion-toolbar>
88

99
<ion-content>
10-
10+
<div padding>
11+
<button block (click)="toggleSliding()">Toggle sliding</button>
12+
<button block (click)="changeDynamic()">Change Dynamic Options</button>
13+
<button block (click)="closeOpened()">Close Opened Items</button>
14+
</div>
1115
<ion-list #myList>
1216

13-
<ion-item-sliding #item>
14-
<button ion-item text-wrap (click)="didClick(item)">
17+
<ion-item-sliding #item0>
18+
<button ion-item text-wrap (click)="didClick(item0)">
1519
<h2>RIGHT side - no icons</h2>
1620
<p>Hey do you want to go to the game tonight?</p>
1721
</button>
18-
<ion-item-options>
19-
<button primary (click)="archive(item)">Archive</button>
20-
<button danger (click)="del(item)">Delete</button>
22+
<ion-item-options *ngIf="slidingEnabled">
23+
<button primary (click)="archive(item0)">Archive</button>
24+
<button danger (click)="del(item0)">Delete</button>
2125
</ion-item-options>
2226
</ion-item-sliding>
2327

@@ -26,25 +30,25 @@ <h2>RIGHT side - no icons</h2>
2630
<h2>LEFT side - no icons</h2>
2731
<p>I think I figured out how to get more Mountain Dew</p>
2832
</ion-item>
29-
<ion-item-options side="left">
33+
<ion-item-options side="left" (ionSwipe)="del($event)" *ngIf="slidingEnabled">
3034
<button primary (click)="archive(item1)">Archive</button>
3135
<button danger (click)="del(item1)" swipeable>Delete</button>
3236
</ion-item-options>
3337
</ion-item-sliding>
3438

3539

36-
<ion-item-sliding #item2 *ngIf="shouldShow">
40+
<ion-item-sliding #item2>
3741
<ion-item text-wrap detail-push>
3842
<h2>RIGHT/LEFT side - icons</h2>
3943
<p>I think I figured out how to get more Mountain Dew</p>
4044
</ion-item>
41-
<ion-item-options side="left" (ionSwipe)="unread($event)">
45+
<ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
4246
<button secondary swipeable (click)="unread(item2)">
4347
<ion-icon name="ios-checkmark"></ion-icon>Unread
4448
</button>
4549
</ion-item-options>
4650

47-
<ion-item-options side="right" (ionSwipe)="del(item2)">
51+
<ion-item-options side="right" (ionSwipe)="del(item2)" *ngIf="slidingEnabled">
4852
<button primary (click)="archive(item2)">
4953
<ion-icon name="mail"></ion-icon>Archive
5054
</button>
@@ -55,12 +59,12 @@ <h2>RIGHT/LEFT side - icons</h2>
5559
</ion-item-sliding>
5660

5761

58-
<ion-item-sliding #item3 *ngIf="shouldShow">
62+
<ion-item-sliding #item3>
5963
<ion-item text-wrap detail-push>
6064
<h2>RIGHT/LEFT side - icons (item-left)</h2>
6165
<p>I think I figured out how to get more Mountain Dew</p>
6266
</ion-item>
63-
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)">
67+
<ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
6468
<button secondary swipeable (click)="unread(item3)">
6569
<ion-icon name="ios-checkmark"></ion-icon>Unread
6670
</button>
@@ -70,7 +74,7 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
7074
<button primary (click)="archive(item3)">
7175
<ion-icon name="mail"></ion-icon>Archive
7276
</button>
73-
<button danger (click)="del(item3)" swipeable>
77+
<button danger (click)="del(item3)" swipeable *ngIf="slidingEnabled">
7478
<ion-icon name="trash"></ion-icon>Delete
7579
</button>
7680
</ion-item-options>
@@ -83,14 +87,14 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
8387
One Line w/ Icon, div only text
8488
</ion-item>
8589
<ion-item-options icon-left (ionSwipe)="archive($event)">
86-
<button primary (click)="archive(item4)" swipeable>
90+
<button primary (click)="archive(item4)" swipeable *ngIf="slidingEnabled">
8791
<ion-icon name="archive"></ion-icon>Archive
8892
</button>
8993
</ion-item-options>
9094
</ion-item-sliding>
9195

9296

93-
<ion-item-sliding #item5>
97+
<ion-item-sliding #item5 *ngIf="slidingEnabled">
9498
<ion-item>
9599
<ion-avatar item-left>
96100
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -110,7 +114,7 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
110114
</ion-item-options>
111115
</ion-item-sliding>
112116

113-
<ion-item-sliding #item>
117+
<ion-item-sliding #item6>
114118
<ion-item>
115119
One Line, dynamic option
116120
</ion-item>
@@ -119,14 +123,14 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
119123
<ion-icon name="more"></ion-icon>
120124
{{ moreText }}
121125
</button>
122-
<button secondary (click)="archive(item)">
126+
<button secondary (click)="archive(item6)">
123127
<ion-icon name="archive"></ion-icon>
124128
{{ archiveText }}
125129
</button>
126130
</ion-item-options>
127131
</ion-item-sliding>
128132

129-
<ion-item-sliding #item>
133+
<ion-item-sliding #item7>
130134
<ion-item>
131135
One Line, dynamic icon-left option
132136
</ion-item>
@@ -135,14 +139,14 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
135139
<ion-icon name="more"></ion-icon>
136140
{{ moreText }}
137141
</button>
138-
<button secondary (click)="archive(item)">
142+
<button secondary (click)="archive(item7)">
139143
<ion-icon name="archive"></ion-icon>
140144
{{ archiveText }}
141145
</button>
142146
</ion-item-options>
143147
</ion-item-sliding>
144148

145-
<ion-item-sliding #item6>
149+
<ion-item-sliding #item8>
146150
<ion-item>
147151
<ion-thumbnail item-left>
148152
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -151,18 +155,18 @@ <h2>DOWNLOAD</h2>
151155
<p>Paragraph text.</p>
152156
</ion-item>
153157
<ion-item-options (ionSwipe)="download($event)">
154-
<button primary (click)="archive(item6)">
158+
<button primary (click)="archive(item8)">
155159
<ion-icon name="archive"></ion-icon>Archive
156160
</button>
157-
<button secondary swipeable (click)="download(item6)">
161+
<button secondary swipeable (click)="download(item8)">
158162
<ion-icon name="download" class="download-hide"></ion-icon>
159163
<div class="download-hide">Download</div>
160164
<ion-spinner id="download-spinner"></ion-spinner>
161165
</button>
162166
</ion-item-options>
163167
</ion-item-sliding>
164168

165-
<ion-item-sliding>
169+
<ion-item-sliding item9>
166170
<ion-item>
167171
<ion-thumbnail item-left>
168172
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -177,7 +181,7 @@ <h2>Normal ion-item (no sliding)</h2>
177181
<p>Paragraph text.</p>
178182
</ion-item>
179183

180-
<button ion-item text-wrap (click)="didClick(item)">
184+
<button ion-item text-wrap (click)="didClick(item9)">
181185
<h2>Normal button (no sliding)</h2>
182186
<p>Hey do you want to go to the game tonight?</p>
183187
</button>
@@ -186,22 +190,17 @@ <h2>Normal button (no sliding)</h2>
186190

187191

188192
<ion-list>
189-
<ion-item-sliding *ngFor="let data of items" #item8>
193+
<ion-item-sliding *ngFor="let data of items" #item9>
190194
<ion-item text-wrap detail-push>
191195
<h3>ng-for {{data}}</h3>
192196
</ion-item>
193197
<ion-item-options>
194-
<button primary (click)="archive(item8)">Archive</button>
198+
<button primary (click)="archive(item9)">Archive</button>
195199
</ion-item-options>
196200
</ion-item-sliding>
197201

198202
</ion-list>
199203

200-
<div padding>
201-
<button block (click)="changeDynamic()">Change Dynamic Options</button>
202-
<button block (click)="closeOpened()">Close Opened Items</button>
203-
</div>
204-
205204
</ion-content>
206205

207206
<style>

0 commit comments

Comments
 (0)