wp-optimize
/
vendor
/
team-updraft
/
common-libs
/
src
/
updraft-theme
/
components
/
button
/
button.js
button.js in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.7.0, at vendor/team-updraft/common-libs/src/updraft-theme/components/button/button.js
| 1 | import { tu_theme_get_template } from "../../helpers/tu-get-template"; |
| 2 | import { TUHTMLElement } from "../../helpers/tu-html-element"; |
| 3 | |
| 4 | /** |
| 5 | * TUButton web-component. |
| 6 | */ |
| 7 | class TUButton extends TUHTMLElement { |
| 8 | static observedAttributes = ["disabled", "icon-left", "icon-right", "type", "theme", "size"]; |
| 9 | typeAndThemeCompatibility = { |
| 10 | 'cta': ['primary', 'error', 'info', 'success', 'premium'], |
| 11 | 'secondary': ['primary', 'error', 'info', 'success', 'premium'], |
| 12 | 'tertiary': ['primary', 'error', 'info', 'success', 'white', 'grey'], |
| 13 | 'icon': ['primary', 'error', 'info', 'success', 'warning', 'white'], |
| 14 | 'icon-basic': [], |
| 15 | } |
| 16 | |
| 17 | /** |
| 18 | * Constructor. |
| 19 | */ |
| 20 | constructor() { |
| 21 | super(); |
| 22 | } |
| 23 | |
| 24 | /** |
| 25 | * Attribute changed callback. |
| 26 | * |
| 27 | * @param {string} name Name of the attribute. |
| 28 | * @param {string} oldValue Old value. |
| 29 | * @param {string} newValue New value. |
| 30 | */ |
| 31 | attributeChangedCallback(name, oldValue, newValue) { |
| 32 | const innerButton = this.querySelector('button'); |
| 33 | |
| 34 | if (innerButton) { |
| 35 | innerButton.setAttribute(name, newValue); |
| 36 | } |
| 37 | } |
| 38 | |
| 39 | render() { |
| 40 | const attributes = { |
| 41 | innerContent: this.innerText.trim(), |
| 42 | iconLeft: this.getAttribute("icon-left"), |
| 43 | iconRight: this.getAttribute("icon-right"), |
| 44 | }; |
| 45 | |
| 46 | const buttonType = this.getAttribute("type"); |
| 47 | const buttonTheme = this.getAttribute("theme"); |
| 48 | |
| 49 | // If the type of the button is not compatible with them then return early. |
| 50 | if (buttonType && buttonTheme && this.typeAndThemeCompatibility[buttonType] && !this.typeAndThemeCompatibility[buttonType].includes(buttonTheme)) { |
| 51 | console.error(`"${buttonType}" type button is not compatible with "${buttonTheme}" theme.`); |
| 52 | return; |
| 53 | } |
| 54 | |
| 55 | this.innerHTML = tu_theme_get_template( |
| 56 | "button-templates-template", |
| 57 | attributes |
| 58 | ); |
| 59 | |
| 60 | // Propagate all the attributes from this element to the inner button element. |
| 61 | const innerButton = this.querySelector("button"); |
| 62 | |
| 63 | if (innerButton) { |
| 64 | for (const attr of this.attributes) { |
| 65 | innerButton.setAttribute(attr.name, attr.value); |
| 66 | } |
| 67 | } |
| 68 | } |
| 69 | |
| 70 | /** |
| 71 | * Connected callback. |
| 72 | */ |
| 73 | connectedCallback() { |
| 74 | super.connectedCallback(); |
| 75 | } |
| 76 | } |
| 77 | |
| 78 | customElements.define("tu-button", TUButton); |
| 79 |