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] + + +
+

+ + Logo + + +

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. */