UNPKG

9.21 kBJavaScriptView Raw
1function _typeof(obj) {
2 if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
3 _typeof = function _typeof(obj) {
4 return typeof obj;
5 };
6 } else {
7 _typeof = function _typeof(obj) {
8 return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
9 };
10 }
11
12 return _typeof(obj);
13}
14
15function _classCallCheck(instance, Constructor) {
16 if (!(instance instanceof Constructor)) {
17 throw new TypeError("Cannot call a class as a function");
18 }
19}
20
21function _defineProperties(target, props) {
22 for (var i = 0; i < props.length; i++) {
23 var descriptor = props[i];
24 descriptor.enumerable = descriptor.enumerable || false;
25 descriptor.configurable = true;
26 if ("value" in descriptor) descriptor.writable = true;
27 Object.defineProperty(target, descriptor.key, descriptor);
28 }
29}
30
31function _createClass(Constructor, protoProps, staticProps) {
32 if (protoProps) _defineProperties(Constructor.prototype, protoProps);
33 if (staticProps) _defineProperties(Constructor, staticProps);
34 return Constructor;
35}
36
37function _possibleConstructorReturn(self, call) {
38 if (call && (_typeof(call) === "object" || typeof call === "function")) {
39 return call;
40 }
41
42 return _assertThisInitialized(self);
43}
44
45function _assertThisInitialized(self) {
46 if (self === void 0) {
47 throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
48 }
49
50 return self;
51}
52
53function _get(target, property, receiver) {
54 if (typeof Reflect !== "undefined" && Reflect.get) {
55 _get = Reflect.get;
56 } else {
57 _get = function _get(target, property, receiver) {
58 var base = _superPropBase(target, property);
59
60 if (!base) return;
61 var desc = Object.getOwnPropertyDescriptor(base, property);
62
63 if (desc.get) {
64 return desc.get.call(receiver);
65 }
66
67 return desc.value;
68 };
69 }
70
71 return _get(target, property, receiver || target);
72}
73
74function _superPropBase(object, property) {
75 while (!Object.prototype.hasOwnProperty.call(object, property)) {
76 object = _getPrototypeOf(object);
77 if (object === null) break;
78 }
79
80 return object;
81}
82
83function _getPrototypeOf(o) {
84 _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
85 return o.__proto__ || Object.getPrototypeOf(o);
86 };
87 return _getPrototypeOf(o);
88}
89
90function _inherits(subClass, superClass) {
91 if (typeof superClass !== "function" && superClass !== null) {
92 throw new TypeError("Super expression must either be null or a function");
93 }
94
95 subClass.prototype = Object.create(superClass && superClass.prototype, {
96 constructor: {
97 value: subClass,
98 writable: true,
99 configurable: true
100 }
101 });
102 if (superClass) _setPrototypeOf(subClass, superClass);
103}
104
105function _setPrototypeOf(o, p) {
106 _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
107 o.__proto__ = p;
108 return o;
109 };
110
111 return _setPrototypeOf(o, p);
112}
113
114import NavigationMenuPanel from './navigation-menu-panel';
115import on from '../../globals/js/misc/on';
116import settings from '../../globals/js/settings';
117import onFocusOutByKeyboard from '../../globals/js/misc/on-focus-by-keyboard';
118
119var ProductSwitcher =
120/*#__PURE__*/
121function (_NavigationMenuPanel) {
122 _inherits(ProductSwitcher, _NavigationMenuPanel);
123 /**
124 * A navigation menu
125 * @extends NavigationMenuPanel
126 * @param {HTMLElement} element The element working as a selector.
127 * @param {Object} [options] The component options.
128 * @param {string} [options.selectorInit] The CSS class to find product
129 * switchers
130 * @param {string} [options.attribInitTarget] The attribute name in the
131 * launcher buttons to find target product switcher
132 * @param {string} [options.classProductSwitcherExpanded] The CSS class
133 * for an expanded product switcher
134 */
135
136
137 function ProductSwitcher(element, options) {
138 var _this;
139
140 _classCallCheck(this, ProductSwitcher);
141
142 _this = _possibleConstructorReturn(this, _getPrototypeOf(ProductSwitcher).call(this, element, options));
143 _this.current = '';
144 _this.triggerButtonIds = new Set();
145
146 _this._handleFocusOut = function (event) {
147 if (_this.element.contains(event.relatedTarget)) {
148 return;
149 }
150
151 var currentTriggerButton = _this.element.ownerDocument.getElementById(_this.current);
152
153 if (currentTriggerButton && event.relatedTarget && !event.relatedTarget.matches(_this.options.selectorFloatingMenus)) {
154 currentTriggerButton.focus();
155 }
156 };
157
158 _this._handleKeyDown = function (event) {
159 var isExpanded = !_this.element.hasAttribute('hidden');
160
161 if (event.which === 27 && isExpanded) {
162 var triggerButton = _this.current;
163
164 _this.changeState(_this.constructor.SELECT_NONE);
165
166 _this.element.ownerDocument.getElementById(triggerButton).focus();
167 }
168 };
169
170 _this.createdByLauncher = function (event) {
171 var isExpanded = _this.element.classList.contains(_this.options.classProductSwitcherExpanded);
172
173 var launcher = event.delegateTarget;
174
175 if (!launcher.id) {
176 launcher.id = "__carbon-product-switcher-launcher-".concat(Math.random().toString(36).substr(2));
177 }
178
179 var current = launcher.id;
180
181 _this.changeState(isExpanded && _this.current === current ? _this.constructor.SELECT_NONE : current);
182 };
183
184 _this.shouldStateBeChanged = function (current) {
185 return _this.current !== current;
186 };
187
188 _this._changeState = function (state, callback) {
189 _this.element.classList.toggle(_this.options.classProductSwitcherExpanded, state !== _this.constructor.SELECT_NONE);
190
191 _this.current = state;
192
193 if (_this.current !== _this.constructor.SELECT_NONE) {
194 _this.triggerButtonIds.add(_this.current);
195 } // deactivate all other trigger buttons
196
197
198 _this.triggerButtonIds.forEach(function (id) {
199 var button = _this.element.ownerDocument.getElementById(id);
200
201 var label = button.getAttribute(_this.options.attribLabelExpand);
202 button.classList.remove(_this.options.classNavigationMenuPanelHeaderActionActive);
203 button.setAttribute('aria-label', label);
204 button.setAttribute('title', label);
205 }); // set active trigger button attributes
206
207
208 var currentTriggerButton = _this.element.ownerDocument.getElementById(_this.current);
209
210 if (currentTriggerButton) {
211 var label = currentTriggerButton.getAttribute(_this.options.attribLabelCollapse);
212 currentTriggerButton.classList.toggle(_this.options.classNavigationMenuPanelHeaderActionActive);
213 currentTriggerButton.setAttribute('aria-label', label);
214 currentTriggerButton.setAttribute('title', label);
215 }
216
217 if (state !== _this.constructor.SELECT_NONE) {
218 _this.element.setAttribute('tabindex', '0');
219
220 _this.element.focus();
221 } else {
222 _this.element.setAttribute('tabindex', '-1');
223 }
224
225 callback();
226 };
227
228 _this.manage(on(element, 'keydown', _this._handleKeyDown));
229
230 _this.manage(onFocusOutByKeyboard(element, 'blur', _this._handleFocusOut));
231
232 return _this;
233 }
234 /**
235 * id of currently active trigger button
236 * @type {string}
237 */
238
239
240 _createClass(ProductSwitcher, [{
241 key: "release",
242 value: function release() {
243 this.triggerButtonIds.clear();
244 return _get(_getPrototypeOf(ProductSwitcher.prototype), "release", this).call(this);
245 }
246 /**
247 * The map associating DOM element and ProductSwitcher instance.
248 * @member ProductSwitcher.components
249 * @type {WeakMap}
250 */
251
252 }], [{
253 key: "options",
254
255 /**
256 * The component options.
257 * If `options` is specified in the constructor,
258 * {@linkcode ProductSwitcher.create .create()}, or
259 * {@linkcode ProductSwitcher.init .init()},
260 * properties in this object are overriden for the instance being create and
261 * how {@linkcode ProductSwitcher.init .init()} works.
262 * @member ProductSwitcher.options
263 * @type {Object}
264 * @property {string} selectorInit The CSS class to find popup navs.
265 * @property {string} attribInitTarget The attribute name in the
266 * launcher buttons to find target popup nav.
267 * @property {string[]} initEventNames The events that the component
268 * will handles
269 */
270 get: function get() {
271 var prefix = settings.prefix;
272 return Object.assign(Object.create(NavigationMenuPanel.options), {
273 selectorInit: '[data-product-switcher]',
274 selectorFloatingMenus: "\n .".concat(prefix, "--overflow-menu-options,\n .").concat(prefix, "--overflow-menu-options *,\n .").concat(prefix, "--tooltip,\n .").concat(prefix, "--tooltip *,\n .flatpicker-calendar,\n .flatpicker-calendar *\n "),
275 attribInitTarget: 'data-product-switcher-target',
276 classProductSwitcherExpanded: "".concat(prefix, "--panel--expanded")
277 });
278 }
279 }]);
280
281 ProductSwitcher.SELECT_NONE = '__carbon-product-switcher-launcher-NONE';
282 ProductSwitcher.components = new WeakMap();
283 return ProductSwitcher;
284}(NavigationMenuPanel);
285
286export { ProductSwitcher as default };
\No newline at end of file