Rename perView to perPage.

src/js/components/a11y/index.js

@@ -132,7 +132,7 @@ export default ( Splide, Components ) => {
 
 		data.items.forEach( item => {
 			const options  = Splide.options;
-			const text     = ! options.focus && options.perView > 1 ? i18n.pageX : i18n.slideX;
+			const text     = ! options.focus && options.perPage > 1 ? i18n.pageX : i18n.slideX;
 			const label    = sprintf( text, item.page + 1 );
 			const srt      = createSrt( label );
 			const button   = item.button;

src/js/components/autoplay/index.js

@@ -57,13 +57,13 @@ export default ( Splide, Components, name ) => {
 
 		/**
 		 * Called when the component is mounted.
-		 * Note that autoplay starts only if there are slides over perView number.
+		 * Note that autoplay starts only if there are slides over perPage number.
 		 */
 		mount() {
 			const options = Splide.options;
 			const { slides, bar } = Components.Elements;
 
-			if ( slides.length > options.perView ) {
+			if ( slides.length > options.perPage ) {
 				interval = createInterval( () => { Splide.go( '>' ) }, options.interval, rate => {
 					Splide.emit( `${ name }:playing`, rate );
 					bar && applyStyle( bar, { width: `${ rate * 100 }%` } );

src/js/components/clones/index.js

@@ -63,13 +63,13 @@ export default ( Splide, Components ) => {
 	 * Generate and append clones.
 	 * Clone count is determined by:
 	 * - Max pages a flick action can move.
-	 * - Whether the slide length is enough for perView.
+	 * - Whether the slide length is enough for perPage.
 	 */
 	function generateClones() {
 		const { Slides, Elements: { list } }  = Components;
-		const { perView, drag, flickMaxPages = 1 } = Splide.options;
+		const { perPage, drag, flickMaxPages = 1 } = Splide.options;
 		const length = Slides.length;
-		const count  = perView * ( drag ? flickMaxPages + 1 : 1 ) + ( length < perView ? perView : 0 );
+		const count  = perPage * ( drag ? flickMaxPages + 1 : 1 ) + ( length < perPage ? perPage : 0 );
 
 		let slides = Slides.getSlides( false, false );
 

src/js/components/controller/index.js

@@ -110,14 +110,14 @@ export default ( Splide, Components ) => {
 			}
 
 			const length  = Splide.length;
-			const perView = options.perView;
+			const perPage = options.perPage;
 
-			let index = page * perView;
-			index = index - ( this.pageLength * perView - length ) * floor( index / length );
+			let index = page * perPage;
+			index = index - ( this.pageLength * perPage - length ) * floor( index / length );
 
 			// Adjustment for the last page.
-			if ( length - perView <= index && index < length ) {
-				index = length - perView;
+			if ( length - perPage <= index && index < length ) {
+				index = length - perPage;
 			}
 
 			return index;
@@ -136,14 +136,14 @@ export default ( Splide, Components ) => {
 			}
 
 			const length  = Splide.length;
-			const perView = options.perView;
+			const perPage = options.perPage;
 
-			// Make the last "perView" number of slides belong to the last page.
-			if ( length - perView <= index && index < length ) {
-				return floor( ( length - 1 ) / perView );
+			// Make the last "perPage" number of slides belong to the last page.
+			if ( length - perPage <= index && index < length ) {
+				return floor( ( length - 1 ) / perPage );
 			}
 
-			return floor( index / perView );
+			return floor( index / perPage );
 		},
 
 		/**
@@ -207,7 +207,7 @@ export default ( Splide, Components ) => {
 		 */
 		get pageLength() {
 			const length = Splide.length;
-			return options.focus ? length : Math.ceil( length / options.perView );
+			return options.focus ? length : Math.ceil( length / options.perPage );
 		},
 
 		/**
@@ -222,7 +222,7 @@ export default ( Splide, Components ) => {
 				return length - 1;
 			}
 
-			return length - options.perView;
+			return length - options.perPage;
 		},
 
 		/**

src/js/components/layout/index.js

@@ -109,7 +109,7 @@ export default ( Splide, Components ) => {
 
 		/**
 		 * Return slide width including gap size.
-		 * Note that slideWidth * perView is NOT equal to slider width.
+		 * Note that slideWidth * perPage is NOT equal to slider width.
 		 *
 		 * @return {number} - Current slide width including gap size.
 		 */
@@ -179,7 +179,7 @@ export default ( Splide, Components ) => {
 		Splide.on( 'mounted resize', resize ).on( 'updated', init );
 
 		if ( ! isVertical ) {
-			Splide.on( 'resize', updatePerView );
+			Splide.on( 'resize', updatePerPage );
 		}
 	}
 
@@ -201,16 +201,16 @@ export default ( Splide, Components ) => {
 	}
 
 	/**
-	 * Update the perView number automatically according to the fixedWidth.
+	 * Update the perPage number automatically according to the fixedWidth.
 	 */
-	function updatePerView() {
+	function updatePerPage() {
 		const options = Splide.options;
 
 		if ( options.fixedWidth ) {
-			const perView = Math.floor( ( Layout.width + Resolver.gap ) / Layout.slideWidth ) || 1;
+			const perPage = Math.floor( ( Layout.width + Resolver.gap ) / Layout.slideWidth ) || 1;
 
-			if ( options.perView !== perView ) {
-				Splide.options = { perView };
+			if ( options.perPage !== perPage ) {
+				Splide.options = { perPage };
 			}
 		}
 	}

src/js/components/layout/resolvers/horizontal.js

@@ -75,7 +75,7 @@ export default ( Splide, Components, options ) => {
 				return includeGap ? fixedWidth + this.gap : fixedWidth;
 			}
 
-			const width = ( this.width + this.gap ) / options.perView;
+			const width = ( this.width + this.gap ) / options.perPage;
 			return includeGap ? width : width - this.gap;
 		},
 

src/js/components/layout/resolvers/vertical.js

@@ -69,7 +69,7 @@ export default ( Splide, Components, options ) => {
 		 * @return {number} - Slide height in px.
 		 */
 		getSlideHeight( includeGap ) {
-			const height = ( this.listHeight + this.gap ) / options.perView;
+			const height = ( this.listHeight + this.gap ) / options.perPage;
 			return includeGap ? height : height - this.gap;
 		},
 

src/js/components/lazyload/index.js

@@ -101,7 +101,7 @@ export default ( Splide, Components, name ) => {
 		const options = Splide.options;
 
 		images = images.filter( image => {
-			if ( image.Slide.isWithin( index, options.perView * ( options.preloadPages + 1 ) ) ) {
+			if ( image.Slide.isWithin( index, options.perPage * ( options.preloadPages + 1 ) ) ) {
 				load( image.img, image.Slide );
 				return false;
 			}

src/js/components/pagination/index.js

@@ -166,7 +166,7 @@ export default ( Splide, Components, name ) => {
 		const Slides  = Components.Slides;
 
 		const items = Slides.getSlides( false, true )
-			.filter( Slide => options.focus || Slide.index % options.perView === 0 )
+			.filter( Slide => options.focus || Slide.index % options.perPage === 0 )
 			.map( ( Slide, page ) => {
 				const li      = create( 'li', {} );
 				const button  = create( 'button', { class: classes.page } );

src/js/components/slides/index.js

@@ -91,7 +91,7 @@ export default ( Splide, Components ) => {
 		getSlidesByPage( page ) {
 			const idx     = Components.Controller.pageToIndex( page );
 			const options = Splide.options;
-			const max     = options.focus ? 1 : options.perView;
+			const max     = options.focus ? 1 : options.perPage;
 
 			return Slides.filter( ( { index } ) => idx <= index && index < idx + max );
 		},

src/js/components/slides/slide.js

@@ -108,22 +108,22 @@ export default function Slide( index, realIndex, slide, Splide ) {
 		 * @return {boolean} - True if the slide is visible or false if not.
 		 */
 		isVisible() {
-			const { focus, perView, trimSpace }  = Splide.options;
+			const { focus, perPage, trimSpace }  = Splide.options;
 			const { index: activeIndex, length } = Splide;
 			const isCenter = 'center' === focus;
-			const offset   = isCenter ? perView / 2 : parseInt( focus ) || 0;
+			const offset   = isCenter ? perPage / 2 : parseInt( focus ) || 0;
 
 			if ( trimSpace ) {
 				if ( activeIndex < offset ) {
-					return index < perView;
-				} else if ( activeIndex >= length - ( perView - offset ) ) {
-					return index >= length - perView;
+					return index < perPage;
+				} else if ( activeIndex >= length - ( perPage - offset ) ) {
+					return index >= length - perPage;
 				}
 			}
 
-			const min = activeIndex - offset + ( isCenter && perView % 2 === 0 ? 1 : 0 );
+			const min = activeIndex - offset + ( isCenter && perPage % 2 === 0 ? 1 : 0 );
 
-			return min <= index && index < activeIndex + perView - offset;
+			return min <= index && index < activeIndex + perPage - offset;
 		},
 
 		/**

src/js/components/track/resolvers/vertical.js

@@ -64,7 +64,7 @@ export default ( Splide, Components ) => {
 		 * @return {number} - Trimmed position.
 		 */
 		trim( position ) {
-			const edge = -( Layout.listHeight - Splide.options.perView * Layout.slideHeight );
+			const edge = -( Layout.listHeight - Splide.options.perPage * Layout.slideHeight );
 			return between( position, edge, 0 );
 		},
 

src/js/constants/defaults.js

@@ -14,7 +14,7 @@ export const DEFAULTS = {
 	 * Determine a slider type.
 	 * - 'slide': Regular slider.
 	 * - 'loop' : Carousel slider.
-	 * - 'fade' : Change slides with fade transition. perView, drag options are ignored.
+	 * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
 	 *
 	 * @type {string}
 	 */
@@ -44,7 +44,7 @@ export const DEFAULTS = {
 
 	/**
 	 * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
-	 * perView number will be ignored when this option is falsy.
+	 * perPage number will be ignored when this option is falsy.
 	 *
 	 * @type {number|string}
 	 */
@@ -71,7 +71,7 @@ export const DEFAULTS = {
 	 *
 	 * @type {number}
 	 */
-	perView: 1,
+	perPage: 1,
 
 	/**
 	 * Determine how many slides should be moved when a slider goes to next or perv.
@@ -279,11 +279,11 @@ export const DEFAULTS = {
 	 * @example
 	 * {
 	 *   '1000': {
-	 *     perView: 3,
+	 *     perPage: 3,
 	 *     gap: 20
 	 *   },
 	 *   '600': {
-	 *     perView: 1,
+	 *     perPage: 1,
 	 *     gap: 5,
 	 *   }
 	 * }

src/js/transitions/fade/index.js

@@ -17,7 +17,7 @@ import { applyStyle } from '../../utils/dom';
  * @return {Object} - The component object.
  */
 export default ( Splide, Components ) => {
-	Components.Options.fix( { perView: 1, gap: 0, padding: 0 } );
+	Components.Options.fix( { perPage: 1, gap: 0, padding: 0 } );
 
 	if ( Components.Drag ) {
 		Components.Drag.required = false;

tests/core/events.test.js

@@ -28,7 +28,7 @@ describe( 'Event', () => {
 
 		expect( callback ).not.toHaveBeenCalled();
 
-		splide.options = { perView: 2 };
+		splide.options = { perPage: 2 };
 
 		expect( callback ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -54,7 +54,7 @@ describe( 'Event', () => {
 
 		expect( callback ).not.toHaveBeenCalled();
 
-		splide.options = { perView: 2 };
+		splide.options = { perPage: 2 };
 
 		expect( callback ).toHaveBeenCalledTimes( 1 );
 	} );

tests/core/splide.test.js

@@ -20,8 +20,8 @@ describe( 'Splide ', () => {
 	} );
 
 	test( 'should overwrite default options with a given ones on construction.', () => {
-		const splide = new Splide( '#splide', { perView: 3 } );
-		expect( splide.options ).toEqual( { ...DEFAULTS, perView: 3 } );
+		const splide = new Splide( '#splide', { perPage: 3 } );
+		expect( splide.options ).toEqual( { ...DEFAULTS, perPage: 3 } );
 	} );
 
 	test( '"is" should verify if a given type is a current one.', () => {

tests/functionality/a11y.test.js

@@ -58,15 +58,15 @@ describe( 'The A11y', () => {
 			} );
 		}
 
-		test( 'with "go to slide X" when perView is 1.', () => {
+		test( 'with "go to slide X" when perPage is 1.', () => {
 			const splide = new Splide( '#splide', { pagination: true }, COMPLETE );
 			splide.mount();
 
 			confirm( splide, splide.i18n.slideX );
 		} );
 
-		test( 'with "go to page X" when perView is not 1.', () => {
-			const splide = new Splide( '#splide', { pagination: true, perView: 2 }, COMPLETE );
+		test( 'with "go to page X" when perPage is not 1.', () => {
+			const splide = new Splide( '#splide', { pagination: true, perPage: 2 }, COMPLETE );
 			splide.mount();
 
 			confirm( splide, splide.i18n.pageX );

tests/functionality/controller.test.js

@@ -9,8 +9,8 @@ describe( 'The Controller', () => {
 	} );
 
 	test( 'should parse control patterns.', () => {
-		const perView    = 3;
-		const splide     = new Splide( '#splide', { perView }, COMPLETE ).mount();
+		const perPage    = 3;
+		const splide     = new Splide( '#splide', { perPage }, COMPLETE ).mount();
 		const Controller = splide.Components.Controller;
 
 		expect( Controller.parse( '+' ) ).toBe( 1 );
@@ -18,25 +18,25 @@ describe( 'The Controller', () => {
 		expect( Controller.parse( '-' ) ).toBe( -1 );
 		expect( Controller.parse( '-2' ) ).toBe( -2 );
 
-		expect( Controller.parse( '>' ) ).toBe( perView );
-		expect( Controller.parse( '<' ) ).toBe( -perView );
-		expect( Controller.parse( '>2' ) ).toBe( perView * 2 );
+		expect( Controller.parse( '>' ) ).toBe( perPage );
+		expect( Controller.parse( '<' ) ).toBe( -perPage );
+		expect( Controller.parse( '>2' ) ).toBe( perPage * 2 );
 
 		expect( Controller.parse( '5' ) ).toBe( 5 );
 	} );
 
 	test( 'should trim index depending on a slider type and rewind option.', () => {
-		const perView    = 3;
-		const splide     = new Splide( '#splide', { perView }, COMPLETE ).mount();
+		const perPage    = 3;
+		const splide     = new Splide( '#splide', { perPage }, COMPLETE ).mount();
 		const slides     = splide.Components.Elements.slides;
 		const Controller = splide.Components.Controller;
 
-		expect( Controller.edgeIndex ).toBe( slides.length - perView );
+		expect( Controller.edgeIndex ).toBe( slides.length - perPage );
 		expect( Controller.trim( 100 ) ).toBe( Controller.edgeIndex );
 		expect( Controller.trim( -100 ) ).toBe( 0 );
 
 		splide.options = { rewind: true };
-		expect( Controller.edgeIndex ).toBe( slides.length - perView );
+		expect( Controller.edgeIndex ).toBe( slides.length - perPage );
 		expect( Controller.trim( 100 ) ).toBe( 0 );
 		expect( Controller.trim( -100 ) ).toBe( Controller.edgeIndex );
 

tests/functionality/focus.test.js

@@ -14,11 +14,11 @@ describe( 'Splide with "focus" option', () => {
 	test( 'should locate the active slide on the center of the slider if the value is "center".', () => {
 		const { Track, Elements: { track } } = splide.Components;
 		const width      = 900;
-		const perView    = 3;
-		const slideWidth = width / perView;
+		const perPage    = 3;
+		const slideWidth = width / perPage;
 
 		Object.defineProperty( track, 'clientWidth', { value: width } );
-		splide.options = { focus: 'center', perView };
+		splide.options = { focus: 'center', perPage };
 
 		expect( Track.offset ).toBe( - ( width / 2 - slideWidth / 2 ) );
 	} );
@@ -26,12 +26,12 @@ describe( 'Splide with "focus" option', () => {
 	test( 'should locate the active slide according to the focus index.', () => {
 		const { Track, Elements: { track } } = splide.Components;
 		const width      = 900;
-		const perView    = 3;
+		const perPage    = 3;
 		const focus      = 2;
-		const slideWidth = width / perView;
+		const slideWidth = width / perPage;
 
 		Object.defineProperty( track, 'clientWidth', { value: width } );
-		splide.options = { focus, perView };
+		splide.options = { focus, perPage };
 
 		expect( Track.offset ).toBe( - slideWidth * focus );
 	} );

tests/functionality/layout.test.js

@@ -22,8 +22,8 @@ describe( 'The Layout ', () => {
 		expect( slide.style.height ).toBe( '40em' );
 	} );
 
-	test( 'should set proper width of a slide element according to a perView option in horizontal mode.', () => {
-		const splide = new Splide( '#splide', { perView: 2 }, COMPLETE );
+	test( 'should set proper width of a slide element according to a perPage option in horizontal mode.', () => {
+		const splide = new Splide( '#splide', { perPage: 2 }, COMPLETE );
 		splide.mount();
 
 		const track = splide.Components.Elements.track;
@@ -36,13 +36,13 @@ describe( 'The Layout ', () => {
 		const slide = splide.Components.Elements.slides.pop();
 		expect( slide.style.width ).toBe( '400px' );
 
-		// Is the width updated correctly after perView option is updated?
-		splide.options = { perView: 4 };
+		// Is the width updated correctly after perPage option is updated?
+		splide.options = { perPage: 4 };
 		expect( slide.style.width ).toBe( '200px' );
 	} );
 
-	test( 'should set proper height of a slide element according to a perView option in vertical mode.', () => {
-		const splide = new Splide( '#splide', { direction: 'ttb', perView: 2, height: 400 }, COMPLETE );
+	test( 'should set proper height of a slide element according to a perPage option in vertical mode.', () => {
+		const splide = new Splide( '#splide', { direction: 'ttb', perPage: 2, height: 400 }, COMPLETE );
 		splide.mount();
 
 		const track  = splide.Components.Elements.track;
@@ -52,7 +52,7 @@ describe( 'The Layout ', () => {
 		const slide = splide.Components.Elements.slides.pop();
 		expect( slide.style.height ).toBe( '200px' );
 
-		splide.options = { perView: 4 };
+		splide.options = { perPage: 4 };
 		expect( slide.style.height ).toBe( '100px' );
 	} );