@primer/view-components
Version:
ViewComponents for the Primer Design System
194 lines (193 loc) • 8.97 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
/* eslint-disable custom-elements/expose-class-on-global */
import { controller, target, targets } from '@github/catalyst';
import { ActionListTruncationObserver } from '../alpha/action_list';
let NavListElement = class NavListElement extends HTMLElement {
constructor() {
super(...arguments);
_NavListElement_instances.add(this);
_NavListElement_truncationObserver.set(this, void 0);
}
connectedCallback() {
// groups are wrapped in <action-list>, which handles resizing on its own
if (this.topLevelList) {
__classPrivateFieldSet(this, _NavListElement_truncationObserver, new ActionListTruncationObserver(this.topLevelList), "f");
}
}
disconnectedCallback() {
if (this.topLevelList) {
__classPrivateFieldGet(this, _NavListElement_truncationObserver, "f").unobserve(this.topLevelList);
}
}
selectItemById(itemId) {
if (!itemId)
return false;
const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemById).call(this, itemId);
if (selectedItem) {
__classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
return true;
}
return false;
}
selectItemByHref(href) {
if (!href)
return false;
const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, href);
if (selectedItem) {
__classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
return true;
}
return false;
}
selectItemByCurrentLocation() {
const selectedItem = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByCurrentLocation).call(this);
if (selectedItem) {
__classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_select).call(this, selectedItem);
return true;
}
return false;
}
// expand collapsible item onClick
expandItem(item) {
item.nextElementSibling?.removeAttribute('data-hidden');
item.setAttribute('aria-expanded', 'true');
}
collapseItem(item) {
item.nextElementSibling?.setAttribute('data-hidden', '');
item.setAttribute('aria-expanded', 'false');
item.focus();
}
itemIsExpanded(item) {
if (item?.tagName === 'A') {
return true;
}
return item?.getAttribute('aria-expanded') === 'true';
}
// expand/collapse item
handleItemWithSubItemClick(e) {
const el = e.target;
if (!(el instanceof HTMLElement))
return;
const button = el.closest('button');
if (!button)
return;
if (this.itemIsExpanded(button)) {
this.collapseItem(button);
}
else {
this.expandItem(button);
}
/* eslint-disable-next-line no-restricted-syntax */
e.stopPropagation();
}
// collapse item
handleItemWithSubItemKeydown(e) {
const el = e.currentTarget;
if (!(el instanceof HTMLElement))
return;
let button = el.closest('button');
if (!button) {
const button_id = el.getAttribute('aria-labelledby');
if (button_id) {
button = document.getElementById(button_id);
}
else {
return;
}
}
if (this.itemIsExpanded(button) && e.key === 'Escape') {
this.collapseItem(button);
}
/* eslint-disable-next-line no-restricted-syntax */
e.stopPropagation();
}
};
_NavListElement_truncationObserver = new WeakMap();
_NavListElement_instances = new WeakSet();
_NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
// First we compare the selected link to data-item-id for each nav item
for (const navItem of this.items) {
if (navItem.classList.contains('ActionListItem--hasSubItem')) {
continue;
}
const keys = navItem.getAttribute('data-item-id')?.split(' ') || [];
if (keys.includes(itemId)) {
return navItem;
}
}
return null;
};
_NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
// If we didn't find a match, we compare the selected link to the href of each nav item
const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
if (selectedNavItem) {
return selectedNavItem.closest('.ActionListItem');
}
return null;
};
_NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
};
_NavListElement_select = function _NavListElement_select(navItem) {
const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
if (currentlySelectedItem)
__classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
navItem.classList.add('ActionListItem--navActive');
if (navItem.children.length > 0) {
navItem.children[0].setAttribute('aria-current', 'page');
}
const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
if (parentMenu) {
this.expandItem(parentMenu);
parentMenu.classList.add('ActionListContent--hasActiveSubItem');
}
};
_NavListElement_deselect = function _NavListElement_deselect(navItem) {
navItem.classList.remove('ActionListItem--navActive');
if (navItem.children.length > 0) {
navItem.children[0].removeAttribute('aria-current');
}
const parentMenu = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findParentMenu).call(this, navItem);
if (parentMenu) {
this.collapseItem(parentMenu);
parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
}
};
_NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
if (!navItem.classList.contains('ActionListItem--subItem'))
return null;
const parent = navItem.closest('li.ActionListItem--hasSubItem')?.querySelector('button.ActionListContent');
if (parent) {
return parent;
}
else {
return null;
}
};
__decorate([
targets
], NavListElement.prototype, "items", void 0);
__decorate([
target
], NavListElement.prototype, "topLevelList", void 0);
NavListElement = __decorate([
controller
], NavListElement);
export { NavListElement };