1 | module.exports =
|
2 | (function(modules) {
|
3 |
|
4 | var installedModules = {};
|
5 |
|
6 |
|
7 | function __webpack_require__(moduleId) {
|
8 |
|
9 |
|
10 | if(installedModules[moduleId]) {
|
11 | return installedModules[moduleId].exports;
|
12 | }
|
13 |
|
14 | var module = installedModules[moduleId] = {
|
15 | i: moduleId,
|
16 | l: false,
|
17 | exports: {}
|
18 | };
|
19 |
|
20 |
|
21 | modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
22 |
|
23 |
|
24 | module.l = true;
|
25 |
|
26 |
|
27 | return module.exports;
|
28 | }
|
29 |
|
30 |
|
31 |
|
32 | __webpack_require__.m = modules;
|
33 |
|
34 |
|
35 | __webpack_require__.c = installedModules;
|
36 |
|
37 |
|
38 | __webpack_require__.d = function(exports, name, getter) {
|
39 | if(!__webpack_require__.o(exports, name)) {
|
40 | Object.defineProperty(exports, name, {
|
41 | configurable: false,
|
42 | enumerable: true,
|
43 | get: getter
|
44 | /******/ });
|
45 | /******/ }
|
46 | /******/ };
|
47 | /******/
|
48 | /******/ // getDefaultExport function for compatibility with non-harmony modules
|
49 | /******/ __webpack_require__.n = function(module) {
|
50 | var getter = module && module.__esModule ?
|
51 | function getDefault() { return module['default']; } :
|
52 | function getModuleExports() { return module; };
|
53 | __webpack_require__.d(getter, 'a', getter);
|
54 | return getter;
|
55 | };
|
56 |
|
57 |
|
58 | __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
59 |
|
60 |
|
61 | __webpack_require__.p = "/dist/";
|
62 |
|
63 |
|
64 | return __webpack_require__(__webpack_require__.s = 84);
|
65 | })
|
66 |
|
67 | ({
|
68 |
|
69 | 0:
|
70 | (function(module, exports) {
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 | module.exports = function normalizeComponent (
|
79 | rawScriptExports,
|
80 | compiledTemplate,
|
81 | functionalTemplate,
|
82 | injectStyles,
|
83 | scopeId,
|
84 | moduleIdentifier /* server only */
|
85 | ) {
|
86 | var esModule
|
87 | var scriptExports = rawScriptExports = rawScriptExports || {}
|
88 |
|
89 |
|
90 | var type = typeof rawScriptExports.default
|
91 | if (type === 'object' || type === 'function') {
|
92 | esModule = rawScriptExports
|
93 | scriptExports = rawScriptExports.default
|
94 | }
|
95 |
|
96 |
|
97 | var options = typeof scriptExports === 'function'
|
98 | ? scriptExports.options
|
99 | : scriptExports
|
100 |
|
101 |
|
102 | if (compiledTemplate) {
|
103 | options.render = compiledTemplate.render
|
104 | options.staticRenderFns = compiledTemplate.staticRenderFns
|
105 | options._compiled = true
|
106 | }
|
107 |
|
108 |
|
109 | if (functionalTemplate) {
|
110 | options.functional = true
|
111 | }
|
112 |
|
113 |
|
114 | if (scopeId) {
|
115 | options._scopeId = scopeId
|
116 | }
|
117 |
|
118 | var hook
|
119 | if (moduleIdentifier) {
|
120 | hook = function (context) {
|
121 |
|
122 | context =
|
123 | context ||
|
124 | (this.$vnode && this.$vnode.ssrContext) ||
|
125 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext)
|
126 |
|
127 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
128 | context = __VUE_SSR_CONTEXT__
|
129 | }
|
130 |
|
131 | if (injectStyles) {
|
132 | injectStyles.call(this, context)
|
133 | }
|
134 |
|
135 | if (context && context._registeredComponents) {
|
136 | context._registeredComponents.add(moduleIdentifier)
|
137 | }
|
138 | }
|
139 |
|
140 |
|
141 | options._ssrRegister = hook
|
142 | } else if (injectStyles) {
|
143 | hook = injectStyles
|
144 | }
|
145 |
|
146 | if (hook) {
|
147 | var functional = options.functional
|
148 | var existing = functional
|
149 | ? options.render
|
150 | : options.beforeCreate
|
151 |
|
152 | if (!functional) {
|
153 |
|
154 | options.beforeCreate = existing
|
155 | ? [].concat(existing, hook)
|
156 | : [hook]
|
157 | } else {
|
158 |
|
159 |
|
160 | options._injectStyles = hook
|
161 |
|
162 | options.render = function renderWithStyleInjection (h, context) {
|
163 | hook.call(context)
|
164 | return existing(h, context)
|
165 | }
|
166 | }
|
167 | }
|
168 |
|
169 | return {
|
170 | esModule: esModule,
|
171 | exports: scriptExports,
|
172 | options: options
|
173 | }
|
174 | }
|
175 |
|
176 |
|
177 | }),
|
178 |
|
179 | 1:
|
180 | (function(module, exports) {
|
181 |
|
182 | module.exports = require("element-ui/lib/mixins/emitter");
|
183 |
|
184 | }),
|
185 |
|
186 | 3:
|
187 | (function(module, exports) {
|
188 |
|
189 | module.exports = require("element-ui/lib/utils/dom");
|
190 |
|
191 | }),
|
192 |
|
193 | 47:
|
194 | (function(module, exports, __webpack_require__) {
|
195 |
|
196 | "use strict";
|
197 |
|
198 |
|
199 | exports.__esModule = true;
|
200 | var aria = aria || {};
|
201 |
|
202 | aria.Utils = aria.Utils || {};
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 | aria.Utils.focusFirstDescendant = function (element) {
|
213 | for (var i = 0; i < element.childNodes.length; i++) {
|
214 | var child = element.childNodes[i];
|
215 | if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
|
216 | return true;
|
217 | }
|
218 | }
|
219 | return false;
|
220 | };
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 | aria.Utils.focusLastDescendant = function (element) {
|
231 | for (var i = element.childNodes.length - 1; i >= 0; i--) {
|
232 | var child = element.childNodes[i];
|
233 | if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
|
234 | return true;
|
235 | }
|
236 | }
|
237 | return false;
|
238 | };
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 | aria.Utils.attemptFocus = function (element) {
|
248 | if (!aria.Utils.isFocusable(element)) {
|
249 | return false;
|
250 | }
|
251 | aria.Utils.IgnoreUtilFocusChanges = true;
|
252 | try {
|
253 | element.focus();
|
254 | } catch (e) {}
|
255 | aria.Utils.IgnoreUtilFocusChanges = false;
|
256 | return document.activeElement === element;
|
257 | };
|
258 |
|
259 | aria.Utils.isFocusable = function (element) {
|
260 | if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
|
261 | return true;
|
262 | }
|
263 |
|
264 | if (element.disabled) {
|
265 | return false;
|
266 | }
|
267 |
|
268 | switch (element.nodeName) {
|
269 | case 'A':
|
270 | return !!element.href && element.rel !== 'ignore';
|
271 | case 'INPUT':
|
272 | return element.type !== 'hidden' && element.type !== 'file';
|
273 | case 'BUTTON':
|
274 | case 'SELECT':
|
275 | case 'TEXTAREA':
|
276 | return true;
|
277 | default:
|
278 | return false;
|
279 | }
|
280 | };
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 | aria.Utils.triggerEvent = function (elm, name) {
|
290 | var eventName = void 0;
|
291 |
|
292 | if (/^mouse|click/.test(name)) {
|
293 | eventName = 'MouseEvents';
|
294 | } else if (/^key/.test(name)) {
|
295 | eventName = 'KeyboardEvent';
|
296 | } else {
|
297 | eventName = 'HTMLEvents';
|
298 | }
|
299 | var evt = document.createEvent(eventName);
|
300 |
|
301 | for (var _len = arguments.length, opts = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
302 | opts[_key - 2] = arguments[_key];
|
303 | }
|
304 |
|
305 | evt.initEvent.apply(evt, [name].concat(opts));
|
306 | elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt);
|
307 |
|
308 | return elm;
|
309 | };
|
310 |
|
311 | aria.Utils.keys = {
|
312 | tab: 9,
|
313 | enter: 13,
|
314 | space: 32,
|
315 | left: 37,
|
316 | up: 38,
|
317 | right: 39,
|
318 | down: 40
|
319 | };
|
320 |
|
321 | exports.default = aria.Utils;
|
322 |
|
323 | }),
|
324 |
|
325 | 8:
|
326 | (function(module, exports) {
|
327 |
|
328 | module.exports = require("element-ui/lib/mixins/migrating");
|
329 |
|
330 | }),
|
331 |
|
332 | 84:
|
333 | (function(module, exports, __webpack_require__) {
|
334 |
|
335 | "use strict";
|
336 |
|
337 |
|
338 | exports.__esModule = true;
|
339 |
|
340 | var _menu = __webpack_require__(85);
|
341 |
|
342 | var _menu2 = _interopRequireDefault(_menu);
|
343 |
|
344 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
345 |
|
346 |
|
347 | _menu2.default.install = function (Vue) {
|
348 | Vue.component(_menu2.default.name, _menu2.default);
|
349 | };
|
350 |
|
351 | exports.default = _menu2.default;
|
352 |
|
353 | }),
|
354 |
|
355 | 85:
|
356 | (function(module, __webpack_exports__, __webpack_require__) {
|
357 |
|
358 | "use strict";
|
359 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
360 | var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__ = __webpack_require__(86);
|
361 | var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__);
|
362 | var normalizeComponent = __webpack_require__(0)
|
363 |
|
364 |
|
365 |
|
366 | var __vue_template__ = null
|
367 |
|
368 | var __vue_template_functional__ = false
|
369 |
|
370 | var __vue_styles__ = null
|
371 |
|
372 | var __vue_scopeId__ = null
|
373 |
|
374 | var __vue_module_identifier__ = null
|
375 | var Component = normalizeComponent(
|
376 | __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default.a,
|
377 | __vue_template__,
|
378 | __vue_template_functional__,
|
379 | __vue_styles__,
|
380 | __vue_scopeId__,
|
381 | __vue_module_identifier__
|
382 | )
|
383 |
|
384 | __webpack_exports__["default"] = (Component.exports);
|
385 |
|
386 |
|
387 | }),
|
388 |
|
389 | 86:
|
390 | (function(module, exports, __webpack_require__) {
|
391 |
|
392 | "use strict";
|
393 |
|
394 |
|
395 | exports.__esModule = true;
|
396 |
|
397 | var _emitter = __webpack_require__(1);
|
398 |
|
399 | var _emitter2 = _interopRequireDefault(_emitter);
|
400 |
|
401 | var _migrating = __webpack_require__(8);
|
402 |
|
403 | var _migrating2 = _interopRequireDefault(_migrating);
|
404 |
|
405 | var _ariaMenubar = __webpack_require__(87);
|
406 |
|
407 | var _ariaMenubar2 = _interopRequireDefault(_ariaMenubar);
|
408 |
|
409 | var _dom = __webpack_require__(3);
|
410 |
|
411 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
412 |
|
413 | exports.default = {
|
414 | name: 'ElMenu',
|
415 |
|
416 | render: function render(h) {
|
417 | var component = h(
|
418 | 'ul',
|
419 | {
|
420 | attrs: {
|
421 | role: 'menubar'
|
422 | },
|
423 | key: +this.collapse,
|
424 | style: { backgroundColor: this.backgroundColor || '' },
|
425 | 'class': {
|
426 | 'el-menu--horizontal': this.mode === 'horizontal',
|
427 | 'el-menu--collapse': this.collapse,
|
428 | "el-menu": true
|
429 | }
|
430 | },
|
431 | [this.$slots.default]
|
432 | );
|
433 |
|
434 | if (this.collapseTransition) {
|
435 | return h(
|
436 | 'el-menu-collapse-transition',
|
437 | null,
|
438 | [component]
|
439 | );
|
440 | } else {
|
441 | return component;
|
442 | }
|
443 | },
|
444 |
|
445 |
|
446 | componentName: 'ElMenu',
|
447 |
|
448 | mixins: [_emitter2.default, _migrating2.default],
|
449 |
|
450 | provide: function provide() {
|
451 | return {
|
452 | rootMenu: this
|
453 | };
|
454 | },
|
455 |
|
456 |
|
457 | components: {
|
458 | 'el-menu-collapse-transition': {
|
459 | functional: true,
|
460 | render: function render(createElement, context) {
|
461 | var data = {
|
462 | props: {
|
463 | mode: 'out-in'
|
464 | },
|
465 | on: {
|
466 | beforeEnter: function beforeEnter(el) {
|
467 | el.style.opacity = 0.2;
|
468 | },
|
469 | enter: function enter(el) {
|
470 | (0, _dom.addClass)(el, 'el-opacity-transition');
|
471 | el.style.opacity = 1;
|
472 | },
|
473 | afterEnter: function afterEnter(el) {
|
474 | (0, _dom.removeClass)(el, 'el-opacity-transition');
|
475 | el.style.opacity = '';
|
476 | },
|
477 | beforeLeave: function beforeLeave(el) {
|
478 | if (!el.dataset) el.dataset = {};
|
479 |
|
480 | if ((0, _dom.hasClass)(el, 'el-menu--collapse')) {
|
481 | (0, _dom.removeClass)(el, 'el-menu--collapse');
|
482 | el.dataset.oldOverflow = el.style.overflow;
|
483 | el.dataset.scrollWidth = el.clientWidth;
|
484 | (0, _dom.addClass)(el, 'el-menu--collapse');
|
485 | } else {
|
486 | (0, _dom.addClass)(el, 'el-menu--collapse');
|
487 | el.dataset.oldOverflow = el.style.overflow;
|
488 | el.dataset.scrollWidth = el.clientWidth;
|
489 | (0, _dom.removeClass)(el, 'el-menu--collapse');
|
490 | }
|
491 |
|
492 | el.style.width = el.scrollWidth + 'px';
|
493 | el.style.overflow = 'hidden';
|
494 | },
|
495 | leave: function leave(el) {
|
496 | (0, _dom.addClass)(el, 'horizontal-collapse-transition');
|
497 | el.style.width = el.dataset.scrollWidth + 'px';
|
498 | }
|
499 | }
|
500 | };
|
501 | return createElement('transition', data, context.children);
|
502 | }
|
503 | }
|
504 | },
|
505 |
|
506 | props: {
|
507 | mode: {
|
508 | type: String,
|
509 | default: 'vertical'
|
510 | },
|
511 | defaultActive: {
|
512 | type: String,
|
513 | default: ''
|
514 | },
|
515 | defaultOpeneds: Array,
|
516 | uniqueOpened: Boolean,
|
517 | router: Boolean,
|
518 | menuTrigger: {
|
519 | type: String,
|
520 | default: 'hover'
|
521 | },
|
522 | collapse: Boolean,
|
523 | backgroundColor: String,
|
524 | textColor: String,
|
525 | activeTextColor: String,
|
526 | collapseTransition: {
|
527 | type: Boolean,
|
528 | default: true
|
529 | }
|
530 | },
|
531 | data: function data() {
|
532 | return {
|
533 | activeIndex: this.defaultActive,
|
534 | openedMenus: this.defaultOpeneds && !this.collapse ? this.defaultOpeneds.slice(0) : [],
|
535 | items: {},
|
536 | submenus: {}
|
537 | };
|
538 | },
|
539 |
|
540 | computed: {
|
541 | hoverBackground: function hoverBackground() {
|
542 | return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
|
543 | },
|
544 | isMenuPopup: function isMenuPopup() {
|
545 | return this.mode === 'horizontal' || this.mode === 'vertical' && this.collapse;
|
546 | }
|
547 | },
|
548 | watch: {
|
549 | defaultActive: 'updateActiveIndex',
|
550 |
|
551 | defaultOpeneds: function defaultOpeneds(value) {
|
552 | if (!this.collapse) {
|
553 | this.openedMenus = value;
|
554 | }
|
555 | },
|
556 | collapse: function collapse(value) {
|
557 | if (value) this.openedMenus = [];
|
558 | this.broadcast('ElSubmenu', 'toggle-collapse', value);
|
559 | }
|
560 | },
|
561 | methods: {
|
562 | updateActiveIndex: function updateActiveIndex(val) {
|
563 | var item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
|
564 | if (item) {
|
565 | this.activeIndex = item.index;
|
566 | this.initOpenedMenu();
|
567 | } else {
|
568 | this.activeIndex = null;
|
569 | }
|
570 | },
|
571 | getMigratingConfig: function getMigratingConfig() {
|
572 | return {
|
573 | props: {
|
574 | 'theme': 'theme is removed.'
|
575 | }
|
576 | };
|
577 | },
|
578 | getColorChannels: function getColorChannels(color) {
|
579 | color = color.replace('#', '');
|
580 | if (/^[0-9a-fA-F]{3}$/.test(color)) {
|
581 | color = color.split('');
|
582 | for (var i = 2; i >= 0; i--) {
|
583 | color.splice(i, 0, color[i]);
|
584 | }
|
585 | color = color.join('');
|
586 | }
|
587 | if (/^[0-9a-fA-F]{6}$/.test(color)) {
|
588 | return {
|
589 | red: parseInt(color.slice(0, 2), 16),
|
590 | green: parseInt(color.slice(2, 4), 16),
|
591 | blue: parseInt(color.slice(4, 6), 16)
|
592 | };
|
593 | } else {
|
594 | return {
|
595 | red: 255,
|
596 | green: 255,
|
597 | blue: 255
|
598 | };
|
599 | }
|
600 | },
|
601 | mixColor: function mixColor(color, percent) {
|
602 | var _getColorChannels = this.getColorChannels(color),
|
603 | red = _getColorChannels.red,
|
604 | green = _getColorChannels.green,
|
605 | blue = _getColorChannels.blue;
|
606 |
|
607 | if (percent > 0) {
|
608 |
|
609 | red *= 1 - percent;
|
610 | green *= 1 - percent;
|
611 | blue *= 1 - percent;
|
612 | } else {
|
613 |
|
614 | red += (255 - red) * percent;
|
615 | green += (255 - green) * percent;
|
616 | blue += (255 - blue) * percent;
|
617 | }
|
618 | return 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
|
619 | },
|
620 | addItem: function addItem(item) {
|
621 | this.$set(this.items, item.index, item);
|
622 | },
|
623 | removeItem: function removeItem(item) {
|
624 | delete this.items[item.index];
|
625 | },
|
626 | addSubmenu: function addSubmenu(item) {
|
627 | this.$set(this.submenus, item.index, item);
|
628 | },
|
629 | removeSubmenu: function removeSubmenu(item) {
|
630 | delete this.submenus[item.index];
|
631 | },
|
632 | openMenu: function openMenu(index, indexPath) {
|
633 | var openedMenus = this.openedMenus;
|
634 | if (openedMenus.indexOf(index) !== -1) return;
|
635 |
|
636 |
|
637 | if (this.uniqueOpened) {
|
638 | this.openedMenus = openedMenus.filter(function (index) {
|
639 | return indexPath.indexOf(index) !== -1;
|
640 | });
|
641 | }
|
642 | this.openedMenus.push(index);
|
643 | },
|
644 | closeMenu: function closeMenu(index) {
|
645 | var i = this.openedMenus.indexOf(index);
|
646 | if (i !== -1) {
|
647 | this.openedMenus.splice(i, 1);
|
648 | }
|
649 | },
|
650 | handleSubmenuClick: function handleSubmenuClick(submenu) {
|
651 | var index = submenu.index,
|
652 | indexPath = submenu.indexPath;
|
653 |
|
654 | var isOpened = this.openedMenus.indexOf(index) !== -1;
|
655 |
|
656 | if (isOpened) {
|
657 | this.closeMenu(index);
|
658 | this.$emit('close', index, indexPath);
|
659 | } else {
|
660 | this.openMenu(index, indexPath);
|
661 | this.$emit('open', index, indexPath);
|
662 | }
|
663 | },
|
664 | handleItemClick: function handleItemClick(item) {
|
665 | var _this = this;
|
666 |
|
667 | var index = item.index,
|
668 | indexPath = item.indexPath;
|
669 |
|
670 | var oldActiveIndex = this.activeIndex;
|
671 |
|
672 | this.activeIndex = item.index;
|
673 | this.$emit('select', index, indexPath, item);
|
674 |
|
675 | if (this.mode === 'horizontal' || this.collapse) {
|
676 | this.openedMenus = [];
|
677 | }
|
678 |
|
679 | if (this.router) {
|
680 | this.routeToItem(item, function (error) {
|
681 | _this.activeIndex = oldActiveIndex;
|
682 | if (error) console.error(error);
|
683 | });
|
684 | }
|
685 | },
|
686 |
|
687 |
|
688 |
|
689 | initOpenedMenu: function initOpenedMenu() {
|
690 | var _this2 = this;
|
691 |
|
692 | var index = this.activeIndex;
|
693 | var activeItem = this.items[index];
|
694 | if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
|
695 |
|
696 | var indexPath = activeItem.indexPath;
|
697 |
|
698 |
|
699 |
|
700 | indexPath.forEach(function (index) {
|
701 | var submenu = _this2.submenus[index];
|
702 | submenu && _this2.openMenu(index, submenu.indexPath);
|
703 | });
|
704 | },
|
705 | routeToItem: function routeToItem(item, onError) {
|
706 | var route = item.route || item.index;
|
707 | try {
|
708 | this.$router.push(route, function () {}, onError);
|
709 | } catch (e) {
|
710 | console.error(e);
|
711 | }
|
712 | },
|
713 | open: function open(index) {
|
714 | var _this3 = this;
|
715 |
|
716 | var indexPath = this.submenus[index.toString()].indexPath;
|
717 |
|
718 | indexPath.forEach(function (i) {
|
719 | return _this3.openMenu(i, indexPath);
|
720 | });
|
721 | },
|
722 | close: function close(index) {
|
723 | this.closeMenu(index);
|
724 | }
|
725 | },
|
726 | mounted: function mounted() {
|
727 | this.initOpenedMenu();
|
728 | this.$on('item-click', this.handleItemClick);
|
729 | this.$on('submenu-click', this.handleSubmenuClick);
|
730 | if (this.mode === 'horizontal') {
|
731 | new _ariaMenubar2.default(this.$el);
|
732 | }
|
733 | this.$watch('items', this.updateActiveIndex);
|
734 | }
|
735 | };
|
736 |
|
737 | }),
|
738 |
|
739 | 87:
|
740 | (function(module, exports, __webpack_require__) {
|
741 |
|
742 | "use strict";
|
743 |
|
744 |
|
745 | exports.__esModule = true;
|
746 |
|
747 | var _ariaMenuitem = __webpack_require__(88);
|
748 |
|
749 | var _ariaMenuitem2 = _interopRequireDefault(_ariaMenuitem);
|
750 |
|
751 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
752 |
|
753 | var Menu = function Menu(domNode) {
|
754 | this.domNode = domNode;
|
755 | this.init();
|
756 | };
|
757 |
|
758 | Menu.prototype.init = function () {
|
759 | var menuChildren = this.domNode.childNodes;
|
760 | [].filter.call(menuChildren, function (child) {
|
761 | return child.nodeType === 1;
|
762 | }).forEach(function (child) {
|
763 | new _ariaMenuitem2.default(child);
|
764 | });
|
765 | };
|
766 | exports.default = Menu;
|
767 |
|
768 | }),
|
769 |
|
770 | 88:
|
771 | (function(module, exports, __webpack_require__) {
|
772 |
|
773 | "use strict";
|
774 |
|
775 |
|
776 | exports.__esModule = true;
|
777 |
|
778 | var _ariaUtils = __webpack_require__(47);
|
779 |
|
780 | var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
|
781 |
|
782 | var _ariaSubmenu = __webpack_require__(89);
|
783 |
|
784 | var _ariaSubmenu2 = _interopRequireDefault(_ariaSubmenu);
|
785 |
|
786 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
787 |
|
788 | var MenuItem = function MenuItem(domNode) {
|
789 | this.domNode = domNode;
|
790 | this.submenu = null;
|
791 | this.init();
|
792 | };
|
793 |
|
794 | MenuItem.prototype.init = function () {
|
795 | this.domNode.setAttribute('tabindex', '0');
|
796 | var menuChild = this.domNode.querySelector('.el-menu');
|
797 | if (menuChild) {
|
798 | this.submenu = new _ariaSubmenu2.default(this, menuChild);
|
799 | }
|
800 | this.addListeners();
|
801 | };
|
802 |
|
803 | MenuItem.prototype.addListeners = function () {
|
804 | var _this = this;
|
805 |
|
806 | var keys = _ariaUtils2.default.keys;
|
807 | this.domNode.addEventListener('keydown', function (event) {
|
808 | var prevDef = false;
|
809 | switch (event.keyCode) {
|
810 | case keys.down:
|
811 | _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
|
812 | _this.submenu && _this.submenu.gotoSubIndex(0);
|
813 | prevDef = true;
|
814 | break;
|
815 | case keys.up:
|
816 | _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
|
817 | _this.submenu && _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
|
818 | prevDef = true;
|
819 | break;
|
820 | case keys.tab:
|
821 | _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseleave');
|
822 | break;
|
823 | case keys.enter:
|
824 | case keys.space:
|
825 | prevDef = true;
|
826 | event.currentTarget.click();
|
827 | break;
|
828 | }
|
829 | if (prevDef) {
|
830 | event.preventDefault();
|
831 | }
|
832 | });
|
833 | };
|
834 |
|
835 | exports.default = MenuItem;
|
836 |
|
837 | }),
|
838 |
|
839 | 89:
|
840 | (function(module, exports, __webpack_require__) {
|
841 |
|
842 | "use strict";
|
843 |
|
844 |
|
845 | exports.__esModule = true;
|
846 |
|
847 | var _ariaUtils = __webpack_require__(47);
|
848 |
|
849 | var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
|
850 |
|
851 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
852 |
|
853 | var SubMenu = function SubMenu(parent, domNode) {
|
854 | this.domNode = domNode;
|
855 | this.parent = parent;
|
856 | this.subMenuItems = [];
|
857 | this.subIndex = 0;
|
858 | this.init();
|
859 | };
|
860 |
|
861 | SubMenu.prototype.init = function () {
|
862 | this.subMenuItems = this.domNode.querySelectorAll('li');
|
863 | this.addListeners();
|
864 | };
|
865 |
|
866 | SubMenu.prototype.gotoSubIndex = function (idx) {
|
867 | if (idx === this.subMenuItems.length) {
|
868 | idx = 0;
|
869 | } else if (idx < 0) {
|
870 | idx = this.subMenuItems.length - 1;
|
871 | }
|
872 | this.subMenuItems[idx].focus();
|
873 | this.subIndex = idx;
|
874 | };
|
875 |
|
876 | SubMenu.prototype.addListeners = function () {
|
877 | var _this = this;
|
878 |
|
879 | var keys = _ariaUtils2.default.keys;
|
880 | var parentNode = this.parent.domNode;
|
881 | Array.prototype.forEach.call(this.subMenuItems, function (el) {
|
882 | el.addEventListener('keydown', function (event) {
|
883 | var prevDef = false;
|
884 | switch (event.keyCode) {
|
885 | case keys.down:
|
886 | _this.gotoSubIndex(_this.subIndex + 1);
|
887 | prevDef = true;
|
888 | break;
|
889 | case keys.up:
|
890 | _this.gotoSubIndex(_this.subIndex - 1);
|
891 | prevDef = true;
|
892 | break;
|
893 | case keys.tab:
|
894 | _ariaUtils2.default.triggerEvent(parentNode, 'mouseleave');
|
895 | break;
|
896 | case keys.enter:
|
897 | case keys.space:
|
898 | prevDef = true;
|
899 | event.currentTarget.click();
|
900 | break;
|
901 | }
|
902 | if (prevDef) {
|
903 | event.preventDefault();
|
904 | event.stopPropagation();
|
905 | }
|
906 | return false;
|
907 | });
|
908 | });
|
909 | };
|
910 |
|
911 | exports.default = SubMenu;
|
912 |
|
913 | })
|
914 |
|
915 | }); |
\ | No newline at end of file |