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; // Directions locks if (!swiper.allowSlideNext && ((swiper.isHorizontal() && kc === 39) || (swiper.isVertical() && kc === 40) || kc === 34)) { return false; } if (!swiper.allowSlidePrev && ((swiper.isHorizontal() && kc === 37) || (swiper.isVertical() && kc === 38) || kc === 33)) { 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 && (kc === 33 || kc === 34 || kc === 37 || kc === 39 || kc === 38 || kc === 40)) { 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 (kc === 33 || kc === 34 || kc === 37 || kc === 39) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (((kc === 34 || kc === 39) && !rtl) || ((kc === 33 || kc === 37) && rtl)) swiper.slideNext(); if (((kc === 33 || kc === 37) && !rtl) || ((kc === 34 || kc === 39) && rtl)) swiper.slidePrev(); } else { if (kc === 33 || kc === 34 || kc === 38 || kc === 40) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (kc === 34 || kc === 40) swiper.slideNext(); if (kc === 33 || kc === 38) 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, }, }, 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(); } }, }, };