Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 1 | // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 | // Use of this source code is governed by a BSD-style license that can be |
| 3 | // found in the LICENSE file. |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 4 | |
Paul Lewis | 17e384e | 2020-01-08 15:46:51 | [diff] [blame] | 5 | import * as Common from '../common/common.js'; |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 6 | |
| 7 | import * as ARIAUtils from './ARIAUtils.js'; |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 8 | import {Toolbar, ToolbarButton} from './Toolbar.js'; |
| 9 | import {createInput, createTextButton, ElementFocusRestorer} from './UIUtils.js'; |
| 10 | import {VBox} from './Widget.js'; |
| 11 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 12 | /** |
| 13 | * @template T |
| 14 | */ |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 15 | export class ListWidget extends VBox { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 16 | /** |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 17 | * @param {!Delegate<T>} delegate |
Alex Rudenko | cd7a2f9 | 2020-04-27 12:02:37 | [diff] [blame] | 18 | * @param {boolean=} delegatesFocus |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 19 | */ |
Alex Rudenko | cd7a2f9 | 2020-04-27 12:02:37 | [diff] [blame] | 20 | constructor(delegate, delegatesFocus = true) { |
| 21 | super(true, delegatesFocus); |
Jack Franklin | 71519f8 | 2020-11-03 12:08:59 | [diff] [blame^] | 22 | this.registerRequiredCSS('ui/listWidget.css', {enableLegacyPatching: true}); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 23 | this._delegate = delegate; |
| 24 | |
| 25 | this._list = this.contentElement.createChild('div', 'list'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 26 | |
| 27 | this._lastSeparator = false; |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 28 | /** @type {?ElementFocusRestorer} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 29 | this._focusRestorer = null; |
| 30 | /** @type {!Array<T>} */ |
| 31 | this._items = []; |
| 32 | /** @type {!Array<boolean>} */ |
| 33 | this._editable = []; |
| 34 | /** @type {!Array<!Element>} */ |
| 35 | this._elements = []; |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 36 | /** @type {?Editor<T>} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 37 | this._editor = null; |
| 38 | /** @type {?T} */ |
| 39 | this._editItem = null; |
| 40 | /** @type {?Element} */ |
| 41 | this._editElement = null; |
| 42 | |
| 43 | /** @type {?Element} */ |
| 44 | this._emptyPlaceholder = null; |
| 45 | |
| 46 | this._updatePlaceholder(); |
| 47 | } |
| 48 | |
| 49 | clear() { |
| 50 | this._items = []; |
| 51 | this._editable = []; |
| 52 | this._elements = []; |
| 53 | this._lastSeparator = false; |
| 54 | this._list.removeChildren(); |
| 55 | this._updatePlaceholder(); |
| 56 | this._stopEditing(); |
| 57 | } |
| 58 | |
| 59 | /** |
| 60 | * @param {!T} item |
| 61 | * @param {boolean} editable |
| 62 | */ |
| 63 | appendItem(item, editable) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 64 | if (this._lastSeparator && this._items.length) { |
Tim van der Lippe | 47d0124 | 2020-05-01 16:06:46 | [diff] [blame] | 65 | const element = document.createElement('div'); |
| 66 | element.classList.add('list-separator'); |
| 67 | this._list.appendChild(element); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 68 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 69 | this._lastSeparator = false; |
| 70 | |
| 71 | this._items.push(item); |
| 72 | this._editable.push(editable); |
| 73 | |
| 74 | const element = this._list.createChild('div', 'list-item'); |
| 75 | element.appendChild(this._delegate.renderItem(item, editable)); |
| 76 | if (editable) { |
| 77 | element.classList.add('editable'); |
Alex Rudenko | ee06e41 | 2020-04-22 08:58:52 | [diff] [blame] | 78 | element.tabIndex = 0; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 79 | element.appendChild(this._createControls(item, element)); |
| 80 | } |
| 81 | this._elements.push(element); |
| 82 | this._updatePlaceholder(); |
| 83 | } |
| 84 | |
| 85 | appendSeparator() { |
| 86 | this._lastSeparator = true; |
| 87 | } |
| 88 | |
| 89 | /** |
| 90 | * @param {number} index |
| 91 | */ |
| 92 | removeItem(index) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 93 | if (this._editItem === this._items[index]) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 94 | this._stopEditing(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 95 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 96 | |
| 97 | const element = this._elements[index]; |
| 98 | |
| 99 | const previous = element.previousElementSibling; |
| 100 | const previousIsSeparator = previous && previous.classList.contains('list-separator'); |
| 101 | |
| 102 | const next = element.nextElementSibling; |
| 103 | const nextIsSeparator = next && next.classList.contains('list-separator'); |
| 104 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 105 | if (previousIsSeparator && (nextIsSeparator || !next)) { |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 106 | /** @type {!Element} */ (previous).remove(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 107 | } |
| 108 | if (nextIsSeparator && !previous) { |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 109 | /** @type {!Element} */ (next).remove(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 110 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 111 | element.remove(); |
| 112 | |
| 113 | this._elements.splice(index, 1); |
| 114 | this._items.splice(index, 1); |
| 115 | this._editable.splice(index, 1); |
| 116 | this._updatePlaceholder(); |
| 117 | } |
| 118 | |
| 119 | /** |
| 120 | * @param {number} index |
| 121 | * @param {!T} item |
| 122 | */ |
| 123 | addNewItem(index, item) { |
| 124 | this._startEditing(item, null, this._elements[index] || null); |
| 125 | } |
| 126 | |
| 127 | /** |
| 128 | * @param {?Element} element |
| 129 | */ |
| 130 | setEmptyPlaceholder(element) { |
| 131 | this._emptyPlaceholder = element; |
| 132 | this._updatePlaceholder(); |
| 133 | } |
| 134 | |
| 135 | /** |
| 136 | * @param {!T} item |
| 137 | * @param {!Element} element |
| 138 | * @return {!Element} |
| 139 | */ |
| 140 | _createControls(item, element) { |
Tim van der Lippe | e7f2705 | 2020-05-01 15:15:28 | [diff] [blame] | 141 | const controls = document.createElement('div'); |
| 142 | controls.classList.add('controls-container'); |
| 143 | controls.classList.add('fill'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 144 | controls.createChild('div', 'controls-gradient'); |
| 145 | |
| 146 | const buttons = controls.createChild('div', 'controls-buttons'); |
| 147 | |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 148 | const toolbar = new Toolbar('', buttons); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 149 | |
Paul Lewis | 17e384e | 2020-01-08 15:46:51 | [diff] [blame] | 150 | const editButton = new ToolbarButton(Common.UIString.UIString('Edit'), 'largeicon-edit'); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 151 | editButton.addEventListener(ToolbarButton.Events.Click, onEditClicked.bind(this)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 152 | toolbar.appendToolbarItem(editButton); |
| 153 | |
Paul Lewis | 17e384e | 2020-01-08 15:46:51 | [diff] [blame] | 154 | const removeButton = new ToolbarButton(Common.UIString.UIString('Remove'), 'largeicon-trash-bin'); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 155 | removeButton.addEventListener(ToolbarButton.Events.Click, onRemoveClicked.bind(this)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 156 | toolbar.appendToolbarItem(removeButton); |
| 157 | |
| 158 | return controls; |
| 159 | |
| 160 | /** |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 161 | * @this {!ListWidget<?>} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 162 | */ |
| 163 | function onEditClicked() { |
| 164 | const index = this._elements.indexOf(element); |
| 165 | const insertionPoint = this._elements[index + 1] || null; |
| 166 | this._startEditing(item, element, insertionPoint); |
| 167 | } |
| 168 | |
| 169 | /** |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 170 | * @this {!ListWidget<?>} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 171 | */ |
| 172 | function onRemoveClicked() { |
| 173 | const index = this._elements.indexOf(element); |
| 174 | this.element.focus(); |
| 175 | this._delegate.removeItemRequested(this._items[index], index); |
| 176 | } |
| 177 | } |
| 178 | |
| 179 | /** |
| 180 | * @override |
| 181 | */ |
| 182 | wasShown() { |
| 183 | super.wasShown(); |
| 184 | this._stopEditing(); |
| 185 | } |
| 186 | |
| 187 | _updatePlaceholder() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 188 | if (!this._emptyPlaceholder) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 189 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 190 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 191 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 192 | if (!this._elements.length && !this._editor) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 193 | this._list.appendChild(this._emptyPlaceholder); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 194 | } else { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 195 | this._emptyPlaceholder.remove(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 196 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 197 | } |
| 198 | |
| 199 | /** |
| 200 | * @param {!T} item |
| 201 | * @param {?Element} element |
| 202 | * @param {?Element} insertionPoint |
| 203 | */ |
| 204 | _startEditing(item, element, insertionPoint) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 205 | if (element && this._editElement === element) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 206 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 207 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 208 | |
| 209 | this._stopEditing(); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 210 | this._focusRestorer = new ElementFocusRestorer(this.element); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 211 | |
| 212 | this._list.classList.add('list-editing'); |
| 213 | this._editItem = item; |
| 214 | this._editElement = element; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 215 | if (element) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 216 | element.classList.add('hidden'); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 217 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 218 | |
| 219 | const index = element ? this._elements.indexOf(element) : -1; |
| 220 | this._editor = this._delegate.beginEdit(item); |
| 221 | this._updatePlaceholder(); |
| 222 | this._list.insertBefore(this._editor.element, insertionPoint); |
| 223 | this._editor.beginEdit( |
Paul Lewis | 17e384e | 2020-01-08 15:46:51 | [diff] [blame] | 224 | item, index, element ? Common.UIString.UIString('Save') : Common.UIString.UIString('Add'), |
| 225 | this._commitEditing.bind(this), this._stopEditing.bind(this)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 226 | } |
| 227 | |
| 228 | _commitEditing() { |
| 229 | const editItem = this._editItem; |
| 230 | const isNew = !this._editElement; |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 231 | const editor = /** @type {!Editor<T>} */ (this._editor); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 232 | this._stopEditing(); |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 233 | if (editItem) { |
| 234 | this._delegate.commitEdit(editItem, editor, isNew); |
| 235 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 236 | } |
| 237 | |
| 238 | _stopEditing() { |
| 239 | this._list.classList.remove('list-editing'); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 240 | if (this._focusRestorer) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 241 | this._focusRestorer.restore(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 242 | } |
| 243 | if (this._editElement) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 244 | this._editElement.classList.remove('hidden'); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 245 | } |
| 246 | if (this._editor && this._editor.element.parentElement) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 247 | this._editor.element.remove(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 248 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 249 | |
| 250 | this._editor = null; |
| 251 | this._editItem = null; |
| 252 | this._editElement = null; |
| 253 | this._updatePlaceholder(); |
| 254 | } |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 255 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 256 | |
| 257 | /** |
| 258 | * @template T |
| 259 | * @interface |
| 260 | */ |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 261 | export class Delegate { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 262 | /** |
| 263 | * @param {!T} item |
| 264 | * @param {boolean} editable |
| 265 | * @return {!Element} |
| 266 | */ |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 267 | renderItem(item, editable) { |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 268 | throw new Error('not implemented yet'); |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 269 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 270 | |
| 271 | /** |
| 272 | * @param {!T} item |
| 273 | * @param {number} index |
| 274 | */ |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 275 | removeItemRequested(item, index) { |
| 276 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 277 | |
| 278 | /** |
| 279 | * @param {!T} item |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 280 | * @return {!Editor<T>} |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 281 | */ |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 282 | beginEdit(item) { |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 283 | throw new Error('not implemented yet'); |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 284 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 285 | |
| 286 | /** |
| 287 | * @param {!T} item |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 288 | * @param {!Editor<T>} editor |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 289 | * @param {boolean} isNew |
| 290 | */ |
| 291 | commitEdit(item, editor, isNew) {} |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 292 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 293 | |
| 294 | /** |
| 295 | * @template T |
| 296 | */ |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 297 | export class Editor { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 298 | constructor() { |
Tim van der Lippe | f49e232 | 2020-05-01 15:03:09 | [diff] [blame] | 299 | this.element = document.createElement('div'); |
| 300 | this.element.classList.add('editor-container'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 301 | this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this._cancelClicked.bind(this)), false); |
| 302 | this.element.addEventListener('keydown', onKeyDown.bind(null, isEnterKey, this._commitClicked.bind(this)), false); |
| 303 | |
| 304 | this._contentElement = this.element.createChild('div', 'editor-content'); |
| 305 | |
| 306 | const buttonsRow = this.element.createChild('div', 'editor-buttons'); |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 307 | this._commitButton = createTextButton('', this._commitClicked.bind(this), '', true /* primary */); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 308 | buttonsRow.appendChild(this._commitButton); |
Paul Lewis | 17e384e | 2020-01-08 15:46:51 | [diff] [blame] | 309 | this._cancelButton = createTextButton(Common.UIString.UIString('Cancel'), this._cancelClicked.bind(this)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 310 | this._cancelButton.addEventListener( |
| 311 | 'keydown', onKeyDown.bind(null, isEnterKey, this._cancelClicked.bind(this)), false); |
| 312 | buttonsRow.appendChild(this._cancelButton); |
| 313 | |
Rob Paveza | c671db3 | 2019-09-20 01:54:50 | [diff] [blame] | 314 | this._errorMessageContainer = this.element.createChild('div', 'list-widget-input-validation-error'); |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 315 | ARIAUtils.markAsAlert(this._errorMessageContainer); |
Rob Paveza | c671db3 | 2019-09-20 01:54:50 | [diff] [blame] | 316 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 317 | /** |
| 318 | * @param {function(!Event):boolean} predicate |
Tim van der Lippe | 403a88d | 2020-05-13 11:51:32 | [diff] [blame] | 319 | * @param {function():void} callback |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 320 | * @param {!Event} event |
| 321 | */ |
| 322 | function onKeyDown(predicate, callback, event) { |
| 323 | if (predicate(event)) { |
| 324 | event.consume(true); |
| 325 | callback(); |
| 326 | } |
| 327 | } |
| 328 | |
| 329 | /** @type {!Array<!HTMLInputElement|!HTMLSelectElement>} */ |
| 330 | this._controls = []; |
| 331 | /** @type {!Map<string, !HTMLInputElement|!HTMLSelectElement>} */ |
| 332 | this._controlByName = new Map(); |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 333 | /** @type {!Array<function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !ValidatorResult>} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 334 | this._validators = []; |
| 335 | |
Tim van der Lippe | ee97fa3 | 2020-04-23 15:20:56 | [diff] [blame] | 336 | /** @type {?function():void} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 337 | this._commit = null; |
Tim van der Lippe | ee97fa3 | 2020-04-23 15:20:56 | [diff] [blame] | 338 | /** @type {?function():void} */ |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 339 | this._cancel = null; |
| 340 | /** @type {?T} */ |
| 341 | this._item = null; |
| 342 | /** @type {number} */ |
| 343 | this._index = -1; |
| 344 | } |
| 345 | |
| 346 | /** |
| 347 | * @return {!Element} |
| 348 | */ |
| 349 | contentElement() { |
| 350 | return this._contentElement; |
| 351 | } |
| 352 | |
| 353 | /** |
| 354 | * @param {string} name |
| 355 | * @param {string} type |
| 356 | * @param {string} title |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 357 | * @param {function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !ValidatorResult} validator |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 358 | * @return {!HTMLInputElement} |
| 359 | */ |
| 360 | createInput(name, type, title, validator) { |
Paul Lewis | 9950e18 | 2019-12-16 16:06:07 | [diff] [blame] | 361 | const input = /** @type {!HTMLInputElement} */ (createInput('', type)); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 362 | input.placeholder = title; |
| 363 | input.addEventListener('input', this._validateControls.bind(this, false), false); |
| 364 | input.addEventListener('blur', this._validateControls.bind(this, false), false); |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 365 | ARIAUtils.setAccessibleName(input, title); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 366 | this._controlByName.set(name, input); |
| 367 | this._controls.push(input); |
| 368 | this._validators.push(validator); |
| 369 | return input; |
| 370 | } |
| 371 | |
| 372 | /** |
| 373 | * @param {string} name |
| 374 | * @param {!Array<string>} options |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 375 | * @param {function(!T, number, (!HTMLInputElement|!HTMLSelectElement)): !ValidatorResult} validator |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 376 | * @param {string=} title |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 377 | * @return {!HTMLSelectElement} |
| 378 | */ |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 379 | createSelect(name, options, validator, title) { |
Tim van der Lippe | 47d0124 | 2020-05-01 16:06:46 | [diff] [blame] | 380 | const select = /** @type {!HTMLSelectElement} */ (document.createElement('select')); |
| 381 | select.classList.add('chrome-select'); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 382 | for (let index = 0; index < options.length; ++index) { |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 383 | const option = /** @type {!HTMLOptionElement} */ (select.createChild('option')); |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 384 | option.value = options[index]; |
| 385 | option.textContent = options[index]; |
| 386 | } |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 387 | if (title) { |
| 388 | select.title = title; |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 389 | ARIAUtils.setAccessibleName(select, title); |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 390 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 391 | select.addEventListener('input', this._validateControls.bind(this, false), false); |
| 392 | select.addEventListener('blur', this._validateControls.bind(this, false), false); |
| 393 | this._controlByName.set(name, select); |
| 394 | this._controls.push(select); |
| 395 | this._validators.push(validator); |
| 396 | return select; |
| 397 | } |
| 398 | |
| 399 | /** |
| 400 | * @param {string} name |
| 401 | * @return {!HTMLInputElement|!HTMLSelectElement} |
| 402 | */ |
| 403 | control(name) { |
| 404 | return /** @type {!HTMLInputElement|!HTMLSelectElement} */ (this._controlByName.get(name)); |
| 405 | } |
| 406 | |
| 407 | /** |
| 408 | * @param {boolean} forceValid |
| 409 | */ |
| 410 | _validateControls(forceValid) { |
| 411 | let allValid = true; |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 412 | this._errorMessageContainer.textContent = ''; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 413 | for (let index = 0; index < this._controls.length; ++index) { |
| 414 | const input = this._controls[index]; |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 415 | const {valid, errorMessage} = |
| 416 | this._validators[index].call(null, /** @type {!T} */ (this._item), this._index, input); |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 417 | |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 418 | input.classList.toggle('error-input', !valid && !forceValid); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 419 | if (valid || forceValid) { |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 420 | ARIAUtils.setInvalid(input, false); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 421 | } else { |
Tim van der Lippe | aa76aa2 | 2020-02-14 14:38:24 | [diff] [blame] | 422 | ARIAUtils.setInvalid(input, true); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 423 | } |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 424 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 425 | if (!forceValid && errorMessage && !this._errorMessageContainer.textContent) { |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 426 | this._errorMessageContainer.textContent = errorMessage; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 427 | } |
Amanda Baker | ca50282 | 2019-07-02 00:01:28 | [diff] [blame] | 428 | |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 429 | allValid = allValid && valid; |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 430 | } |
| 431 | this._commitButton.disabled = !allValid; |
| 432 | } |
| 433 | |
| 434 | /** |
| 435 | * @param {!T} item |
| 436 | * @param {number} index |
| 437 | * @param {string} commitButtonTitle |
Tim van der Lippe | 403a88d | 2020-05-13 11:51:32 | [diff] [blame] | 438 | * @param {function():void} commit |
| 439 | * @param {function():void} cancel |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 440 | */ |
| 441 | beginEdit(item, index, commitButtonTitle, commit, cancel) { |
| 442 | this._commit = commit; |
| 443 | this._cancel = cancel; |
| 444 | this._item = item; |
| 445 | this._index = index; |
| 446 | |
| 447 | this._commitButton.textContent = commitButtonTitle; |
| 448 | this.element.scrollIntoViewIfNeeded(false); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 449 | if (this._controls.length) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 450 | this._controls[0].focus(); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 451 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 452 | this._validateControls(true); |
| 453 | } |
| 454 | |
| 455 | _commitClicked() { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 456 | if (this._commitButton.disabled) { |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 457 | return; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 458 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 459 | |
| 460 | const commit = this._commit; |
| 461 | this._commit = null; |
| 462 | this._cancel = null; |
| 463 | this._item = null; |
| 464 | this._index = -1; |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 465 | if (commit) { |
| 466 | commit(); |
| 467 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 468 | } |
| 469 | |
| 470 | _cancelClicked() { |
| 471 | const cancel = this._cancel; |
| 472 | this._commit = null; |
| 473 | this._cancel = null; |
| 474 | this._item = null; |
| 475 | this._index = -1; |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 476 | if (cancel) { |
| 477 | cancel(); |
| 478 | } |
Blink Reformat | 4c46d09 | 2018-04-07 15:32:37 | [diff] [blame] | 479 | } |
Tim van der Lippe | 0830b3d | 2019-10-03 13:20:07 | [diff] [blame] | 480 | } |
Tim van der Lippe | 96f1660 | 2020-01-24 12:45:35 | [diff] [blame] | 481 | |
| 482 | /** @typedef {{valid: boolean, errorMessage: (string|undefined)}} */ |
Simon Zünd | 3460a8d | 2020-08-26 07:07:35 | [diff] [blame] | 483 | // @ts-ignore typedef |
Tim van der Lippe | 96f1660 | 2020-01-24 12:45:35 | [diff] [blame] | 484 | export let ValidatorResult; |