Skip to content

Commit 01c829c

Browse files
ajoslinajoslin
committed
feat(slideBox): use selected value provided for initial section
Addresses #2288.
1 parent 8f34cdb commit 01c829c

File tree

5 files changed

+50
-30
lines changed

5 files changed

+50
-30
lines changed

‎js/angular/controller/slideBoxController.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ IonicModule
1111
function(scope, element, $$ionicAttachDrag, $interval) {
1212
var self = this;
1313
var slideList = ionic.Utils.list([]);
14-
var selectedIndex = -1;
1514
var slidesParent = angular.element(element[0].querySelector('.slider-slides'));
1615

1716
// Successful slide requires velocity to be greater than this amount
@@ -54,24 +53,23 @@ function(scope, element, $$ionicAttachDrag, $interval) {
5453
// Gets whether the given index is relevant to selected
5554
// That is, whether the given index is previous, selected, or next
5655
function isRelevant(index) {
57-
return slideList.isRelevant(index, selectedIndex);
56+
return slideList.isRelevant(index, scope.selectedIndex);
5857
}
5958

60-
// Gets the index to the previous of the given slide, default selectedIndex
59+
// Gets the index to the previous of the given slide, default scope.selectedIndex
6160
function previous(index) {
62-
index = arguments.length ? index : selectedIndex;
61+
index = arguments.length ? index : scope.selectedIndex;
6362
// If we only have two slides and loop is enabled, we cannot have a previous
6463
// because previous === next. In this case, return -1.
6564
if (self.loop() && self.count() === 2) {
66-
console.log('lying about previous');
6765
return -1;
6866
}
6967
return slideList.previous(index);
7068
}
7169

72-
// Gets the index to the next of the given slide, default selectedIndex
70+
// Gets the index to the next of the given slide, default scope.selectedIndex
7371
function next(index) {
74-
index = arguments.length ? index : selectedIndex;
72+
index = arguments.length ? index : scope.selectedIndex;
7573
return slideList.next(index);
7674
}
7775

@@ -99,7 +97,12 @@ function(scope, element, $$ionicAttachDrag, $interval) {
9997
var newIndex = slideList.add(slide, index);
10098
slide.onAdded(slidesParent);
10199

102-
if (selectedIndex === -1) {
100+
// If we are waiting for a certain scope.selectedIndex and this is it,
101+
// select the slide
102+
if (scope.selectedIndex === index) {
103+
self.select(newIndex);
104+
// If we don't have a selectedIndex yet, select the first one available
105+
} else if (!isNumber(scope.selectedIndex) || scope.selectedIndex === -1) {
103106
self.select(newIndex);
104107
} else if (newIndex === self.previous() || newIndex === self.next()) {
105108
// if the new slide is adjacent to selected, refresh the selection
@@ -115,7 +118,7 @@ function(scope, element, $$ionicAttachDrag, $interval) {
115118
slide.onRemoved();
116119

117120
if (isSelected) {
118-
self.select( self.isInRange(selectedIndex) ? selectedIndex : selectedIndex - 1 );
121+
self.select( self.isInRange(scope.selectedIndex) ? scope.selectedIndex : scope.selectedIndex - 1 );
119122
}
120123
}
121124
function move(slide, targetIndex) {
@@ -133,7 +136,7 @@ function(scope, element, $$ionicAttachDrag, $interval) {
133136
}
134137

135138
function selected() {
136-
return selectedIndex;
139+
return self.isInRange(scope.selectedIndex) ? scope.selectedIndex : -1;
137140
}
138141

139142
/*
@@ -142,15 +145,15 @@ function(scope, element, $$ionicAttachDrag, $interval) {
142145
function select(newIndex, transitionDuration) {
143146
if (!self.isInRange(newIndex)) return;
144147

145-
var delta = self.delta(selectedIndex, newIndex);
148+
var delta = self.delta(scope.selectedIndex, newIndex);
146149

147150
slidesParent.css(
148151
ionic.CSS.TRANSITION_DURATION,
149152
(transitionDuration || SLIDE_TRANSITION_DURATION) + 'ms'
150153
);
151-
selectedIndex = newIndex;
154+
scope.selectedIndex = newIndex;
152155

153-
if (self.isInRange(selectedIndex) && Math.abs(delta) > 1) {
156+
if (self.isInRange(scope.selectedIndex) && Math.abs(delta) > 1) {
154157
// if the new slide is > 1 away, then it is currently not attached to the DOM.
155158
// Attach it in the position from which it will slide in.
156159
self.at(newIndex).setState(delta > 1 ? 'next' : 'previous');
@@ -163,9 +166,9 @@ function(scope, element, $$ionicAttachDrag, $interval) {
163166

164167
function doSelect() {
165168
// If a new selection has happened before this frame, abort.
166-
if (selectedIndex !== newIndex) return;
169+
if (scope.selectedIndex !== newIndex) return;
167170
scope.$evalAsync(function() {
168-
if (selectedIndex !== newIndex) return;
171+
if (scope.selectedIndex !== newIndex) return;
169172
arrangeSlides(newIndex);
170173
});
171174
}
@@ -197,7 +200,7 @@ function(scope, element, $$ionicAttachDrag, $interval) {
197200
);
198201
self.select(nextIndex, transitionDuration);
199202
} else {
200-
self.select(selectedIndex);
203+
self.select(scope.selectedIndex);
201204
}
202205
}
203206

@@ -257,7 +260,7 @@ function(scope, element, $$ionicAttachDrag, $interval) {
257260
if (!enqueueRefresh.queued) {
258261
enqueueRefresh.queued = true;
259262
scope.$$postDigest(function() {
260-
self.select(selectedIndex);
263+
self.select(scope.selectedIndex);
261264
enqueueRefresh.queued = false;
262265
});
263266
}

‎js/angular/directive/slideBox.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -97,18 +97,15 @@ function($ionicSlideBoxDelegate, $window) {
9797
}
9898

9999
function watchSelected() {
100-
scope.$watch('selectedIndex', function selectedAttrWatchAction(newIndex) {
100+
scope.$watch('selectedIndex', function selectedAttrWatchAction(newIndex, oldIndex) {
101101
if (slideBoxCtrl.isInRange(newIndex) &&
102102
slideBoxCtrl.selected() !== newIndex) {
103103
slideBoxCtrl.select(newIndex);
104+
scope.onSlideChanged({
105+
$index: newIndex
106+
});
104107
}
105108
});
106-
scope.$watch(slideBoxCtrl.selected, function shownWatchAction(newIndex) {
107-
scope.selectedIndex = newIndex;
108-
scope.onSlideChanged({
109-
$index: newIndex
110-
});
111-
});
112109
}
113110

114111
function watchAutoPlay() {

‎js/angular/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ var IonicModule = angular.module('ionic', ['ngAnimate', 'ngSanitize', 'ui.router
22
extend = angular.extend,
33
forEach = angular.forEach,
44
isDefined = angular.isDefined,
5+
isNumber = angular.isNumber,
56
isString = angular.isString,
67
jqLite = angular.element;
78

‎test/html/slideBox.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
}
4242
</style>
4343
</head>
44-
<body>
44+
<body ng-init="$root.selectedIndex = 3">
4545

4646
<div ng-controller="SlideCtrl" ng-init="$root.hasBox = true">
4747
<ion-content>
@@ -94,7 +94,7 @@ <h3>item {{i}}</h3>
9494

9595
.controller('SlideCtrl', function($scope, $timeout) {
9696
$scope.items = [];
97-
for (var i = 0; i < 1000; i++) {
97+
for (var i = 0; i < 50; i++) {
9898
$scope.items.push(i);
9999
}
100100

‎test/unit/angular/directive/slideBox.unit.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('ionSlideBox directive', function() {
1313
return el.find('ion-slide-box');
1414
}
1515

16-
it('should bind to selected attr', inject(function($rootScope, $timeout) {
16+
it('should bind to select - > selected attr', inject(function($rootScope, $timeout) {
1717
var slideBox = makeSlideBox('<ion-slide-box selected="$root.currentIndex">' +
1818
'<ion-slide>A</ion-slide>' +
1919
'<ion-slide>B</ion-slide>' +
@@ -33,12 +33,31 @@ describe('ionSlideBox directive', function() {
3333
$timeout.flush();
3434
expect($rootScope.currentIndex).toBe(1);
3535

36-
// No out of bounds
36+
// Out of bounds should apply
3737
expect(slideBoxCtrl.selected()).toBe(1);
3838
$rootScope.$apply('currentIndex = -1');
39-
expect(slideBoxCtrl.selected()).toBe(1);
39+
expect(slideBoxCtrl.selected()).toBe(-1);
4040
$rootScope.$apply('currentIndex = 3');
41-
expect(slideBoxCtrl.selected()).toBe(1);
41+
expect(slideBoxCtrl.selected()).toBe(-1);
42+
}));
43+
44+
it('should bind to selected attr to slide', inject(function($rootScope, $timeout) {
45+
$rootScope.currentIndex = 2;
46+
var slideBox = makeSlideBox('<ion-slide-box selected="$root.currentIndex">' +
47+
'<ion-slide>A</ion-slide>' +
48+
'<ion-slide>B</ion-slide>' +
49+
'<ion-slide>C</ion-slide>' +
50+
'</ion-slide-box>');
51+
52+
var slideBoxCtrl = slideBox.controller('ionSlideBox');
53+
54+
expect(slideBoxCtrl.selected()).toBe(2);
55+
expect($rootScope.currentIndex).toBe(2);
56+
$timeout.flush();
57+
58+
slideBoxCtrl.select(1);
59+
$timeout.flush();
60+
expect($rootScope.currentIndex).toBe(1);
4261
}));
4362

4463
it('should loop depending on attr.loop', inject(function($rootScope) {

0 commit comments

Comments
 (0)