mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-27 06:01:54 +03:00
Made chapter toggle in book sidebar nav more consistent
- Now has a hover state to match other items. - Now spans the full sidebar with like other items. - Also updated chapter-toggle to a chapter-contents component, following the newer component system.
This commit is contained in:
37
resources/js/components/chapter-contents.js
Normal file
37
resources/js/components/chapter-contents.js
Normal file
@ -0,0 +1,37 @@
|
||||
import {slideUp, slideDown} from "../services/animations";
|
||||
|
||||
/**
|
||||
* @extends {Component}
|
||||
*/
|
||||
class ChapterContents {
|
||||
|
||||
setup() {
|
||||
this.list = this.$refs.list;
|
||||
this.toggle = this.$refs.toggle;
|
||||
|
||||
this.isOpen = this.toggle.classList.contains('open');
|
||||
this.toggle.addEventListener('click', this.click.bind(this));
|
||||
}
|
||||
|
||||
open() {
|
||||
this.toggle.classList.add('open');
|
||||
this.toggle.setAttribute('aria-expanded', 'true');
|
||||
slideDown(this.list, 180);
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.toggle.classList.remove('open');
|
||||
this.toggle.setAttribute('aria-expanded', 'false');
|
||||
slideUp(this.list, 180);
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
click(event) {
|
||||
event.preventDefault();
|
||||
this.isOpen ? this.close() : this.open();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default ChapterContents;
|
Reference in New Issue
Block a user