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