93 lines
1.9 KiB
JavaScript
93 lines
1.9 KiB
JavaScript
// saladui/components/collapsible.js
|
|
import Component from "../core/component";
|
|
import SaladUI from "../index";
|
|
|
|
class CollapsibleComponent extends Component {
|
|
constructor(el, hookContext) {
|
|
super(el, { hookContext });
|
|
|
|
// Initialize core properties
|
|
this.trigger = this.getPart("trigger");
|
|
this.content = this.getPart("content");
|
|
|
|
// Set keyboard navigation defaults
|
|
this.config.preventDefaultKeys = ["Enter", " "];
|
|
}
|
|
|
|
getComponentConfig() {
|
|
return {
|
|
stateMachine: {
|
|
closed: {
|
|
enter: "onClosedEnter",
|
|
transitions: {
|
|
toggle: "open",
|
|
open: "open",
|
|
},
|
|
},
|
|
open: {
|
|
enter: "onOpenEnter",
|
|
transitions: {
|
|
toggle: "closed",
|
|
close: "closed",
|
|
},
|
|
},
|
|
},
|
|
events: {
|
|
closed: {
|
|
keyMap: {
|
|
Enter: "toggle",
|
|
" ": "toggle",
|
|
},
|
|
},
|
|
open: {
|
|
keyMap: {
|
|
Enter: "toggle",
|
|
" ": "toggle",
|
|
},
|
|
},
|
|
},
|
|
hiddenConfig: {
|
|
closed: {
|
|
content: true,
|
|
},
|
|
open: {
|
|
content: false,
|
|
},
|
|
},
|
|
ariaConfig: {
|
|
trigger: {
|
|
all: {
|
|
controls: () => this.getPartId("content"),
|
|
},
|
|
open: {
|
|
expanded: "true",
|
|
},
|
|
closed: {
|
|
expanded: "false",
|
|
},
|
|
},
|
|
content: {
|
|
all: {
|
|
labelledby: () => this.getPartId("trigger"),
|
|
role: "region",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
// State handlers
|
|
onOpenEnter() {
|
|
this.pushEvent("opened");
|
|
}
|
|
|
|
onClosedEnter() {
|
|
this.pushEvent("closed");
|
|
}
|
|
}
|
|
|
|
// Register the component
|
|
SaladUI.register("collapsible", CollapsibleComponent);
|
|
|
|
export default CollapsibleComponent;
|