keyboard.js 4.1 KB

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