diff --git a/core/src/components/slides/swiper/swiper.bundle.js b/core/src/components/slides/swiper/swiper.bundle.js index 061c592e34..7b748b4059 100644 --- a/core/src/components/slides/swiper/swiper.bundle.js +++ b/core/src/components/slides/swiper/swiper.bundle.js @@ -4494,6 +4494,120 @@ var Observer$1 = { }, }; +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 (doc.activeElement && doc.activeElement.nodeName && (doc.activeElement.nodeName.toLowerCase() === 'input' || doc.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 = win.innerWidth; + const windowHeight = win.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; + $(doc).on('keydown', swiper.keyboard.handle); + swiper.keyboard.enabled = true; + }, + disable() { + const swiper = this; + if (!swiper.keyboard.enabled) return; + $(doc).off('keydown', swiper.keyboard.handle); + swiper.keyboard.enabled = false; + }, +}; + +var keyboard = { + 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(); + } + }, + }, +}; + function isEventSupported() { const eventName = 'onwheel'; let isSupported = eventName in doc; @@ -6299,6 +6413,6 @@ if (typeof Swiper.use === 'undefined') { Swiper.use(components); -Swiper.use([pagination, scrollbar, autoplay, zoom]); +Swiper.use([pagination, scrollbar, autoplay, keyboard, zoom]); export { Swiper }; diff --git a/core/src/components/slides/swiper/swiper.js b/core/src/components/slides/swiper/swiper.js index c9b90194cb..c851009680 100644 --- a/core/src/components/slides/swiper/swiper.js +++ b/core/src/components/slides/swiper/swiper.js @@ -1,4 +1,4 @@ -import { Autoplay, Pagination, Scrollbar, Swiper, Zoom } from 'swiper/js/swiper.esm'; +import { Autoplay, Pagination, Scrollbar, Swiper, Keyboard, Zoom } from 'swiper/js/swiper.esm'; -Swiper.use([Pagination, Scrollbar, Autoplay, Zoom]); +Swiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom]); export { Swiper }; diff --git a/core/src/components/slides/test/basic/index.html b/core/src/components/slides/test/basic/index.html index 1de9a526e2..ad8fcc0171 100644 --- a/core/src/components/slides/test/basic/index.html +++ b/core/src/components/slides/test/basic/index.html @@ -56,7 +56,11 @@ let slideCount = 4; const slides = document.getElementById('slides') slides.pager = false; - slides.options = {} + slides.options = { + keyboard: { + enabled: true + } + } async function addSlide() { const slide = document.createElement('ion-slide');