]>
Commit | Line | Data |
---|---|---|
bb64de6e DM |
1 | // ExtJS related things |
2 | ||
3 | // do not send '_dc' parameter | |
4 | Ext.Ajax.disableCaching = false; | |
5 | ||
6 | // custom Vtypes | |
7 | Ext.apply(Ext.form.field.VTypes, { | |
01031528 | 8 | IPAddress: function(v) { |
bb64de6e DM |
9 | return Proxmox.Utils.IP4_match.test(v); |
10 | }, | |
01031528 | 11 | IPAddressText: gettext('Example') + ': 192.168.1.1', |
05a977a2 | 12 | IPAddressMask: /[\d.]/i, |
bb64de6e | 13 | |
01031528 | 14 | IPCIDRAddress: function(v) { |
05a977a2 | 15 | let result = Proxmox.Utils.IP4_cidr_match.exec(v); |
bb64de6e DM |
16 | // limits according to JSON Schema see |
17 | // pve-common/src/PVE/JSONSchema.pm | |
01031528 | 18 | return result !== null && result[1] >= 8 && result[1] <= 32; |
bb64de6e | 19 | }, |
05a977a2 TL |
20 | IPCIDRAddressText: gettext('Example') + ': 192.168.1.1/24<br>' + gettext('Valid CIDR Range') + ': 8-32', |
21 | IPCIDRAddressMask: /[\d./]/i, | |
bb64de6e | 22 | |
01031528 | 23 | IP6Address: function(v) { |
ecdde39c | 24 | return Proxmox.Utils.IP6_match.test(v); |
bb64de6e | 25 | }, |
01031528 | 26 | IP6AddressText: gettext('Example') + ': 2001:DB8::42', |
bb64de6e DM |
27 | IP6AddressMask: /[A-Fa-f0-9:]/, |
28 | ||
01031528 | 29 | IP6CIDRAddress: function(v) { |
05a977a2 | 30 | let result = Proxmox.Utils.IP6_cidr_match.exec(v); |
bb64de6e DM |
31 | // limits according to JSON Schema see |
32 | // pve-common/src/PVE/JSONSchema.pm | |
01031528 | 33 | return result !== null && result[1] >= 8 && result[1] <= 128; |
bb64de6e | 34 | }, |
05a977a2 TL |
35 | IP6CIDRAddressText: gettext('Example') + ': 2001:DB8::42/64<br>' + gettext('Valid CIDR Range') + ': 8-128', |
36 | IP6CIDRAddressMask: /[A-Fa-f0-9:/]/, | |
bb64de6e | 37 | |
01031528 | 38 | IP6PrefixLength: function(v) { |
bb64de6e DM |
39 | return v >= 0 && v <= 128; |
40 | }, | |
01031528 TL |
41 | IP6PrefixLengthText: gettext('Example') + ': X, where 0 <= X <= 128', |
42 | IP6PrefixLengthMask: /[0-9]/, | |
bb64de6e | 43 | |
01031528 | 44 | IP64Address: function(v) { |
ecdde39c | 45 | return Proxmox.Utils.IP64_match.test(v); |
bb64de6e | 46 | }, |
01031528 | 47 | IP64AddressText: gettext('Example') + ': 192.168.1.1 2001:DB8::42', |
05a977a2 | 48 | IP64AddressMask: /[A-Fa-f0-9.:]/, |
bb64de6e | 49 | |
577b6c75 | 50 | IP64CIDRAddress: function(v) { |
05a977a2 | 51 | let result = Proxmox.Utils.IP64_cidr_match.exec(v); |
577b6c75 ML |
52 | if (result === null) { |
53 | return false; | |
54 | } | |
55 | if (result[1] !== undefined) { | |
56 | return result[1] >= 8 && result[1] <= 128; | |
57 | } else if (result[2] !== undefined) { | |
58 | return result[2] >= 8 && result[2] <= 32; | |
59 | } else { | |
60 | return false; | |
61 | } | |
62 | }, | |
63 | IP64CIDRAddressText: gettext('Example') + ': 192.168.1.1/24 2001:DB8::42/64', | |
05a977a2 | 64 | IP64CIDRAddressMask: /[A-Fa-f0-9.:/]/, |
577b6c75 | 65 | |
bb64de6e DM |
66 | MacAddress: function(v) { |
67 | return (/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/).test(v); | |
68 | }, | |
69 | MacAddressMask: /[a-fA-F0-9:]/, | |
70 | MacAddressText: gettext('Example') + ': 01:23:45:67:89:ab', | |
71 | ||
01031528 | 72 | MacPrefix: function(v) { |
add18fad | 73 | return (/^[a-f0-9][02468ace](?::[a-f0-9]{2}){0,2}:?$/i).test(v); |
8f449655 TL |
74 | }, |
75 | MacPrefixMask: /[a-fA-F0-9:]/, | |
ffe26505 | 76 | MacPrefixText: gettext('Example') + ': 02:8f - ' + gettext('only unicast addresses are allowed'), |
8f449655 | 77 | |
bb64de6e | 78 | BridgeName: function(v) { |
ecdde39c | 79 | return (/^vmbr\d{1,4}$/).test(v); |
bb64de6e | 80 | }, |
8aefd47c AD |
81 | VlanName: function(v) { |
82 | if (Proxmox.Utils.VlanInterface_match.test(v)) { | |
ecdde39c | 83 | return true; |
8aefd47c | 84 | } else if (Proxmox.Utils.Vlan_match.test(v)) { |
ecdde39c | 85 | return true; |
8aefd47c AD |
86 | } |
87 | return true; | |
88 | }, | |
bb64de6e DM |
89 | BridgeNameText: gettext('Format') + ': vmbr<b>N</b>, where 0 <= <b>N</b> <= 9999', |
90 | ||
91 | BondName: function(v) { | |
ecdde39c | 92 | return (/^bond\d{1,4}$/).test(v); |
bb64de6e DM |
93 | }, |
94 | BondNameText: gettext('Format') + ': bond<b>N</b>, where 0 <= <b>N</b> <= 9999', | |
95 | ||
96 | InterfaceName: function(v) { | |
ecdde39c | 97 | return (/^[a-z][a-z0-9_]{1,20}$/).test(v); |
bb64de6e | 98 | }, |
05a977a2 TL |
99 | InterfaceNameText: gettext("Allowed characters") + ": 'a-z', '0-9', '_'<br />" + |
100 | gettext("Minimum characters") + ": 2<br />" + | |
101 | gettext("Maximum characters") + ": 21<br />" + | |
bb64de6e DM |
102 | gettext("Must start with") + ": 'a-z'", |
103 | ||
01031528 | 104 | StorageId: function(v) { |
ecdde39c | 105 | return (/^[a-z][a-z0-9\-_.]*[a-z0-9]$/i).test(v); |
bb64de6e | 106 | }, |
05a977a2 TL |
107 | StorageIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '-', '_', '.'<br />" + |
108 | gettext("Minimum characters") + ": 2<br />" + | |
bb64de6e DM |
109 | gettext("Must start with") + ": 'A-Z', 'a-z'<br />" + |
110 | gettext("Must end with") + ": 'A-Z', 'a-z', '0-9'<br />", | |
111 | ||
01031528 | 112 | ConfigId: function(v) { |
ecdde39c | 113 | return (/^[a-z][a-z0-9_-]+$/i).test(v); |
bb64de6e | 114 | }, |
05a977a2 TL |
115 | ConfigIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '_'<br />" + |
116 | gettext("Minimum characters") + ": 2<br />" + | |
bb64de6e DM |
117 | gettext("Must start with") + ": " + gettext("letter"), |
118 | ||
01031528 | 119 | HttpProxy: function(v) { |
ecdde39c | 120 | return (/^http:\/\/.*$/).test(v); |
bb64de6e DM |
121 | }, |
122 | HttpProxyText: gettext('Example') + ": http://username:password@host:port/", | |
123 | ||
9109c392 | 124 | CpuSet: function(v) { |
5ef8d10d | 125 | return Proxmox.Utils.CpuSet_match.test(v); |
9109c392 DB |
126 | }, |
127 | CpuSetText: gettext('This is not a valid CpuSet'), | |
128 | ||
bb64de6e DM |
129 | DnsName: function(v) { |
130 | return Proxmox.Utils.DnsName_match.test(v); | |
131 | }, | |
132 | DnsNameText: gettext('This is not a valid DNS name'), | |
133 | ||
66c5ceb8 SI |
134 | DnsNameOrWildcard: function(v) { |
135 | return Proxmox.Utils.DnsName_or_Wildcard_match.test(v); | |
136 | }, | |
137 | DnsNameOrWildcardText: gettext('This is not a valid DNS name'), | |
138 | ||
eaa8d084 | 139 | // email regex used by pve-common |
bb64de6e | 140 | proxmoxMail: function(v) { |
ecdde39c | 141 | return (/^[\w+-~]+(\.[\w+-~]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/).test(v); |
bb64de6e DM |
142 | }, |
143 | proxmoxMailText: gettext('Example') + ": user@example.com", | |
144 | ||
ba916e58 DC |
145 | DnsOrIp: function(v) { |
146 | if (!Proxmox.Utils.DnsName_match.test(v) && | |
694a76f6 | 147 | !Proxmox.Utils.IP64_match.test(v)) { |
ba916e58 DC |
148 | return false; |
149 | } | |
150 | ||
151 | return true; | |
152 | }, | |
694a76f6 | 153 | DnsOrIpText: gettext('Not a valid DNS name or IP address.'), |
ba916e58 | 154 | |
5252b7f1 DC |
155 | HostPort: function(v) { |
156 | return Proxmox.Utils.HostPort_match.test(v) || | |
157 | Proxmox.Utils.HostPortBrackets_match.test(v) || | |
158 | Proxmox.Utils.IP6_dotnotation_match.test(v); | |
159 | }, | |
a9bea104 | 160 | HostPortText: gettext('Host/IP address or optional port is invalid'), |
5252b7f1 | 161 | |
bb64de6e | 162 | HostList: function(v) { |
05a977a2 TL |
163 | let list = v.split(/[ ,;]+/); |
164 | let i; | |
bb64de6e | 165 | for (i = 0; i < list.length; i++) { |
05a977a2 | 166 | if (list[i] === '') { |
bb64de6e DM |
167 | continue; |
168 | } | |
169 | ||
170 | if (!Proxmox.Utils.HostPort_match.test(list[i]) && | |
171 | !Proxmox.Utils.HostPortBrackets_match.test(list[i]) && | |
172 | !Proxmox.Utils.IP6_dotnotation_match.test(list[i])) { | |
173 | return false; | |
174 | } | |
175 | } | |
176 | ||
177 | return true; | |
178 | }, | |
36704a2f DM |
179 | HostListText: gettext('Not a valid list of hosts'), |
180 | ||
181 | password: function(val, field) { | |
ecdde39c MC |
182 | if (field.initialPassField) { |
183 | let pwd = field.up('form').down(`[name=${field.initialPassField}]`); | |
184 | return val === pwd.getValue(); | |
185 | } | |
186 | return true; | |
36704a2f DM |
187 | }, |
188 | ||
01031528 | 189 | passwordText: gettext('Passwords do not match'), |
dcd5a0c6 SI |
190 | |
191 | email: function(value) { | |
df096ae3 | 192 | let emailre = /^[\w+~-]+(\.[\w+~-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/; |
dcd5a0c6 SI |
193 | return emailre.test(value); |
194 | }, | |
bb64de6e DM |
195 | }); |
196 | ||
3c158249 TL |
197 | // we always want the number in x.y format and never in, e.g., x,y |
198 | Ext.define('PVE.form.field.Number', { | |
199 | override: 'Ext.form.field.Number', | |
01031528 | 200 | submitLocaleSeparator: false, |
3c158249 TL |
201 | }); |
202 | ||
c4ac6d1c TL |
203 | // avois spamming the console and if we ever use this avoid a CORS block error too |
204 | Ext.define('PVE.draw.Container', { | |
205 | override: 'Ext.draw.Container', | |
206 | defaultDownloadServerUrl: document.location.origin, // avoid that pointing to http://svg.sencha.io | |
207 | applyDownloadServerUrl: function(url) { // avoid noisy warning, we don't really use that anyway | |
208 | url = url || this.defaultDownloadServerUrl; | |
209 | return url; | |
210 | }, | |
211 | }); | |
212 | ||
bb64de6e DM |
213 | // ExtJs 5-6 has an issue with caching |
214 | // see https://www.sencha.com/forum/showthread.php?308989 | |
215 | Ext.define('Proxmox.UnderlayPool', { | |
216 | override: 'Ext.dom.UnderlayPool', | |
217 | ||
01031528 | 218 | checkOut: function() { |
ecdde39c MC |
219 | let cache = this.cache, |
220 | len = cache.length, | |
221 | el; | |
bb64de6e | 222 | |
ecdde39c | 223 | // do cleanup because some of the objects might have been destroyed |
bb64de6e | 224 | while (len--) { |
ecdde39c MC |
225 | if (cache[len].destroyed) { |
226 | cache.splice(len, 1); | |
227 | } | |
228 | } | |
229 | // end do cleanup | |
bb64de6e DM |
230 | |
231 | el = cache.shift(); | |
232 | ||
ecdde39c MC |
233 | if (!el) { |
234 | el = Ext.Element.create(this.elementConfig); | |
235 | el.setVisibilityMode(2); | |
236 | //<debug> | |
237 | // tell the spec runner to ignore this element when checking if the dom is clean | |
bb64de6e | 238 | el.dom.setAttribute('data-sticky', true); |
ecdde39c | 239 | //</debug> |
bb64de6e DM |
240 | } |
241 | ||
ecdde39c | 242 | return el; |
01031528 | 243 | }, |
bb64de6e DM |
244 | }); |
245 | ||
246 | // if the order of the values are not the same in originalValue and value | |
247 | // extjs will not overwrite value, but marks the field dirty and thus | |
248 | // the reset button will be enabled (but clicking it changes nothing) | |
249 | // so if the arrays are not the same after resetting, we | |
250 | // clear and set it | |
251 | Ext.define('Proxmox.form.ComboBox', { | |
252 | override: 'Ext.form.field.ComboBox', | |
253 | ||
254 | reset: function() { | |
255 | // copied from combobox | |
05a977a2 | 256 | let me = this; |
bb64de6e | 257 | me.callParent(); |
bb64de6e DM |
258 | |
259 | // clear and set when not the same | |
05a977a2 TL |
260 | let value = me.getValue(); |
261 | if (Ext.isArray(me.originalValue) && Ext.isArray(value) && | |
262 | !Ext.Array.equals(value, me.originalValue)) { | |
bb64de6e DM |
263 | me.clearValue(); |
264 | me.setValue(me.originalValue); | |
265 | } | |
50032132 DC |
266 | }, |
267 | ||
268 | // we also want to open the trigger on editable comboboxes by default | |
269 | initComponent: function() { | |
270 | let me = this; | |
271 | me.callParent(); | |
272 | ||
273 | if (me.editable) { | |
274 | // The trigger.picker causes first a focus event on the field then | |
275 | // toggles the selection picker. Thus skip expanding in this case, | |
276 | // else our focus listener expands and the picker.trigger then | |
277 | // collapses it directly afterwards. | |
278 | Ext.override(me.triggers.picker, { | |
279 | onMouseDown: function(e) { | |
280 | // copied "should we focus" check from Ext.form.trigger.Trigger | |
281 | if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) { | |
282 | me.skip_expand_on_focus = true; | |
283 | } | |
284 | this.callParent(arguments); | |
01031528 | 285 | }, |
50032132 DC |
286 | }); |
287 | ||
288 | me.on("focus", function(combobox) { | |
289 | if (!combobox.isExpanded && !combobox.skip_expand_on_focus) { | |
290 | combobox.expand(); | |
291 | } | |
292 | combobox.skip_expand_on_focus = false; | |
293 | }); | |
294 | } | |
295 | }, | |
bb64de6e DM |
296 | }); |
297 | ||
47d1c80c TL |
298 | // when refreshing a grid/tree view, restoring the focus moves the view back to |
299 | // the previously focused item. Save scroll position before refocusing. | |
300 | Ext.define(null, { | |
301 | override: 'Ext.view.Table', | |
302 | ||
303 | jumpToFocus: false, | |
304 | ||
305 | saveFocusState: function() { | |
9c1296e5 | 306 | var me = this, |
05a977a2 TL |
307 | store = me.dataSource, |
308 | actionableMode = me.actionableMode, | |
309 | navModel = me.getNavigationModel(), | |
310 | focusPosition = actionableMode ? me.actionPosition : navModel.getPosition(true), | |
9c1296e5 DC |
311 | activeElement = Ext.fly(Ext.Element.getActiveElement()), |
312 | focusCell = focusPosition && focusPosition.view === me && | |
313 | Ext.fly(focusPosition.getCell(true)), | |
314 | refocusRow, refocusCol, record; | |
315 | ||
316 | // The navModel may return a position that is in a locked partner, so check that | |
317 | // the focusPosition's cell contains the focus before going forward. | |
318 | // The skipSaveFocusState is set by Actionables which actively control | |
319 | // focus destination. See CellEditing#activateCell. | |
320 | if (!me.skipSaveFocusState && focusCell && focusCell.contains(activeElement)) { | |
05a977a2 TL |
321 | // Separate this from the instance that the nav model is using. |
322 | focusPosition = focusPosition.clone(); | |
323 | ||
9c1296e5 DC |
324 | // While we deactivate the focused element, suspend focus processing on it. |
325 | activeElement.suspendFocusEvents(); | |
326 | ||
327 | // Suspend actionable mode. | |
328 | // Each Actionable must silently save its state ready to resume when focus | |
329 | // can be restored but should only do that if the activeElement is not the cell itself, | |
330 | // this happens when the grid is refreshed while one of the actionables is being | |
331 | // deactivated (e.g. Calling view refresh inside CellEditor 'edit' event listener). | |
332 | if (actionableMode && focusCell.dom !== activeElement.dom) { | |
333 | me.suspendActionableMode(); | |
334 | } else { | |
335 | // Clear position, otherwise the setPosition on the other side | |
336 | // will be rejected as a no-op if the resumption position is logically | |
337 | // equivalent. | |
338 | actionableMode = false; | |
339 | navModel.setPosition(); | |
05a977a2 | 340 | } |
47d1c80c | 341 | |
017a6376 | 342 | // Do not leave the element in that state in case refresh fails, and restoration |
9c1296e5 DC |
343 | // closure not called. |
344 | activeElement.resumeFocusEvents(); | |
05a977a2 | 345 | |
9c1296e5 DC |
346 | // if the store is expanding or collapsing, we should never scroll the view. |
347 | if (store.isExpandingOrCollapsing) { | |
348 | return Ext.emptyFn; | |
349 | } | |
05a977a2 TL |
350 | |
351 | // The following function will attempt to refocus back in the same mode to the same cell | |
9c1296e5 DC |
352 | // as it was at before based upon the previous record (if it's still in the store), |
353 | // or the row index. | |
05a977a2 | 354 | return function() { |
9c1296e5 DC |
355 | var all; |
356 | ||
357 | // May have changed due to reconfigure | |
358 | store = me.dataSource; | |
359 | ||
05a977a2 TL |
360 | // If we still have data, attempt to refocus in the same mode. |
361 | if (store.getCount()) { | |
9c1296e5 DC |
362 | all = me.all; |
363 | ||
364 | // Adjust expectations of where we are able to refocus according to | |
365 | // what kind of destruction might have been wrought on this view's DOM | |
366 | // during focus save. | |
367 | refocusRow = | |
368 | Math.min(Math.max(focusPosition.rowIdx, all.startIndex), all.endIndex); | |
369 | ||
370 | refocusCol = Math.min( | |
371 | focusPosition.colIdx, | |
372 | me.getVisibleColumnManager().getColumns().length - 1, | |
373 | ); | |
374 | ||
375 | record = focusPosition.record; | |
376 | ||
377 | focusPosition = new Ext.grid.CellContext(me).setPosition( | |
378 | record && store.contains(record) && !record.isCollapsedPlaceholder | |
379 | ? record | |
380 | : refocusRow, | |
381 | refocusCol, | |
382 | ); | |
383 | ||
384 | // Maybe there are no cells. eg: all groups collapsed. | |
385 | if (focusPosition.getCell(true)) { | |
386 | if (actionableMode) { | |
387 | me.resumeActionableMode(focusPosition); | |
388 | } else { | |
389 | // we sometimes want to scroll back to where we are | |
390 | ||
391 | let x = me.getScrollX(); | |
392 | let y = me.getScrollY(); | |
393 | ||
394 | // Pass "preventNavigation" as true | |
395 | // so that that does not cause selection. | |
396 | navModel.setPosition(focusPosition, null, null, null, true); | |
397 | ||
398 | if (!navModel.getPosition()) { | |
399 | focusPosition.column.focus(); | |
400 | } | |
401 | ||
402 | if (!me.jumpToFocus) { | |
403 | me.scrollTo(x, y); | |
404 | } | |
47d1c80c | 405 | } |
05a977a2 TL |
406 | } |
407 | } else { // No rows - focus associated column header | |
408 | focusPosition.column.focus(); | |
409 | } | |
410 | }; | |
411 | } | |
412 | return Ext.emptyFn; | |
01031528 | 413 | }, |
47d1c80c TL |
414 | }); |
415 | ||
a55813d6 DM |
416 | // ExtJS 6.0.1 has no setSubmitValue() (although you find it in the docs). |
417 | // Note: this.submitValue is a boolean flag, whereas getSubmitValue() returns | |
418 | // data to be submitted. | |
1d9804a9 DM |
419 | Ext.define('Proxmox.form.field.Text', { |
420 | override: 'Ext.form.field.Text', | |
421 | ||
422 | setSubmitValue: function(v) { | |
423 | this.submitValue = v; | |
424 | }, | |
1d9804a9 DM |
425 | }); |
426 | ||
d78eb5ec DC |
427 | // make mousescrolling work in firefox in the containers overflowhandler, |
428 | // by using only the 'wheel' event not 'mousewheel'(fixed in 7.3) | |
429 | // also reverse the scrolldirection (fixed in 7.3) | |
430 | // and reduce the default increment | |
1fb41f2e TL |
431 | Ext.define(null, { |
432 | override: 'Ext.layout.container.boxOverflow.Scroller', | |
433 | ||
d78eb5ec DC |
434 | wheelIncrement: 1, |
435 | ||
436 | getWheelDelta: function(e) { | |
437 | return -e.getWheelDelta(e); | |
438 | }, | |
439 | ||
440 | onOwnerRender: function(owner) { | |
441 | var me = this, | |
442 | scrollable = { | |
443 | isBoxOverflowScroller: true, | |
444 | x: false, | |
445 | y: false, | |
446 | listeners: { | |
447 | scrollend: this.onScrollEnd, | |
448 | scope: this, | |
449 | }, | |
450 | }; | |
451 | ||
452 | // If no obstrusive scrollbars, allow natural scrolling on mobile touch devices | |
453 | if (!Ext.scrollbar.width() && !Ext.platformTags.desktop) { | |
454 | scrollable[owner.layout.horizontal ? 'x' : 'y'] = true; | |
1fb41f2e | 455 | } else { |
d78eb5ec DC |
456 | me.wheelListener = me.layout.innerCt.on( |
457 | 'wheel', me.onMouseWheel, me, { destroyable: true }, | |
458 | ); | |
1fb41f2e | 459 | } |
1fb41f2e | 460 | |
d78eb5ec | 461 | owner.setScrollable(scrollable); |
01031528 | 462 | }, |
d78eb5ec DC |
463 | }); |
464 | ||
465 | // extj 6.7 reversed mousewheel direction... (fixed in 7.3) | |
466 | // https://forum.sencha.com/forum/showthread.php?472517-Mousewheel-scroll-direction-in-numberfield-with-spinners | |
017a6376 | 467 | // also use the 'wheel' event instead of 'mousewheel' (fixed in 7.3) |
d78eb5ec DC |
468 | Ext.define('Proxmox.form.field.Spinner', { |
469 | override: 'Ext.form.field.Spinner', | |
470 | ||
471 | onRender: function() { | |
94d84581 | 472 | let me = this; |
1fb41f2e | 473 | |
d78eb5ec DC |
474 | me.callParent(); |
475 | ||
d78eb5ec DC |
476 | // Init mouse wheel |
477 | if (me.mouseWheelEnabled) { | |
94d84581 DT |
478 | // Unlisten Ext generated listener ('mousewheel' is deprecated anyway) |
479 | me.mun(me.bodyEl, 'mousewheel', me.onMouseWheel, me); | |
480 | ||
d78eb5ec DC |
481 | me.mon(me.bodyEl, 'wheel', me.onMouseWheel, me); |
482 | } | |
d78eb5ec DC |
483 | }, |
484 | ||
485 | onMouseWheel: function(e) { | |
486 | var me = this, | |
487 | delta; | |
488 | if (me.hasFocus) { | |
489 | delta = e.getWheelDelta(); | |
490 | if (delta > 0) { | |
491 | me.spinDown(); | |
492 | } else if (delta < 0) { | |
493 | me.spinUp(); | |
494 | } | |
495 | e.stopEvent(); | |
496 | me.onSpinEnd(); | |
497 | } | |
498 | }, | |
1fb41f2e TL |
499 | }); |
500 | ||
312310e0 DC |
501 | // add '@' to the valid id |
502 | Ext.define('Proxmox.validIdReOverride', { | |
503 | override: 'Ext.Component', | |
05a977a2 | 504 | validIdRe: /^[a-z_][a-z0-9\-_@]*$/i, |
312310e0 DC |
505 | }); |
506 | ||
98d894d8 DC |
507 | Ext.define('Proxmox.selection.CheckboxModel', { |
508 | override: 'Ext.selection.CheckboxModel', | |
509 | ||
1f628e9c | 510 | // [P] use whole checkbox cell to multiselect, not only the checkbox |
98d894d8 | 511 | checkSelector: '.x-grid-cell-row-checker', |
1f628e9c | 512 | |
ea2b3fd7 TL |
513 | // TODO: remove all optimizations below to an override for parent 'Ext.selection.Model' ?? |
514 | ||
1f628e9c TL |
515 | // [ P: optimized to remove all records at once as single remove is O(n^3) slow ] |
516 | // records can be an index, a record or an array of records | |
517 | doDeselect: function(records, suppressEvent) { | |
ecdde39c MC |
518 | var me = this, |
519 | selected = me.selected, | |
520 | i = 0, | |
521 | len, record, | |
522 | commit; | |
523 | if (me.locked || !me.store) { | |
524 | return false; | |
525 | } | |
526 | if (typeof records === "number") { | |
527 | // No matching record, jump out | |
528 | record = me.store.getAt(records); | |
529 | if (!record) { | |
530 | return false; | |
531 | } | |
532 | records = [ | |
533 | record, | |
534 | ]; | |
535 | } else if (!Ext.isArray(records)) { | |
536 | records = [ | |
537 | records, | |
538 | ]; | |
539 | } | |
1f628e9c TL |
540 | // [P] a beforedeselection, triggered by me.onSelectChange below, can block removal by |
541 | // returning false, thus the original implementation removed only here in the commit fn, | |
542 | // which has an abysmal performance O(n^3). As blocking removal is not the norm, go do the | |
543 | // reverse, record blocked records and remove them from the to-be-removed array before | |
544 | // applying it. A FF86 i9-9900K on 10k records goes from >40s to ~33ms for >90% deselection | |
545 | let committed = false; | |
546 | commit = function() { | |
547 | committed = true; | |
548 | if (record === me.selectionStart) { | |
549 | me.selectionStart = null; | |
550 | } | |
551 | }; | |
552 | let removalBlocked = []; | |
ecdde39c MC |
553 | len = records.length; |
554 | me.suspendChanges(); | |
555 | for (; i < len; i++) { | |
556 | record = records[i]; | |
557 | if (me.isSelected(record)) { | |
1f628e9c | 558 | committed = false; |
ecdde39c | 559 | me.onSelectChange(record, false, suppressEvent, commit); |
1f628e9c TL |
560 | if (!committed) { |
561 | removalBlocked.push(record); | |
562 | } | |
ecdde39c MC |
563 | if (me.destroyed) { |
564 | return false; | |
565 | } | |
566 | } | |
567 | } | |
1f628e9c TL |
568 | if (removalBlocked.length > 0) { |
569 | records.remove(removalBlocked); | |
570 | } | |
571 | selected.remove(records); // [P] FAST(er) | |
572 | me.lastSelected = selected.last(); | |
ecdde39c MC |
573 | me.resumeChanges(); |
574 | // fire selchange if there was a change and there is no suppressEvent flag | |
1f628e9c | 575 | me.maybeFireSelectionChange(records.length > 0 && !suppressEvent); |
ea2b3fd7 TL |
576 | return records.length; |
577 | }, | |
578 | ||
579 | ||
580 | doMultiSelect: function(records, keepExisting, suppressEvent) { | |
ecdde39c MC |
581 | var me = this, |
582 | selected = me.selected, | |
583 | change = false, | |
584 | result, i, len, record, commit; | |
585 | ||
586 | if (me.locked) { | |
587 | return; | |
588 | } | |
589 | ||
590 | records = !Ext.isArray(records) ? [records] : records; | |
591 | len = records.length; | |
592 | if (!keepExisting && selected.getCount() > 0) { | |
593 | result = me.deselectDuringSelect(records, suppressEvent); | |
594 | if (me.destroyed) { | |
595 | return; | |
596 | } | |
597 | if (result[0]) { | |
598 | // We had a failure during selection, so jump out | |
599 | // Fire selection change if we did deselect anything | |
600 | me.maybeFireSelectionChange(result[1] > 0 && !suppressEvent); | |
601 | return; | |
602 | } else { | |
603 | // Means something has been deselected, so we've had a change | |
604 | change = result[1] > 0; | |
605 | } | |
606 | } | |
ea2b3fd7 TL |
607 | |
608 | let gotBlocked, blockedRecords = []; | |
ecdde39c MC |
609 | commit = function() { |
610 | if (!selected.getCount()) { | |
611 | me.selectionStart = record; | |
612 | } | |
ea2b3fd7 | 613 | gotBlocked = false; |
ecdde39c MC |
614 | change = true; |
615 | }; | |
ea2b3fd7 | 616 | |
ecdde39c MC |
617 | for (i = 0; i < len; i++) { |
618 | record = records[i]; | |
619 | if (me.isSelected(record)) { | |
620 | continue; | |
621 | } | |
ea2b3fd7 TL |
622 | |
623 | gotBlocked = true; | |
ecdde39c MC |
624 | me.onSelectChange(record, true, suppressEvent, commit); |
625 | if (me.destroyed) { | |
626 | return; | |
627 | } | |
ea2b3fd7 TL |
628 | if (gotBlocked) { |
629 | blockedRecords.push(record); | |
630 | } | |
ecdde39c | 631 | } |
ea2b3fd7 TL |
632 | if (blockedRecords.length > 0) { |
633 | records.remove(blockedRecords); | |
634 | } | |
ecdde39c MC |
635 | selected.add(records); |
636 | me.lastSelected = record; | |
ea2b3fd7 | 637 | |
ecdde39c MC |
638 | // fire selchange if there was a change and there is no suppressEvent flag |
639 | me.maybeFireSelectionChange(change && !suppressEvent); | |
ea2b3fd7 TL |
640 | }, |
641 | deselectDuringSelect: function(toSelect, suppressEvent) { | |
ecdde39c MC |
642 | var me = this, |
643 | selected = me.selected.getRange(), | |
644 | changed = 0, | |
645 | failed = false; | |
646 | // Prevent selection change events from firing, will happen during select | |
647 | me.suspendChanges(); | |
648 | me.deselectingDuringSelect = true; | |
ea2b3fd7 TL |
649 | let toDeselect = selected.filter(item => !Ext.Array.contains(toSelect, item)); |
650 | if (toDeselect.length > 0) { | |
651 | changed = me.doDeselect(toDeselect, suppressEvent); | |
652 | if (!changed) { | |
653 | failed = true; | |
ecdde39c MC |
654 | } |
655 | if (me.destroyed) { | |
656 | failed = true; | |
657 | changed = 0; | |
658 | } | |
659 | } | |
660 | me.deselectingDuringSelect = false; | |
661 | me.resumeChanges(); | |
662 | return [ | |
663 | failed, | |
664 | changed, | |
665 | ]; | |
1f628e9c | 666 | }, |
98d894d8 DC |
667 | }); |
668 | ||
322de562 DC |
669 | // stop nulling of properties |
670 | Ext.define('Proxmox.Component', { | |
671 | override: 'Ext.Component', | |
672 | clearPropertiesOnDestroy: false, | |
673 | }); | |
674 | ||
da24e83f | 675 | // Fix drag&drop for vms and desktops that detect 'pen' pointerType |
4fecfeef | 676 | // NOTE: this part has been rewritten in ExtJS 7.4, so re-check once we can upgrade |
da24e83f DC |
677 | Ext.define('Proxmox.view.DragZone', { |
678 | override: 'Ext.view.DragZone', | |
679 | ||
680 | onItemMouseDown: function(view, record, item, index, e) { | |
ecdde39c MC |
681 | // Ignore touchstart. |
682 | // For touch events, we use longpress. | |
683 | if (e.pointerType !== 'touch') { | |
684 | this.onTriggerGesture(view, record, item, index, e); | |
685 | } | |
da24e83f DC |
686 | }, |
687 | }); | |
688 | ||
64e7c537 DC |
689 | // Fix text selection on drag when using DragZone, |
690 | // see https://forum.sencha.com/forum/showthread.php?335100 | |
691 | Ext.define('Proxmox.dd.DragDropManager', { | |
692 | override: 'Ext.dd.DragDropManager', | |
693 | ||
694 | stopEvent: function(e) { | |
695 | if (this.stopPropagation) { | |
696 | e.stopPropagation(); | |
697 | } | |
698 | ||
699 | if (this.preventDefault) { | |
700 | e.preventDefault(); | |
701 | } | |
702 | }, | |
703 | }); | |
704 | ||
aec7e8d2 MC |
705 | // make it possible to set the SameSite attribute on cookies |
706 | Ext.define('Proxmox.Cookies', { | |
707 | override: 'Ext.util.Cookies', | |
708 | ||
709 | set: function(name, value, expires, path, domain, secure, samesite) { | |
710 | let attrs = []; | |
711 | ||
712 | if (expires) { | |
713 | attrs.push("expires=" + expires.toUTCString()); | |
714 | } | |
715 | ||
716 | if (path === undefined) { // mimic original function's behaviour | |
717 | attrs.push("path=/"); | |
718 | } else if (path) { | |
719 | attrs.push("path=" + path); | |
720 | } | |
721 | ||
722 | if (domain) { | |
723 | attrs.push("domain=" + domain); | |
724 | } | |
725 | ||
726 | if (secure === true) { | |
727 | attrs.push("secure"); | |
728 | } | |
729 | ||
730 | if (samesite && ["lax", "none", "strict"].includes(samesite.toLowerCase())) { | |
731 | attrs.push("samesite=" + samesite); | |
732 | } | |
733 | ||
734 | document.cookie = name + "=" + escape(value) + "; " + attrs.join("; "); | |
735 | }, | |
736 | }); | |
737 | ||
bb64de6e DM |
738 | // force alert boxes to be rendered with an Error Icon |
739 | // since Ext.Msg is an object and not a prototype, we need to override it | |
740 | // after the framework has been initiated | |
741 | Ext.onReady(function() { | |
bb64de6e | 742 | Ext.override(Ext.Msg, { |
05a977a2 | 743 | alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return |
bb64de6e | 744 | if (Ext.isString(title)) { |
05a977a2 | 745 | let config = { |
bb64de6e DM |
746 | title: title, |
747 | message: message, | |
748 | icon: this.ERROR, | |
749 | buttons: this.OK, | |
750 | fn: fn, | |
01031528 TL |
751 | scope: scope, |
752 | minWidth: this.minWidth, | |
bb64de6e DM |
753 | }; |
754 | return this.show(config); | |
755 | } | |
01031528 | 756 | }, |
bb64de6e | 757 | }); |
bb64de6e DM |
758 | }); |
759 | Ext.define('Ext.ux.IFrame', { | |
760 | extend: 'Ext.Component', | |
761 | ||
762 | alias: 'widget.uxiframe', | |
763 | ||
764 | loadMask: 'Loading...', | |
765 | ||
766 | src: 'about:blank', | |
767 | ||
768 | renderTpl: [ | |
ecdde39c | 769 | '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>', |
bb64de6e DM |
770 | ], |
771 | childEls: ['iframeEl'], | |
772 | ||
01031528 | 773 | initComponent: function() { |
ecdde39c | 774 | this.callParent(); |
bb64de6e | 775 | |
ecdde39c | 776 | this.frameName = this.frameName || this.id + '-frame'; |
bb64de6e DM |
777 | }, |
778 | ||
01031528 | 779 | initEvents: function() { |
ecdde39c MC |
780 | let me = this; |
781 | me.callParent(); | |
782 | me.iframeEl.on('load', me.onLoad, me); | |
bb64de6e DM |
783 | }, |
784 | ||
785 | initRenderData: function() { | |
ecdde39c MC |
786 | return Ext.apply(this.callParent(), { |
787 | src: this.src, | |
788 | frameName: this.frameName, | |
789 | }); | |
bb64de6e DM |
790 | }, |
791 | ||
792 | getBody: function() { | |
ecdde39c MC |
793 | let doc = this.getDoc(); |
794 | return doc.body || doc.documentElement; | |
bb64de6e DM |
795 | }, |
796 | ||
797 | getDoc: function() { | |
ecdde39c MC |
798 | try { |
799 | return this.getWin().document; | |
800 | } catch (ex) { | |
801 | return null; | |
802 | } | |
bb64de6e DM |
803 | }, |
804 | ||
805 | getWin: function() { | |
ecdde39c MC |
806 | let me = this, |
807 | name = me.frameName, | |
808 | win = Ext.isIE | |
809 | ? me.iframeEl.dom.contentWindow | |
810 | : window.frames[name]; | |
811 | return win; | |
bb64de6e DM |
812 | }, |
813 | ||
814 | getFrame: function() { | |
ecdde39c MC |
815 | let me = this; |
816 | return me.iframeEl.dom; | |
bb64de6e DM |
817 | }, |
818 | ||
01031528 | 819 | beforeDestroy: function() { |
ecdde39c MC |
820 | this.cleanupListeners(true); |
821 | this.callParent(); | |
bb64de6e DM |
822 | }, |
823 | ||
01031528 | 824 | cleanupListeners: function(destroying) { |
ecdde39c MC |
825 | let doc, prop; |
826 | ||
827 | if (this.rendered) { | |
828 | try { | |
829 | doc = this.getDoc(); | |
830 | if (doc) { | |
831 | Ext.get(doc).un(this._docListeners); | |
832 | if (destroying && doc.hasOwnProperty) { | |
833 | for (prop in doc) { | |
834 | if (Object.prototype.hasOwnProperty.call(doc, prop)) { | |
835 | delete doc[prop]; | |
836 | } | |
837 | } | |
838 | } | |
839 | } | |
840 | } catch (e) { | |
841 | // do nothing | |
842 | } | |
843 | } | |
bb64de6e DM |
844 | }, |
845 | ||
846 | onLoad: function() { | |
ecdde39c MC |
847 | let me = this, |
848 | doc = me.getDoc(), | |
849 | fn = me.onRelayedEvent; | |
850 | ||
851 | if (doc) { | |
852 | try { | |
853 | // These events need to be relayed from the inner document (where they stop | |
854 | // bubbling) up to the outer document. This has to be done at the DOM level so | |
855 | // the event reaches listeners on elements like the document body. The effected | |
856 | // mechanisms that depend on this bubbling behavior are listed to the right | |
857 | // of the event. | |
858 | Ext.get(doc).on( | |
859 | me._docListeners = { | |
860 | mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront) | |
861 | mousemove: fn, // window resize drag detection | |
862 | mouseup: fn, // window resize termination | |
863 | click: fn, // not sure, but just to be safe | |
864 | dblclick: fn, // not sure again | |
865 | scope: me, | |
866 | }, | |
867 | ); | |
868 | } catch (e) { | |
869 | // cannot do this xss | |
870 | } | |
871 | ||
872 | // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK! | |
873 | Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me); | |
874 | ||
875 | this.el.unmask(); | |
876 | this.fireEvent('load', this); | |
877 | } else if (me.src) { | |
878 | this.el.unmask(); | |
879 | this.fireEvent('error', this); | |
880 | } | |
bb64de6e DM |
881 | }, |
882 | ||
01031528 | 883 | onRelayedEvent: function(event) { |
ecdde39c | 884 | // relay event from the iframe's document to the document that owns the iframe... |
bb64de6e | 885 | |
ecdde39c | 886 | let iframeEl = this.iframeEl, |
bb64de6e | 887 | |
ecdde39c MC |
888 | // Get the left-based iframe position |
889 | iframeXY = iframeEl.getTrueXY(), | |
890 | originalEventXY = event.getXY(), | |
bb64de6e | 891 | |
ecdde39c MC |
892 | // Get the left-based XY position. |
893 | // This is because the consumer of the injected event will | |
894 | // perform its own RTL normalization. | |
895 | eventXY = event.getTrueXY(); | |
bb64de6e | 896 | |
ecdde39c MC |
897 | // the event from the inner document has XY relative to that document's origin, |
898 | // so adjust it to use the origin of the iframe in the outer document: | |
899 | event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]]; | |
bb64de6e | 900 | |
ecdde39c | 901 | event.injectEvent(iframeEl); // blame the iframe for the event... |
bb64de6e | 902 | |
ecdde39c | 903 | event.xy = originalEventXY; // restore the original XY (just for safety) |
bb64de6e DM |
904 | }, |
905 | ||
01031528 | 906 | load: function(src) { |
ecdde39c MC |
907 | let me = this, |
908 | text = me.loadMask, | |
909 | frame = me.getFrame(); | |
bb64de6e | 910 | |
ecdde39c MC |
911 | if (me.fireEvent('beforeload', me, src) !== false) { |
912 | if (text && me.el) { | |
913 | me.el.mask(text); | |
914 | } | |
bb64de6e | 915 | |
ecdde39c MC |
916 | frame.src = me.src = src || me.src; |
917 | } | |
01031528 | 918 | }, |
bb64de6e | 919 | }); |