100 lines
2.7 KiB
JavaScript
100 lines
2.7 KiB
JavaScript
class ButtonComponent extends HTMLElement {
|
|
/**
|
|
* Parameters
|
|
* - btnClasses: Additional classes to add to the block.
|
|
* - element: The element to use for the button. Defaults to 'a'.
|
|
* - url: The URL to link to.
|
|
* - target: The target for the link.
|
|
* - title: The text to display on the button.
|
|
* - ariaLabel: The ARIA label for the button.
|
|
* - color: The color of the button.
|
|
* - variant: The variant of the button.
|
|
* - size: The size of the button.
|
|
* - width: The width of the button.
|
|
*
|
|
*/
|
|
|
|
connectedCallback() {
|
|
if (!this.querySelector(this.getAttribute('element'))) {
|
|
this.append(document.createElement(this.getAttribute('element')));
|
|
}
|
|
|
|
this.update();
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return [
|
|
'btnClasses',
|
|
'el',
|
|
'element',
|
|
'type',
|
|
'url',
|
|
'target',
|
|
'title',
|
|
'ariaLabel',
|
|
'color',
|
|
'variant',
|
|
'size',
|
|
'width',
|
|
]
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.update();
|
|
}
|
|
|
|
update() {
|
|
const btn = this.querySelector(this.getAttribute('element'));
|
|
|
|
// console.log('[ButtonComponent] attributes', {
|
|
// btnClasses: this.getAttribute('btnClasses'),
|
|
// element: this.getAttribute('element'),
|
|
// type: this.getAttribute('type'),
|
|
// url: this.getAttribute('url'),
|
|
// target: this.getAttribute('target'),
|
|
// title: this.getAttribute('title'),
|
|
// ariaLabel: this.getAttribute('ariaLabel'),
|
|
// color: this.getAttribute('color'),
|
|
// variant: this.getAttribute('variant'),
|
|
// size: this.getAttribute('size'),
|
|
// width: this.getAttribute('width'),
|
|
// });
|
|
|
|
if (btn) {
|
|
btn.classList = this.getAttribute('btnClasses') || '';
|
|
|
|
if (this.getAttribute('element') == 'a') {
|
|
btn.href = this.getAttribute('url') || '#';
|
|
|
|
if (btn.target) {
|
|
btn.target = 'target="${this.getAttribute(target)}"';
|
|
}
|
|
}
|
|
|
|
const type = this.getAttribute('type');
|
|
if (type && this.getAttribute('element') !== 'a') {
|
|
btn.type = type;
|
|
}
|
|
|
|
btn.title = this.getAttribute('title') || '';
|
|
btn.textContent = this.getAttribute('title') || '';
|
|
|
|
if (!this.getAttribute('ariaLabel') && this.getAttribute('url')) {
|
|
btn.setAttribute('aria-label', `Link to ${this.getAttribute('url')}`);
|
|
} else {
|
|
btn.setAttribute('aria-label', this.getAttribute('ariaLabel'));
|
|
}
|
|
|
|
btn.setAttribute('aria-label', this.getAttribute('ariaLabel'));
|
|
btn.setAttribute('data-button-color', this.getAttribute('color'));
|
|
btn.setAttribute('data-button-variant', this.getAttribute('variant'));
|
|
btn.setAttribute('data-button-size', this.getAttribute('size'));
|
|
btn.setAttribute('data-button-width', this.getAttribute('width'));
|
|
}
|
|
}
|
|
}
|
|
|
|
export const registerButtonComponent = () => {
|
|
customElements.define('x-button', ButtonComponent);
|
|
}
|