@@ -3686,342 +3686,6 @@ window.ionic = {
36863686
36873687} ) ( ionic ) ;
36883688;
3689- /**
3690- * The SlideBox is a swipeable, slidable, slideshowable box. Think of any image gallery
3691- * or iOS "dot" pager gallery, or maybe a carousel.
3692- *
3693- * Each screen fills the full width and height of the viewport, and screens can
3694- * be swiped between, or set to automatically transition.
3695- */
3696- ( function ( ionic ) {
3697- 'use strict' ;
3698-
3699- ionic . views . SlideBox = ionic . views . View . inherit ( {
3700- initialize : function ( opts ) {
3701- var _this = this ;
3702-
3703- this . slideChanged = opts . slideChanged || function ( ) { } ;
3704- this . el = opts . el ;
3705- this . pager = this . el . querySelector ( '.slide-box-pager' ) ;
3706-
3707- // The drag threshold is the pixel delta that will trigger a drag (to
3708- // avoid accidental dragging)
3709- this . dragThresholdX = opts . dragThresholdX || 10 ;
3710- // The velocity threshold is a velocity of drag that indicates a "swipe". This
3711- // number is taken from hammer.js's calculations
3712- this . velocityXThreshold = opts . velocityXThreshold || 0.3 ;
3713-
3714- // Initialize the slide index to the first page and update the pager
3715- this . slideIndex = 0 ;
3716- this . _updatePager ( ) ;
3717-
3718- // Listen for drag and release events
3719- window . ionic . onGesture ( 'drag' , function ( e ) {
3720- _this . _handleDrag ( e ) ;
3721- } , this . el ) ;
3722- window . ionic . onGesture ( 'release' , function ( e ) {
3723- _this . _handleEndDrag ( e ) ;
3724- } , this . el ) ;
3725- } ,
3726-
3727- /**
3728- * Tell the pager to update itself if content is added or
3729- * removed.
3730- */
3731- update : function ( ) {
3732- this . _updatePager ( ) ;
3733- } ,
3734-
3735- prependSlide : function ( el ) {
3736- var content = this . el . firstElementChild ;
3737- if ( ! content ) { return ; }
3738-
3739- var slideWidth = content . offsetWidth ;
3740- var offsetX = parseFloat ( content . style . webkitTransform . replace ( 'translate3d(' , '' ) . split ( ',' ) [ 0 ] ) || 0 ;
3741- var newOffsetX = Math . min ( 0 , offsetX - slideWidth ) ;
3742-
3743- content . insertBefore ( el , content . firstChild ) ;
3744-
3745- content . classList . remove ( 'slide-box-animating' ) ;
3746- content . style . webkitTransform = 'translate3d(' + newOffsetX + 'px, 0, 0)' ;
3747-
3748- this . _prependPagerIcon ( ) ;
3749- this . slideIndex = ( this . slideIndex + 1 ) % content . children . length ;
3750- this . _updatePager ( ) ;
3751- } ,
3752-
3753- appendSlide : function ( el ) {
3754- var content = this . el . firstElementChild ;
3755- if ( ! content ) { return ; }
3756-
3757- content . classList . remove ( 'slide-box-animating' ) ;
3758- content . appendChild ( el ) ;
3759-
3760- this . _appendPagerIcon ( ) ;
3761- this . _updatePager ( ) ;
3762- } ,
3763-
3764- removeSlide : function ( index ) {
3765- var content = this . el . firstElementChild ;
3766- if ( ! content ) { return ; }
3767-
3768- var items = this . el . firstElementChild ;
3769- items . removeChild ( items . firstElementChild ) ;
3770-
3771- var slideWidth = content . offsetWidth ;
3772- var offsetX = parseFloat ( content . style . webkitTransform . replace ( 'translate3d(' , '' ) . split ( ',' ) [ 0 ] ) || 0 ;
3773- var newOffsetX = Math . min ( 0 , offsetX + slideWidth ) ;
3774-
3775- content . classList . remove ( 'slide-box-animating' ) ;
3776- content . style . webkitTransform = 'translate3d(' + newOffsetX + 'px, 0, 0)' ;
3777-
3778- this . _removePagerIcon ( ) ;
3779- this . slideIndex = Math . max ( 0 , ( this . slideIndex - 1 ) % content . children . length ) ;
3780- this . _updatePager ( ) ;
3781- } ,
3782-
3783- /**
3784- * Slide to the given slide index.
3785- *
3786- * @param {int } the index of the slide to animate to.
3787- */
3788- slideToSlide : function ( index ) {
3789- var content = this . el . firstElementChild ;
3790- if ( ! content ) {
3791- return ;
3792- }
3793-
3794- // Get the width of one slide
3795- var slideWidth = content . offsetWidth ;
3796-
3797- // Calculate the new offsetX position which is just
3798- // N slides to the left, where N is the given index
3799- var offsetX = index * slideWidth ;
3800-
3801- // Calculate the max X position we'd allow based on how many slides
3802- // there are.
3803- var maxX = Math . max ( 0 , content . children . length - 1 ) * slideWidth ;
3804-
3805- // Bounds the offset X position in the range maxX >= offsetX >= 0
3806- offsetX = offsetX < 0 ? 0 : offsetX > maxX ? maxX : offsetX ;
3807-
3808- // Animate and slide the slides over
3809- content . classList . add ( 'slide-box-animating' ) ;
3810- content . style . webkitTransform = 'translate3d(' + - offsetX + 'px, 0, 0)' ;
3811-
3812- var lastSlide = this . slideIndex ;
3813-
3814- // Update the slide index
3815- this . slideIndex = Math . ceil ( offsetX / slideWidth ) ;
3816-
3817- if ( lastSlide !== this . slideIndex ) {
3818- this . slideChanged && this . slideChanged ( this . slideIndex ) ;
3819- }
3820-
3821- this . _updatePager ( ) ;
3822- } ,
3823-
3824- /**
3825- * Get the currently set slide index. This method
3826- * is updated before any transitions run, so the
3827- * value could be early.
3828- *
3829- * @return {int } the current slide index
3830- */
3831- getSlideIndex : function ( ) {
3832- return this . slideIndex ;
3833- } ,
3834-
3835- _appendPagerIcon : function ( ) {
3836- if ( ! this . pager || ! this . pager . children . length ) { return ; }
3837-
3838- var newPagerChild = this . pager . children [ 0 ] . cloneNode ( ) ;
3839- this . pager . appendChild ( newPagerChild ) ;
3840- } ,
3841-
3842- _prependPagerIcon : function ( ) {
3843- if ( ! this . pager || ! this . pager . children . length ) { return ; }
3844-
3845- var newPagerChild = this . pager . children [ 0 ] . cloneNode ( ) ;
3846- this . pager . insertBefore ( newPagerChild , this . pager . firstChild ) ;
3847- } ,
3848-
3849- _removePagerIcon : function ( ) {
3850- if ( ! this . pager || ! this . pager . children . length ) { return ; }
3851-
3852- this . pager . removeChild ( this . pager . firstElementChild ) ;
3853- } ,
3854-
3855- /**
3856- * If we have a pager, update the active page when the current slide
3857- * changes.
3858- */
3859- _updatePager : function ( ) {
3860- if ( ! this . pager ) {
3861- return ;
3862- }
3863-
3864- var numPagerChildren = this . pager . children . length ;
3865- if ( ! numPagerChildren ) {
3866- // No children to update
3867- return ;
3868- }
3869-
3870- // Update the active state of the pager icons
3871- for ( var i = 0 , j = this . pager . children . length ; i < j ; i ++ ) {
3872- if ( i == this . slideIndex ) {
3873- this . pager . children [ i ] . classList . add ( 'active' ) ;
3874- } else {
3875- this . pager . children [ i ] . classList . remove ( 'active' ) ;
3876- }
3877- }
3878- } ,
3879-
3880- _initDrag : function ( ) {
3881- this . _isDragging = false ;
3882- this . _drag = null ;
3883- } ,
3884-
3885- _handleEndDrag : function ( e ) {
3886- var _this = this ,
3887- finalOffsetX , content , ratio , slideWidth , totalWidth , offsetX ;
3888-
3889- window . rAF ( function ( ) {
3890-
3891- // We didn't have a drag, so just init and leave
3892- if ( ! _this . _drag ) {
3893- _this . _initDrag ( ) ;
3894- return ;
3895- }
3896-
3897- // We did have a drag, so we need to snap to the correct spot
3898-
3899- // Grab the content layer
3900- content = _this . _drag . content ;
3901-
3902- // Enable transition duration
3903- content . classList . add ( 'slide-box-animating' ) ;
3904-
3905- // Grab the current offset X position
3906- offsetX = parseFloat ( content . style . webkitTransform . replace ( 'translate3d(' , '' ) . split ( ',' ) [ 0 ] ) || 0 ;
3907-
3908- // Calculate how wide a single slide is, and their total width
3909- slideWidth = content . offsetWidth ;
3910- totalWidth = content . offsetWidth * content . children . length ;
3911-
3912- // Calculate how far in this slide we've dragged
3913- ratio = ( offsetX % slideWidth ) / slideWidth ;
3914-
3915- if ( ratio >= 0 ) {
3916- // Anything greater than zero is too far left, this is an extreme case
3917- // TODO: Do we need this anymore?
3918- finalOffsetX = 0 ;
3919- } else if ( ratio >= - 0.5 ) {
3920- // We are less than half-way through a drag
3921- // Sliiide to the left
3922- finalOffsetX = Math . max ( 0 , Math . floor ( Math . abs ( offsetX ) / slideWidth ) * slideWidth ) ;
3923- } else {
3924- // We are more than half-way through a drag
3925- // Sliiide to the right
3926- finalOffsetX = Math . min ( totalWidth - slideWidth , Math . ceil ( Math . abs ( offsetX ) / slideWidth ) * slideWidth ) ;
3927- }
3928-
3929-
3930- if ( e . gesture . velocityX > _this . velocityXThreshold ) {
3931- if ( e . gesture . direction == 'left' ) {
3932- _this . slideToSlide ( _this . slideIndex + 1 ) ;
3933- } else if ( e . gesture . direction == 'right' ) {
3934- _this . slideToSlide ( _this . slideIndex - 1 ) ;
3935- }
3936- } else {
3937- // Calculate the new slide index (or "page")
3938- _this . slideIndex = Math . ceil ( finalOffsetX / slideWidth ) ;
3939-
3940- // Negative offsetX to slide correctly
3941- content . style . webkitTransform = 'translate3d(' + - finalOffsetX + 'px, 0, 0)' ;
3942- }
3943-
3944- _this . _initDrag ( ) ;
3945- } ) ;
3946- } ,
3947-
3948- /**
3949- * Initialize a drag by grabbing the content area to drag, and any other
3950- * info we might need for the dragging.
3951- */
3952- _startDrag : function ( e ) {
3953- var offsetX , content ;
3954-
3955- this . _initDrag ( ) ;
3956-
3957- // Make sure to grab the element we will slide as our target
3958- content = ionic . DomUtil . getParentOrSelfWithClass ( e . target , 'slide-box-slides' ) ;
3959- if ( ! content ) {
3960- return ;
3961- }
3962-
3963- // Disable transitions during drag
3964- content . classList . remove ( 'slide-box-animating' ) ;
3965-
3966- // Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
3967- offsetX = parseFloat ( content . style . webkitTransform . replace ( 'translate3d(' , '' ) . split ( ',' ) [ 0 ] ) || 0 ;
3968-
3969- this . _drag = {
3970- content : content ,
3971- startOffsetX : offsetX ,
3972- resist : 1
3973- } ;
3974- } ,
3975-
3976- /**
3977- * Process the drag event to move the item to the left or right.
3978- */
3979- _handleDrag : function ( e ) {
3980- var _this = this ;
3981-
3982- window . rAF ( function ( ) {
3983- var content ;
3984-
3985- // We really aren't dragging
3986- if ( ! _this . _drag ) {
3987- _this . _startDrag ( e ) ;
3988- }
3989-
3990- // Sanity
3991- if ( ! _this . _drag ) { return ; }
3992-
3993- // Stop any default events during the drag
3994- e . preventDefault ( ) ;
3995-
3996- // Check if we should start dragging. Check if we've dragged past the threshold.
3997- if ( ! _this . _isDragging && ( Math . abs ( e . gesture . deltaX ) > _this . dragThresholdX ) ) {
3998- _this . _isDragging = true ;
3999- }
4000-
4001- if ( _this . _isDragging ) {
4002- content = _this . _drag . content ;
4003-
4004- var newX = _this . _drag . startOffsetX + ( e . gesture . deltaX / _this . _drag . resist ) ;
4005-
4006- var rightMostX = - ( content . offsetWidth * Math . max ( 0 , content . children . length - 1 ) ) ;
4007-
4008- if ( newX > 0 ) {
4009- // We are dragging past the leftmost pane, rubber band
4010- _this . _drag . resist = ( newX / content . offsetWidth ) + 1.4 ;
4011- } else if ( newX < rightMostX ) {
4012- // Dragging past the rightmost pane, rubber band
4013- //newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
4014- _this . _drag . resist = ( Math . abs ( newX ) / content . offsetWidth ) - 0.6 ;
4015- }
4016-
4017- _this . _drag . content . style . webkitTransform = 'translate3d(' + newX + 'px, 0, 0)' ;
4018- }
4019- } ) ;
4020- }
4021- } ) ;
4022-
4023- } ) ( window . ionic ) ;
4024- ;
40253689( function ( ionic ) {
40263690'use strict' ;
40273691
0 commit comments