|
20 | 20 | 'use strict'; |
21 | 21 |
|
22 | 22 | var CANCEL_LABEL = Granite.I18n.get('Cancel'); |
23 | | - var REPLACE_LABEL = Granite.I18n.get('Replace By Pattern'); |
24 | | - var REPLACE_BUTTON_LABEL = Granite.I18n.get('Replace'); |
| 23 | + var REPLACE_AND_MODIFY_LABEL = Granite.I18n.get('Replace and Modify by Pattern'); |
| 24 | + var REPLACE_LABEL = Granite.I18n.get('Replace'); |
| 25 | + var MODIFY_LABEL = Granite.I18n.get('Modify'); |
25 | 26 | var PATTERN_LABEL = Granite.I18n.get('Please enter the regex pattern to be replaced'); |
26 | 27 | var REPLACEMENT_LINK_LABEL = Granite.I18n.get('Please enter the replacement'); |
27 | 28 | var DRY_RUN_CHECKBOX_LABEL = Granite.I18n.get('Dry run'); |
|
59 | 60 | isDryRun: data.isDryRun, |
60 | 61 | isBackup: data.isBackup, |
61 | 62 | isOutputAsCsv: data.isOutputAsCsv, |
| 63 | + advancedMode: data.advancedMode, |
62 | 64 | selected: data.selected |
63 | 65 | }].filter(function (item) { |
64 | 66 | return item.pattern && item.replacement && item.pattern !== item.replacement; |
|
136 | 138 |
|
137 | 139 | var el = ELC.getSharableDlg(); |
138 | 140 | el.variant = 'notice'; |
139 | | - el.header.textContent = REPLACE_LABEL; |
| 141 | + el.header.textContent = REPLACE_AND_MODIFY_LABEL; |
140 | 142 | el.footer.innerHTML = ''; // Clean content |
141 | 143 | el.content.innerHTML = ''; // Clean content |
142 | 144 |
|
143 | 145 | var $cancelBtn = $('<button is="coral-button" variant="default" coral-close>').text(CANCEL_LABEL); |
144 | | - var $updateBtn = $('<button data-dialog-action is="coral-button" variant="primary" coral-close>').text(REPLACE_BUTTON_LABEL); |
| 146 | + var $updateBtn = $('<button name="update-button" is="coral-button" variant="primary" coral-close>').text(REPLACE_LABEL); |
145 | 147 | $cancelBtn.appendTo(el.footer); |
146 | 148 | $updateBtn.appendTo(el.footer); |
147 | 149 |
|
148 | | - buildConfirmationMessage(selection).appendTo(el.content); |
| 150 | + buildConfirmationMessage(confirmationMessageSelectionItems(selection)).appendTo(el.content); |
149 | 151 |
|
150 | | - // Pattern input group |
| 152 | + let $replaceRadio = new Coral.Radio(); |
| 153 | + $replaceRadio.label.textContent = REPLACE_LABEL; |
| 154 | + $replaceRadio.name = 'replace-modify'; |
| 155 | + $replaceRadio.checked = true; |
| 156 | + $replaceRadio.value = 'replace'; |
| 157 | + |
| 158 | + let $modifyRadio = new Coral.Radio(); |
| 159 | + $modifyRadio.label.textContent = MODIFY_LABEL; |
| 160 | + $modifyRadio.name = 'replace-modify'; |
| 161 | + $modifyRadio.value = 'modify'; |
| 162 | + |
| 163 | + el.content.appendChild($replaceRadio); |
| 164 | + el.content.appendChild($modifyRadio); |
| 165 | + |
| 166 | + let $patternFieldGroup = $('<div class="elc-pattern-field-group" hidden>'); |
151 | 167 | var $patternTextField = |
152 | | - $('<input is="coral-textfield" class="elc-pattern-input" name="pattern" value="" required>'); |
153 | | - $('<p>').text(PATTERN_LABEL).appendTo(el.content); |
154 | | - $patternTextField.appendTo(el.content); |
| 168 | + $('<input is="coral-textfield" class="elc-pattern-input" name="pattern" value="" placeholder=".+" required>'); |
| 169 | + $('<p>').text(PATTERN_LABEL).appendTo($patternFieldGroup); |
| 170 | + $patternTextField.appendTo($patternFieldGroup); |
| 171 | + $patternFieldGroup.appendTo(el.content); |
155 | 172 |
|
156 | 173 | // Replacement input group |
157 | 174 | var $replacementTextField = |
|
161 | 178 |
|
162 | 179 | // Dry run checkbox group |
163 | 180 | var $isDryRunCheckbox = |
164 | | - $('<coral-checkbox name="$isDryRun" title="' + DRY_RUN_TOOLTIP + '" checked>').text(DRY_RUN_CHECKBOX_LABEL); |
| 181 | + $('<coral-checkbox name="dry-run-checkbox" title="' + DRY_RUN_TOOLTIP + '" checked>').text(DRY_RUN_CHECKBOX_LABEL); |
165 | 182 | $isDryRunCheckbox.appendTo(el.content); |
166 | 183 |
|
167 | 184 | // Backup checkbox group |
168 | | - var $isBackupCheckbox = $('<coral-checkbox name="isBackup">').text(BACKUP_CHECKBOX_LABEL); |
| 185 | + var $isBackupCheckbox = $('<coral-checkbox name="isBackup" disabled>').text(BACKUP_CHECKBOX_LABEL); |
169 | 186 | $isBackupCheckbox.appendTo(el.content); |
170 | 187 |
|
171 | 188 | // CSV output checkbox group |
|
178 | 195 | function onValidate() { |
179 | 196 | var replVal = $replacementTextField.val(); |
180 | 197 | var patternVal = $patternTextField.val(); |
| 198 | + var advanced = $modifyRadio.checked; |
181 | 199 | $replacementTextField.each(function () { |
182 | 200 | this.setCustomValidity(replVal === patternVal ? VALIDATION_MSG : ''); |
183 | 201 | }); |
184 | | - $updateBtn.attr('disabled', !replVal || !patternVal || replVal === patternVal); |
| 202 | + $updateBtn.attr('disabled', !replVal || (advanced && !patternVal || replVal === patternVal)); |
185 | 203 | } |
| 204 | + |
186 | 205 | /** @param {Event} e */ |
187 | 206 | function onResolve(e) { |
188 | 207 | var data = { |
189 | 208 | pattern: $patternTextField.val(), |
| 209 | + advancedMode: $modifyRadio.checked, |
190 | 210 | replacement: $replacementTextField.val(), |
191 | 211 | isDryRun: $isDryRunCheckbox.prop("checked"), |
192 | 212 | isBackup: $isBackupCheckbox.prop("checked"), |
|
198 | 218 | deferred.resolve(data); |
199 | 219 | } |
200 | 220 |
|
| 221 | + /** @param {Event} e */ |
| 222 | + function onDryRunChange(e) { |
| 223 | + $isBackupCheckbox.attr('disabled', $isDryRunCheckbox.prop('checked')); |
| 224 | + } |
| 225 | + |
201 | 226 | el.on('input', 'input', onValidate); |
202 | | - el.on('click', '[data-dialog-action]', onResolve); |
| 227 | + el.on('click', '[name="update-button"]', onResolve); |
| 228 | + el.on('change', '[name="dry-run-checkbox"]', onDryRunChange); |
203 | 229 | el.on('coral-overlay:close', function () { |
204 | 230 | el.off('input', 'input', onValidate); |
205 | | - el.off('click', '[data-dialog-action]', onResolve); |
| 231 | + el.off('click', '[name="update-button"]', onResolve); |
| 232 | + el.off('change', '[name="dry-run-checkbox"]', onDryRunChange); |
206 | 233 | deferred.reject(); |
207 | 234 | }); |
208 | 235 |
|
209 | 236 | el.show(); |
210 | 237 | onValidate(); |
211 | 238 |
|
| 239 | + el.content.addEventListener('change', function(event) { |
| 240 | + if (event.target.name == 'replace-modify') { |
| 241 | + $patternFieldGroup.attr('hidden', event.target.value != 'modify'); |
| 242 | + onValidate(); |
| 243 | + } |
| 244 | + }); |
| 245 | + |
212 | 246 | return deferred.promise(); |
213 | 247 | } |
214 | 248 |
|
215 | 249 | function buildConfirmationMessage(selections) { |
216 | 250 | let list = selections.slice(0, 12).map(function (row) { |
217 | | - return '<li>' + row.currentLink + '</li>'; |
| 251 | + return '<li>' + row.currentLink + ' (' + row.count + ')' + '</li>'; |
218 | 252 | }); |
219 | 253 | if (selections.length > 12) { |
220 | 254 | list.push('<li>…</li>'); // … is ellipsis |
|
226 | 260 | return $msg; |
227 | 261 | } |
228 | 262 |
|
| 263 | + function confirmationMessageSelectionItems(selections) { |
| 264 | + let valuesMap = {}; |
| 265 | + selections.map(function (row) { |
| 266 | + return row.currentLink; |
| 267 | + }).forEach(function (item) { |
| 268 | + valuesMap[item] = (valuesMap[item]||0) + 1; |
| 269 | + }); |
| 270 | + |
| 271 | + let items = []; |
| 272 | + for (const [key, value] of Object.entries(valuesMap)) { |
| 273 | + items.push({currentLink: key, count: value}); |
| 274 | + } |
| 275 | + return items; |
| 276 | + } |
| 277 | + |
229 | 278 | function buildSelectionItems(selections) { |
230 | 279 | return selections.map(function (v) { |
231 | 280 | let row = $(v); |
|
0 commit comments