keyboard.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /* eslint-disable consistent-return */
  2. import { getWindow, getDocument } from 'ssr-window';
  3. import $ from '../../shared/dom.js';
  4. export default function Keyboard(_ref) {
  5. let {
  6. swiper,
  7. extendParams,
  8. on,
  9. emit
  10. } = _ref;
  11. const document = getDocument();
  12. const window = getWindow();
  13. swiper.keyboard = {
  14. enabled: false
  15. };
  16. extendParams({
  17. keyboard: {
  18. enabled: false,
  19. onlyInViewport: true,
  20. pageUpDown: true
  21. }
  22. });
  23. function handle(event) {
  24. if (!swiper.enabled) return;
  25. const {
  26. rtlTranslate: rtl
  27. } = swiper;
  28. let e = event;
  29. if (e.originalEvent) e = e.originalEvent; // jquery fix
  30. const kc = e.keyCode || e.charCode;
  31. const pageUpDown = swiper.params.keyboard.pageUpDown;
  32. const isPageUp = pageUpDown && kc === 33;
  33. const isPageDown = pageUpDown && kc === 34;
  34. const isArrowLeft = kc === 37;
  35. const isArrowRight = kc === 39;
  36. const isArrowUp = kc === 38;
  37. const isArrowDown = kc === 40; // 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; // Check that swiper should be inside of visible area of window
  52. if (swiper.$el.parents(`.${swiper.params.slideClass}`).length > 0 && swiper.$el.parents(`.${swiper.params.slideActiveClass}`).length === 0) {
  53. return undefined;
  54. }
  55. const $el = swiper.$el;
  56. const swiperWidth = $el[0].clientWidth;
  57. const swiperHeight = $el[0].clientHeight;
  58. const windowWidth = window.innerWidth;
  59. const windowHeight = window.innerHeight;
  60. const swiperOffset = swiper.$el.offset();
  61. if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
  62. const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
  63. for (let i = 0; i < swiperCoord.length; i += 1) {
  64. const point = swiperCoord[i];
  65. if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
  66. if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
  67. inView = true;
  68. }
  69. }
  70. if (!inView) return undefined;
  71. }
  72. if (swiper.isHorizontal()) {
  73. if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
  74. if (e.preventDefault) e.preventDefault();else e.returnValue = false;
  75. }
  76. if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
  77. if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
  78. } else {
  79. if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
  80. if (e.preventDefault) e.preventDefault();else e.returnValue = false;
  81. }
  82. if (isPageDown || isArrowDown) swiper.slideNext();
  83. if (isPageUp || isArrowUp) swiper.slidePrev();
  84. }
  85. emit('keyPress', kc);
  86. return undefined;
  87. }
  88. function enable() {
  89. if (swiper.keyboard.enabled) return;
  90. $(document).on('keydown', handle);
  91. swiper.keyboard.enabled = true;
  92. }
  93. function disable() {
  94. if (!swiper.keyboard.enabled) return;
  95. $(document).off('keydown', handle);
  96. swiper.keyboard.enabled = false;
  97. }
  98. on('init', () => {
  99. if (swiper.params.keyboard.enabled) {
  100. enable();
  101. }
  102. });
  103. on('destroy', () => {
  104. if (swiper.keyboard.enabled) {
  105. disable();
  106. }
  107. });
  108. Object.assign(swiper.keyboard, {
  109. enable,
  110. disable
  111. });
  112. }