Skip to content

Commit 7bb05e5

Browse files
jcassidyavjcassidyav
committed
fix: indicator linking and circular functionality
1 parent b6a1d77 commit 7bb05e5

File tree

8 files changed

+162
-52
lines changed

8 files changed

+162
-52
lines changed

‎demo-snippets/ng/indicator/indicator.component.html

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,13 @@
44
</ActionBar>
55

66
<StackLayout>
7-
<Pager
8-
[items]="items"
9-
height="300"
10-
[selectedIndex]="selectedIndex"
11-
(selectedIndexChange)="onIndexChanged($event)"
12-
indicator="fill"
13-
showIndicator="true"
14-
>
7+
<Pager [items]="items" height="300" [selectedIndex]="selectedIndex" (selectedIndexChange)="onIndexChanged($event)"
8+
indicator="fill" showIndicator="true">
159
<ng-template let-i="index" let-item="item">
16-
<GridLayout
17-
[backgroundColor]="item.color"
18-
>
10+
<GridLayout [backgroundColor]="item.color">
1911
<Label class="label" [text]="item.title"></Label>
2012
</GridLayout>
2113
</ng-template>
2214
</Pager>
2315
<Button text="Reset" (tap)="resetPager()"></Button>
24-
</StackLayout>
16+
</StackLayout>

‎packages/ui-pager-indicator/platforms/ios/src/ProgressHelper.swift

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Foundation
2+
import CHIPageControl
3+
4+
@objcMembers
5+
@objc(NSCProgressHelper)
6+
public class NSCProgressHelper: NSObject {
7+
8+
public static func setProgress( pageControl: CHIBasePageControl,progress: Int, animated: Bool) {
9+
10+
pageControl.set(progress: progress, animated: animated);
11+
12+
}
13+
}

‎src/ui-pager-indicator/index.ios.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export class PagerIndicator extends PagerIndicatorBase {
4848
}
4949

