Skip to content

Commit

Permalink
Merge pull request #899 from City-of-Helsinki/UHF-9031
Browse files Browse the repository at this point in the history
UHF-9031
  • Loading branch information
rpnykanen authored Feb 1, 2024
2 parents d827f46 + 6c0ea11 commit 6614535
Show file tree
Hide file tree
Showing 16 changed files with 316 additions and 94 deletions.
2 changes: 1 addition & 1 deletion dist/css/styles.min.css

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion dist/js/accordion-item.min.js

This file was deleted.

2 changes: 1 addition & 1 deletion dist/js/accordion.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion dist/js/state.min.js

This file was deleted.

2 changes: 1 addition & 1 deletion hdbt.libraries.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ desktop-menu-toggle:
dist/js/desktop-menu-toggle.min.js: {}

accordion:
version: 1.3
version: 1.4
js:
dist/js/accordion.min.js: { weight: -50, attributes: { defer: true } }
dependencies:
Expand Down
82 changes: 43 additions & 39 deletions src/js/accordion/accordion-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,54 +12,60 @@ export default class AccordionItem {

static contentElement = 'accordion-item__content';

constructor(element, state) {
constructor(element, state, urlHash, parentCallback) {
this.element = element;
// Use header id as this objects id since header id is unique.
this.id = element.querySelector('.helfi-accordion__header').id;
this.localState = state;
this.isOpen = this.localState.loadItemState(this.id);
// Allow updating the accordion state when the item's state changes.
this.parentCallback = parentCallback;

// Use header id as this objects id since header id is unique.
this._id = element.querySelector('.helfi-accordion__header').id;
this._isOpen = this.localState.loadItemState(this._id);

this.element.style = '--js-accordion-open-time:0s'; // do not animate accordions on pageload
this.setHidden();
this.addEventListeners();
// Open accordion element by anchor link.
// TODO: UHF-8775 Figure out why javascript cannot find elements at this point (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8775).
// Possibly due to other timeouts
setTimeout(()=>{
this.handleLinkAnchor();
// Update element aria-expanded.
this.setAriaOpen();
this.element.style = null; // allow animating accordions after pageload
}, 100);
this.handleLinkAnchor(urlHash);
this.setAriaOpen();
this.element.style = null; // allow animating accordions after pageload
}

open = () => {
this.isOpen = true;
this._isOpen = true;
this.setAriaOpen();
this.setHidden();
this.parentCallback();
this.localState.saveItemState(this.id, this.isOpen);
};

close = () => {
this.isOpen = false;
this._isOpen = false;
this.setAriaOpen();
this.changeFocus();
this.setHidden();
this.parentCallback();
this.localState.saveItemState(this.id, this.isOpen);
};

closeWithoutFocus = () => {
this._isOpen = false;
this.setAriaOpen();
this.setHidden();
this.parentCallback();
this.localState.saveItemState(this.id, this.isOpen);
};

toggle = (event) => {
if (!AccordionItem.isClick(event.which)) return;
if (this.isOpen) {
this.close();
} else {
this.open();
if (!AccordionItem.isClick(event.which)) {
return;
}
// eslint-disable-next-line no-unused-expressions
this.isOpen ? this.close() : this.open();
};

handleLinkAnchor = () => {
const {hash} = window.location;
if (!hash) return;
const item = this.element.querySelector(hash);
handleLinkAnchor = (urlHash) => {
if (!urlHash) return;
const item = this.element.querySelector(urlHash);
if (item) {
this.open();
item.scrollIntoView();
Expand All @@ -74,30 +80,28 @@ export default class AccordionItem {

setHidden = () => {
const contentElement = this.element.getElementsByClassName(AccordionItem.contentElement)[0];
if (this.isOpen) {
contentElement.classList.remove('is-hidden');
}
else {
contentElement.classList.add('is-hidden');
}
// eslint-disable-next-line no-unused-expressions
this.isOpen ? contentElement.classList.remove('is-hidden') : contentElement.classList.add('is-hidden');
};

changeFocus = () => {
this.element.querySelector(`.${AccordionItem.toggleElement}`).focus();
};
changeFocus = () => this.element.querySelector(`.${AccordionItem.toggleElement}`).focus();

addEventListeners = () => {
this.element.getElementsByClassName(AccordionItem.toggleElement)[0].addEventListener('mouseup', this.toggle);
this.element.getElementsByClassName(AccordionItem.toggleElement)[0].addEventListener('keypress', this.toggle);
const toggleElement = this.element.getElementsByClassName(AccordionItem.toggleElement)[0];
toggleElement.addEventListener('mouseup', this.toggle);
toggleElement.addEventListener('keypress', this.toggle);

this.element.getElementsByClassName(AccordionItem.closeElement)[0].addEventListener('mouseup', this.close);
this.element.getElementsByClassName(AccordionItem.closeElement)[0].addEventListener('keypress', this.close);
const closeElement = this.element.getElementsByClassName(AccordionItem.closeElement)[0];
closeElement.addEventListener('mouseup', this.close);
closeElement.addEventListener('keypress', this.close);
};

static isClick(buttonKey) {
return buttonKey === 1 || buttonKey === 13 || buttonKey === 32;
};
}

get id() { return this._id; }

getId = () => this.id;
get isOpen() { return this._isOpen; }

}
Loading

0 comments on commit 6614535

Please sign in to comment.