-
Notifications
You must be signed in to change notification settings - Fork 0
/
toggle-trait.ts
44 lines (39 loc) · 1.48 KB
/
toggle-trait.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import {XtalDecor, define, SelfReferentialHTMLElement, EventSettings, PropAction, AttributeProps, mergeProps} from 'xtal-decor/xtal-decor.js';
const init = ({self}: SelfReferentialHTMLElement) => {
let buttonEl = self;
self.dataset.pressed = 'false';
}
const clickHandler = ({self}: SelfReferentialHTMLElement) => {
// const currVal = self.getAttribute(ap);
// self.setAttribute(ap, currVal === 'true' ? 'false' : 'true');
self.dataset.pressed = self.dataset.pressed === 'false' ? 'true' : 'false';
let button = self as HTMLButtonElement;
if(self.localName !== 'button' && self.shadowRoot !== null){
const clickedButton = self.shadowRoot.activeElement as HTMLButtonElement;
if(clickedButton !== null) button = clickedButton;
}
if(button.localName === 'button'){
button.setAttribute('aria-pressed', self.dataset.pressed);
}
}
const on = {
click: clickHandler
} as EventSettings;
export class ToggleTrait extends XtalDecor<SelfReferentialHTMLElement>{
static is = 'toggle-trait';
// static attributeProps: any = ({buttonIsInShadowRoot}: ToggleTrait) => {
// const ap = {
// bool: [buttonIsInShadowRoot]
// } as AttributeProps;
// return mergeProps(ap, XtalDecor.props);
// };
constructor(){
super();
if(this.upgrade === undefined) this.upgrade = 'button';
}
init = init;
on = on;
actions = [];
//buttonIsInShadowRoot: boolean | undefined;
}
define(ToggleTrait);