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() ); ```
123 lines
2.8 KiB
JavaScript
123 lines
2.8 KiB
JavaScript
IonicModule
|
|
.controller('$ionSlide', [
|
|
'$scope',
|
|
'$element',
|
|
'$q',
|
|
function(scope, element, $q) {
|
|
var self = this;
|
|
|
|
scope.$on('$destroy', function() {
|
|
element.removeData();
|
|
detachSlide();
|
|
});
|
|
element.on(ionic.CSS.TRANSITIONEND, onTransitionEnd);
|
|
|
|
self.element = element;
|
|
|
|
self.onAdded = onAdded;
|
|
self.onRemoved = onRemoved;
|
|
|
|
self.transform = transform;
|
|
|
|
self.state = '';
|
|
self.setState = setState;
|
|
|
|
// ***
|
|
// Public Methods
|
|
// ***
|
|
|
|
function onAdded(parentElement) {
|
|
self.parentElement = parentElement;
|
|
|
|
// Set default state
|
|
self.setState('detached');
|
|
}
|
|
function onRemoved() {
|
|
self.setState('detached');
|
|
}
|
|
|
|
var isTransforming;
|
|
// percent is negative 0-1 for dragging left
|
|
// percent is positive 0-1 for dragging right
|
|
function transform(percent) {
|
|
if (!isTransforming) {
|
|
self.element.addClass('no-animate');
|
|
isTransforming = true;
|
|
}
|
|
|
|
var startPercent = self.state === 'previous' ? -1 :
|
|
self.state === 'next' ? 1 :
|
|
0;
|
|
self.element.css(
|
|
ionic.CSS.TRANSFORM,
|
|
'translate3d(' + (100 * (startPercent - percent)) + '%, 0, 0)'
|
|
);
|
|
}
|
|
|
|
function setState(newState) {
|
|
if (newState !== self.state) {
|
|
self.state && self.element.attr('slide-previous-state', self.state);
|
|
self.element.attr('slide-state', newState);
|
|
}
|
|
self.element.css(ionic.CSS.TRANSFORM, '');
|
|
self.element.removeClass('no-animate');
|
|
isTransforming = false;
|
|
|
|
self.previousState = self.state;
|
|
self.state = newState;
|
|
|
|
switch(newState) {
|
|
case 'detached':
|
|
detachSlide();
|
|
break;
|
|
case 'previous':
|
|
case 'next':
|
|
case 'selected':
|
|
attachSlide();
|
|
break;
|
|
}
|
|
|
|
return getTransitionPromise();
|
|
}
|
|
|
|
// ***
|
|
// Private Methods
|
|
// ***
|
|
|
|
function attachSlide() {
|
|
if (!self.element[0].parentNode) {
|
|
self.parentElement.append(self.element);
|
|
ionic.Utils.reconnectScope(scope);
|
|
}
|
|
}
|
|
|
|
function detachSlide() {
|
|
// Don't use self.element.remove(), that will destroy the element's data
|
|
var parent = self.element[0].parentNode;
|
|
if (parent) {
|
|
parent.removeChild(self.element[0]);
|
|
ionic.Utils.disconnectScope(scope);
|
|
}
|
|
}
|
|
|
|
var transitionDeferred;
|
|
function getTransitionPromise() {
|
|
// If we aren't transitioning to or from selected, there's no transition, so instantly resolve.
|
|
if (self.previousState !== 'selected' && self.state !== 'selected') {
|
|
return $q.when();
|
|
}
|
|
|
|
// Interrupt current promise if a new state was set.
|
|
transitionDeferred && transitionDeferred.reject();
|
|
transitionDeferred = $q.defer();
|
|
|
|
return transitionDeferred.promise;
|
|
}
|
|
|
|
function onTransitionEnd(ev) {
|
|
if (ev.target !== element[0]) return; //don't let the event bubble up from children
|
|
transitionDeferred && transitionDeferred.resolve();
|
|
}
|
|
|
|
}]);
|