mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
/**
|
|
* @ngdoc directive
|
|
* @name ionSlideBox
|
|
* @module ionic
|
|
* @delegate ionic.service:$ionicSlideBoxDelegate
|
|
* @restrict E
|
|
* @description
|
|
* The Slide Box is a multi-page container where each page can be swiped or dragged between:
|
|
*
|
|
* 
|
|
*
|
|
* Note: The slideBox will take up the whole width and height of its parent element.
|
|
*
|
|
* @usage
|
|
* ```html
|
|
* <ion-content>
|
|
* <ion-slide-box on-slide-changed="slideHasChanged($slideIndex)" loop="shouldLoop" auto-play="3000">
|
|
* <ion-slide>
|
|
* <div class="box blue"><h1>BLUE</h1></div>
|
|
* </ion-slide>
|
|
* <ion-slide>
|
|
* <div class="box yellow"><h1>YELLOW</h1></div>
|
|
* </ion-slide>
|
|
* <ion-slide>
|
|
* <div class="box pink"><h1>PINK</h1></div>
|
|
* </ion-slide>
|
|
* </ion-slide-box>
|
|
* </ion-content>
|
|
* ```
|
|
*
|
|
* @param {expression=} selected A model bound to the selected slide index.
|
|
* @param {boolean=} loop Whether the slide box should loop. Default false.
|
|
* @param {number=} auto-play If a positive number, then every time the given number of
|
|
* milliseconds have passed, slideBox will go to the next slide. Set to a non-positive number
|
|
* to disable. Default: -1.
|
|
* @param {expression=} on-slide-changed Expression called when all currently queued slide
|
|
* animations finish. Is passed a '$slideIndex' variable.
|
|
* @param {expression=} on-slide-start Expression called whenever a slide animation starts.
|
|
* Is passed a '$slideIndex' variable.
|
|
* @param {string=} delegate-handle The handle used to identify this slideBox with
|
|
* {@link ionic.service:$ionicSlideBoxDelegate}.
|
|
*/
|
|
IonicModule
|
|
.directive('ionSlideBox', [
|
|
'$ionicSlideBoxDelegate',
|
|
'$ionicHistory',
|
|
'$timeout',
|
|
function($ionicSlideBoxDelegate, $ionicHistory, $timeout) {
|
|
|
|
return {
|
|
restrict: 'E',
|
|
controller: '$ionSlideBox',
|
|
require: 'ionSlideBox',
|
|
transclude: true,
|
|
scope: {
|
|
selected: '=?',
|
|
onSlideChanged: '&',
|
|
onSlideStart: '&'
|
|
},
|
|
template: '<div class="slider-slides" ng-transclude></div>',
|
|
compile: compile
|
|
};
|
|
|
|
function compile(element, attr) {
|
|
element.addClass('slider');
|
|
// DEPRECATED attr.doesContinue
|
|
isDefined(attr.doesContinue) && attr.$set('loop', attr.doesContinue);
|
|
|
|
return postLink;
|
|
}
|
|
|
|
function postLink(scope, element, attr, slideBoxCtrl) {
|
|
|
|
var deregister = $ionicSlideBoxDelegate._registerInstance(
|
|
slideBoxCtrl, attr.delegateHandle, function() {
|
|
return $ionicHistory.isActiveScope(scope);
|
|
}
|
|
);
|
|
|
|
listenForSlide();
|
|
watchSelected();
|
|
isDefined(attr.loop) && watchLoop();
|
|
isDefined(attr.autoPlay) && watchAutoPlay();
|
|
|
|
scope.$on('$destroy', deregister);
|
|
|
|
// ***
|
|
// Methods
|
|
// ***
|
|
|
|
function listenForSlide() {
|
|
element.on('$ionSlideBox.slide', function(ev, index) {
|
|
scope.onSlideStart({
|
|
$slideIndex: index
|
|
});
|
|
$timeout(angular.noop);
|
|
});
|
|
}
|
|
|
|
function watchSelected() {
|
|
scope.$watch('selected', function(index) {
|
|
if (slideBoxCtrl.selected() !== index) {
|
|
slideBoxCtrl.select(index);
|
|
}
|
|
});
|
|
}
|
|
|
|
function watchLoop() {
|
|
var unwatchParent = scope.$parent.$watch(attr.loop, slideBoxCtrl.loop);
|
|
scope.$on('$destroy', unwatchParent);
|
|
}
|
|
|
|
function watchAutoPlay() {
|
|
var unwatchParent = scope.$parent.$watch(attr.autoPlay, slideBoxCtrl.autoPlay);
|
|
scope.$on('$destroy', unwatchParent);
|
|
}
|
|
}
|
|
|
|
}]);
|
|
|
|
|