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.9KB

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