https://ativizig.hu/assets/also-tisza-videki/site-default-hu/modules_site/site/scripts/MobileNavigation.js

1System.register("site/scripts/MobileNavigation.js", [], function (_export, _context) {
2  "use strict";
3
4  var HeaderNavigation;
5
6  function run(container) {
7    new HeaderNavigation(container);
8  }
9
10  _export("run", run);
11
12  return {
13    setters: [],
14    execute: function () {
15      HeaderNavigation = /*#__PURE__*/function () {
16        /**
17         * @constructor
18         * @param {HTMLElement} container 
19         */
20        function HeaderNavigation(container) {
21          // SETTERS
22
23          /** @type HTMLElement */
24          this.container = container;
25          /** @type HTMLElement[] */
26
27          this.mainMenus = Array.from(this.container.querySelectorAll('nav > ul.nav-menu > .nav-menu-item > [tabindex]'));
28          /** @type number */
29
30          this.currentIndex = 0; // INIT
31
32          this.setGlobalClick();
33        }
34        /**
35         * Megvizsgálja, hogy az adott menüelemnek vannak-e gyermek elemei.
36         * @param {HTMLElement} menu 
37         * @returns {boolean}
38         */
39
40
41        var _proto = HeaderNavigation.prototype;
42
43        _proto.hasChild = function hasChild(menu) {
44          return menu.getAttribute('aria-haspopup') === 'true';
45        }
46        /**
47         * Megvizsgálja, hogy az adott menüelem első szintű almenüpont-e.
48         * @param {HTMLElement} menu 
49         * @returns {boolean}
50         */
51        ;
52
53        _proto.isFirstLevelMenu = function isFirstLevelMenu(menu) {
54          return this.mainMenus.indexOf(menu.parentNode.parentNode.previousElementSibling) > -1;
55        }
56        /**
57         * Kapcsolgatja a menü aria-expanded attribútumát 'true' és 'false' között
58         * és bezárja a testvér menüpontokat és annak gyerekeit.
59         * @param {HTMLElement} menu
60         * @returns {void}
61         */
62        ;
63
64        _proto.toggleMenuOpen = function toggleMenuOpen(menu) {
65          menu.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
66          this.closeSiblingMenus(menu);
67        }
68        /**
69         * Az első menü tabindex-ét beállítja 0-ra.
70         * @returns {void}
71         */
72        ;
73
74        _proto.setTabindex = function setTabindex() {
75          this.container.querySelector('[tabindex="-1"]').tabIndex = 0;
76        }
77        /**
78         * Beállítja a menüstruktúra összes elemére a click eseményt, úgy, hogyha a
79         * menü elemre kattintunk kapcsolgatja az almenü láthatóságát, kívülre
80         * kattintva viszont minden esetben bezárásra kerül a menü
81         * @returns {void}
82         */
83        ;
84
85        _proto.setGlobalClick = function setGlobalClick() {
86          var _this = this;
87
88          window.addEventListener('click', function (e) {
89            /** @type HTMLElement */
90            var target = e.target || e.srcElement;
91
92            if (target === _this.container || _this.container.contains(target)) {
93              if (target.hasAttribute('aria-expanded')) {
94                if (e.ctrlKey) return;
95                e.preventDefault();
96
97                _this.closeSiblingMenus(target);
98
99                _this.toggleMenuOpen(target);
100
101                if (target.getAttribute('aria-expanded') === 'false') {
102                  if (target.nextElementSibling != null) Array.from(target.nextElementSibling.querySelectorAll('[aria-expanded="true"]')).forEach(function (menu) {
103                    return menu.setAttribute('aria-expanded', 'false');
104                  });
105                }
106              }
107            } else {
108              _this.closeAllMenu();
109            }
110          });
111        }
112        /**
113         * Bezárja az összes menüpontot és azok gyerekeit.
114         * @returns {void}
115         */
116        ;
117
118        _proto.closeAllMenu = function closeAllMenu() {
119          Array.from(this.container.querySelectorAll('[aria-expanded="true"]')).forEach(function (menu) {
120            return menu.setAttribute('aria-expanded', 'false');
121          });
122        }
123        /**
124         * Bezárja az összes testvér menüelemet és annak gyermek elemeit.
125         * @param {HTMLElement} menu 
126         * @returns {void}
127         */
128        ;
129
130        _proto.closeSiblingMenus = function closeSiblingMenus(menu) {
131          var parent = menu.parentNode;
132          var siblings = Array.from(parent.parentNode.children).filter(function (element) {
133            return element !== parent;
134          });

135          siblings.forEach(function (sibling) {
136            Array.from(sibling.querySelectorAll('[aria-expanded="true"]')).forEach(function (menu) {
137              return menu.setAttribute('aria-expanded', 'false');
138            });
139          });
140        }
141        /**
142         * A megadott függvényt abban az esetben hívja meg, ha az event keyCode-ja
143         * és a megadott billentyű egyezik.
144         * @param {KeyboardEvent} event 
145         * @param {string} key 
146         * @param {() => void} callBack 
147         * @returns {void}
148         */
149        ;
150
151        _proto.addKeyFunction = function addKeyFunction(event, key, callBack) {
152          if (this.isKey(event.keyCode, key)) callBack();
153        }
154        /**
155         * Megvizsgálja, hogy a megadott keyCode és billentyű egyezik-e.
156         * @param {number} code - keycode
157         * @param {string} key - billentyű neve
158         * @returns {boolean}
159         */
160        ;
161
162        _proto.isKey = function isKey(code, key) {
163          return this.getKeyFromCode(code) === key;
164        }
165        /**
166         * Megvizsgálja, hogy megadott event megegyezik-e a tömbben megadott billentyűk valamelyikével.
167         * @param {KeyboardEvent} event 
168         * @param {string[]} keys 
169         */
170        ;
171
172        _proto.isUsedKey = function isUsedKey(event, keys) {
173          var _this2 = this;
174
175          var isUsed = false;
176          keys.forEach(function (k) {
177            if (_this2.isKey(event.keyCode, k)) isUsed = true;
178          });
179          return isUsed;
180        }
181        /**
182         * Visszatér a billentyű nevével a keycode alapján.
183         * @param {number} code - keyCode
184         * @returns {string} a billentyű neve
185         * */
186        ;
187
188        _proto.getKeyFromCode = function getKeyFromCode(code) {
189          switch (code) {
190            case 9:
191              return 'tab';
192
193            case 13:
194              return 'enter';
195
196            case 32:
197              return 'space';
198
199            case 27:
200              return 'esc';
201
202            case 33:
203              return 'pg-up';
204
205            case 34:
206              return 'pg-down';
207
208            case 35:
209              return 'end';
210
211            case 36:
212              return 'home';
213
214            case 37:
215              return 'left';
216
217            case 38:
218              return 'up';
219
220            case 39:
221              return 'right';
222
223            case 40:
224              return 'down';
225          }
226        };
227
228        return HeaderNavigation;
229      }();
230    }
231  };
232});