🚧: tiny swiper navigation module

joe223 · Dec 15, 2020 · 6a4ccdd · 6a4ccdd
1 parent 498edeb
commit 6a4ccdd
Show file tree

Hide file tree

Showing 2 changed files with 215 additions and 0 deletions.
diff --git a/packages/tiny-swiper/demo/navigation.html b/packages/tiny-swiper/demo/navigation.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Demo</title>
+	<style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        html,
+        body,
+        .swiper-wrapper {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .a {
+            background: yellowgreen;
+        }
+
+        .b {
+            background: lightblue;
+        }
+
+        .c {
+            height: 100%;
+        }
+
+        .a,
+        .b {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: aliceblue;
+            font-size: 4rem;
+        }
+
+        .swiper-slide {
+            flex-shrink: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper-container {
+            overflow: hidden;
+            height: 100%;
+            margin-bottom: 100%;
+            /* touch-action: none; */
+        }
+
+        .swiper-wrapper {
+            flex-direction: column
+        }
+
+        .btn {
+            position: absolute;
+            top: 50%;
+        }
+
+        .nextEl {
+            right: 20px;
+        }
+
+        .prevEl {
+            left: 20px;
+        }
+	</style>
+</head>
+<body>
+<script src="/lib/index.js"></script>
+<script src="/lib/modules/navigation.js"></script>
+
+<!-- Slider main container -->
+<div class="swiper-container" id="swiper1">
+	<!-- Additional required wrapper -->
+	<div class="swiper-wrapper">
+		<!-- Slides -->
+		<div class="a swiper-slide">1</div>
+		<div class="b swiper-slide">2</div>
+		<div class="a swiper-slide">3</div>
+		<div class="b swiper-slide">4</div>
+	</div>
+	<!-- If we need pagination -->
+	<div class="swiper-pagination"></div>
+	<button class="nextEl btn swiper-button-disabled">++</button>
+	<button class="prevEl btn">--</button>
+</div>
+
+<script>
+    Swiper.use([ SwiperPluginNavigation ])
+
+    var mySwiper = new Swiper('#swiper1', {
+        navigation: {
+            $nextEl: '.nextEl',
+            $prevEl: '.prevEl'
+        }
+    });
+</script>
+</body>
+
diff --git a/packages/tiny-swiper/src/modules/navigation.ts b/packages/tiny-swiper/src/modules/navigation.ts
@@ -0,0 +1,110 @@
+import {
+    attachListener,
+    detachListener
+} from '../core/render/dom'
+import { SwiperInstance } from '../core/index'
+import { Options } from '../core/options'
+
+export type SwiperPluginNavigationOptions = Options & {
+    navigation: {
+        $nextEl: HTMLElement | string
+        $prevEl: HTMLElement | string
+        hideOnClick: boolean
+        disabledClass: string
+        hiddenClass: string
+        lockClass: string
+    }
+}
+
+export type SwiperPluginNavigationInstance = {
+    $nextEl: HTMLElement
+    $prevEl: HTMLElement
+}
+export default function SwiperPluginNavigation(
+    instance: SwiperInstance & {
+        navigation: SwiperPluginNavigationInstance
+    },
+    options: SwiperPluginNavigationOptions
+) {
+    const navigation = {
+        $nextEl: null,
+        $prevEl: null
+    } as unknown as SwiperPluginNavigationInstance
+
+    const nextClickHandler = (e: PointerEvent) => {
+        const el = e.target as HTMLElement;
+        if (checkIsDisable(el)) {
+            return
+        }
+        const {
+            index
+        } = instance.state
+        const {
+            $list
+        } = instance.env.element
+
+        if ( index < $list.length - 1 ) {
+            instance.slideTo(index + 1);
+        }
+    };
+
+    const prevClickHandler = (e: PointerEvent) => {
+        const el = e.target as HTMLElement;
+        if (checkIsDisable(el)) {
+            return
+        }
+        const {
+            index
+        } = instance.state
+        const {
+            $list
+        } = instance.env.element
+
+        if ( index > 0 ) {
+            instance.slideTo(index - 1);
+        }
+
+    };
+
+    const checkIsDisable = (e: HTMLElement) => {
+        if (e.className.split(' ').includes(options.navigation.disabledClass)) {
+            return true
+        }
+        return false
+    }
+
+    instance.on('before-init', () => {
+        if ( options.navigation ) {
+            options.navigation = Object.assign({
+                hideOnClick: false,
+                disabledClass: 'swiper-button-disabled',
+                hiddenClass: 'swiper-button-hidden',
+                lockClass: 'swiper-button-lock'
+            }, options.navigation)
+        }
+    })
+
+    instance.on('after-init', () => {
+        if ( !options.navigation ) return
+
+        navigation.$nextEl = (typeof options.navigation.$nextEl === 'string')
+            ? document.body.querySelector(options.navigation.$nextEl) as HTMLElement
+            : options.navigation.$nextEl
+        navigation.$prevEl = (typeof options.navigation.$prevEl === 'string')
+            ? document.body.querySelector(options.navigation.$prevEl) as HTMLElement
+            : options.navigation.$prevEl
+
+        attachListener(navigation.$nextEl, 'click', <EventListener> nextClickHandler)
+        attachListener(navigation.$prevEl, 'click', <EventListener> prevClickHandler)
+    })
+
+    instance.on('after-destroy', () => {
+        if ( !options.navigation ) return
+
+        delete navigation.$nextEl;
+        delete navigation.$prevEl;
+
+        detachListener(navigation.$nextEl, 'click', <EventListener> nextClickHandler)
+        detachListener(navigation.$prevEl, 'click', <EventListener> nextClickHandler)
+    })
+}