2023-04-18 21:20:02 +00:00
|
|
|
import {slideUp, slideDown} from '../services/animations';
|
|
|
|
import {Component} from './component';
|
2017-08-06 20:08:03 +00:00
|
|
|
|
2022-11-15 16:04:46 +00:00
|
|
|
export class ExpandToggle extends Component {
|
2017-08-06 20:08:03 +00:00
|
|
|
|
2023-04-19 14:20:04 +00:00
|
|
|
setup() {
|
2022-11-15 16:04:46 +00:00
|
|
|
this.targetSelector = this.$opts.targetSelector;
|
|
|
|
this.isOpen = this.$opts.isOpen === 'true';
|
|
|
|
this.updateEndpoint = this.$opts.updateEndpoint;
|
2019-04-14 12:01:51 +00:00
|
|
|
|
|
|
|
// Listener setup
|
2022-11-15 16:04:46 +00:00
|
|
|
this.$el.addEventListener('click', this.click.bind(this));
|
2017-08-06 20:08:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
open(elemToToggle) {
|
2019-06-07 15:00:34 +00:00
|
|
|
slideDown(elemToToggle, 200);
|
2017-08-06 20:08:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
close(elemToToggle) {
|
2019-06-07 15:00:34 +00:00
|
|
|
slideUp(elemToToggle, 200);
|
2017-08-06 20:08:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
click(event) {
|
|
|
|
event.preventDefault();
|
2019-04-14 12:01:51 +00:00
|
|
|
|
2022-11-15 16:04:46 +00:00
|
|
|
const matchingElems = document.querySelectorAll(this.targetSelector);
|
2023-04-18 21:20:02 +00:00
|
|
|
for (const match of matchingElems) {
|
2023-04-19 14:20:04 +00:00
|
|
|
const action = this.isOpen ? this.close : this.open;
|
|
|
|
action(match);
|
2017-08-06 20:08:03 +00:00
|
|
|
}
|
2019-04-14 12:01:51 +00:00
|
|
|
|
2017-08-06 20:08:03 +00:00
|
|
|
this.isOpen = !this.isOpen;
|
2019-04-14 12:01:51 +00:00
|
|
|
this.updateSystemAjax(this.isOpen);
|
|
|
|
}
|
|
|
|
|
|
|
|
updateSystemAjax(isOpen) {
|
|
|
|
window.$http.patch(this.updateEndpoint, {
|
2023-04-18 21:20:02 +00:00
|
|
|
expand: isOpen ? 'true' : 'false',
|
2019-04-14 12:01:51 +00:00
|
|
|
});
|
2017-08-06 20:08:03 +00:00
|
|
|
}
|
|
|
|
|
2023-04-18 21:20:02 +00:00
|
|
|
}
|