initial javascript to typescript port

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/env", "@babel/typescript"],
+  "plugins": ["@babel/proposal-class-properties"]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

.nvmrc

@@ -0,0 +1 @@
+12.16.1

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 140,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscod",
+    "steoates.autoimport",
+    "mike-co.import-sorter",
+    "mikestead.dotenv",
+    "kisstkondoros.vscode-codemetrics"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "auto-close-tag.activationOnLanguage": ["html", "xml"],
+  "editor.tabSize": 2,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.detectIndentation": false,
+  "autoimport.spaceBetweenBraces": true,
+  "editor.formatOnSave": true,
+  "prettier.singleQuote": true,
+  "codemetrics.basics.ComplexityLevelNormal": 5,
+  "codemetrics.nodeconfiguration.ReturnStatement": 0
+}

README.md

@@ -0,0 +1,7 @@
+# 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,...).
+
+To achieve this goal, this swiper carousel uses virtual slides to only render those slides which are really necessary.
+
+Huge credits to https://github.com/Splidejs/splide by NaotoshiFujita. Great slider and very well implemented!

dist/components/base-component.d.ts

@@ -0,0 +1,7 @@
+import VirtualSwiper, { VirtualSwiperOptions, VirtualSwiperComponents } from './../virtual-swiper';
+export interface BaseComponentConstructor {
+    new (options: VirtualSwiperOptions): BaseComponent;
+}
+export interface BaseComponent {
+    mount(instance: VirtualSwiper, components: VirtualSwiperComponents): void;
+}

dist/components/controller/controller.component.d.ts

@@ -0,0 +1,109 @@
+import VirtualSwiper, { VirtualSwiperComponents, VirtualSwiperOptions } from './../../virtual-swiper';
+import { BaseComponent } from './../base-component';
+export default class ControllerComponent implements BaseComponent {
+    private options;
+    /**
+     * True if the slide is LOOP mode.
+     *
+     * @type {boolean}
+     */
+    private isLoop;
+    private swiperInstance;
+    private track;
+    constructor(options: VirtualSwiperOptions);
+    mount(instance: VirtualSwiper, components: VirtualSwiperComponents): void;
+    /**
+     * Make track run by the given control.
+     * - "+{i}" : Increment the slide index by i.
+     * - "-{i}" : Decrement the slide index by i.
+     * - "{i}"  : Go to the slide whose index is i.
+     * - ">"    : Go to next page.
+     * - "<"    : 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.
+     */
+    go(control: any, silently: any): void;
+    /**
+     * Parse the given control and return the destination index for the track.
+     *
+     * @param {string} control - A control target pattern.
+     *
+     * @return {string|number} - A parsed target.
+     */
+    parse(control: any): number;
+    /**
+     * Compute index from the given page number.
+     *
+     * @param {number} page - Page number.
+     *
+     * @return {number} - A computed page number.
+     */
+    toIndex(page: any): any;
+    /**
+     * Compute page number from the given slide index.
+     *
+     * @param index - Slide index.
+     *
+     * @return {number} - A computed page number.
+     */
+    toPage(index: any): any;
+    /**
+     * 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.
+     *
+     * @return {number} - A trimmed index.
+     */
+    trim(index: any): any;
+    /**
+     * Rewind the given index if it's out of range.
+     *
+     * @param {number} index - An index.
+     *
+     * @return {number} - A rewound index.
+     */
+    rewind(index: any): any;
+    /**
+     * Check if the direction is "rtl" or not.
+     *
+     * @return {boolean} - True if "rtl" or false if not.
+     */
+    isRtl(): boolean;
+    /**
+     * Return the page length.
+     *
+     * @return {number} - Max page number.
+     */
+    get pageLength(): number;
+    /**
+     * Return the edge index.
+     *
+     * @return {number} - Edge index.
+     */
+    get edgeIndex(): number;
+    /**
+     * Return the index of the previous slide.
+     *
+     * @return {number} - The index of the previous slide if available. -1 otherwise.
+     */
+    get prevIndex(): number;
+    /**
+     * Return the index of the next slide.
+     *
+     * @return {number} - The index of the next slide if available. -1 otherwise.
+     */
+    get nextIndex(): number;
+    /**
+     * Listen some events.
+     */
+    private bind;
+    /**
+     * Verify if the focus option is available or not.
+     *
+     * @return {boolean} - True if a slider has the focus option.
+     */
+    private hasFocus;
+}

dist/components/controller/controller.component.js

