keith/VDI-Starter
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Add field for ARIA label in button block

Browse Source
This commit is contained in:
Keith Solomon
2025-11-25 08:50:39 -06:00
parent f086c17d26
commit a1d2b59919
3 changed files with 133 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
static/js/components/button.js
View File

@@ -1,76 +1,99 @@
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.
* - color: The color of the button.
* - variant: The variant of the button.
* - size: The size of the button.
* - width: The width of the button.
*
*/
/**
* 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')));
}
connectedCallback() {
if (!this.querySelector(this.getAttribute('element'))) {
this.append(document.createElement(this.getAttribute('element')));
}
this.update();
}
this.update();
}
static get observedAttributes() {
return [
'btnClasses',
'el',
'element',
'type',
'url',
'target',
'title',
'color',
'variant',
'size',
'width',
]
}
static get observedAttributes() {
return [
'btnClasses',
'el',
'element',
'type',
'url',
'target',
'title',
'ariaLabel',
'color',
'variant',
'size',
'width',
]
}
attributeChangedCallback() {
this.update();
}
attributeChangedCallback() {
this.update();
}
update() {
const btn = this.querySelector(this.getAttribute('element'));
update() {
const btn = this.querySelector(this.getAttribute('element'));
if (btn) {
btn.classList = this.getAttribute('btnClasses') || '';
// 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 (this.getAttribute('element') == 'a') {
btn.href = this.getAttribute('url') || '#';
if (btn) {
btn.classList = this.getAttribute('btnClasses') || '';
if (btn.target) {
btn.target = 'target="${this.getAttribute(target)}"';
}
}
if (this.getAttribute('element') == 'a') {
btn.href = this.getAttribute('url') || '#';
const type = this.getAttribute('type');
if (type && this.getAttribute('element') !== 'a') {
btn.type = type;
}
if (btn.target) {
btn.target = 'target="${this.getAttribute(target)}"';
}
}
btn.title = this.getAttribute('title') || '';
btn.textContent = this.getAttribute('title') || '';
const type = this.getAttribute('type');
if (type && this.getAttribute('element') !== 'a') {
btn.type = type;
}
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'));
}
}
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);
customElements.define('x-button', ButtonComponent);
}