|
@@ -27,6 +27,13 @@ export default ( Splide, Components, options ) => {
|
|
|
*/
|
|
|
const Elements = Components.Elements;
|
|
|
|
|
|
+ /**
|
|
|
+ * Keep the root element.
|
|
|
+ *
|
|
|
+ * @type {Element}
|
|
|
+ */
|
|
|
+ const root = Splide.root;
|
|
|
+
|
|
|
/**
|
|
|
* Keep the track element.
|
|
|
*
|
|
@@ -43,21 +50,35 @@ export default ( Splide, Components, options ) => {
|
|
|
marginProp: 'marginBottom',
|
|
|
|
|
|
/**
|
|
|
- * Init slider styles according to options.
|
|
|
+ * Gap in px.
|
|
|
+ *
|
|
|
+ * @type {number}
|
|
|
*/
|
|
|
- init() {
|
|
|
- let padding = options.padding;
|
|
|
+ gap: toPixel( root, options.gap ),
|
|
|
|
|
|
- if ( padding ) {
|
|
|
- if ( typeof padding !== 'object' ) {
|
|
|
- padding = {
|
|
|
- top : padding,
|
|
|
- bottom: padding,
|
|
|
- }
|
|
|
- }
|
|
|
+ /**
|
|
|
+ * An object containing padding left and right in px.
|
|
|
+ *
|
|
|
+ * @type {Object}
|
|
|
+ */
|
|
|
+ padding: ( () => {
|
|
|
+ const padding = options.padding;
|
|
|
+ const { top = padding, bottom = padding } = padding;
|
|
|
|
|
|
- applyStyle( track, { paddingTop : unit( padding.top ), paddingBottom: unit( padding.bottom ) } );
|
|
|
- }
|
|
|
+ return {
|
|
|
+ top : toPixel( root, top ),
|
|
|
+ bottom: toPixel( root, bottom ),
|
|
|
+ };
|
|
|
+ } )(),
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Init slider styles according to options.
|
|
|
+ */
|
|
|
+ init() {
|
|
|
+ applyStyle( track, {
|
|
|
+ paddingTop : unit( this.padding.top ),
|
|
|
+ paddingBottom: unit( this.padding.bottom ),
|
|
|
+ } );
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -77,7 +98,7 @@ export default ( Splide, Components, options ) => {
|
|
|
get height() {
|
|
|
const height = options.height || this.width * options.heightRatio;
|
|
|
exist( height, '"height" or "heightRatio" must be given in TTB mode.' );
|
|
|
- return toPixel( Splide.root, height );
|
|
|
+ return toPixel( Splide.root, height ) - this.padding.top - this.padding.bottom;
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -113,37 +134,21 @@ export default ( Splide, Components, options ) => {
|
|
|
* @return {number} - The slide height.
|
|
|
*/
|
|
|
get slideHeight() {
|
|
|
- let height = options.fixedHeight;
|
|
|
-
|
|
|
- if ( ! height ) {
|
|
|
- height = ( this.height + this.gap ) / options.perPage - this.gap;
|
|
|
- }
|
|
|
-
|
|
|
+ const height = options.fixedHeight || ( this.height + this.gap ) / options.perPage - this.gap;
|
|
|
return toPixel( Splide.root, height );
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
- * Return gap in px.
|
|
|
- *
|
|
|
- * @return {Object} - Gap amount in px.
|
|
|
- */
|
|
|
- get gap() {
|
|
|
- const style = getComputedStyle( Elements.slides[ 0 ] );
|
|
|
- return parseFloat( style[ this.marginProp ] ) || 0;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Return padding object.
|
|
|
+ * Return the number of slides in the current view.
|
|
|
*
|
|
|
- * @return {Object} - An object containing padding top and bottom.
|
|
|
+ * @return {number} - The number of slides in view.
|
|
|
*/
|
|
|
- get padding() {
|
|
|
- const style = getComputedStyle( track );
|
|
|
+ get numInView() {
|
|
|
+ if ( options.fixedHeight ) {
|
|
|
+ return Math.floor( ( this.height + this.gap ) / ( this.slideHeight + this.gap ) ) || 1;
|
|
|
+ }
|
|
|
|
|
|
- return {
|
|
|
- top : parseFloat( style.paddingTop ) || 0,
|
|
|
- bottom: parseFloat( style.paddingBottom ) || 0,
|
|
|
- };
|
|
|
- },
|
|
|
+ return options.perPage;
|
|
|
+ }
|
|
|
}
|
|
|
}
|