Newer
Older
import { h } from "@stencil/core";
export class AccordionItem {
constructor() {
this.ready = false;
}
componentDidLoad() {
this.ready = true;
}
function collapseSection(element) {
element.style.height = 0 + 'px';
element.setAttribute('data-collapsed', 'true');
}
function expandSection(element) {
element.style.height = element.scrollHeight + 'px';
element.setAttribute('data-collapsed', 'false');
}
if (this.ready) {
document.querySelectorAll('.hy-accordion-container').forEach(function (accordion) {
const allowMultiple = accordion.hasAttribute('data-allow-multiple');
const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
accordion.addEventListener('click', function (event) {
let target = event.target;
if (target && target.classList.contains('hy-accordion__button')) {
let targetParent = target.closest('.hy-accordion__item');
let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
const isExpanded = target.getAttribute('aria-expanded') == 'true';
const active = accordion.querySelector('[aria-expanded="true"]');
if (!allowMultiple && active && active !== target) {
active.setAttribute('aria-expanded', 'false');
collapseSection(targetContent);
if (targetParent.classList.contains('hy-accordion__item__is-open')) {
targetParent.classList.remove('hy-accordion__item__is-open');
}
document.getElementById(active.getAttribute('aria-controls')).setAttribute('aria-hidden', 'true');
if (!allowToggle) {
active.removeAttribute('aria-disabled');
}
if (!isExpanded) {
expandSection(targetContent);
target.setAttribute('aria-expanded', 'true');
targetParent.classList.add('hy-accordion__item__is-open');
document.getElementById(target.getAttribute('aria-controls')).setAttribute('aria-hidden', 'false');
if (!allowToggle) {
target.setAttribute('aria-disabled', 'true');
}
else if (allowToggle && isExpanded) {
target.setAttribute('aria-expanded', 'false');
collapseSection(targetContent);
if (targetParent.classList.contains('hy-accordion__item__is-open')) {
targetParent.classList.remove('hy-accordion__item__is-open');
}
document.getElementById(target.getAttribute('aria-controls')).setAttribute('aria-hidden', 'true');
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
if (accordion) {
accordion.addEventListener('keydown', function (event) {
var target = event.target;
var key = event.which.toString();
// 33 = Page Up, 34 = Page Down
var ctrlModifier = (event.ctrlKey && key.match(/33|34/));
// Is this coming from an accordion header?
if (target.classList.contains('hy-accordion__button')) {
// Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
// 38 = Up, 40 = Down
if (key.match(/38|40/) || ctrlModifier) {
console.log(triggers, target);
var index = triggers.indexOf(target);
var direction = (key.match(/34|40/)) ? 1 : -1;
var length = triggers.length;
var newIndex = (index + length + direction) % length;
console.log(triggers, index);
triggers[newIndex].focus();
event.preventDefault();
}
else if (key.match(/35|36/)) {
// 35 = End, 36 = Home keyboard operations
switch (key) {
// Go to first accordion
case '36':
triggers[0].focus();
break;
// Go to last accordion
case '35':
triggers[triggers.length - 1].focus();
break;
}
event.preventDefault();
}
}
});
accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
trigger.addEventListener('focus', function () {
trigger.classList.add('focus');
});
trigger.addEventListener('blur', function () {
trigger.classList.remove('focus');
});
});
});
}
const classAttributes = ["hy-accordion__item"];
const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
return (h("div", { class: classAttributes.join(" ") },
h("hy-heading", { heading: "h3", class: "hy-accordion--heading" },
h("button", { "aria-expanded": "false", "aria-controls": `${titleAsId}--content`, class: "hy-accordion__button", id: `${titleAsId}--title` },
h("span", { class: "hy-accordion--heading__icon" },
h("hy-icon", { icon: 'hy-icon-caret-down', size: 16 })),
this.accordiontitle)),
h("div", { "aria-labelledBy": `${titleAsId}--title`, class: "hy-accordion__content", id: `${titleAsId}--content`, role: "region" },
h("div", { class: "hy-accordion__content--inner-wrapper" },
h("slot", null)))));
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
}
static get is() { return "hy-accordion-item"; }
static get originalStyleUrls() { return {
"$": ["accordion-item.scss"]
}; }
static get styleUrls() { return {
"$": ["accordion-item.css"]
}; }
static get properties() { return {
"accordiontitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "accordiontitle",
"reflect": false
}
}; }
static get states() { return {
"ready": {}
}; }