import { window, document } from 'ssr-window'; import $ from '../../utils/dom'; import Utils from '../../utils/utils'; const Keyboard = { handle(event) { const swiper = this; const { rtlTranslate: rtl } = swiper; let e = event; if (e.originalEvent) e = e.originalEvent; // jquery fix const kc = e.keyCode || e.charCode; const pageUpDown = swiper.params.keyboard.pageUpDown; const isPageUp = pageUpDown && kc === 33; const isPageDown = pageUpDown && kc === 34; const isArrowLeft = kc === 37; const isArrowRight = kc === 39; const isArrowUp = kc === 38; const isArrowDown = kc === 40; // Directions locks if (!swiper.allowSlideNext && ((swiper.isHorizontal() && isArrowRight) || (swiper.isVertical() && isArrowDown) || isPageDown)) { return false; } if (!swiper.allowSlidePrev && ((swiper.isHorizontal() && isArrowLeft) || (swiper.isVertical() && isArrowUp) || isPageUp)) { return false; } if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) { return undefined; } if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) { return undefined; } if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) { let inView = false; // Check that swiper should be inside of visible area of window if (swiper.$el.parents(`.${swiper.params.slideClass}`).length > 0 && swiper.$el.parents(`.${swiper.params.slideActiveClass}`).length === 0) { return undefined; } const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const swiperOffset = swiper.$el.offset(); if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft; const swiperCoord = [ [swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiper.width, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiper.height], [swiperOffset.left + swiper.width, swiperOffset.top + swiper.height], ]; for (let i = 0; i < swiperCoord.length; i += 1) { const point = swiperCoord[i]; if ( point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight ) { inView = true; } } if (!inView) return undefined; } if (swiper.isHorizontal()) { if (isPageUp || isPageDown || isArrowLeft || isArrowRight) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (((isPageDown || isArrowRight) && !rtl) || ((isPageUp || isArrowLeft) && rtl)) swiper.slideNext(); if (((isPageUp || isArrowLeft) && !rtl) || ((isPageDown || isArrowRight) && rtl)) swiper.slidePrev(); } else { if (isPageUp || isPageDown || isArrowUp || isArrowDown) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (isPageDown || isArrowDown) swiper.slideNext(); if (isPageUp || isArrowUp) swiper.slidePrev(); } swiper.emit('keyPress', kc); return undefined; }, enable() { const swiper = this; if (swiper.keyboard.enabled) return; $(document).on('keydown', swiper.keyboard.handle); swiper.keyboard.enabled = true; }, disable() { const swiper = this; if (!swiper.keyboard.enabled) return; $(document).off('keydown', swiper.keyboard.handle); swiper.keyboard.enabled = false; }, }; export default { name: 'keyboard', params: { keyboard: { enabled: false, onlyInViewport: true, pageUpDown: true, }, }, create() { const swiper = this; Utils.extend(swiper, { keyboard: { enabled: false, enable: Keyboard.enable.bind(swiper), disable: Keyboard.disable.bind(swiper), handle: Keyboard.handle.bind(swiper), }, }); }, on: { init() { const swiper = this; if (swiper.params.keyboard.enabled) { swiper.keyboard.enable(); } }, destroy() { const swiper = this; if (swiper.keyboard.enabled) { swiper.keyboard.disable(); } }, }, };