Add textarea support to popup custom inputs (#5167) - Add 'textarea' as a valid input type alongside 'checkbox' and 'text' - Add optional `rows` property to control textarea height (default: 1) - Implement textarea rendering with proper label, placeholder, and styling - Update result collection logic to handle textarea values like text inputs - Update warning message to include textarea in supported types
Signed| @@ -73,7 +73,8 @@ export const POPUP_RESULT = { | ||
| 73 | 73 | * @property {string} label - The label text for the input |
| 74 | 74 | * @property {string?} [tooltip=null] - Optional tooltip icon displayed behind the label |
| 75 | 75 | * @property {boolean|string|undefined} [defaultState=false] - The default state when opening the popup (false if not set) |
| 76 | 76 | * @property {string('checkbox'|'text'|'textarea')?} [type='checkbox'] - The type of the input (default is checkbox) |
| 77 | + * @property {number?} [rows=1] - The number of rows for the input field, if the input is 'textarea' | |
| 77 | 78 | */ |
| 78 | 79 | |
| 79 | 80 | /** |
| @@ -307,8 +308,28 @@ export class Popup { | ||
| 307 | 308 | label.appendChild(inputElement); |
| 308 | 309 | |
| 309 | 310 | this.inputControls.appendChild(label); |
| 311 | + } else if (input.type === 'textarea') { | |
| 312 | + const label = document.createElement('label'); | |
| 313 | + label.classList.add('text_label', 'justifyCenter'); | |
| 314 | + label.setAttribute('for', input.id); | |
| 315 | + | |
| 316 | + const inputElement = document.createElement('textarea'); | |
| 317 | + inputElement.classList.add('text_pole', 'result-control'); | |
| 318 | + inputElement.id = input.id; | |
| 319 | + inputElement.value = String(input.defaultState ?? ''); | |
| 320 | + inputElement.placeholder = input.tooltip ?? ''; | |
| 321 | + inputElement.rows = input.rows ?? 1; | |
| 322 | + | |
| 323 | + const labelText = document.createElement('span'); | |
| 324 | + labelText.innerText = input.label; | |
| 325 | + labelText.dataset.i18n = input.label; | |
| 326 | + | |
| 327 | + label.appendChild(labelText); | |
| 328 | + label.appendChild(inputElement); | |
| 329 | + | |
| 330 | + this.inputControls.appendChild(label); | |
| 310 | 331 | } else { |
| 311 | 332 | console.warn('Unknown custom input type. Only checkbox, text and texttextarea are supported.', input); |
| 312 | 333 | return; |
| 313 | 334 | } |
| 314 | 335 | }); |
| @@ -583,7 +604,7 @@ export class Popup { | ||
| 583 | 604 | this.inputResults = new Map(this.customInputs.map(input => { |
| 584 | 605 | /** @type {HTMLInputElement} */ |
| 585 | 606 | const inputControl = this.dlg.querySelector(`#${input.id}`); |
| 586 | 607 | const value = input.type === ['text', 'textarea'].includes(input.type) ? inputControl.value : inputControl.checked; |
| 587 | 608 | return [inputControl.id, value]; |
| 588 | 609 | })); |
| 589 | 610 | } |