Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

menu-keyable.js 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /**
  2. * Menu keyable
  3. *
  4. * @mixin
  5. *
  6. * Primarily used to support VSelect
  7. * Handles opening and closing of VMenu from keystrokes
  8. * Will conditionally highlight VListTiles for VSelect
  9. */
  10. // Utils
  11. import { keyCodes } from '../../../util/helpers';
  12. /* @vue/component */
  13. export default {
  14. props: {
  15. disableKeys: Boolean
  16. },
  17. data: function data() {
  18. return {
  19. listIndex: -1,
  20. tiles: []
  21. };
  22. },
  23. watch: {
  24. isActive: function isActive(val) {
  25. if (!val) this.listIndex = -1;
  26. },
  27. listIndex: function listIndex(next, prev) {
  28. if (next in this.tiles) {
  29. var tile = this.tiles[next];
  30. tile.classList.add('v-list__tile--highlighted');
  31. this.$refs.content.scrollTop = tile.offsetTop - tile.clientHeight;
  32. }
  33. prev in this.tiles && this.tiles[prev].classList.remove('v-list__tile--highlighted');
  34. }
  35. },
  36. methods: {
  37. onKeyDown: function onKeyDown(e) {
  38. var _this = this;
  39. if (e.keyCode === keyCodes.esc) {
  40. // Wait for dependent elements to close first
  41. setTimeout(function () {
  42. _this.isActive = false;
  43. });
  44. var activator = this.getActivator();
  45. this.$nextTick(function () {
  46. return activator && activator.focus();
  47. });
  48. } else if (e.keyCode === keyCodes.tab) {
  49. setTimeout(function () {
  50. if (!_this.$refs.content.contains(document.activeElement)) {
  51. _this.isActive = false;
  52. }
  53. });
  54. } else {
  55. this.changeListIndex(e);
  56. }
  57. },
  58. changeListIndex: function changeListIndex(e) {
  59. // For infinite scroll and autocomplete, re-evaluate children
  60. this.getTiles();
  61. if (e.keyCode === keyCodes.down && this.listIndex < this.tiles.length - 1) {
  62. this.listIndex++;
  63. // Allow user to set listIndex to -1 so
  64. // that the list can be un-highlighted
  65. } else if (e.keyCode === keyCodes.up && this.listIndex > -1) {
  66. this.listIndex--;
  67. } else if (e.keyCode === keyCodes.enter && this.listIndex !== -1) {
  68. this.tiles[this.listIndex].click();
  69. } else {
  70. return;
  71. }
  72. // One of the conditions was met, prevent default action (#2988)
  73. e.preventDefault();
  74. },
  75. getTiles: function getTiles() {
  76. this.tiles = this.$refs.content.querySelectorAll('.v-list__tile');
  77. }
  78. }
  79. };
  80. //# sourceMappingURL=menu-keyable.js.map