5050
setProgress(position: number, progress: number) {
51-
this.nativeViewProtected.setWithProgressAnimated(progress, true);
51+
NSCProgressHelper.setProgressWithPageControlProgressAnimated(this.nativeViewProtected, progress, true);
5252
}
5353
getCount(): number {
5454
return this.nativeViewProtected.numberOfPages;
@@ -58,7 +58,8 @@ export class PagerIndicator extends PagerIndicatorBase {
5858
}
5959
setInteractiveAnimation(animated?: boolean) {}
6060
setSelection(progress: number, animated: boolean = true) {
61-
this.nativeViewProtected.setWithProgressAnimated(progress, animated);
61+
console.log("Setting selection", progress, animated);
62+
NSCProgressHelper.setProgressWithPageControlProgressAnimated(this.nativeViewProtected, progress, animated);
6263
}
6364
setCount(count: number) {
6465
this.nativeViewProtected.numberOfPages = count;

‎src/ui-pager-indicator/references.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
/// <reference path="./typings/objc!CHIPageControl.d.ts" />
2+
/// <reference path="./typings/objc!nsswiftsupport.d.ts" />

‎src/ui-pager-indicator/typings/objc!nsswiftsupport.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
declare class NSCProgressHelper extends NSObject {
3+
4+
static alloc(): NSCProgressHelper; // inherited from NSObject
5+
6+
static new(): NSCProgressHelper; // inherited from NSObject
7+
8+
static setProgressWithPageControlProgressAnimated(pageControl: CHIBasePageControl, progress: number, animated: boolean): void;
9+
}

‎src/ui-pager/index.android.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -526,6 +526,8 @@ export class Pager extends PagerBase {
526526

527527
if (isRightOverScrolled || isLeftOverScrolled) {
528528
selectedPosition = position;
529+
}
530+
if (isRightOverScrolled) {
529531
indicator.setSelection(selectedPosition);
530532
}
531533

@@ -581,6 +583,12 @@ function initPagerChangeCallback() {
581583
onPageSelected(position: number) {
582584
const owner = this.owner && this.owner.get();
583585
if (owner) {
586+
if (owner.lastEvent === 0 && !owner.circularMode) {
587+
// page changing without scroll so do the indicator etc.
588+
selectedIndexProperty.nativeValueChange(owner, position);
589+
owner.indicator?.setSelection(position, true);
590+
}
591+
584592
owner.notify({
585593
eventName: Pager.swipeEvent,
586594
object: owner

‎src/ui-pager/index.ios.ts

Lines changed: 109 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ class UICellView extends UIView {
6363

6464
const PFLAG_FORCE_LAYOUT = 1;
6565
export class Pager extends PagerBase {
66+
6667
lastEvent: number = 0;
6768
private mDisableSwipe: boolean = false;
6869
private mDisableAnimation: boolean = false;
@@ -177,6 +178,13 @@ export class Pager extends PagerBase {
177178
}
178179
}
179180

181+
/**
182+
*
183+
* Get the selected index from the position in the CollectionView
184+
*
185+
* @param index The position in the collectionView
186+
* @returns The selected Index ( i.e. the number in the slides as the user would view it).
187+
*/
180188
getPosition(index: number): number {
181189
let position = index;
182190
if (this.circularMode) {
@@ -191,6 +199,39 @@ export class Pager extends PagerBase {
191199
return position;
192200
}
193201

202+
/**
203+
*
204+
* Get the position in the CollectionView from the selected index
205+
*
206+
* @param index The position in the collectionView
207+
* @returns The selected Index ( i.e. the number in the slides as the user would view it).
208+
*/
209+
getIndex(index: number): number {
210+
let position = index;
211+
if (this.circularMode) {
212+
if (position === 0) {
213+
position = 1;
214+
} else if (position === this.firstDummy) {
215+
position = 0;
216+
} else {
217+
position = position + 1;
218+
}
219+
}
220+
return position;
221+
}
222+
223+
animateForFlip(index: number): boolean {
224+
console.log("AnimateForFlip", index, this.firstDummy);
225+
if (!this.circularMode) {
226+
return true;
227+
}
228+
229+
if (index !== this.firstDummy && index !== 0) {
230+
return true;
231+
}
232+
return false;
233+
}
234+
194235
get itemCount(): number {
195236
return this._childrenCount ? this._childrenCount + (this.circularMode ? 2 : 0) : 0;
196237
}
@@ -269,9 +310,9 @@ export class Pager extends PagerBase {
269310
}
270311

271312
[itemsProperty.setNative](value: any) {
272-
// if (this.indicatorView && value && value.length) {
273-
// this.indicatorView.numberOfPages = value.length;
274-
// }
313+
if (this.indicator && value && value.length) {
314+
this.indicator.setCount(value.length);
315+
}
275316
this.setObservableArrayInstance(value);
276317

277318
if (!value) {
@@ -297,9 +338,9 @@ export class Pager extends PagerBase {
297338
if (!this.nativeViewProtected) {
298339
return;
299340
}
300-
// if (this.indicatorView && this.mObservableArrayInstance && this.mObservableArrayInstance.length) {
301-
// this.indicatorView.numberOfPages = this.mObservableArrayInstance.length;
302-
// }
341+
if (this.indicator && this.mObservableArrayInstance && this.mObservableArrayInstance.length) {
342+
this.indicator.setCount(this.mObservableArrayInstance.length);
343+
}
303344

304345
const collectionView = this.nativeViewProtected;
305346
if (collectionView) {
@@ -328,7 +369,9 @@ export class Pager extends PagerBase {
328369
array.push(NSIndexPath.indexPathForRowInSection(args.index + i, 0));
329370
}
330371
collectionView.deleteItemsAtIndexPaths(array);
331-
} else {
372+
}
373+
374+
if (args.addedCount > 0) {
332375
const addedArray = [];
333376
for (let i = 0; i < args.addedCount; i++) {
334377
addedArray.push(NSIndexPath.indexPathForRowInSection(args.index + i, 0));
@@ -354,6 +397,7 @@ export class Pager extends PagerBase {
354397
_onItemsChanged(oldValue: any, newValue: any): void {}
355398

356399
scrollToIndexAnimated(index: number, animate: boolean) {
400+
console.log('scrollToIndexAnimated', index, animate);
357401
if (!this.nativeViewProtected) return;
358402

359403
const contentSize = this.nativeViewProtected.contentSize;
@@ -384,7 +428,7 @@ export class Pager extends PagerBase {
384428
// Reference: https://stackoverflow.com/a/53798708/6015400
385429
this.nativeViewProtected.setContentOffsetAnimated(CGPointMake(1, 0), !!animate);
386430
this.nativeViewProtected.scrollToItemAtIndexPathAtScrollPositionAnimated(
387-
NSIndexPath.indexPathForItemInSection(maxMinIndex, 0),
431+
NSIndexPath.indexPathForItemInSection(this.getIndex(maxMinIndex), 0),
388432
this.orientation === 'vertical' ? UICollectionViewScrollPosition.CenteredVertically : UICollectionViewScrollPosition.CenteredHorizontally,
389433
!!animate
390434
);
@@ -418,6 +462,10 @@ export class Pager extends PagerBase {
418462
this._updateScrollPosition();
419463
this._initAutoPlay(this.autoPlay);
420464
// });
465+
466+
if (this.indicator) {
467+
this.indicator.setCount(this._childrenCount);
468+
}
421469
}
422470

423471
_isDataDirty = false;
@@ -750,6 +798,7 @@ class PagerCell extends UICollectionViewCell {
750798
@ObjCClass(UICollectionViewDelegate, UICollectionViewDelegateFlowLayout)
751799
class UICollectionDelegateImpl extends NSObject implements UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
752800
private _owner: WeakRef<Pager>;
801+
isScrolling = false;
753802

754803
public static initWithOwner(owner: WeakRef<Pager>): UICollectionDelegateImpl {
755804
const delegate = UICollectionDelegateImpl.alloc().init() as UICollectionDelegateImpl;
@@ -839,8 +888,9 @@ class UICollectionDelegateImpl extends NSObject implements UICollectionViewDeleg
839888
object: owner
840889
});
841890
}
891+
console.log("Scroll ended");
842892
}
843-
893+
844894
public scrollViewDidScroll(scrollView: UIScrollView): void {
845895
const owner = this._owner.get();
846896
if (owner) {
@@ -866,6 +916,12 @@ class UICollectionDelegateImpl extends NSObject implements UICollectionViewDeleg
866916
if (owner.selectedIndex !== index && !Number.isNaN(index)) {
867917
// selectedIndexProperty.nativeValueChange(owner, index);
868918
}
919+
if (owner.indicator && !Number.isNaN(index)) {
920+
if (owner.circularMode && (index === 0 || index === owner.firstDummy)) {
921+
} else {
922+
owner.indicator.setSelection(owner.getPosition(index));
923+
}
924+
}
869925
owner.notify({
870926
object: owner,
871927
eventName: Pager.scrollEvent,
@@ -887,18 +943,48 @@ class UICollectionDelegateImpl extends NSObject implements UICollectionViewDeleg
887943
// NSIndexPath.indexPathForRowInSection(Math.round(width),0), UICollectionViewScrollPosition.CenteredHorizontally, true
888944
// );
889945

890-
// if(owner.circularMode){
891-
// if(nextIndex === 0){
892-
// selectedIndexProperty.nativeValueChange(owner, owner._childrenCount - 3);
893-
// }else if(nextIndex === owner._childrenCount -1){
894-
// selectedIndexProperty.nativeValueChange(owner, 0);
895-
// }else {
896-
// selectedIndexProperty.nativeValueChange(owner, nextIndex - 1);
897-
// }
898-
// }else {
899-
// selectedIndexProperty.nativeValueChange(owner, nextIndex);
900-
// }
901-
946+
if (owner.circularMode) {
947+
console.log('CIRCULAR', index);
948+
/* if (index === 0) {
949+
selectedIndexProperty.nativeValueChange(owner, owner._childrenCount - 3);
950+
} else if (index === owner._childrenCount - 1) {
951+
selectedIndexProperty.nativeValueChange(owner, 0);
952+
} else {
953+
selectedIndexProperty.nativeValueChange(owner, index - 1);
954+
}
955+
*/
956+
if (!this.isScrolling) {
957+
this.isScrolling = true;
958+
const contentOffset = scrollView.contentOffset;
959+
const contentSize = scrollView.contentSize;
960+
const frameSize = scrollView.frame.size;
961+
if (contentOffset.x < 0) {
962+
scrollView.contentOffset = CGPointMake(contentSize.width - frameSize.width * 2, 0);
963+
if (owner.indicator) {
964+
owner.indicator.setSelection(owner.lastIndex, false);
965+
}
966+
} else if (contentOffset.x + frameSize.width > contentSize.width) {
967+
scrollView.contentOffset = CGPointMake(frameSize.width, 0);
968+
owner.indicator.setSelection(0, false);
969+
}
970+
console.log('Doing circular', contentOffset.x, frameSize.width, contentSize.width);
971+
972+
if (contentOffset.x === 0) {
973+
console.log("Moving point 1");
974+
scrollView.contentOffset = CGPointMake(contentSize.width - frameSize.width * 2, 0);
975+
if (owner.indicator) {
976+
console.log("Moving point 2");
977+
owner.indicator.setSelection(owner.lastIndex, false);
978+
}
979+
} else if (contentOffset.x + frameSize.width === contentSize.width) {
980+
console.log("Moving point 3");
981+
scrollView.contentOffset = CGPointMake(frameSize.width, 0);
982+
console.log("Moving point 4");
983+
owner.indicator.setSelection(0, false);
984+
}
985+
this.isScrolling = false;
986+
}
987+
}
902988
/* if (!Number.isNaN(width)) {
903989
let page = Math.ceil(width);
904990
const doScroll = () => {
@@ -1180,7 +1266,7 @@ class UICollectionViewFlowLinearLayoutImpl extends UICollectionViewFlowLayout {
11801266
const flickedPages = Math.abs(Math.round(flickVelocity)) <= 1 ? 0 : Math.round(flickVelocity);
11811267

11821268
const newPageIndex = currentPage + flickedPages;
1183-
selectedIndexProperty.nativeValueChange(owner, Math.min(Math.max(newPageIndex, 0), owner._childrenCount - 1));
1269+
selectedIndexProperty.nativeValueChange(owner, owner.getPosition(Math.min(Math.max(newPageIndex, 0), owner._childrenCount - 1)));
11841270
// Calculate newHorizontalOffset.
11851271
const newHorizontalOffset = newPageIndex * pageWidth - this.collectionView.contentInset.left;
11861272

@@ -1203,7 +1289,7 @@ class UICollectionViewFlowLinearLayoutImpl extends UICollectionViewFlowLayout {
12031289
const flickedPages = Math.abs(Math.round(flickVelocity)) <= 1 ? 0 : Math.round(flickVelocity);
12041290

12051291
const newPageIndex = currentPage + flickedPages;
1206-
selectedIndexProperty.nativeValueChange(owner, Math.min(Math.max(newPageIndex, 0), owner._childrenCount - 1));
1292+
selectedIndexProperty.nativeValueChange(owner, owner.getPosition(Math.min(Math.max(newPageIndex, 0), owner._childrenCount - 1)));
12071293
const newVerticalOffset = newPageIndex * pageHeight - this.collectionView.contentInset.top;
12081294

12091295
return CGPointMake(proposedContentOffset.x, newVerticalOffset);

0 commit comments

Comments
 (0)