@@ -25,19 +25,26 @@ import 'glider-js/glider.css';
2525 *
2626 * Glider-JS doesn't support RTL at the moment, this is to add basic
2727 * functioning support for the nav arrows as otherwise the nav arrows
28- * becomes useless on RTL sites.
28+ * become useless on RTL sites.
2929 *
3030 * @todo Maybe replace glider-js with other lightweight lib which has RTL support. or Replace it with 'amp-carousel' once we have the support.
31- * @param { Object|string } slide Slide arrow string based on action.
32- * @param { boolean } dot Is dot navigation action.
33- * @param { Object } e Event object.
34- * @return { boolean } Navigation done.
31+ * @param slideIndex Slide arrow string based on action.
32+ * @param isActuallyDotIndex Is dot navigation action.
33+ * @param e Event object.
34+ * @return Navigation done.
3535 */
36- Glider . prototype . scrollItem = function ( slide , dot , e ) {
37- // glider-js doesn't seem to pass right amount of arguments.
38- if ( e === undefined && dot ?. target ) {
39- e = dot ;
40- dot = false ;
36+ Glider . prototype . scrollItem = function (
37+ slideIndex : number ,
38+ isActuallyDotIndex : boolean ,
39+ e : Event
40+ ) {
41+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Workaround
42+ // @ts -ignore
43+ if ( e === undefined && isActuallyDotIndex ?. target ) {
44+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Workaround
45+ // @ts -ignore
46+ e = isActuallyDotIndex ;
47+ isActuallyDotIndex = false ;
4148 }
4249
4350 if ( e === undefined ) {
@@ -50,17 +57,21 @@ Glider.prototype.scrollItem = function (slide, dot, e) {
5057 }
5158
5259 // Somehow slidesToScroll and slidesToShow can end up being 0.
53- this . opt . slidesToScroll = Math . max ( 1 , this . opt . slidesToScroll ) ;
54- this . opt . slidesToShow = Math . max ( 1 , this . opt . slidesToShow ) ;
60+ this . opt . slidesToScroll = Math . max ( 1 , this . opt . slidesToScroll as number ) ;
61+ this . opt . slidesToShow = Math . max ( 1 , this . opt . slidesToShow as number ) ;
5562 // This will also cause this.itemWidth to be Infinity because division by zero returns Infinity in JS.
5663 // Update this.itemWidth with actual value in this case.
5764 if ( this . itemWidth === Number . POSITIVE_INFINITY ) {
5865 // It's a sibling.
59- const carouselWrapper = e . target . parentElement . querySelector (
66+ const carouselWrapper = (
67+ e . target as HTMLElement
68+ ) . parentElement ?. querySelector (
6069 '.web-stories-list__carousel'
61- ) ;
70+ ) as HTMLElement ;
6271 const itemStyle = window . getComputedStyle (
63- carouselWrapper . querySelector ( '.web-stories-list__story' )
72+ carouselWrapper . querySelector (
73+ '.web-stories-list__story'
74+ ) as unknown as HTMLElement
6475 ) ;
6576
6677 this . itemWidth =
@@ -69,56 +80,62 @@ Glider.prototype.scrollItem = function (slide, dot, e) {
6980 Number . parseFloat ( itemStyle . marginRight ) ) ;
7081 }
7182
72- const originalSlide = slide ;
83+ const originalSlide = slideIndex ;
7384 ++ this . animate_id ;
7485
75- if ( dot === true ) {
76- slide = slide * this . containerWidth ;
77- slide = Math . round ( slide / this . itemWidth ) * this . itemWidth ;
86+ if ( isActuallyDotIndex === true ) {
87+ slideIndex = slideIndex * this . containerWidth ;
88+ slideIndex = Math . round ( slideIndex / this . itemWidth ) * this . itemWidth ;
7889 } else {
79- if ( typeof slide === 'string' ) {
80- const backwards = slide === 'prev' ;
90+ if ( typeof slideIndex === 'string' ) {
91+ const backwards = slideIndex === 'prev' ;
8192
8293 // use precise location if fractional slides are on
8394 if ( this . opt . slidesToScroll % 1 || this . opt . slidesToShow % 1 ) {
84- slide = this . getCurrentSlide ( ) ;
95+ slideIndex = this . getCurrentSlide ( ) ;
8596 } else {
86- slide = ! isNaN ( this . slide ) ? this . slide : 0 ;
97+ slideIndex = ! isNaN ( this . slide ) ? this . slide : 0 ;
8798 }
8899
89100 if ( backwards ) {
90- slide -= this . opt . slidesToScroll ;
101+ slideIndex -= this . opt . slidesToScroll ;
91102 } else {
92- slide += this . opt . slidesToScroll ;
103+ slideIndex += this . opt . slidesToScroll ;
93104 }
94105
95106 if ( this . opt . rewind ) {
96- const scrollLeft = this . ele . scrollLeft ;
97- slide =
107+ const scrollLeft = ( this . ele as HTMLElement )
108+ . scrollLeft as unknown as number ;
109+ slideIndex =
98110 backwards && ! scrollLeft
99111 ? this . slides . length
100112 : ! backwards &&
101113 scrollLeft + this . containerWidth >= Math . floor ( this . trackWidth )
102114 ? 0
103- : slide ;
115+ : slideIndex ;
104116 }
105117 }
106118
107- slide = Math . min ( slide , this . slides . length ) ;
119+ slideIndex = Math . min ( slideIndex , this . slides . length ) ;
108120
109- this . slide = slide ;
110- slide = this . itemWidth * slide ;
121+ this . slide = slideIndex ;
122+ slideIndex = this . itemWidth * slideIndex ;
111123 }
112124
113125 this . scrollTo (
114- slide ,
115- this . opt . duration * Math . abs ( this . ele . scrollLeft - slide ) ,
116- function ( ) {
126+ slideIndex ,
127+ this . opt . duration *
128+ Math . abs ( ( this . ele as HTMLElement ) . scrollLeft - slideIndex ) ,
129+ function ( this : Glider < HTMLElement > ) {
117130 this . updateControls ( ) ;
118131 this . emit ( 'animated' , {
119132 value : originalSlide ,
120133 type :
121- typeof originalSlide === 'string' ? 'arrow' : dot ? 'dot' : 'slide' ,
134+ typeof originalSlide === 'string'
135+ ? 'arrow'
136+ : isActuallyDotIndex
137+ ? 'dot'
138+ : 'slide' ,
122139 } ) ;
123140 }
124141 ) ;
0 commit comments