mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7ef9ad74cf
Closes #2336. Closes #2317. Closes #2290. Closes #2228. Closes #2067. Closes #1890. Closes #1865. Closes #1850. Closes #1755. Closes #1688. Closes #1578. Closes #1501. Closes #1353. Closes #1342. Closes #782. Closes #416. Closes #2288. BREAKING CHANGE: The slideBox's API has undergone many changes. - **`<ion-slide-box>`** attributes have changed (see [documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)): * `active-slide` has changed to `selected`. Change your code from this: ```html <ion-slide-box active-slide="activeSlideIndex"></ion-slide-box> ``` To this: ```html <ion-slide-box selected="activeSlideIndex"></ion-slide-box> ``` * `does-continue` has changed to `loop`. Change your code from this: ```html <ion-slide-box does-continue="shouldLoop"></ion-slide-box> ``` To this: ```html <ion-slide-box loop="shouldLoop"></ion-slide-box> ``` * `auto-play` and `slide-interval` have been merged into `auto-play`. Change your code from this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="true" slide-interval="1000"> </ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false" slide-interval="1000"> </ion-slide-box> ``` To this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="1000"></ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false"></ion-slide-box> ``` * `show-pager` and `pager-click` have been removed. Use a child `<ion-slide-pager>` element. See the [`ion-slide-pager` documentation](http://ionicframework.com/docs/api/directive/ionSlidePager). Change your code from this: ```html <!-- pager using default click action --> <ion-slide-box show-pager="true"> </ion-slide-box> <!-- pager with custom click action --> <ion-slide-box show-pager="true" pager-click="doSomething(index)"> </ion-slide-box> ``` To this: ```html <ion-slide-box> <!-- pager using default click action --> <ion-slide-pager></ion-slide-pager> </ion-slide-box> <ion-slide-box> <!-- pager with custom click action --> <ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager> </ion-slide-box> ``` - **`$ionicSlideBoxDelegate`** methods have changed (see [documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)): - `update()` has been removed. slideBox updates on its own now. - `stop()` has been removed. See `autoPlay()` below. - `start()` hass been removed. See `autoPlay()` below. - `slide(newIndex[, speed])` has been renamed to `select(newIndex[, speed]); - `currentIndex()` has been renamed to `selected()`. - `slidesCount()` has been renamed to `count()`. - New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code from this: ```js // stop auto sliding $ionicSlideBoxDelegate.stop(); // later... start auto sliding $ionicSlideBoxDelegate.start(); ``` To this: ```js var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide // stop auto sliding $ionicSlideBoxDelegate.autoPlay(false); // later... start auto sliding $ionicSlideBoxDelegate.autoPlay(autoPlaySpeed); ``` - `previous()` now returns the index of the previous slide and does not select. Change your code from this: ```js // select previous slide $ionicSlideBoxDelegate.previous(); ``` To this: ```js // select previous slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() ); ``` - `next()` now returns the index of the next slide and does not select. Change your code from this: ```js // select next slide $ionicSlideBoxDelegate.next(); ``` To this: ```js // select next slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() ); ```
105 lines
3.7 KiB
JavaScript
105 lines
3.7 KiB
JavaScript
describe('ionSlideBox directive', function() {
|
|
beforeEach(module('ionic'));
|
|
beforeEach(function() {
|
|
spyOn(ionic, 'requestAnimationFrame').andCallFake(function(cb) { cb(); });
|
|
});
|
|
|
|
function makeSlideBox(template) {
|
|
var el;
|
|
inject(function($compile, $rootScope) {
|
|
el = $compile('<ion-scroll>' + template + '</ion-scroll>')($rootScope);
|
|
$rootScope.$apply();
|
|
});
|
|
return el.find('ion-slide-box');
|
|
}
|
|
|
|
it('should bind to selected attr', inject(function($rootScope, $timeout) {
|
|
var slideBox = makeSlideBox('<ion-slide-box selected="$root.currentIndex">' +
|
|
'<ion-slide>A</ion-slide>' +
|
|
'<ion-slide>B</ion-slide>' +
|
|
'<ion-slide>C</ion-slide>' +
|
|
'</ion-slide-box>');
|
|
|
|
var slideBoxCtrl = slideBox.controller('ionSlideBox');
|
|
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
$timeout.flush();
|
|
expect($rootScope.currentIndex).toBe(0);
|
|
|
|
$rootScope.$apply('currentIndex = 2');
|
|
expect(slideBoxCtrl.selected()).toBe(2);
|
|
|
|
slideBoxCtrl.select(1);
|
|
$timeout.flush();
|
|
expect($rootScope.currentIndex).toBe(1);
|
|
|
|
// No out of bounds
|
|
expect(slideBoxCtrl.selected()).toBe(1);
|
|
$rootScope.$apply('currentIndex = -1');
|
|
expect(slideBoxCtrl.selected()).toBe(1);
|
|
$rootScope.$apply('currentIndex = 3');
|
|
expect(slideBoxCtrl.selected()).toBe(1);
|
|
}));
|
|
|
|
it('should loop depending on attr.loop', inject(function($rootScope) {
|
|
var slideBox = makeSlideBox('<ion-slide-box loop="shouldLoop">' +
|
|
'<ion-slide>A</ion-slide>' +
|
|
'<ion-slide>B</ion-slide>' +
|
|
'<ion-slide>C</ion-slide>' +
|
|
'</ion-slide-box>');
|
|
|
|
$rootScope.$apply('shouldLoop = true');
|
|
|
|
var slideBoxCtrl = slideBox.controller('ionSlideBox');
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
slideBoxCtrl.select(slideBoxCtrl.previous());
|
|
expect(slideBoxCtrl.selected()).toBe(2);
|
|
slideBoxCtrl.select(slideBoxCtrl.next());
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
|
|
// Disable looping
|
|
$rootScope.$apply('shouldLoop = false');
|
|
|
|
// No loop at previous boundary
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
slideBoxCtrl.select(slideBoxCtrl.previous());
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
|
|
// No loop at next boundary
|
|
slideBoxCtrl.select(2);
|
|
expect(slideBoxCtrl.selected()).toBe(2);
|
|
slideBoxCtrl.select(slideBoxCtrl.next());
|
|
expect(slideBoxCtrl.selected()).toBe(2);
|
|
}));
|
|
|
|
it('should autoplay depending on attr.autoPlay', inject(function($rootScope, $interval) {
|
|
var slideBox = makeSlideBox('<ion-slide-box loop="shouldLoop" auto-play="playInterval">' +
|
|
'<ion-slide>A</ion-slide>' +
|
|
'<ion-slide>B</ion-slide>' +
|
|
'<ion-slide>C</ion-slide>' +
|
|
'</ion-slide-box>');
|
|
|
|
$rootScope.$apply('shouldLoop = false; playInterval = 1000;');
|
|
|
|
var slideBoxCtrl = slideBox.controller('ionSlideBox');
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
$interval.flush(1000);
|
|
expect(slideBoxCtrl.selected()).toBe(1);
|
|
$interval.flush(1000);
|
|
expect(slideBoxCtrl.selected()).toBe(2);
|
|
// Should not go beyond limit with loop disabled
|
|
$interval.flush(1000);
|
|
expect(slideBoxCtrl.selected()).toBe(2);
|
|
|
|
// Should loop
|
|
$rootScope.$apply('shouldLoop = true');
|
|
$interval.flush(1000);
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
|
|
// Should deactivate and stop looping
|
|
$rootScope.$apply('playInterval = -1');
|
|
$interval.flush();
|
|
expect(slideBoxCtrl.selected()).toBe(0);
|
|
}));
|
|
});
|