]> git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/Toolkit.js
6dcccd385b9f29aa7108f3a57e937677d323e028
[proxmox-widget-toolkit.git] / src / Toolkit.js
1 // ExtJS related things
2
3 // do not send '_dc' parameter
4 Ext.Ajax.disableCaching = false;
5
6 // FIXME: HACK! Makes scrolling in number spinner work again. fixed in ExtJS >= 6.1
7 if (Ext.isFirefox) {
8 Ext.$eventNameMap.DOMMouseScroll = 'DOMMouseScroll';
9 }
10
11 // custom Vtypes
12 Ext.apply(Ext.form.field.VTypes, {
13 IPAddress: function(v) {
14 return Proxmox.Utils.IP4_match.test(v);
15 },
16 IPAddressText: gettext('Example') + ': 192.168.1.1',
17 IPAddressMask: /[\d.]/i,
18
19 IPCIDRAddress: function(v) {
20 let result = Proxmox.Utils.IP4_cidr_match.exec(v);
21 // limits according to JSON Schema see
22 // pve-common/src/PVE/JSONSchema.pm
23 return result !== null && result[1] >= 8 && result[1] <= 32;
24 },
25 IPCIDRAddressText: gettext('Example') + ': 192.168.1.1/24<br>' + gettext('Valid CIDR Range') + ': 8-32',
26 IPCIDRAddressMask: /[\d./]/i,
27
28 IP6Address: function(v) {
29 return Proxmox.Utils.IP6_match.test(v);
30 },
31 IP6AddressText: gettext('Example') + ': 2001:DB8::42',
32 IP6AddressMask: /[A-Fa-f0-9:]/,
33
34 IP6CIDRAddress: function(v) {
35 let result = Proxmox.Utils.IP6_cidr_match.exec(v);
36 // limits according to JSON Schema see
37 // pve-common/src/PVE/JSONSchema.pm
38 return result !== null && result[1] >= 8 && result[1] <= 128;
39 },
40 IP6CIDRAddressText: gettext('Example') + ': 2001:DB8::42/64<br>' + gettext('Valid CIDR Range') + ': 8-128',
41 IP6CIDRAddressMask: /[A-Fa-f0-9:/]/,
42
43 IP6PrefixLength: function(v) {
44 return v >= 0 && v <= 128;
45 },
46 IP6PrefixLengthText: gettext('Example') + ': X, where 0 <= X <= 128',
47 IP6PrefixLengthMask: /[0-9]/,
48
49 IP64Address: function(v) {
50 return Proxmox.Utils.IP64_match.test(v);
51 },
52 IP64AddressText: gettext('Example') + ': 192.168.1.1 2001:DB8::42',
53 IP64AddressMask: /[A-Fa-f0-9.:]/,
54
55 IP64CIDRAddress: function(v) {
56 let result = Proxmox.Utils.IP64_cidr_match.exec(v);
57 if (result === null) {
58 return false;
59 }
60 if (result[1] !== undefined) {
61 return result[1] >= 8 && result[1] <= 128;
62 } else if (result[2] !== undefined) {
63 return result[2] >= 8 && result[2] <= 32;
64 } else {
65 return false;
66 }
67 },
68 IP64CIDRAddressText: gettext('Example') + ': 192.168.1.1/24 2001:DB8::42/64',
69 IP64CIDRAddressMask: /[A-Fa-f0-9.:/]/,
70
71 MacAddress: function(v) {
72 return (/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/).test(v);
73 },
74 MacAddressMask: /[a-fA-F0-9:]/,
75 MacAddressText: gettext('Example') + ': 01:23:45:67:89:ab',
76
77 MacPrefix: function(v) {
78 return (/^[a-f0-9][02468ace](?::[a-f0-9]{2}){0,2}:?$/i).test(v);
79 },
80 MacPrefixMask: /[a-fA-F0-9:]/,
81 MacPrefixText: gettext('Example') + ': 02:8f - ' + gettext('only unicast addresses are allowed'),
82
83 BridgeName: function(v) {
84 return (/^vmbr\d{1,4}$/).test(v);
85 },
86 VlanName: function(v) {
87 if (Proxmox.Utils.VlanInterface_match.test(v)) {
88 return true;
89 } else if (Proxmox.Utils.Vlan_match.test(v)) {
90 return true;
91 }
92 return true;
93 },
94 BridgeNameText: gettext('Format') + ': vmbr<b>N</b>, where 0 <= <b>N</b> <= 9999',
95
96 BondName: function(v) {
97 return (/^bond\d{1,4}$/).test(v);
98 },
99 BondNameText: gettext('Format') + ': bond<b>N</b>, where 0 <= <b>N</b> <= 9999',
100
101 InterfaceName: function(v) {
102 return (/^[a-z][a-z0-9_]{1,20}$/).test(v);
103 },
104 InterfaceNameText: gettext("Allowed characters") + ": 'a-z', '0-9', '_'<br />" +
105 gettext("Minimum characters") + ": 2<br />" +
106 gettext("Maximum characters") + ": 21<br />" +
107 gettext("Must start with") + ": 'a-z'",
108
109 StorageId: function(v) {
110 return (/^[a-z][a-z0-9\-_.]*[a-z0-9]$/i).test(v);
111 },
112 StorageIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '-', '_', '.'<br />" +
113 gettext("Minimum characters") + ": 2<br />" +
114 gettext("Must start with") + ": 'A-Z', 'a-z'<br />" +
115 gettext("Must end with") + ": 'A-Z', 'a-z', '0-9'<br />",
116
117 ConfigId: function(v) {
118 return (/^[a-z][a-z0-9_]+$/i).test(v);
119 },
120 ConfigIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '_'<br />" +
121 gettext("Minimum characters") + ": 2<br />" +
122 gettext("Must start with") + ": " + gettext("letter"),
123
124 HttpProxy: function(v) {
125 return (/^http:\/\/.*$/).test(v);
126 },
127 HttpProxyText: gettext('Example') + ": http://username:password&#64;host:port/",
128
129 DnsName: function(v) {
130 return Proxmox.Utils.DnsName_match.test(v);
131 },
132 DnsNameText: gettext('This is not a valid DNS name'),
133
134 // workaround for https://www.sencha.com/forum/showthread.php?302150
135 proxmoxMail: function(v) {
136 return (/^(\w+)([-+.][\w]+)*@(\w[-\w]*\.){1,5}([A-Za-z]){2,63}$/).test(v);
137 },
138 proxmoxMailText: gettext('Example') + ": user@example.com",
139
140 DnsOrIp: function(v) {
141 if (!Proxmox.Utils.DnsName_match.test(v) &&
142 !Proxmox.Utils.IP64_match.test(v)) {
143 return false;
144 }
145
146 return true;
147 },
148 DnsOrIpText: gettext('Not a valid DNS name or IP address.'),
149
150 HostPort: function(v) {
151 return Proxmox.Utils.HostPort_match.test(v) ||
152 Proxmox.Utils.HostPortBrackets_match.test(v) ||
153 Proxmox.Utils.IP6_dotnotation_match.test(v);
154 },
155 HostPortText: gettext('Host/IP address or optional port is invalid'),
156
157 HostList: function(v) {
158 let list = v.split(/[ ,;]+/);
159 let i;
160 for (i = 0; i < list.length; i++) {
161 if (list[i] === '') {
162 continue;
163 }
164
165 if (!Proxmox.Utils.HostPort_match.test(list[i]) &&
166 !Proxmox.Utils.HostPortBrackets_match.test(list[i]) &&
167 !Proxmox.Utils.IP6_dotnotation_match.test(list[i])) {
168 return false;
169 }
170 }
171
172 return true;
173 },
174 HostListText: gettext('Not a valid list of hosts'),
175
176 password: function(val, field) {
177 if (field.initialPassField) {
178 let pwd = field.up('form').down(`[name=${field.initialPassField}]`);
179 return val === pwd.getValue();
180 }
181 return true;
182 },
183
184 passwordText: gettext('Passwords do not match'),
185 });
186
187 // Firefox 52+ Touchscreen bug
188 // see https://www.sencha.com/forum/showthread.php?336762-Examples-don-t-work-in-Firefox-52-touchscreen/page2
189 // and https://bugzilla.proxmox.com/show_bug.cgi?id=1223
190 Ext.define('EXTJS_23846.Element', {
191 override: 'Ext.dom.Element',
192 }, function(Element) {
193 let supports = Ext.supports,
194 proto = Element.prototype,
195 eventMap = proto.eventMap,
196 additiveEvents = proto.additiveEvents;
197
198 if (Ext.os.is.Desktop && supports.TouchEvents && !supports.PointerEvents) {
199 eventMap.touchstart = 'mousedown';
200 eventMap.touchmove = 'mousemove';
201 eventMap.touchend = 'mouseup';
202 eventMap.touchcancel = 'mouseup';
203
204 additiveEvents.mousedown = 'mousedown';
205 additiveEvents.mousemove = 'mousemove';
206 additiveEvents.mouseup = 'mouseup';
207 additiveEvents.touchstart = 'touchstart';
208 additiveEvents.touchmove = 'touchmove';
209 additiveEvents.touchend = 'touchend';
210 additiveEvents.touchcancel = 'touchcancel';
211
212 additiveEvents.pointerdown = 'mousedown';
213 additiveEvents.pointermove = 'mousemove';
214 additiveEvents.pointerup = 'mouseup';
215 additiveEvents.pointercancel = 'mouseup';
216 }
217 });
218
219 Ext.define('EXTJS_23846.Gesture', {
220 override: 'Ext.event.publisher.Gesture',
221 }, function(Gesture) {
222 let gestures = Gesture.instance;
223
224 if (Ext.supports.TouchEvents && !Ext.isWebKit && Ext.os.is.Desktop) {
225 gestures.handledDomEvents.push('mousedown', 'mousemove', 'mouseup');
226 gestures.registerEvents();
227 }
228 });
229
230 Ext.define('EXTJS_18900.Pie', {
231 override: 'Ext.chart.series.Pie',
232
233 // from 6.0.2
234 betweenAngle: function(x, a, b) {
235 let pp = Math.PI * 2,
236 offset = this.rotationOffset;
237
238 if (a === b) {
239 return false;
240 }
241
242 if (!this.getClockwise()) {
243 x *= -1;
244 a *= -1;
245 b *= -1;
246 a -= offset;
247 b -= offset;
248 } else {
249 a += offset;
250 b += offset;
251 }
252
253 x -= a;
254 b -= a;
255
256 // Normalize, so that both x and b are in the [0,360) interval.
257 x %= pp;
258 b %= pp;
259 x += pp;
260 b += pp;
261 x %= pp;
262 b %= pp;
263
264 // Because 360 * n angles will be normalized to 0,
265 // we need to treat b === 0 as a special case.
266 return x < b || b === 0;
267 },
268 });
269
270 // we always want the number in x.y format and never in, e.g., x,y
271 Ext.define('PVE.form.field.Number', {
272 override: 'Ext.form.field.Number',
273 submitLocaleSeparator: false,
274 });
275
276 // ExtJs 5-6 has an issue with caching
277 // see https://www.sencha.com/forum/showthread.php?308989
278 Ext.define('Proxmox.UnderlayPool', {
279 override: 'Ext.dom.UnderlayPool',
280
281 checkOut: function() {
282 let cache = this.cache,
283 len = cache.length,
284 el;
285
286 // do cleanup because some of the objects might have been destroyed
287 while (len--) {
288 if (cache[len].destroyed) {
289 cache.splice(len, 1);
290 }
291 }
292 // end do cleanup
293
294 el = cache.shift();
295
296 if (!el) {
297 el = Ext.Element.create(this.elementConfig);
298 el.setVisibilityMode(2);
299 //<debug>
300 // tell the spec runner to ignore this element when checking if the dom is clean
301 el.dom.setAttribute('data-sticky', true);
302 //</debug>
303 }
304
305 return el;
306 },
307 });
308
309 // 'Enter' in Textareas and aria multiline fields should not activate the
310 // defaultbutton, fixed in extjs 6.0.2
311 Ext.define('PVE.panel.Panel', {
312 override: 'Ext.panel.Panel',
313
314 fireDefaultButton: function(e) {
315 if (e.target.getAttribute('aria-multiline') === 'true' ||
316 e.target.tagName === "TEXTAREA") {
317 return true;
318 }
319 return this.callParent(arguments);
320 },
321 });
322
323 // if the order of the values are not the same in originalValue and value
324 // extjs will not overwrite value, but marks the field dirty and thus
325 // the reset button will be enabled (but clicking it changes nothing)
326 // so if the arrays are not the same after resetting, we
327 // clear and set it
328 Ext.define('Proxmox.form.ComboBox', {
329 override: 'Ext.form.field.ComboBox',
330
331 reset: function() {
332 // copied from combobox
333 let me = this;
334 me.callParent();
335
336 // clear and set when not the same
337 let value = me.getValue();
338 if (Ext.isArray(me.originalValue) && Ext.isArray(value) &&
339 !Ext.Array.equals(value, me.originalValue)) {
340 me.clearValue();
341 me.setValue(me.originalValue);
342 }
343 },
344
345 // we also want to open the trigger on editable comboboxes by default
346 initComponent: function() {
347 let me = this;
348 me.callParent();
349
350 if (me.editable) {
351 // The trigger.picker causes first a focus event on the field then
352 // toggles the selection picker. Thus skip expanding in this case,
353 // else our focus listener expands and the picker.trigger then
354 // collapses it directly afterwards.
355 Ext.override(me.triggers.picker, {
356 onMouseDown: function(e) {
357 // copied "should we focus" check from Ext.form.trigger.Trigger
358 if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) {
359 me.skip_expand_on_focus = true;
360 }
361 this.callParent(arguments);
362 },
363 });
364
365 me.on("focus", function(combobox) {
366 if (!combobox.isExpanded && !combobox.skip_expand_on_focus) {
367 combobox.expand();
368 }
369 combobox.skip_expand_on_focus = false;
370 });
371 }
372 },
373 });
374
375 // when refreshing a grid/tree view, restoring the focus moves the view back to
376 // the previously focused item. Save scroll position before refocusing.
377 Ext.define(null, {
378 override: 'Ext.view.Table',
379
380 jumpToFocus: false,
381
382 saveFocusState: function() {
383 let me = this,
384 store = me.dataSource,
385 actionableMode = me.actionableMode,
386 navModel = me.getNavigationModel(),
387 focusPosition = actionableMode ? me.actionPosition : navModel.getPosition(true),
388 refocusRow, refocusCol;
389
390 if (focusPosition) {
391 // Separate this from the instance that the nav model is using.
392 focusPosition = focusPosition.clone();
393
394 // Exit actionable mode.
395 // We must inform any Actionables that they must relinquish control.
396 // Tabbability must be reset.
397 if (actionableMode) {
398 me.ownerGrid.setActionableMode(false);
399 }
400
401 // Blur the focused descendant, but do not trigger focusLeave.
402 me.el.dom.focus();
403
404 // Exiting actionable mode navigates to the owning cell, so in either focus mode we must
405 // clear the navigation position
406 navModel.setPosition();
407
408 // The following function will attempt to refocus back in the same mode to the same cell
409 // as it was at before based upon the previous record (if it's still inthe store), or the row index.
410 return function() {
411 // If we still have data, attempt to refocus in the same mode.
412 if (store.getCount()) {
413 // Adjust expectations of where we are able to refocus according to what kind of destruction
414 // might have been wrought on this view's DOM during focus save.
415 refocusRow = Math.min(focusPosition.rowIdx, me.all.getCount() - 1);
416 refocusCol = Math.min(focusPosition.colIdx,
417 me.getVisibleColumnManager().getColumns().length - 1);
418 refocusRow = store.contains(focusPosition.record) ? focusPosition.record : refocusRow;
419 focusPosition = new Ext.grid.CellContext(me).setPosition(refocusRow, refocusCol);
420
421 if (actionableMode) {
422 me.ownerGrid.setActionableMode(true, focusPosition);
423 } else {
424 me.cellFocused = true;
425
426 // we sometimes want to scroll back to where we were
427 let x = me.getScrollX();
428 let y = me.getScrollY();
429
430 // Pass "preventNavigation" as true so that that does not cause selection.
431 navModel.setPosition(focusPosition, null, null, null, true);
432
433 if (!me.jumpToFocus) {
434 me.scrollTo(x, y);
435 }
436 }
437 } else { // No rows - focus associated column header
438 focusPosition.column.focus();
439 }
440 };
441 }
442 return Ext.emptyFn;
443 },
444 });
445
446 // should be fixed with ExtJS 6.0.2, see:
447 // https://www.sencha.com/forum/showthread.php?307244-Bug-with-datefield-in-window-with-scroll
448 Ext.define('Proxmox.Datepicker', {
449 override: 'Ext.picker.Date',
450 hideMode: 'visibility',
451 });
452
453 // ExtJS 6.0.1 has no setSubmitValue() (although you find it in the docs).
454 // Note: this.submitValue is a boolean flag, whereas getSubmitValue() returns
455 // data to be submitted.
456 Ext.define('Proxmox.form.field.Text', {
457 override: 'Ext.form.field.Text',
458
459 setSubmitValue: function(v) {
460 this.submitValue = v;
461 },
462 });
463
464 // this should be fixed with ExtJS 6.0.2
465 // make mousescrolling work in firefox in the containers overflowhandler
466 Ext.define(null, {
467 override: 'Ext.layout.container.boxOverflow.Scroller',
468
469 createWheelListener: function() {
470 let me = this;
471 if (Ext.isFirefox) {
472 me.wheelListener = me.layout.innerCt.on('wheel', me.onMouseWheelFirefox, me, { destroyable: true });
473 } else {
474 me.wheelListener = me.layout.innerCt.on('mousewheel', me.onMouseWheel, me, { destroyable: true });
475 }
476 },
477
478 // special wheel handler for firefox. differs from the default onMouseWheel
479 // handler by using deltaY instead of wheelDeltaY and no normalizing,
480 // because it is already
481 onMouseWheelFirefox: function(e) {
482 e.stopEvent();
483 let delta = e.browserEvent.deltaY || 0;
484 this.scrollBy(delta * this.wheelIncrement, false);
485 },
486
487 });
488
489 // add '@' to the valid id
490 Ext.define('Proxmox.validIdReOverride', {
491 override: 'Ext.Component',
492 validIdRe: /^[a-z_][a-z0-9\-_@]*$/i,
493 });
494
495 // use whole checkbox cell to multiselect, not only the checkbox
496 Ext.define('Proxmox.selection.CheckboxModel', {
497 override: 'Ext.selection.CheckboxModel',
498
499 checkSelector: '.x-grid-cell-row-checker',
500 });
501
502 // force alert boxes to be rendered with an Error Icon
503 // since Ext.Msg is an object and not a prototype, we need to override it
504 // after the framework has been initiated
505 Ext.onReady(function() {
506 Ext.override(Ext.Msg, {
507 alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
508 if (Ext.isString(title)) {
509 let config = {
510 title: title,
511 message: message,
512 icon: this.ERROR,
513 buttons: this.OK,
514 fn: fn,
515 scope: scope,
516 minWidth: this.minWidth,
517 };
518 return this.show(config);
519 }
520 },
521 });
522 });
523 Ext.define('Ext.ux.IFrame', {
524 extend: 'Ext.Component',
525
526 alias: 'widget.uxiframe',
527
528 loadMask: 'Loading...',
529
530 src: 'about:blank',
531
532 renderTpl: [
533 '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
534 ],
535 childEls: ['iframeEl'],
536
537 initComponent: function() {
538 this.callParent();
539
540 this.frameName = this.frameName || this.id + '-frame';
541 },
542
543 initEvents: function() {
544 let me = this;
545 me.callParent();
546 me.iframeEl.on('load', me.onLoad, me);
547 },
548
549 initRenderData: function() {
550 return Ext.apply(this.callParent(), {
551 src: this.src,
552 frameName: this.frameName,
553 });
554 },
555
556 getBody: function() {
557 let doc = this.getDoc();
558 return doc.body || doc.documentElement;
559 },
560
561 getDoc: function() {
562 try {
563 return this.getWin().document;
564 } catch (ex) {
565 return null;
566 }
567 },
568
569 getWin: function() {
570 let me = this,
571 name = me.frameName,
572 win = Ext.isIE
573 ? me.iframeEl.dom.contentWindow
574 : window.frames[name];
575 return win;
576 },
577
578 getFrame: function() {
579 let me = this;
580 return me.iframeEl.dom;
581 },
582
583 beforeDestroy: function() {
584 this.cleanupListeners(true);
585 this.callParent();
586 },
587
588 cleanupListeners: function(destroying) {
589 let doc, prop;
590
591 if (this.rendered) {
592 try {
593 doc = this.getDoc();
594 if (doc) {
595 Ext.get(doc).un(this._docListeners);
596 if (destroying && doc.hasOwnProperty) {
597 for (prop in doc) {
598 if (Object.prototype.hasOwnProperty.call(doc, prop)) {
599 delete doc[prop];
600 }
601 }
602 }
603 }
604 } catch (e) {
605 // do nothing
606 }
607 }
608 },
609
610 onLoad: function() {
611 let me = this,
612 doc = me.getDoc(),
613 fn = me.onRelayedEvent;
614
615 if (doc) {
616 try {
617 // These events need to be relayed from the inner document (where they stop
618 // bubbling) up to the outer document. This has to be done at the DOM level so
619 // the event reaches listeners on elements like the document body. The effected
620 // mechanisms that depend on this bubbling behavior are listed to the right
621 // of the event.
622 Ext.get(doc).on(
623 me._docListeners = {
624 mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
625 mousemove: fn, // window resize drag detection
626 mouseup: fn, // window resize termination
627 click: fn, // not sure, but just to be safe
628 dblclick: fn, // not sure again
629 scope: me,
630 },
631 );
632 } catch (e) {
633 // cannot do this xss
634 }
635
636 // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
637 Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
638
639 this.el.unmask();
640 this.fireEvent('load', this);
641 } else if (me.src) {
642 this.el.unmask();
643 this.fireEvent('error', this);
644 }
645 },
646
647 onRelayedEvent: function(event) {
648 // relay event from the iframe's document to the document that owns the iframe...
649
650 let iframeEl = this.iframeEl,
651
652 // Get the left-based iframe position
653 iframeXY = iframeEl.getTrueXY(),
654 originalEventXY = event.getXY(),
655
656 // Get the left-based XY position.
657 // This is because the consumer of the injected event will
658 // perform its own RTL normalization.
659 eventXY = event.getTrueXY();
660
661 // the event from the inner document has XY relative to that document's origin,
662 // so adjust it to use the origin of the iframe in the outer document:
663 event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
664
665 event.injectEvent(iframeEl); // blame the iframe for the event...
666
667 event.xy = originalEventXY; // restore the original XY (just for safety)
668 },
669
670 load: function(src) {
671 let me = this,
672 text = me.loadMask,
673 frame = me.getFrame();
674
675 if (me.fireEvent('beforeload', me, src) !== false) {
676 if (text && me.el) {
677 me.el.mask(text);
678 }
679
680 frame.src = me.src = src || me.src;
681 }
682 },
683 });