123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- import { TTB } from '../../constants/directions';
- import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
- import { Splide } from '../../core/Splide/Splide';
- import { BaseComponent, Components, Options } from '../../types';
- import { apply, EventInterface, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
- import { assert } from '../../utils';
- import { FADE } from '../../constants/types';
- import { CLASS_OVERFLOW } from '../../constants/classes';
- /**
- * The interface for the Layout component.
- *
- * @since 3.0.0
- */
- export interface LayoutComponent extends BaseComponent {
- listSize(): number;
- slideSize( index: number, withoutGap?: boolean ): number;
- sliderSize( withoutGap?: boolean ): number;
- totalSize( index?: number, withoutGap?: boolean ): number;
- getPadding( right: boolean ): number;
- isOverflow(): boolean;
- /** @internal */
- resize( force?: boolean ): void;
- }
- /**
- * The component that adjusts slider styles and provides methods for dimensions.
- *
- * @since 3.0.0
- *
- * @param Splide - A Splide instance.
- * @param Components - A collection of components.
- * @param options - Options.
- * @param event - An EventInterface instance.
- *
- * @return An Layout component object.
- */
- export function Layout(
- Splide: Splide,
- Components: Components,
- options: Options,
- event: EventInterface
- ): LayoutComponent {
- const { on, bind, emit } = event;
- const { Slides } = Components;
- const { resolve } = Components.Direction;
- const { root, track, list } = Components.Elements;
- const { getAt, style: styleSlides } = Slides;
- /**
- * Indicates whether the slider direction is vertical or not.
- */
- let vertical: boolean;
- /**
- * Keeps the DOMRect object of the root element.
- */
- let rootRect: DOMRect;
- /**
- * Turns into `true` when the carousel is wider than the list.
- */
- let overflow: boolean;
- /**
- * Called when the component is mounted.
- */
- function mount(): void {
- init();
- bind( window, 'resize load', Throttle( apply( emit, EVENT_RESIZE ) ) );
- on( [ EVENT_UPDATED, EVENT_REFRESH ], init );
- on( EVENT_RESIZE, resize );
- }
- /**
- * Initializes the component on `mount` or `updated`.
- * Uses `max-width` for the root to prevent the slider from exceeding the parent element.
- */
- function init(): void {
- vertical = options.direction === TTB;
- style( root, 'maxWidth', unit( options.width ) );
- style( track, resolve( 'paddingLeft' ), cssPadding( false ) );
- style( track, resolve( 'paddingRight' ), cssPadding( true ) );
- resize( true );
- }
- /**
- * Updates dimensions of some elements when the carousel is resized.
- * Also checks the carousel size and emits `overflow` events when it exceeds the list width.
- *
- * @param force - Skips checking the root dimension change and always performs the resizing process.
- */
- function resize( force?: boolean ): void {
- const newRect = rect( root );
- if ( force || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {
- style( track, 'height', cssTrackHeight() );
- styleSlides( resolve( 'marginRight' ), unit( options.gap ) );
- styleSlides( 'width', cssSlideWidth() );
- styleSlides( 'height', cssSlideHeight(), true );
- rootRect = newRect;
- emit( EVENT_RESIZED );
- if ( overflow !== ( overflow = isOverflow() ) ) {
- toggleClass( root, CLASS_OVERFLOW, overflow );
- emit( EVENT_OVERFLOW, overflow );
- }
- }
- }
- /**
- * 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`.
- *
- * @return The padding value as a CSS string.
- */
- function cssPadding( right: boolean ): string {
- const { padding } = options;
- const prop = resolve( right ? 'right' : 'left' );
- return padding
- && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) )
- || '0px';
- }
- /**
- * Returns the height of the track element as a CSS string.
- *
- * @return The height of the track.
- */
- function cssTrackHeight(): string {
- let height = '';
- if ( vertical ) {
- height = cssHeight();
- assert( height, 'height or heightRatio is missing.' );
- height = `calc(${ height } - ${ cssPadding( false ) } - ${ cssPadding( true ) })`;
- }
- return height;
- }
- /**
- * Converts options related with height to a CSS string.
- *
- * @return The height as a CSS string if available, or otherwise an empty string.
- */
- function cssHeight(): string {
- return unit( options.height || rect( list ).width * options.heightRatio );
- }
- /**
- * Returns the width of the slide as a CSS string.
- *
- * @return The width of the slide.
- */
- function cssSlideWidth(): string | null {
- return options.autoWidth
- ? null
- : unit( options.fixedWidth ) || ( vertical ? '' : cssSlideSize() );
- }
- /**
- * Returns the height of the slide as a CSS string.
- *
- * @return The height of the slide.
- */
- function cssSlideHeight(): string | null {
- return unit( options.fixedHeight )
- || ( vertical ? ( options.autoHeight ? null : cssSlideSize() ) : cssHeight() );
- }
- /**
- * Returns the CSS string for slide width or height without gap.
- *
- * @return The CSS string for slide width or height.
- */
- function cssSlideSize(): string {
- const gap = unit( options.gap );
- return `calc((100%${ gap && ` + ${ gap }` })/${ options.perPage || 1 }${ gap && ` - ${ gap }` })`;
- }
- /**
- * Returns the list width for the horizontal slider, or the height for the vertical slider.
- *
- * @return The size of the list element in pixel.
- */
- function listSize(): number {
- return rect( list )[ resolve( 'width' ) ];
- }
- /**
- * Returns the slide width for the horizontal slider, or the height for the vertical slider.
- *
- * @param index - Optional. A slide index.
- * @param withoutGap - Optional. Determines whether to exclude the gap amount or not.
- *
- * @return The size of the specified slide element in pixel.
- */
- function slideSize( index = 0, withoutGap?: boolean ): number {
- const Slide = getAt( index );
- return ( Slide ? Slide.size() : 0 ) + ( withoutGap ? 0 : getGap() );
- }
- /**
- * Returns the total width or height of slides from the head of the slider to the specified index.
- * This includes sizes of clones before the first slide.
- *
- * @param index - A slide index. If omitted, uses the last index.
- * @param withoutGap - Optional. Determines whether to exclude the last gap or not.
- *
- * @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;
- }
- /**
- * Returns the slider size without clones before the first slide.
- * Do not use the clone's size because it's unstable while initializing and refreshing process.
- *
- * @param withoutGap - Optional. Determines whether to exclude the last gap or not.
- *
- * @return The width or height of the slider without clones.
- */
- function sliderSize( withoutGap?: boolean ): number {
- return totalSize( Splide.length - 1 ) - totalSize( 0 ) + slideSize( 0, withoutGap );
- }
- /**
- * Compute the gap by the first and second slides.
- * This always returns 0 if the number of slides is less than 2.
- *
- * @return The gap value in pixel.
- */
- function getGap(): number {
- const first = getAt( 0 );
- const second = getAt( 1 );
- return first && second ? second.pos() - first.pos() - first.size() : 0;
- }
- /**
- * Returns the padding value.
- * This method resolves the difference of the direction.
- *
- * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.
- *
- * @return The padding value in pixel.
- */
- function getPadding( right: boolean ): number {
- return parseFloat( style(
- track,
- resolve( `padding${ right ? 'Right' : 'Left' }` )
- ) ) || 0;
- }
- /**
- * Checks if the carousel is wider than the list.
- * This method always returns `true` for a fade carousel.
- *
- * @return `true` if the carousel is wider than the list, or otherwise `false`.
- */
- function isOverflow(): boolean {
- return Splide.is( FADE ) || sliderSize( true ) > listSize();
- }
- return {
- mount,
- resize,
- listSize,
- slideSize,
- sliderSize,
- totalSize,
- getPadding,
- isOverflow,
- };
- }
|