@@ -0,0 +1,220 @@
+import { between } from '../../utils/utils';
+import { Event } from './../../core/event';
+export default class ControllerComponent {
+    constructor(options) {
+        this.options = options;
+        /**
+         * True if the slide is LOOP mode.
+         *
+         * @type {boolean}
+         */
+        this.isLoop = true;
+    }
+    mount(instance, components) {
+        this.swiperInstance = instance;
+        this.track = components.Track;
+    }
+    /**
+     * Make track run by the given control.
+     * - "+{i}" : Increment the slide index by i.
+     * - "-{i}" : Decrement the slide index by i.
+     * - "{i}"  : Go to the slide whose index is i.
+     * - ">"    : Go to next page.
+     * - "<"    : 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.
+     */
+    go(control, silently) {
+        const destIndex = this.trim(this.parse(control));
+        this.track.go(destIndex, this.rewind(destIndex), silently);
+    }
+    /**
+     * Parse the given control and return the destination index for the track.
+     *
+     * @param {string} control - A control target pattern.
+     *
+     * @return {string|number} - A parsed target.
+     */
+    parse(control) {
+        let index = this.swiperInstance.index;
+        const matches = String(control).match(/([+\-<>])(\d+)?/);
+        const indicator = matches ? matches[1] : '';
+        const number = matches ? parseInt(matches[2]) : 0;
+        switch (indicator) {
+            case '+':
+                index += number || 1;
+                break;
+            case '-':
+                index -= number || 1;
+                break;
+            case '>':
+                index = this.toIndex(number > -1 ? number : this.toPage(index) + 1);
+                break;
+            case '<':
+                index = this.toIndex(number > -1 ? number : this.toPage(index) - 1);
+                break;
+            default:
+                index = parseInt(control);
+        }
+        return index;
+    }
+    /**
+     * Compute index from the given page number.
+     *
+     * @param {number} page - Page number.
+     *
+     * @return {number} - A computed page number.
+     */
+    toIndex(page) {
+        if (this.hasFocus()) {
+            return page;
+        }
+        const length = this.swiperInstance.length;
+        const perPage = this.options.perPage;
+        let index = page * perPage;
+        index = index - (this.pageLength * perPage - length) * Math.floor(index / length);
+        // Adjustment for the last page.
+        if (length - perPage <= index && index < length) {
+            index = length - perPage;
+        }
+        return index;
+    }
+    /**
+     * Compute page number from the given slide index.
+     *
+     * @param index - Slide index.
+     *
+     * @return {number} - A computed page number.
+     */
+    toPage(index) {
+        if (this.hasFocus()) {
+            return index;
+        }
+        const length = this.swiperInstance.length;
+        const perPage = this.options.perPage;
+        // Make the last "perPage" number of slides belong to the last page.
+        if (length - perPage <= index && index < length) {
+            return Math.floor((length - 1) / perPage);
+        }
+        return Math.floor(index / perPage);
+    }
+    /**
+     * 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.
+     *
+     * @return {number} - A trimmed index.
+     */
+    trim(index) {
+        if (!this.isLoop) {
+            index = this.options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
+        }
+        return index;
+    }
+    /**
+     * Rewind the given index if it's out of range.
+     *
+     * @param {number} index - An index.
+     *
+     * @return {number} - A rewound index.
+     */
+    rewind(index) {
+        const edge = this.edgeIndex;
+        if (this.isLoop) {
+            while (index > edge) {
+                index -= edge + 1;
+            }
+            while (index < 0) {
+                index += edge + 1;
+            }
+        }
+        else {
+            if (index > edge) {
+                index = 0;
+            }
+            else if (index < 0) {
+                index = edge;
+            }
+        }
+        return index;
+    }
+    /**
+     * Check if the direction is "rtl" or not.
+     *
+     * @return {boolean} - True if "rtl" or false if not.
+     */
+    isRtl() {
+        return this.options.direction === 'rtl';
+    }
+    /**
+     * Return the page length.
+     *
+     * @return {number} - Max page number.
+     */
+    get pageLength() {
+        const length = this.swiperInstance.length;
+        return this.hasFocus() ? length : Math.ceil(length / this.options.perPage);
+    }
+    /**
+     * Return the edge index.
+     *
+     * @return {number} - Edge index.
+     */
+    get edgeIndex() {
+        const length = this.swiperInstance.length;
+        if (!length) {
+            return 0;
+        }
+        if (this.hasFocus() || this.options.isNavigation || this.isLoop) {
+            return length - 1;
+        }
+        return length - this.options.perPage;
+    }
+    /**
+     * Return the index of the previous slide.
+     *
+     * @return {number} - The index of the previous slide if available. -1 otherwise.
+     */
+    get prevIndex() {
+        let prev = this.swiperInstance.index - 1;
+        if (this.isLoop || this.options.rewind) {
+            prev = this.rewind(prev);
+        }
+        return prev > -1 ? prev : -1;
+    }
+    /**
+     * Return the index of the next slide.
+     *
+     * @return {number} - The index of the next slide if available. -1 otherwise.
+     */
+    get nextIndex() {
+        let next = this.swiperInstance.index + 1;
+        if (this.isLoop || this.options.rewind) {
+            next = this.rewind(next);
+        }
+        return (this.swiperInstance.index < next && next <= this.edgeIndex) || next === 0 ? next : -1;
+    }
+    /**
+     * Listen some events.
+     */
+    bind() {
+        Event.on('move', newIndex => {
+            this.swiperInstance.index = newIndex;
+        });
+        Event.on('updated refresh', newOptions => {
+            this.options = newOptions || this.options;
+            this.swiperInstance.index = between(this.swiperInstance.index, 0, this.edgeIndex);
+        });
+    }
+    /**
+     * Verify if the focus option is available or not.
+     *
+     * @return {boolean} - True if a slider has the focus option.
+     */
+    hasFocus() {
+        return this.options.focus !== false;
+    }
+}