From deabfd3d573e2705c11daf4b3a6c3637de6a52d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernd=20Artmu=CC=88ller?=
Date: Sat, 15 Aug 2020 12:22:26 +0200
Subject: [PATCH] refactor(everything) Remove jsdoc types, add TS typings
---
README.md | 179 +++++++++++++++++-
examples/index.html | 4 -
src/components/clone/clone.component.ts | 21 +-
.../controller/controller.component.ts | 62 +++---
src/components/drag/drag.component.ts | 15 +-
.../layout/directions/horizontal-layout.ts | 4 +-
src/components/layout/index.ts | 9 +-
.../pagination/pagination.component.ts | 17 +-
src/components/track/directions/horizontal.ts | 6 +-
src/components/track/track.component.ts | 39 ++--
src/components/virtual/slide.component.ts | 30 ++-
src/constants/classes.ts | 2 +-
src/constants/states.ts | 10 +-
src/core/event.ts | 27 +--
src/css/styles.css | 13 +-
src/transitions/slide/index.ts | 22 +--
src/utils/dom.ts | 76 ++++----
src/utils/error.ts | 12 +-
src/utils/object.ts | 34 ++--
src/utils/time.ts | 18 +-
src/utils/utils.ts | 18 +-
src/virtual-swiper.ts | 1 -
22 files changed, 387 insertions(+), 232 deletions(-)
diff --git a/README.md b/README.md
index 5e8f9d6..bec7583 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,182 @@
-# Virtual Swiper
+
-This typescript swiper aims to provide a high-performance swiper carousel best used when multiple instances on a page are necessary (e.g. list of cards where each card has a swiper gallery - Airbnb, Hometogo,...).
+
+
+
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+
+
+
+
+
+
+
+
+
Virtual Swiper
+
+
+ YOUR_SHORT_DESCRIPTION
+
+ Explore the docs »
+
+
+ View Demo
+ ·
+ Report Bug
+ ·
+ Request Feature
+
+
+
+
+
+## Table of Contents
+
+- [About the Project](#about-the-project)
+ - [Built With](#built-with)
+- [Getting Started](#getting-started)
+ - [Prerequisites](#prerequisites)
+ - [Installation](#installation)
+- [Usage](#usage)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact](#contact)
+- [Acknowledgements](#acknowledgements)
+
+
+
+## About The Project
+
+[![Product Name Screen Shot][product-screenshot]](https://example.com)
+
+This swiper library written in TypeScript aims to provide a high-performance swiper carousel best used when multiple instances on a page are necessary (e.g. list of cards where each card has a swiper gallery - Airbnb, Hometogo,...).
To achieve this goal, this swiper carousel uses virtual slides to only render those slides which are really necessary.
+**To avoid retyping too much info. Do a search and replace with your text editor for the following:**
+`github_username`, `repo`, `twitter_handle`, `email`
+
+### Built With
+
+- []()
+- []()
+- []()
+
+
+
+## Getting Started
+
+To get a local copy up and running follow these simple steps.
+
+### Prerequisites
+
+This is an example of how to list things you need to use the software and how to install them.
+
+- npm
+
+```sh
+npm install virtual-swiper
+```
+
+### Installation
+
+1. Clone the repo
+
+```sh
+git clone https://github.com/github_username/repo.git
+```
+
+2. Install NPM packages
+
+```sh
+npm install
+```
+
+
+
+## Usage
+
+Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
+
+_For more examples, please refer to the [Documentation](https://example.com)_
+
+
+
+## Roadmap
+
+See the [open issues](https://github.com/github_username/repo/issues) for a list of proposed features (and known issues).
+
+
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+
+
+## Contact
+
+Your Name - [@twitter_handle](https://twitter.com/twitter_handle) - email
+
+Project Link: [https://github.com/github_username/repo](https://github.com/github_username/repo)
+
+
+
+## Acknowledgements
+
Huge credits to https://github.com/Splidejs/splide by NaotoshiFujita. Great slider and very well implemented!
+
+- []()
+- []()
+- []()
+
+
+
+
+[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=flat-square
+[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=flat-square
+[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
+[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=flat-square
+[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
+[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=flat-square
+[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
+[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square
+[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/othneildrew
+[product-screenshot]: images/screenshot.png
diff --git a/examples/index.html b/examples/index.html
index 3810f28..d2fcf10 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -23,8 +23,6 @@
Slide 2
-
-
@@ -41,8 +39,6 @@
Slide 2
-
-
diff --git a/src/components/clone/clone.component.ts b/src/components/clone/clone.component.ts
index 790378f..216961f 100644
--- a/src/components/clone/clone.component.ts
+++ b/src/components/clone/clone.component.ts
@@ -1,8 +1,7 @@
-import { addClass, append, before, remove, removeAttribute, domify } from '../../utils/dom';
+import { addClass, append, before, domify, remove, removeAttribute } from '../../utils/dom';
import TrackComponent from '../track/track.component';
import VirtualComponent from '../virtual/virtual.component';
import { LOOP } from './../../constants/types';
-import { Event } from './../../core/event';
import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from './../../virtual-swiper';
import { BaseComponent } from './../base-component';
import { SlideComponent } from './../virtual/slide.component';
@@ -52,36 +51,36 @@ export default class CloneComponent implements BaseComponent {
/**
* Return all clones.
*
- * @return {Element[]} - Cloned elements.
+ * @return Cloned elements.
*/
- get clones() {
+ get clones(): SlideComponent[] {
return [...this._clonesBefore, ...this._clonesAfter];
}
/**
* Return clone length.
*
- * @return {number} - A length of clones.
+ * @return A length of clones.
*/
- get length() {
+ get length(): number {
return this.clones.length;
}
/**
* Return before clone length.
*
- * @return {number} - A length of before clones.
+ * @return A length of before clones.
*/
- get lengthBefore() {
+ get lengthBefore(): number {
return this._clonesBefore.length;
}
/**
* Return after clone length.
*
- * @return {number} - A length of after clones.
+ * @return A length of after clones.
*/
- get lengthAfter() {
+ get lengthAfter(): number {
return this._clonesAfter.length;
}
@@ -140,7 +139,7 @@ export default class CloneComponent implements BaseComponent {
*
* @param slide - An element being duplicated.
*
- * @return {Node} - A cloned node(element).
+ * @return A cloned node(element).
*/
private cloneDeeply(element: HTMLElement): HTMLElement {
const clone = element.cloneNode(true) as HTMLElement;
diff --git a/src/components/controller/controller.component.ts b/src/components/controller/controller.component.ts
index 8b08106..05c8795 100644
--- a/src/components/controller/controller.component.ts
+++ b/src/components/controller/controller.component.ts
@@ -10,7 +10,7 @@ export default class ControllerComponent implements BaseComponent {
*
* @type {boolean}
*/
- private isLoop = true;
+ private isLoop: boolean = true;
private swiperInstance: VirtualSwiper;
private track: TrackComponent;
@@ -33,10 +33,10 @@ export default class ControllerComponent implements BaseComponent {
* - "<" : Go to prev page.
* - ">{i}" : Go to page i.
*
- * @param {string|number} control - A control pattern.
- * @param {boolean} silently - Go to the destination without event emission.
+ * @param control - A control pattern.
+ * @param silently - Go to the destination without event emission.
*/
- go(control, silently: boolean = false) {
+ go(control: string | number, silently: boolean = false) {
const destIndex = this.trim(this.parse(control));
this.track.go(destIndex, this.rewind(destIndex), silently);
@@ -45,11 +45,11 @@ export default class ControllerComponent implements BaseComponent {
/**
* Parse the given control and return the destination index for the track.
*
- * @param {string} control - A control target pattern.
+ * @param control - A control target pattern.
*
- * @return {string|number} - A parsed target.
+ * @return A parsed target.
*/
- parse(control) {
+ parse(control: string | number): number {
let index = this.swiperInstance.index;
const matches = String(control).match(/([+\-<>])(\d+)?/);
@@ -74,7 +74,7 @@ export default class ControllerComponent implements BaseComponent {
break;
default:
- index = parseInt(control);
+ index = parseInt(`${control}`);
}
return index;
@@ -83,11 +83,11 @@ export default class ControllerComponent implements BaseComponent {
/**
* Compute index from the given page number.
*
- * @param {number} page - Page number.
+ * @param page - Page number.
*
- * @return {number} - A computed page number.
+ * @return A computed page number.
*/
- toIndex(page) {
+ toIndex(page: number): number {
if (this.hasFocus()) {
return page;
}
@@ -111,9 +111,9 @@ export default class ControllerComponent implements BaseComponent {
*
* @param index - Slide index.
*
- * @return {number} - A computed page number.
+ * @return A computed page number.
*/
- toPage(index) {
+ toPage(index: number): number {
if (this.hasFocus()) {
return index;
}
@@ -133,11 +133,11 @@ export default class ControllerComponent implements BaseComponent {
* Trim the given index according to the current mode.
* Index being returned could be less than 0 or greater than the length in Loop mode.
*
- * @param {number} index - An index being trimmed.
+ * @param index - An index being trimmed.
*
- * @return {number} - A trimmed index.
+ * @return A trimmed index.
*/
- trim(index) {
+ trim(index: number): number {
if (!this.isLoop) {
index = this.options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
}
@@ -148,11 +148,11 @@ export default class ControllerComponent implements BaseComponent {
/**
* Rewind the given index if it's out of range.
*
- * @param {number} index - An index.
+ * @param index - An index.
*
- * @return {number} - A rewound index.
+ * @return A rewound index.
*/
- rewind(index) {
+ rewind(index: number): number {
const edge = this.edgeIndex;
if (this.isLoop) {
@@ -177,18 +177,18 @@ export default class ControllerComponent implements BaseComponent {
/**
* Check if the direction is "rtl" or not.
*
- * @return {boolean} - True if "rtl" or false if not.
+ * @return True if "rtl" or false if not.
*/
- isRtl() {
+ isRtl(): boolean {
return this.options.direction === 'rtl';
}
/**
* Return the page length.
*
- * @return {number} - Max page number.
+ * @return Max page number.
*/
- get pageLength() {
+ get pageLength(): number {
const length = this.swiperInstance.length;
return this.hasFocus() ? length : Math.ceil(length / this.options.perPage);
}
@@ -196,9 +196,9 @@ export default class ControllerComponent implements BaseComponent {
/**
* Return the edge index.
*
- * @return {number} - Edge index.
+ * @return Edge index.
*/
- get edgeIndex() {
+ get edgeIndex(): number {
const length = this.swiperInstance.length;
if (!length) {
@@ -215,9 +215,9 @@ export default class ControllerComponent implements BaseComponent {
/**
* Return the index of the previous slide.
*
- * @return {number} - The index of the previous slide if available. -1 otherwise.
+ * @return The index of the previous slide if available. -1 otherwise.
*/
- get prevIndex() {
+ get prevIndex(): number {
let prev = this.swiperInstance.index - 1;
if (this.isLoop || this.options.rewind) {
@@ -230,9 +230,9 @@ export default class ControllerComponent implements BaseComponent {
/**
* Return the index of the next slide.
*
- * @return {number} - The index of the next slide if available. -1 otherwise.
+ * @return The index of the next slide if available. -1 otherwise.
*/
- get nextIndex() {
+ get nextIndex(): number {
let next = this.swiperInstance.index + 1;
if (this.isLoop || this.options.rewind) {
@@ -260,9 +260,9 @@ export default class ControllerComponent implements BaseComponent {
/**
* Verify if the focus option is available or not.
*
- * @return {boolean} - True if a slider has the focus option.
+ * @return True if a slider has the focus option.
*/
- private hasFocus() {
+ private hasFocus(): boolean {
return this.options.focus !== false;
}
}
diff --git a/src/components/drag/drag.component.ts b/src/components/drag/drag.component.ts
index ed11467..ac590f9 100644
--- a/src/components/drag/drag.component.ts
+++ b/src/components/drag/drag.component.ts
@@ -1,9 +1,8 @@
-import { Event } from './../../core/event';
-import VirtualSwiper, { VirtualSwiperOptions, VirtualSwiperComponents } from './../../virtual-swiper';
-import { BaseComponent } from './../base-component';
-import TrackComponent from '../track/track.component';
-import { BaseLayout } from '../layout/index';
import ControllerComponent from '../controller/controller.component';
+import { BaseLayout } from '../layout/index';
+import TrackComponent from '../track/track.component';
+import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from './../../virtual-swiper';
+import { BaseComponent } from './../base-component';
/**
* Adjust how much the track can be pulled on the first or last page.
@@ -112,11 +111,11 @@ export default class DragComponent implements BaseComponent {
/**
* Resist dragging the track on the first/last page because there is no more.
*
- * @param {number} position - A position being applied to the track.
+ * @param position - A position being applied to the track.
*
- * @return {Object} - Adjusted position.
+ * @return Adjusted position.
*/
- private resist(position) {
+ private resist(position: number): number {
// if (!Splide.is(LOOP)) {
// const sign = Track.sign;
// const start = sign * Track.trim(Track.toPosition(0));
diff --git a/src/components/layout/directions/horizontal-layout.ts b/src/components/layout/directions/horizontal-layout.ts
index 00e2dd4..da4412b 100644
--- a/src/components/layout/directions/horizontal-layout.ts
+++ b/src/components/layout/directions/horizontal-layout.ts
@@ -77,9 +77,9 @@ export class HorizontalLayout extends BaseLayout {
/**
* Return the slide width in px.
*
- * @param {number} index - Slide index.
+ * @param index - Slide index.
*
- * @return {number} - The slide width.
+ * @return The slide width.
*/
slideWidth(index?: number): number {
if (this.options.autoWidth) {
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
index b5cab77..8078520 100644
--- a/src/components/layout/index.ts
+++ b/src/components/layout/index.ts
@@ -1,11 +1,10 @@
-import { Event } from './../../core/event';
import { applyStyle } from '../../utils/dom';
-import VirtualComponent from '../virtual/virtual.component';
-import TrackComponent from '../track/track.component';
-import { unit } from '../../utils/utils';
import { throttle } from '../../utils/time';
-import VirtualSwiper, { VirtualSwiperOptions, VirtualSwiperComponents } from '../../virtual-swiper';
+import { unit } from '../../utils/utils';
+import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from '../../virtual-swiper';
import { BaseComponent } from '../base-component';
+import TrackComponent from '../track/track.component';
+import VirtualComponent from '../virtual/virtual.component';
/**
* Interval time for throttle.
diff --git a/src/components/pagination/pagination.component.ts b/src/components/pagination/pagination.component.ts
index e8be797..746150c 100644
--- a/src/components/pagination/pagination.component.ts
+++ b/src/components/pagination/pagination.component.ts
@@ -1,7 +1,4 @@
import { STATUS_CLASSES } from '../../constants/classes';
-/**
- * The component for handling pagination
- */
import { addClass, append, applyStyle, create, remove, removeClass } from '../../utils/dom';
import { unit } from '../../utils/utils';
import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from '../../virtual-swiper';
@@ -21,12 +18,6 @@ const UPDATE_EVENT = 'updated.page refresh.page';
/**
* The component for handling pagination
- *
- * @param {Splide} Splide - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
*/
export default class TrackComponent implements BaseComponent {
/**
@@ -40,8 +31,6 @@ export default class TrackComponent implements BaseComponent {
private controller: ControllerComponent;
private swiperInstance: VirtualSwiper;
private currentPosition: number;
- private previousFrom: number;
- private previousTo: number;
private components: VirtualSwiperComponents;
constructor(private options: VirtualSwiperOptions) {}
@@ -52,8 +41,6 @@ export default class TrackComponent implements BaseComponent {
this.virtual = components.Virtual as VirtualComponent;
this.controller = components.Controller as ControllerComponent;
this.currentPosition = 0;
- this.previousFrom = 0;
- this.previousTo = 0;
this._data = this.createPagination();
@@ -108,7 +95,7 @@ export default class TrackComponent implements BaseComponent {
/**
* Return object containing pagination data.
*
- * @return {Object} - Pagination data including list and items.
+ * @return Pagination data including list and items.
*/
get data(): any {
return this._data;
@@ -233,7 +220,7 @@ export default class TrackComponent implements BaseComponent {
}
/**
- * Position slides with offset to counteract removed slides
+ * Position slides with offset to counteract removed pagination bullets
*/
private offsetPositionSlides() {
const offsetProp: string = 'left';
diff --git a/src/components/track/directions/horizontal.ts b/src/components/track/directions/horizontal.ts
index 4755159..0ee01e3 100644
--- a/src/components/track/directions/horizontal.ts
+++ b/src/components/track/directions/horizontal.ts
@@ -67,9 +67,9 @@ export class HorizontalDirection {
/**
* Trim redundant spaces on the left or right edge if necessary.
*
- * @param {number} position - Position value to be trimmed.
+ * @param position - Position value to be trimmed.
*
- * @return {number} - Trimmed position.
+ * @return Trimmed position.
*/
trim(position: number): number {
const edge = this.sign * (this.layout.totalWidth(this.virtual.total) - (this.layout.width + this.layout.gap));
@@ -80,7 +80,7 @@ export class HorizontalDirection {
/**
* Return current offset value, considering direction.
*
- * @return {number} - Offset amount.
+ * @return Offset amount.
*/
offset(index: number): number {
const { focus } = this.options;
diff --git a/src/components/track/track.component.ts b/src/components/track/track.component.ts
index 6c9263a..55e842e 100644
--- a/src/components/track/track.component.ts
+++ b/src/components/track/track.component.ts
@@ -4,7 +4,6 @@ import { SlideTransition } from './../../transitions/slide/index';
import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from './../../virtual-swiper';
import { BaseComponent } from './../base-component';
import { HorizontalDirection } from './directions/horizontal';
-import { Event } from './../../core/event';
export default class TrackComponent implements BaseComponent {
// Store the current position.
@@ -62,12 +61,12 @@ export default class TrackComponent implements BaseComponent {
* Go to the given destination index.
* After arriving there, the track is jump to the new index without animation, mainly for loop mode.
*
- * @param {number} destIndex - A destination index.
+ * @param destIndex - A destination index.
* This can be negative or greater than slides length for reaching clones.
- * @param {number} newIndex - An actual new index. They are always same in Slide and Rewind mode.
- * @param {boolean} silently - If true, suppress emitting events.
+ * @param newIndex - An actual new index. They are always same in Slide and Rewind mode.
+ * @param silently - If true, suppress emitting events.
*/
- go(destIndex, newIndex, silently: boolean = false) {
+ go(destIndex: number, newIndex: number, silently: boolean = false) {
const newPosition = this.getTrimmedPosition(destIndex);
const prevIndex = this.swiperInstance.index;
@@ -76,7 +75,7 @@ export default class TrackComponent implements BaseComponent {
}
if (Math.abs(newPosition - this.currPosition) >= 1 || this.isFade) {
- this.transition.start(destIndex, newIndex, prevIndex, this.toCoord(newPosition), () => {
+ this.transition.start(newIndex, prevIndex, this.toCoord(newPosition), () => {
this.end(destIndex, newIndex, prevIndex, silently);
});
} else {
@@ -91,10 +90,10 @@ export default class TrackComponent implements BaseComponent {
/**
* Called whenever slides arrive at a destination.
*
- * @param {number} destIndex - A destination index.
- * @param {number} newIndex - A new index.
- * @param {number} prevIndex - A previous index.
- * @param {boolean} silently - If true, suppress emitting events.
+ * @param destIndex - A destination index.
+ * @param newIndex - A new index.
+ * @param prevIndex - A previous index.
+ * @param silently - If true, suppress emitting events.
*/
end(destIndex: number, newIndex: number, prevIndex: number, silently?: boolean) {
applyStyle(this.list, { transition: '' });
@@ -111,18 +110,18 @@ export default class TrackComponent implements BaseComponent {
/**
* Move the track to the specified index.
*
- * @param {number} index - A destination index where the track jumps.
+ * @param index - A destination index where the track jumps.
*/
- jump(index) {
+ jump(index: number) {
this.translate(this.getTrimmedPosition(index));
}
/**
* Set position.
*
- * @param {number} position - A new position value.
+ * @param position - A new position value.
*/
- translate(position) {
+ translate(position: number) {
this.currPosition = position;
applyStyle(this.list, { transform: `translate${this._direction.axis}(${position}px)` });
@@ -131,11 +130,11 @@ export default class TrackComponent implements BaseComponent {
/**
* Trim redundant spaces on the left or right edge if necessary.
*
- * @param {number} position - Position value to be trimmed.
+ * @param position - Position value to be trimmed.
*
- * @return {number} - Trimmed position.
+ * @return Trimmed position.
*/
- trim(position) {
+ trim(position: number): number {
// if ( ! Splide.options.trimSpace || Splide.is( LOOP ) ) {
if (true) {
return position;
@@ -151,7 +150,7 @@ export default class TrackComponent implements BaseComponent {
*
* @return - A coordinates object.
*/
- toCoord(position) {
+ toCoord(position: number) {
return {
x: this.isVertical ? 0 : position,
y: this.isVertical ? position : 0,
@@ -170,9 +169,9 @@ export default class TrackComponent implements BaseComponent {
/**
* Convert index to the trimmed position.
*
- * @return {number} - Trimmed position.
+ * @return Trimmed position.
*/
- getTrimmedPosition(index) {
+ getTrimmedPosition(index: number): number {
return this.trim(this._direction.toPosition(index));
}
}
diff --git a/src/components/virtual/slide.component.ts b/src/components/virtual/slide.component.ts
index b45e67a..40706c0 100644
--- a/src/components/virtual/slide.component.ts
+++ b/src/components/virtual/slide.component.ts
@@ -1,12 +1,11 @@
-import { TTB } from './../../constants/directions';
-import { STATUS_CLASSES } from './../../constants/classes';
-import { Event } from './../../core/event';
-import { BaseComponent } from './../base-component';
-import VirtualSwiper, { VirtualSwiperOptions, VirtualSwiperComponents } from '../../virtual-swiper';
-import { find, getAttribute, removeClass, setAttribute, addClass, hasClass } from '../../utils/dom';
-import { pad } from '../../utils/utils';
+import { addClass, find, getAttribute, hasClass, removeClass, setAttribute } from '../../utils/dom';
import { values } from '../../utils/object';
+import { pad } from '../../utils/utils';
+import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from '../../virtual-swiper';
import TrackComponent from '../track/track.component';
+import { STATUS_CLASSES } from './../../constants/classes';
+import { TTB } from './../../constants/directions';
+import { BaseComponent } from './../base-component';
/**
* Events for restoring original styles.
@@ -26,7 +25,6 @@ export class SlideComponent implements BaseComponent {
/**
* Hold the original styles.
- * @type {string}
*/
private styles: string;
@@ -91,16 +89,16 @@ export class SlideComponent implements BaseComponent {
/**
* Check whether this slide is active or not.
*
- * @return {boolean} - True if the slide is active or false if not.
+ * @return True if the slide is active or false if not.
*/
- isActive() {
+ isActive(): boolean {
return this.swiperInstance.index === this.index;
}
/**
* Check whether this slide is visible in the viewport or not.
*
- * @return {boolean} - True if the slide is visible or false if not.
+ * @return True if the slide is visible or false if not.
*/
isVisible() {
const active = this.isActive();
@@ -125,10 +123,10 @@ export class SlideComponent implements BaseComponent {
* Calculate how far this slide is from another slide and
* return true if the distance is within the given number.
*
- * @param {number} from - Index of a target slide.
- * @param {number} within - True if the slide is within this number.
+ * @param from - Index of a target slide.
+ * @param within - True if the slide is within this number.
*
- * @return {boolean} - True if the slide is within the number or false otherwise.
+ * @return True if the slide is within the number or false otherwise.
*/
isWithin(from: number, within: number): boolean {
let diff = Math.abs(from - this.index);
@@ -143,8 +141,8 @@ export class SlideComponent implements BaseComponent {
/**
* Update classes for activity or visibility.
*
- * @param {boolean} active - Is active/visible or not.
- * @param {boolean} forVisibility - Toggle classes for activity or visibility.
+ * @param active - Is active/visible or not.
+ * @param forVisibility - Toggle classes for activity or visibility.
*/
private updateClasses(active, forVisibility) {
const type = forVisibility ? 'visible' : 'active';
diff --git a/src/constants/classes.ts b/src/constants/classes.ts
index e27ec7d..8d97a50 100644
--- a/src/constants/classes.ts
+++ b/src/constants/classes.ts
@@ -10,7 +10,7 @@
*
* @type {string}
*/
-const ROOT = 'splide';
+const ROOT = 'vswiper';
/**
* The definition table of all classes for elements.
diff --git a/src/constants/states.ts b/src/constants/states.ts
index 84d633f..60fc521 100644
--- a/src/constants/states.ts
+++ b/src/constants/states.ts
@@ -6,7 +6,7 @@
*/
/**
- * Splide has been just created.
+ * VSwiper has been just created.
*
* @type {number}
*/
@@ -20,22 +20,22 @@ export const CREATED = 1;
export const MOUNTED = 2;
/**
- * Splide is ready for transition.
+ * VSwiper is ready for transition.
*
* @type {number}
*/
export const IDLE = 3;
/**
- * Splide is moving.
+ * VSwiper is moving.
*
* @type {number}
*/
export const MOVING = 4;
/**
- * Splide is moving.
+ * VSwiper is moving.
*
* @type {number}
*/
-export const DESTROYED = 5;
\ No newline at end of file
+export const DESTROYED = 5;
diff --git a/src/core/event.ts b/src/core/event.ts
index 9aa8b3d..6b52a35 100644
--- a/src/core/event.ts
+++ b/src/core/event.ts
@@ -7,13 +7,18 @@ export class Event {
/**
* Subscribe the given event(s).
*
- * @param {string} events - An event name. Use space to separate multiple events.
- * Also, namespace is accepted by dot, such as 'resize.{namespace}'.
- * @param {function} handler - A callback function.
- * @param {Element} element - Optional. Native event will be listened to when this arg is provided.
- * @param {Object} options - Optional. Options for addEventListener.
+ * @param events - An event name. Use space to separate multiple events.
+ * Also, namespace is accepted by dot, such as 'resize.{namespace}'.
+ * @param handler - A callback function.
+ * @param element - Optional. Native event will be listened to when this arg is provided.
+ * @param options - Optional. Options for addEventListener.
*/
- on(events: string, handler, element?: (Window & typeof globalThis) | Element, options: boolean | AddEventListenerOptions = {}) {
+ on(
+ events: string,
+ handler: () => void,
+ element?: (Window & typeof globalThis) | Element,
+ options: boolean | AddEventListenerOptions = {},
+ ) {
events.split(' ').forEach(event => {
if (element) {
element.addEventListener(event, handler, options);
@@ -26,8 +31,8 @@ export class Event {
/**
* Unsubscribe the given event(s).
*
- * @param {string} events - A event name or names split by space.
- * @param {Element} element - Optional. removeEventListener() will be called when this arg is provided.
+ * @param events - A event name or names split by space.
+ * @param element - Optional. removeEventListener() will be called when this arg is provided.
*/
off(events: string, element?: (Window & typeof globalThis) | Element) {
events.split(' ').forEach(event => {
@@ -47,10 +52,10 @@ export class Event {
* Emit an event.
* This method is only for custom events.
*
- * @param {string} event - An event name.
- * @param {*} args - Any number of arguments passed to handlers.
+ * @param event - An event name.
+ * @param args - Any number of arguments passed to handlers.
*/
- emit(event: string, ...args) {
+ emit(event: string, ...args: any[]) {
this.data.forEach(item => {
if (!item.elm && item.event.split('.')[0] === event) {
item.handler(...args);
diff --git a/src/css/styles.css b/src/css/styles.css
index 5148f2a..452dea3 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -37,7 +37,7 @@
transition-property: transform;
}
-.splide__pagination {
+.vswiper__pagination {
position: absolute;
text-align: center;
transition: 0.3s opacity;
@@ -51,7 +51,7 @@
bottom: 10px;
}
-.splide__pagination-track {
+.vswiper__pagination-track {
position: relative;
bottom: unset;
align-items: center;
@@ -63,8 +63,9 @@
transition: all 0.25s;
}
-.splide__pagination__page {
+.vswiper__pagination__page {
width: 8px;
+ cursor: pointer;
height: 8px;
display: inline-block;
border-radius: 100%;
@@ -77,11 +78,11 @@
transition: 0.2s transform;
}
-.splide__pagination__page.active-prev,
-.splide__pagination__page.active-next {
+.vswiper__pagination__page.active-prev,
+.vswiper__pagination__page.active-next {
transform: scale(0.66);
}
-.splide__pagination__page.is-active {
+.vswiper__pagination__page.is-active {
transform: scale(1);
}
diff --git a/src/transitions/slide/index.ts b/src/transitions/slide/index.ts
index 6c7310a..7428a99 100644
--- a/src/transitions/slide/index.ts
+++ b/src/transitions/slide/index.ts
@@ -1,9 +1,8 @@
-import { Event } from './../../core/event';
-import { BaseComponent } from './../../components/base-component';
+import ControllerComponent from '../../components/controller/controller.component';
import TrackComponent from '../../components/track/track.component';
-import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from '../../virtual-swiper';
import { applyStyle } from '../../utils/dom';
-import ControllerComponent from '../../components/controller/controller.component';
+import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from '../../virtual-swiper';
+import { BaseComponent } from './../../components/base-component';
export class SlideTransition implements BaseComponent {
/**
@@ -11,14 +10,14 @@ export class SlideTransition implements BaseComponent {
*
* @type {Element}
*/
- private list;
+ private list: HTMLElement;
/**
* Hold the onEnd callback function.
*
* @type {function}
*/
- private endCallback;
+ private endCallback: Function;
private track: TrackComponent;
private swiperInstance: VirtualSwiper;
@@ -47,13 +46,12 @@ export class SlideTransition implements BaseComponent {
/**
* Start transition.
*
- * @param {number} destIndex - Destination slide index that might be clone's.
- * @param {number} newIndex - New index.
- * @param {number} prevIndex - Previous index.
- * @param {Object} coord - Destination coordinates.
- * @param {function} done - Callback function must be invoked when transition is completed.
+ * @param newIndex - New index.
+ * @param prevIndex - Previous index.
+ * @param coord - Destination coordinates.
+ * @param done - Callback function must be invoked when transition is completed.
*/
- start(destIndex, newIndex, prevIndex, coord, done) {
+ start(newIndex: number, prevIndex: number, coord: { x: number; y: number }, done: Function) {
const options = this.options;
const edgeIndex = this.controller.edgeIndex;
let speed = options.speed;
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 9651fab..709250d 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -12,10 +12,10 @@ import { toArray } from './utils';
* Find the first element matching the given selector.
* Be aware that all selectors after a space are ignored.
*
- * @param {Element|Node} elm - An ancestor element.
- * @param {string} selector - DOMString.
+ * @param elm - An ancestor element.
+ * @param selector - DOMString.
*
- * @return {Element|null} - A found element or null.
+ * @return A found element or null.
*/
export function find(elm: HTMLElement | ParentNode, selector: string): HTMLElement {
return elm ? elm.querySelector(selector.split(' ')[0]) : null;
@@ -24,10 +24,10 @@ export function find(elm: HTMLElement | ParentNode, selector: string): HTMLEleme
/**
* Find a first child having the given tag or class name.
*
- * @param {Element} parent - A parent element.
- * @param {string} tagOrClassName - A tag or class name.
+ * @param parent - A parent element.
+ * @param tagOrClassName - A tag or class name.
*
- * @return {Element|null} - A found element on success. Null on failure.
+ * @return A found element on success. Null on failure.
*/
export function child(parent: HTMLElement, tagOrClassName: string): HTMLElement | null {
if (parent) {
@@ -44,10 +44,10 @@ export function child(parent: HTMLElement, tagOrClassName: string): HTMLElement
/**
* Create an element with some optional attributes.
*
- * @param {string} tag - A tag name.
- * @param {Object} attrs - An object any attribute pairs of name and value.
+ * @param tag - A tag name.
+ * @param attrs - An object any attribute pairs of name and value.
*
- * @return {Element} - A created element.
+ * @return A created element.
*/
export function create(tag: string, attrs: object): HTMLElement {
const elm = document.createElement(tag);
@@ -59,9 +59,9 @@ export function create(tag: string, attrs: object): HTMLElement {
/**
* Convert HTML string to DOM node.
*
- * @param {string} html - HTML string.
+ * @param html - HTML string.
*
- * @return {Node} - A created node.
+ * @return A created node.
*/
export function domify(html: string): HTMLElement {
const div = create('div', {});
@@ -73,7 +73,7 @@ export function domify(html: string): HTMLElement {
/**
* Remove a given element from a DOM tree.
*
- * @param {Element|Element[]} elms - Element(s) to be removed.
+ * @param elms - Element(s) to be removed.
*/
export function remove(elms: HTMLElement | HTMLElement[]) {
toArray(elms).forEach(elm => {
@@ -86,8 +86,8 @@ export function remove(elms: HTMLElement | HTMLElement[]) {
/**
* Append a child to a given element.
*
- * @param {Element} parent - A parent element.
- * @param {Element} child - An element to be appended.
+ * @param parent - A parent element.
+ * @param child - An element to be appended.
*/
export function append(parent: HTMLElement, child: HTMLElement) {
if (parent) {
@@ -98,8 +98,8 @@ export function append(parent: HTMLElement, child: HTMLElement) {
/**
* Insert an element before the reference element.
*
- * @param {Element} elemt- An element to be inserted.
- * @param {Element|Node} ref - A reference element.
+ * @param elemt- An element to be inserted.
+ * @param ref - A reference element.
*/
export function before(element: HTMLElement, ref: HTMLElement) {
if (element && ref && ref.parentElement) {
@@ -110,8 +110,8 @@ export function before(element: HTMLElement, ref: HTMLElement) {
/**
* Apply styles to the given element.
*
- * @param {Element} elm - An element where styles are applied.
- * @param {Object} styles - Object containing styles.
+ * @param elm - An element where styles are applied.
+ * @param styles - Object containing styles.
*/
export function applyStyle(elm: HTMLElement, styles: any) {
if (elm) {
@@ -127,9 +127,9 @@ export function applyStyle(elm: HTMLElement, styles: any) {
* Add or remove classes to/from the element.
* This function is for internal usage.
*
- * @param {Element} elm - An element where classes are added.
- * @param {string|string[]} classes - Class names being added.
- * @param {boolean} remove - Whether to remove or add classes.
+ * @param elm - An element where classes are added.
+ * @param classes - Class names being added.
+ * @param remove - Whether to remove or add classes.
*/
function addOrRemoveClasses(elm: HTMLElement, classes: string | string[], remove: boolean) {
if (elm) {
@@ -144,8 +144,8 @@ function addOrRemoveClasses(elm: HTMLElement, classes: string | string[], remove
/**
* Add classes to the element.
*
- * @param {Element} elm - An element where classes are added.
- * @param {string|string[]} classes - Class names being added.
+ * @param elm - An element where classes are added.
+ * @param classes - Class names being added.
*/
export function addClass(elm: HTMLElement, classes: string | string[]) {
addOrRemoveClasses(elm, classes, false);
@@ -154,8 +154,8 @@ export function addClass(elm: HTMLElement, classes: string | string[]) {
/**
* Remove a class from the element.
*
- * @param {Element} elm - An element where classes are removed.
- * @param {string|string[]} classes - A class name being removed.
+ * @param elm - An element where classes are removed.
+ * @param classes - A class name being removed.
*/
export function removeClass(elm: HTMLElement, classes: string | string[]) {
addOrRemoveClasses(elm, classes, true);
@@ -164,10 +164,10 @@ export function removeClass(elm: HTMLElement, classes: string | string[]) {
/**
* Verify if the provided element has the class or not.
*
- * @param {Element} elm - An element.
- * @param {string} className - A class name.
+ * @param elm - An element.
+ * @param className - A class name.
*
- * @return {boolean} - True if the element has the class or false if not.
+ * @return True if the element has the class or false if not.
*/
export function hasClass(elm: HTMLElement, className: string): boolean {
return !!elm && elm.classList.contains(className);
@@ -176,9 +176,9 @@ export function hasClass(elm: HTMLElement, className: string): boolean {
/**
* Set attribute to the given element.
*
- * @param {Element} elm - An element where an attribute is assigned.
- * @param {string} name - Attribute name.
- * @param {string|number|boolean} value - Attribute value.
+ * @param elm - An element where an attribute is assigned.
+ * @param name - Attribute name.
+ * @param value - Attribute value.
*/
export function setAttribute(elm: HTMLElement, name: string, value: string | number | boolean) {
if (elm) {
@@ -189,10 +189,10 @@ export function setAttribute(elm: HTMLElement, name: string, value: string | num
/**
* Get attribute from the given element.
*
- * @param {Element} elm - An element where an attribute is assigned.
- * @param {string} name - Attribute name.
+ * @param elm - An element where an attribute is assigned.
+ * @param name - Attribute name.
*
- * @return {string} - The value of the given attribute if available. An empty string if not.
+ * @return The value of the given attribute if available. An empty string if not.
*/
export function getAttribute(elm: HTMLElement, name: string): string {
return elm ? elm.getAttribute(name) : '';
@@ -201,8 +201,8 @@ export function getAttribute(elm: HTMLElement, name: string): string {
/**
* Remove attribute from the given element.
*
- * @param {Element|Element[]} elms - An element where an attribute is removed.
- * @param {string|string[]} names - Attribute name.
+ * @param elms - An element where an attribute is removed.
+ * @param names - Attribute name.
*/
export function removeAttribute(elms: HTMLElement | HTMLElement[], names: string | string[]) {
toArray(names).forEach(name => {
@@ -213,8 +213,8 @@ export function removeAttribute(elms: HTMLElement | HTMLElement[], names: string
/**
* Trigger the given callback after all images contained by the element are loaded.
*
- * @param {Element} elm - Element that may contain images.
- * @param {Function} callback - Callback function fired right after all images are loaded.
+ * @param elm - Element that may contain images.
+ * @param callback - Callback function fired right after all images are loaded.
*/
export function loaded(elm: HTMLElement, callback: Function) {
const images = elm.querySelectorAll('img');
diff --git a/src/utils/error.ts b/src/utils/error.ts
index 5c318f1..0e5e9fe 100644
--- a/src/utils/error.ts
+++ b/src/utils/error.ts
@@ -10,14 +10,14 @@
*
* @type {string}
*/
-const MESSAGE_PREFIX = '[SPLIDE]';
+const MESSAGE_PREFIX: string = '[VSWIPER]';
/**
* Display an error message on the browser console.
*
- * @param {string} message - An error message.
+ * @param message - An error message.
*/
-export function error(message) {
+export function error(message: string) {
console.error(`${MESSAGE_PREFIX} ${message}`);
}
@@ -26,10 +26,10 @@ export function error(message) {
*
* @throws {Error}
*
- * @param {*} subject - A subject to be confirmed.
- * @param {string} message - An error message.
+ * @param subject - A subject to be confirmed.
+ * @param message - An error message.
*/
-export function exist(subject, message) {
+export function exist(subject: any, message: string) {
if (!subject) {
throw new Error(message);
}
diff --git a/src/utils/object.ts b/src/utils/object.ts
index 4d17130..ff683b2 100644
--- a/src/utils/object.ts
+++ b/src/utils/object.ts
@@ -9,10 +9,10 @@
* Iterate an object like Array.forEach.
* IE doesn't support forEach of HTMLCollection.
*
- * @param {Object} obj - An object.
- * @param {function} callback - A function handling each value. Arguments are value, property and index.
+ * @param obj - An object.
+ * @param callback - A function handling each value. Arguments are value, property and index.
*/
-export function each(obj, callback) {
+export function each(obj: object, callback: Function) {
Object.keys(obj).some((key, index) => {
return callback(obj[key], key, index);
});
@@ -22,34 +22,34 @@ export function each(obj, callback) {
* Return values of the given object as an array.
* IE doesn't support Object.values.
*
- * @param {Object} obj - An object.
+ * @param obj - An object.
*
- * @return {Array} - An array containing all values of the given object.
+ * @return An array containing all values of the given object.
*/
-export function values(obj) {
+export function values(obj: object): Array {
return Object.keys(obj).map(key => obj[key]);
}
/**
* Check if the given subject is object or not.
*
- * @param {*} subject - A subject to be verified.
+ * @param subject - A subject to be verified.
*
- * @return {boolean} - True if object, false otherwise.
+ * @return True if object, false otherwise.
*/
-export function isObject(subject) {
+export function isObject(subject: any): boolean {
return typeof subject === 'object';
}
/**
* Merge two objects deeply.
*
- * @param {Object} to - An object where "from" is merged.
- * @param {Object} from - An object merged to "to".
+ * @param to - An object where "from" is merged.
+ * @param from - An object merged to "to".
*
- * @return {Object} - A merged object.
+ * @return A merged object.
*/
-export function merge({ ...to }, from) {
+export function merge({ ...to }: object, from: object): object {
each(from, (value, key) => {
if (isObject(value)) {
if (!isObject(to[key])) {
@@ -68,12 +68,12 @@ export function merge({ ...to }, from) {
/**
* Assign all properties "from" to "to" object.
*
- * @param {Object} to - An object where properties are assigned.
- * @param {Object} from - An object whose properties are assigned to "to".
+ * @param to - An object where properties are assigned.
+ * @param from - An object whose properties are assigned to "to".
*
- * @return {Object} - An assigned object.
+ * @return An assigned object.
*/
-export function assign(to, from) {
+export function assign(to: any, from: any): object {
to._s = from;
Object.keys(from).forEach(key => {
diff --git a/src/utils/time.ts b/src/utils/time.ts
index 085a592..aa8b88e 100644
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -8,12 +8,12 @@
/**
* Simple throttle function that controls how often the given function is executed.
*
- * @param {function} func - A function to be throttled.
- * @param {number} wait - Time in millisecond for interval of execution.
+ * @param func - A function to be throttled.
+ * @param wait - Time in millisecond for interval of execution.
*
- * @return {Function} - A debounced function.
+ * @return A debounced function.
*/
-export function throttle(func, wait) {
+export function throttle(func: Function, wait: number): Function {
let timeout;
// Declare function by the "function" keyword to prevent "this" from being inherited.
@@ -30,13 +30,13 @@ export function throttle(func, wait) {
/**
* Custom setInterval function that provides progress rate as callback.
*
- * @param {function} callback - A callback function fired every time the interval time passes.
- * @param {number} interval - Interval duration in milliseconds.
- * @param {function} progress - A callback function fired whenever the progress goes.
+ * @param callback - A callback function fired every time the interval time passes.
+ * @param interval - Interval duration in milliseconds.
+ * @param progress - A callback function fired whenever the progress goes.
*
- * @return {Object} - An object containing play() and pause() functions.
+ * @return An object containing play() and pause() functions.
*/
-export function createInterval(callback, interval, progress) {
+export function createInterval(callback: Function, interval: number, progress: Function): object {
const { requestAnimationFrame } = window;
let start,
elapse,
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index be3d6a1..b86c203 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -10,9 +10,9 @@ import { create, append, remove, applyStyle } from './dom';
/**
* Convert the given value to array.
*
- * @param {*} value - Any value.
+ * @param value - Any value.
*
- * @return {*[]} - Array containing the given value.
+ * @return Array containing the given value.
*/
export function toArray(value: any): any[] {
return Array.isArray(value) ? value : [value];
@@ -48,9 +48,9 @@ export function sprintf(format: string, replacements: string | Array): stri
/**
* Append px unit to the given subject if necessary.
*
- * @param {number|string} value - A value that may not include an unit.
+ * @param value - A value that may not include an unit.
*
- * @return {string} - If the value is string, return itself.
+ * @return If the value is string, return itself.
* If number, do value + "px". An empty string, otherwise.
*/
export function unit(value: number | string): string {
@@ -66,9 +66,9 @@ export function unit(value: number | string): string {
/**
* Pad start with 0.
*
- * @param {number} number - A number to be filled with 0.
+ * @param number - A number to be filled with 0.
*
- * @return {string|number} - Padded number.
+ * @return Padded number.
*/
export function pad(number: number): string | number {
return number < 10 ? '0' + number : number;
@@ -77,10 +77,10 @@ export function pad(number: number): string | number {
/**
* Convert the given value to pixel.
*
- * @param {Element} root - Root element where a dummy div is appended.
- * @param {string|number} value - CSS value to be converted, such as 10rem.
+ * @param root - Root element where a dummy div is appended.
+ * @param value - CSS value to be converted, such as 10rem.
*
- * @return {number} - Pixel.
+ * @return Pixel.
*/
export function toPixel(root: HTMLElement, value: string | number): number {
let pixelValue: number;
diff --git a/src/virtual-swiper.ts b/src/virtual-swiper.ts
index ee155a0..23b1349 100644
--- a/src/virtual-swiper.ts
+++ b/src/virtual-swiper.ts
@@ -191,7 +191,6 @@ export default class VirtualSwiper {
/**
* Return the class list.
- * This is an alias of Splide.options.classList.
*
* @return An object containing all class list.
*/