@@ -3686,342 +3686,6 @@ window.ionic = {
3686
3686
3687
3687
} ) ( ionic ) ;
3688
3688
;
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
- ;
4025
3689
( function ( ionic ) {
4026
3690
'use strict' ;
4027
3691
0 commit comments