keyboard.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /* eslint-disable consistent-return */
  2. import { getWindow, getDocument } from 'ssr-window';
  3. import { elementOffset, elementParents } from '../../shared/utils.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. function handle(event) {
  23. if (!swiper.enabled) return;
  24. const {
  25. rtlTranslate: rtl
  26. } = swiper;
  27. let e = event;
  28. if (e.originalEvent) e = e.originalEvent; // jquery fix
  29. const kc = e.keyCode || e.charCode;
  30. const pageUpDown = swiper.params.keyboard.pageUpDown;
  31. const isPageUp = pageUpDown && kc === 33;
  32. const isPageDown = pageUpDown && kc === 34;
  33. const isArrowLeft = kc === 37;
  34. const isArrowRight = kc === 39;
  35. const isArrowUp = kc === 38;
  36. const isArrowDown = kc === 40;
  37. // Directions locks
  38. if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
  39. return false;
  40. }
  41. if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
  42. return false;
  43. }
  44. if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
  45. return undefined;
  46. }
  47. if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
  48. return undefined;
  49. }
  50. if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
  51. let inView = false;
  52. // Check that swiper should be inside of visible area of window
  53. if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {
  54. return undefined;
  55. }
  56. const el = swiper.el;
  57. const swiperWidth = el.clientWidth;
  58. const swiperHeight = el.clientHeight;
  59. const windowWidth = window.innerWidth;
  60. const windowHeight = window.innerHeight;
  61. const swiperOffset = elementOffset(el);
  62. if (rtl) swiperOffset.left -= el.scrollLeft;
  63. const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
  64. for (let i = 0; i < swiperCoord.length; i += 1) {
  65. const point = swiperCoord[i];
  66. if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
  67. if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
  68. inView = true;
  69. }
  70. }
  71. if (!inView) return undefined;
  72. }
  73. if (swiper.isHorizontal()) {
  74. if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
  75. if (e.preventDefault) e.preventDefault();else e.returnValue = false;
  76. }
  77. if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
  78. if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
  79. } else {
  80. if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
  81. if (e.preventDefault) e.preventDefault();else e.returnValue = false;
  82. }
  83. if (isPageDown || isArrowDown) swiper.slideNext();
  84. if (isPageUp || isArrowUp) swiper.slidePrev();
  85. }
  86. emit('keyPress', kc);
  87. return undefined;
  88. }
  89. function enable() {
  90. if (swiper.keyboard.enabled) return;
  91. document.addEventListener('keydown', handle);
  92. swiper.keyboard.enabled = true;
  93. }
  94. function disable() {
  95. if (!swiper.keyboard.enabled) return;
  96. document.removeEventListener('keydown', handle);
  97. swiper.keyboard.enabled = false;
  98. }
  99. on('init', () => {
  100. if (swiper.params.keyboard.enabled) {
  101. enable();
  102. }
  103. });
  104. on('destroy', () => {
  105. if (swiper.keyboard.enabled) {
  106. disable();
  107. }
  108. });
  109. Object.assign(swiper.keyboard, {
  110. enable,
  111. disable
  112. });
  113. }