wp-optimize
/
vendor
/
team-updraft
/
common-libs
/
src
/
updraft-theme
/
components
/
column-and-row
/
column-and-row.js
column-and-row.js in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/common-libs/src/updraft-theme/components/column-and-row/column-and-row.js
| 1 | import { TUHTMLElement } from "../../helpers/tu-html-element"; |
| 2 | |
| 3 | /** |
| 4 | * TUColumn web-component. |
| 5 | */ |
| 6 | class TUColumn extends TUHTMLElement { |
| 7 | static observedAttributes = ["width", "grow"]; |
| 8 | |
| 9 | /** |
| 10 | * Constructor. |
| 11 | */ |
| 12 | constructor() { |
| 13 | super(); |
| 14 | } |
| 15 | |
| 16 | /** |
| 17 | * Render function. |
| 18 | */ |
| 19 | render() { |
| 20 | // Initially set the width. |
| 21 | this.setWidth(); |
| 22 | } |
| 23 | |
| 24 | /** |
| 25 | * Set the column width. |
| 26 | */ |
| 27 | setWidth() { |
| 28 | const width = this.getAttribute("width"); |
| 29 | const grow = this.getAttribute("grow"); |
| 30 | |
| 31 | const widthCheckRegex = /^\d+(\.\d+)?(px|%|em|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc)$/; |
| 32 | |
| 33 | if (width && widthCheckRegex.test(width)) { |
| 34 | this.style.flex = `0 0 ${width}`; |
| 35 | } else if (grow) { |
| 36 | this.style.flex = grow; |
| 37 | } |
| 38 | } |
| 39 | |
| 40 | /** |
| 41 | * Attribute changed callback. |
| 42 | * |
| 43 | * @param {string} name Name of the attribute. |
| 44 | * @param {string} oldValue Old value. |
| 45 | * @param {string} newValue New value. |
| 46 | */ |
| 47 | attributeChangedCallback(name, oldValue, newValue) { |
| 48 | if (["width", "grow"].includes(name) && oldValue !== newValue) { |
| 49 | this.setWidth(); |
| 50 | } |
| 51 | } |
| 52 | |
| 53 | /** |
| 54 | * Connected callback. |
| 55 | */ |
| 56 | connectedCallback() { |
| 57 | super.connectedCallback(); |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | customElements.define("tu-column", TUColumn); |
| 62 |