1 | import { I18n } from './i18n';
|
2 | import $ from './jquery';
|
3 | import skate from './internal/skate';
|
4 | import globalize from './internal/globalize';
|
5 | import widget from './internal/widget';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | function Navigation (selector) {
|
17 | this.$el = $(selector).closest('.aui-nav');
|
18 |
|
19 |
|
20 | if (this.$el.length > 1) {
|
21 | return this.$el.map(function (idx, elm) {
|
22 | return new Navigation(elm);
|
23 | })[0];
|
24 | }
|
25 |
|
26 |
|
27 | if (this.$el.data('aui-navigation')) {
|
28 | return this.$el.data('aui-navigation');
|
29 | }
|
30 |
|
31 | this.$el.data('aui-navigation', this);
|
32 |
|
33 | this.$treeParent = this.$el.parent('li[aria-expanded]');
|
34 | this.$subtreeToggleIcon = this.$treeParent
|
35 | .children('.aui-nav-subtree-toggle')
|
36 | .children('span.aui-icon');
|
37 |
|
38 |
|
39 | this.$el.children('li:has(.aui-nav-selected)').addClass('aui-nav-child-selected');
|
40 |
|
41 |
|
42 | var $selected = this.$el.children('.aui-nav-selected');
|
43 | $selected
|
44 | .parents('.aui-nav > [aria-expanded=false]')
|
45 | .add($selected.filter('[aria-expanded=false]'))
|
46 | .each(function () {
|
47 | var nav = navigationWidget($(this).children('.aui-nav'));
|
48 | nav.expand();
|
49 | });
|
50 |
|
51 |
|
52 | var $togglers = this.$el.find('> li[aria-expanded] > .aui-nav-subtree-toggle');
|
53 | $togglers.on('click', function () {
|
54 | var nav = navigationWidget($(this).siblings('.aui-nav'));
|
55 | nav.toggle();
|
56 | });
|
57 |
|
58 |
|
59 | $togglers.each(function () {
|
60 | var $parent = $(this).parent('li[aria-expanded]');
|
61 | var $icon = $(this).find('.aui-icon');
|
62 | var isListItemExpanded = $parent.attr('aria-expanded') === 'true';
|
63 |
|
64 | $icon.text(
|
65 | isListItemExpanded ?
|
66 | I18n.getText('aui.words.collapse') :
|
67 | I18n.getText('aui.words.expand')
|
68 | );
|
69 | })
|
70 |
|
71 | return this;
|
72 | }
|
73 |
|
74 | Navigation.prototype.isNested = function () {
|
75 | return this.$treeParent.length === 1;
|
76 | };
|
77 |
|
78 | Navigation.prototype.isCollapsed = function () {
|
79 | return this.$treeParent.attr('aria-expanded') === 'false';
|
80 | };
|
81 |
|
82 | Navigation.prototype.expand = function () {
|
83 | this.$treeParent.attr('aria-expanded', 'true');
|
84 | this.$subtreeToggleIcon
|
85 | .removeClass('aui-iconfont-collapsed')
|
86 | .addClass('aui-iconfont-expanded')
|
87 | .text(I18n.getText('aui.words.collapse'));
|
88 | return this;
|
89 | };
|
90 |
|
91 | Navigation.prototype.collapse = function () {
|
92 | this.$treeParent.attr('aria-expanded', 'false');
|
93 | this.$subtreeToggleIcon
|
94 | .removeClass('aui-iconfont-expanded')
|
95 | .addClass('aui-iconfont-collapsed')
|
96 | .text(I18n.getText('aui.words.expand'));
|
97 | return this;
|
98 | };
|
99 |
|
100 | Navigation.prototype.toggle = function () {
|
101 | if (this.isCollapsed()) {
|
102 | this.expand();
|
103 | } else {
|
104 | this.collapse();
|
105 | }
|
106 | return this;
|
107 | };
|
108 |
|
109 | const navigationWidget = widget('navigation', Navigation);
|
110 |
|
111 |
|
112 | const NavigationEl = skate('aui-nav', {
|
113 | type: skate.type.CLASSNAME,
|
114 | attached: function (element) {
|
115 | new Navigation(element);
|
116 | },
|
117 | detached: function (element) {
|
118 | $(element).removeData();
|
119 | }
|
120 | });
|
121 |
|
122 | globalize('navigation', navigationWidget);
|
123 |
|
124 | export default navigationWidget;
|
125 | export {
|
126 | NavigationEl
|
127 | };
|