Refactoring methods related with positions.

dist/js/splide.js

@@ -541,7 +541,9 @@
     }
     return {
       resolve,
-      orient
+      orient,
+      left: apply(resolve, "left"),
+      right: apply(resolve, "right")
     };
   };
 
@@ -741,7 +743,7 @@
     const { Components, root, options } = Splide2;
     const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;
     const { Elements } = Components;
-    const { resolve } = Components.Direction;
+    const { resolve, orient } = Components.Direction;
     const styles = getAttribute(slide, "style");
     const label = getAttribute(slide, ARIA_LABEL);
     const isClone = slideIndex > -1;
@@ -832,7 +834,7 @@
       const { cloneStatus = true } = options;
       return curr === index || cloneStatus && curr === slideIndex;
     }
-    function isVisible() {
+    function isVisible(partial) {
       if (Splide2.is(FADE)) {
         return isActive();
       }
@@ -840,7 +842,7 @@
       const slideRect = rect(slide);
       const left = resolve("left", true);
       const right = resolve("right", true);
-      return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);
+      return floor(trackRect[left]) <= ceil(slideRect[partial ? right : left]) && floor(slideRect[partial ? left : right]) <= ceil(trackRect[right]);
     }
     function isWithin(from, distance) {
       let diff = abs(from - index);
@@ -849,11 +851,6 @@
       }
       return diff <= distance;
     }
-    function pos() {
-      const first = Components.Slides.get()[0];
-      const left = resolve("left");
-      return first ? abs(rect(slide)[left] - rect(first.slide)[left]) : 0;
-    }
     function size() {
       return rect(slide)[resolve("width")];
     }
@@ -866,9 +863,9 @@
       mount,
       destroy,
       update,
-      pos,
       size,
       style: style$1,
+      isVisible,
       isWithin
     };
     return self;
@@ -990,7 +987,7 @@
   const Layout = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
     const { Slides } = Components;
-    const { resolve } = Components.Direction;
+    const { resolve, left, right } = Components.Direction;
     const { root, track, list } = Components.Elements;
     const { getAt, style: styleSlides } = Slides;
     let vertical;
@@ -1024,9 +1021,9 @@
         }
       }
     }
