1 |
|
2 | import { getWindow, getDocument } from 'ssr-window';
|
3 | import $ from '../../shared/dom.js';
|
4 | export default function Keyboard({
|
5 | swiper,
|
6 | extendParams,
|
7 | on,
|
8 | emit
|
9 | }) {
|
10 | const document = getDocument();
|
11 | const window = getWindow();
|
12 | swiper.keyboard = {
|
13 | enabled: false
|
14 | };
|
15 | extendParams({
|
16 | keyboard: {
|
17 | enabled: false,
|
18 | onlyInViewport: true,
|
19 | pageUpDown: true
|
20 | }
|
21 | });
|
22 |
|
23 | function handle(event) {
|
24 | if (!swiper.enabled) return;
|
25 | const {
|
26 | rtlTranslate: rtl
|
27 | } = swiper;
|
28 | let e = event;
|
29 | if (e.originalEvent) e = e.originalEvent;
|
30 |
|
31 | const kc = e.keyCode || e.charCode;
|
32 | const pageUpDown = swiper.params.keyboard.pageUpDown;
|
33 | const isPageUp = pageUpDown && kc === 33;
|
34 | const isPageDown = pageUpDown && kc === 34;
|
35 | const isArrowLeft = kc === 37;
|
36 | const isArrowRight = kc === 39;
|
37 | const isArrowUp = kc === 38;
|
38 | const isArrowDown = kc === 40;
|
39 |
|
40 | if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
|
41 | return false;
|
42 | }
|
43 |
|
44 | if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
|
45 | return false;
|
46 | }
|
47 |
|
48 | if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
|
49 | return undefined;
|
50 | }
|
51 |
|
52 | if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
|
53 | return undefined;
|
54 | }
|
55 |
|
56 | if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
|
57 | let inView = false;
|
58 |
|
59 | if (swiper.$el.parents(`.${swiper.params.slideClass}`).length > 0 && swiper.$el.parents(`.${swiper.params.slideActiveClass}`).length === 0) {
|
60 | return undefined;
|
61 | }
|
62 |
|
63 | const $el = swiper.$el;
|
64 | const swiperWidth = $el[0].clientWidth;
|
65 | const swiperHeight = $el[0].clientHeight;
|
66 | const windowWidth = window.innerWidth;
|
67 | const windowHeight = window.innerHeight;
|
68 | const swiperOffset = swiper.$el.offset();
|
69 | if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
|
70 | const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
|
71 |
|
72 | for (let i = 0; i < swiperCoord.length; i += 1) {
|
73 | const point = swiperCoord[i];
|
74 |
|
75 | if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
|
76 | if (point[0] === 0 && point[1] === 0) continue;
|
77 |
|
78 | inView = true;
|
79 | }
|
80 | }
|
81 |
|
82 | if (!inView) return undefined;
|
83 | }
|
84 |
|
85 | if (swiper.isHorizontal()) {
|
86 | if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
|
87 | if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
88 | }
|
89 |
|
90 | if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
|
91 | if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
|
92 | } else {
|
93 | if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
|
94 | if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
95 | }
|
96 |
|
97 | if (isPageDown || isArrowDown) swiper.slideNext();
|
98 | if (isPageUp || isArrowUp) swiper.slidePrev();
|
99 | }
|
100 |
|
101 | emit('keyPress', kc);
|
102 | return undefined;
|
103 | }
|
104 |
|
105 | function enable() {
|
106 | if (swiper.keyboard.enabled) return;
|
107 | $(document).on('keydown', handle);
|
108 | swiper.keyboard.enabled = true;
|
109 | }
|
110 |
|
111 | function disable() {
|
112 | if (!swiper.keyboard.enabled) return;
|
113 | $(document).off('keydown', handle);
|
114 | swiper.keyboard.enabled = false;
|
115 | }
|
116 |
|
117 | on('init', () => {
|
118 | if (swiper.params.keyboard.enabled) {
|
119 | enable();
|
120 | }
|
121 | });
|
122 | on('destroy', () => {
|
123 | if (swiper.keyboard.enabled) {
|
124 | disable();
|
125 | }
|
126 | });
|
127 | Object.assign(swiper.keyboard, {
|
128 | enable,
|
129 | disable
|
130 | });
|
131 | } |
\ | No newline at end of file |