webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Updated a whole load more js components

Browse Source
This commit is contained in:
Dan Brown
2022-11-15 16:04:46 +00:00
parent b37e84dc10
commit db79167469
25 changed files with 152 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/components/collapsible.js
View File

@ -1,35 +1,37 @@
import {slideDown, slideUp} from "../services/animations";
import {Component} from "./component";
/**
* Collapsible
* Provides some simple logic to allow collapsible sections.
*/
class Collapsible {
export class Collapsible extends Component {
constructor(elem) {
this.elem = elem;
this.trigger = elem.querySelector('[collapsible-trigger]');
this.content = elem.querySelector('[collapsible-content]');
setup() {
this.container = this.$el;
this.trigger = this.$refs.trigger;
this.content = this.$refs.content;
if (!this.trigger) return;
this.trigger.addEventListener('click', this.toggle.bind(this));
this.openIfContainsError();
if (this.trigger) {
this.trigger.addEventListener('click', this.toggle.bind(this));
this.openIfContainsError();
}
}
open() {
this.elem.classList.add('open');
this.container.classList.add('open');
this.trigger.setAttribute('aria-expanded', 'true');
slideDown(this.content, 300);
}
close() {
this.elem.classList.remove('open');
this.container.classList.remove('open');
this.trigger.setAttribute('aria-expanded', 'false');
slideUp(this.content, 300);
}
toggle() {
if (this.elem.classList.contains('open')) {
if (this.container.classList.contains('open')) {
this.close();
} else {
this.open();
@ -43,6 +45,4 @@ class Collapsible {
}
}
}
export default Collapsible;
}