-    function cssPadding(right) {
+    function cssPadding(rightPadding) {
       const { padding } = options;
-      const prop = resolve(right ? "right" : "left");
+      const prop = rightPadding ? right() : left();
       return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
     }
     function cssTrackHeight() {
@@ -1059,8 +1056,10 @@
       return (Slide ? Slide.size() : 0) + (withoutGap ? 0 : getGap());
     }
     function totalSize(index, withoutGap) {
-      const Slide = getAt(index);
-      return Slide ? Slide.pos() + Slide.size() + (withoutGap ? 0 : getGap()) : 0;
+      const first = Components.Slides.get()[0];
+      const target = getAt(index);
+      const gap = withoutGap ? 0 : getGap();
+      return first && target ? rect(target.slide)[right()] - rect(first.slide)[left()] + gap : 0;
     }
     function sliderSize(withoutGap) {
       return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap);
@@ -1068,12 +1067,12 @@
     function getGap() {
       const first = getAt(0);
       const second = getAt(1);
-      return first && second ? second.pos() - first.pos() - first.size() : 0;
+      return first && second ? rect(second.slide)[left()] - rect(first.slide)[right()] : 0;
     }
-    function getPadding(right) {
+    function getPadding(right2) {
       return parseFloat(style(
         track,
-        resolve(`padding${right ? "Right" : "Left"}`)
+        resolve(`padding${right2 ? "Right" : "Left"}`)
       )) || 0;
     }
     function isOverflow() {
@@ -1199,7 +1198,7 @@
       });
     }
     function jump(index) {
-      translate(toPosition(index, true));
+      translate(toPosition(index));
     }
     function translate(position, preventLoop) {
       if (!Splide.is(FADE)) {
@@ -1236,7 +1235,7 @@
       let minDistance = Infinity;
       for (let i = 0; i < slides.length; i++) {
         const slideIndex = slides[i].index;
-        const distance = abs(toPosition(slideIndex, true) - position);
+        const distance = abs(toPosition(slideIndex) - position);
         if (distance <= minDistance) {
           minDistance = distance;
           index = slideIndex;
@@ -1246,9 +1245,12 @@
       }
       return index;
     }
-    function toPosition(index, trimming) {
-      const position = orient(totalSize(index - 1) - offset(index));
-      return trimming ? trim(position) : position;
+    function toPosition(index) {
+      let position = orient(totalSize(index - 1) - offset(index));
+      if (options.trimSpace && Splide.is(SLIDE)) {
+        position = clamp(position, 0, orient(sliderSize(true) - listSize()));
+      }
+      return position;
     }
     function getPosition() {
       const left = resolve("left");
@@ -1273,18 +1275,12 @@
       }
       return clamp(rate, 0, 1);
     }
-    function trim(position) {
-      if (options.trimSpace && Splide.is(SLIDE)) {
-        position = clamp(position, 0, orient(sliderSize(true) - listSize()));
-      }
-      return position;
-    }
     function offset(index) {
       const { focus } = options;
       return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
     }
     function getLimit(max) {
-      return toPosition(max ? Components.Controller.getEnd() : 0, !!options.trimSpace);
+      return toPosition(max ? Components.Controller.getEnd() : 0);
     }
     function canShift(backwards) {
       const padding = getPadding(false);
@@ -1438,7 +1434,7 @@
     function computeMovableDestIndex(dest) {
       if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
         const position = getPosition();
-        while (position === toPosition(dest, true) && between(dest, 0, Splide.length - 1, !options.rewind)) {
+        while (position === toPosition(dest) && between(dest, 0, Splide.length - 1, !options.rewind)) {
           dest < currIndex ? --dest : ++dest;
         }
       }
@@ -1450,7 +1446,7 @@
     function getEnd() {
       let end = slideCount - (hasFocus() || isLoop && perMove ? 1 : perPage);
       while (omitEnd && end-- > 0) {
-        if (toPosition(slideCount - 1, true) !== toPosition(end, true)) {
+        if (toPosition(slideCount - 1) !== toPosition(end)) {
           end++;
           break;
         }
@@ -2403,7 +2399,7 @@
       });
     }
     function start(index, done) {
-      const destination = Move.toPosition(index, true);
+      const destination = Move.toPosition(index);
       const position = Move.getPosition();
       const speed = getSpeed(index);
       if (abs(destination - position) >= 1 && speed >= 1) {

src/js/components/Controller/Controller.ts

@@ -288,7 +288,7 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
     if ( isSlide && options.trimSpace === 'move' && dest !== currIndex ) {
       const position = getPosition();
 
-      while ( position === toPosition( dest, true ) && between( dest, 0, Splide.length - 1, ! options.rewind ) ) {
+      while ( position === toPosition( dest ) && between( dest, 0, Splide.length - 1, ! options.rewind ) ) {
         dest < currIndex ? --dest : ++dest;
       }
     }
@@ -319,7 +319,7 @@ export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, C
     let end = slideCount - ( hasFocus() || ( isLoop && perMove ) ? 1 : perPage );
 
     while ( omitEnd && end-- > 0 ) {
-      if ( toPosition( slideCount - 1, true ) !== toPosition( end, true ) ) {
+      if ( toPosition( slideCount - 1 ) !== toPosition( end ) ) {
         end++;
         break;
       }

src/js/components/Direction/Direction.ts

@@ -2,6 +2,7 @@ import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../constants/a
 import { RTL, TTB } from '../../constants/directions';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, ComponentConstructor, Components, Options } from '../../types';
+import { apply } from '../../../../../utils';
 
 
 /**
@@ -12,6 +13,8 @@ import { BaseComponent, ComponentConstructor, Components, Options } from '../../
 export interface DirectionComponent extends BaseComponent {
   resolve<R extends string>( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): R;
   orient( value: number ): number;
+  left(): string;
+  right(): string;
 }
 
 /**
@@ -77,5 +80,7 @@ export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Spl
   return {
     resolve,
     orient,
+    left: apply( resolve, 'left' ),
+    right: apply( resolve, 'right' ),
   };
 };

src/js/components/Layout/Layout.ts

@@ -39,7 +39,7 @@ export interface LayoutComponent extends BaseComponent {
 export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, emit } = event;
   const { Slides } = Components;
-  const { resolve } = Components.Direction;
+  const { resolve, left, right } = Components.Direction;
   const { root, track, list } = Components.Elements;
   const { getAt, style: styleSlides } = Slides;
 
@@ -112,13 +112,13 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * Parses the padding option and returns the value for each side.
    * This method returns `paddingTop` or `paddingBottom` for the vertical slider.
    *
-   * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.
+   * @param rightPadding - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.
    *
    * @return The padding value as a CSS string.
    */
-  function cssPadding( right: boolean ): string {
+  function cssPadding( rightPadding: boolean ): string {
     const { padding } = options;
-    const prop = resolve( right ? 'right' : 'left' );
+    const prop = rightPadding ? right() : left();
     return padding
       && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) )
       || '0px';
@@ -213,8 +213,13 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The total width of slides in the horizontal slider, or the height in the vertical one.
    */
   function totalSize( index: number, withoutGap?: boolean ): number {
-    const Slide = getAt( index );
-    return Slide ? Slide.pos() + Slide.size() + ( withoutGap ? 0 : getGap() ) : 0;
+    const first  = Components.Slides.get()[ 0 ];
+    const target = getAt( index );
+    const gap    = withoutGap ? 0 : getGap();
+
+    return first && target
+      ? rect( target.slide )[ right() ] - rect( first.slide )[ left() ] + gap
+      : 0;
   }
 
   /**
@@ -239,7 +244,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   function getGap(): number {
     const first  = getAt( 0 );
     const second = getAt( 1 );
-    return first && second ? second.pos() - first.pos() - first.size() : 0;
+    return first && second ? rect( second.slide )[ left() ] - rect( first.slide )[ right() ] : 0;
   }
 
   /**

src/js/components/Move/Move.ts

@@ -25,7 +25,7 @@ export interface MoveComponent extends BaseComponent {
   shift( position: number, backwards: boolean ): number;
   cancel(): void;
   toIndex( position: number ): number;
-  toPosition( index: number, trimming?: boolean ): number;
+  toPosition( index: number ): number;
   getPosition(): number;
   getRate(): number;
   getLimit( max: boolean ): number;
@@ -119,7 +119,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * @param index - An index to jump to.
    */
   function jump( index: number ): void {
-    translate( toPosition( index, true ) );
+    translate( toPosition( index ) );
   }
 
   /**
@@ -196,7 +196,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
 
     for ( let i = 0; i < slides.length; i++ ) {
       const slideIndex = slides[ i ].index;
-      const distance   = abs( toPosition( slideIndex, true ) - position );
+      const distance   = abs( toPosition( slideIndex ) - position );
 
       if ( distance <= minDistance ) {
         minDistance = distance;
@@ -212,14 +212,18 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
   /**
    * Converts the slide index to the position.
    *
-   * @param index    - An index to convert.
-   * @param trimming - Optional. Whether to trim edge spaces or not.
+   * @param index - An index to convert.
    *
    * @return The position corresponding with the index.
    */
-  function toPosition( index: number, trimming?: boolean ): number {
-    const position = orient( totalSize( index - 1 ) - offset( index ) );
-    return trimming ? trim( position ) : position;
+  function toPosition( index: number ): number {
+    let position = orient( totalSize( index - 1 ) - offset( index ) );
+
+    if ( options.trimSpace && Splide.is( SLIDE ) ) {
+      position = clamp( position, 0, orient( sliderSize( true ) - listSize() ) );
+    }
+
+    return position;
   }
 
   /**
@@ -261,21 +265,6 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
     return clamp( rate, 0, 1 );
   }
 
-  /**
-   * Trims spaces on the edge of the slider.
-   *
-   * @param position - A position to trim.
-   *
-   * @return A trimmed position.
-   */
-  function trim( position: number ): number {
-    if ( options.trimSpace && Splide.is( SLIDE ) ) {
-      position = clamp( position, 0, orient( sliderSize( true ) - listSize() ) );
-    }
-
-    return position;
-  }
-
   /**
    * Returns the offset amount.
    *
@@ -296,7 +285,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
    * @return The border number.
    */
   function getLimit( max: boolean ): number {
-    return toPosition( max ? Components.Controller.getEnd() : 0, !! options.trimSpace );
+    return toPosition( max ? Components.Controller.getEnd() : 0 );
   }
 
   /**

src/js/components/Slides/Slide.ts

@@ -69,10 +69,10 @@ export interface  SlideComponent extends BaseComponent {
   readonly isClone: boolean;
 
   update(): void;
-  pos(): number;
   size(): number;
   style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void
   isWithin( from: number, distance: number ): boolean;
+  isVisible( partial?: boolean ): boolean;
 }
 
 /**
@@ -93,7 +93,7 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   const { Components, root, options } = Splide;
   const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;
   const { Elements } = Components;
-  const { resolve } = Components.Direction;
+  const { resolve, orient } = Components.Direction;
   const styles    = getAttribute( slide, 'style' );
   const label     = getAttribute( slide, ARIA_LABEL );
   const isClone   = slideIndex > -1;
@@ -250,7 +250,7 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   /**
    * Checks if the slide is visible or not.
    */
-  function isVisible(): boolean {
+  function isVisible( partial?: boolean ): boolean {
     if ( Splide.is( FADE ) ) {
       return isActive();
     }
@@ -260,8 +260,8 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
     const left      = resolve( 'left', true );
     const right     = resolve( 'right', true );
 
-    return floor( trackRect[ left ] ) <= ceil( slideRect[ left ] )
-      && floor( slideRect[ right ] ) <= ceil( trackRect[ right ] );
+    return floor( trackRect[ left ] ) <= ceil( slideRect[ partial ? right : left ] )
+      && floor( slideRect[ partial ? left : right ] ) <= ceil( trackRect[ right ] );
   }
 
   /**
@@ -283,17 +283,6 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
     return diff <= distance;
   }
 
-  /**
-   * Returns the slide offset position that is relative to the list element.
-   *
-   * @return The slide position.
-   */
-  function pos(): number {
-    const first = Components.Slides.get()[ 0 ];
-    const left  = resolve( 'left' );
-    return first ? abs( rect( slide )[ left ] - rect( first.slide )[ left ] ) : 0;
-  }
-
   /**
    * Returns width of the slide in a horizontal carousel, or height in a vertical one.
    *
@@ -312,9 +301,9 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
     mount,
     destroy,
     update,
-    pos,
     size,
     style,
+    isVisible,
     isWithin,
   };
 

src/js/transitions/Slide/Slide.ts

@@ -45,7 +45,7 @@ export const Slide: ComponentConstructor<TransitionComponent> = ( Splide, Compon
    * @param done  - The callback function that must be called after the transition ends.
    */
   function start( index: number, done: () => void ): void {
-    const destination = Move.toPosition( index, true );
+    const destination = Move.toPosition( index );
     const position    = Move.getPosition();
     const speed       = getSpeed( index );