]> git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/Toolkit.js
f7060366b53ef1644c8c216431d3ee9daadccca9
[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
156 HostPortText: gettext('Not a valid hosts'),
157
158 HostList: function(v) {
159 let list = v.split(/[ ,;]+/);
160 let i;
161 for (i = 0; i < list.length; i++) {
162 if (list[i] === '') {
163 continue;
164 }
165
166 if (!Proxmox.Utils.HostPort_match.test(list[i]) &&
167 !Proxmox.Utils.HostPortBrackets_match.test(list[i]) &&
168 !Proxmox.Utils.IP6_dotnotation_match.test(list[i])) {
169 return false;
170 }
171 }
172
173 return true;
174 },
175 HostListText: gettext('Not a valid list of hosts'),
176
177 password: function(val, field) {
178 if (field.initialPassField) {
179 let pwd = field.up('form').down(`[name=${field.initialPassField}]`);
180 return val === pwd.getValue();
181 }
182 return true;
183 },
184
185 passwordText: gettext('Passwords do not match'),
186 });
187
188 // Firefox 52+ Touchscreen bug
189 // see https://www.sencha.com/forum/showthread.php?336762-Examples-don-t-work-in-Firefox-52-touchscreen/page2
190 // and https://bugzilla.proxmox.com/show_bug.cgi?id=1223
191 Ext.define('EXTJS_23846.Element', {
192 override: 'Ext.dom.Element',
193 }, function(Element) {
194 let supports = Ext.supports,
195 proto = Element.prototype,
196 eventMap = proto.eventMap,
197 additiveEvents = proto.additiveEvents;
198
199 if (Ext.os.is.Desktop && supports.TouchEvents && !supports.PointerEvents) {
200 eventMap.touchstart = 'mousedown';
201 eventMap.touchmove = 'mousemove';
202 eventMap.touchend = 'mouseup';
203 eventMap.touchcancel = 'mouseup';
204
205 additiveEvents.mousedown = 'mousedown';
206 additiveEvents.mousemove = 'mousemove';
207 additiveEvents.mouseup = 'mouseup';
208 additiveEvents.touchstart = 'touchstart';
209 additiveEvents.touchmove = 'touchmove';
210 additiveEvents.touchend = 'touchend';
211 additiveEvents.touchcancel = 'touchcancel';
212
213 additiveEvents.pointerdown = 'mousedown';
214 additiveEvents.pointermove = 'mousemove';
215 additiveEvents.pointerup = 'mouseup';
216 additiveEvents.pointercancel = 'mouseup';
217 }
218 });
219
220 Ext.define('EXTJS_23846.Gesture', {
221 override: 'Ext.event.publisher.Gesture',
222 }, function(Gesture) {
223 let gestures = Gesture.instance;
224
225 if (Ext.supports.TouchEvents && !Ext.isWebKit && Ext.os.is.Desktop) {
226 gestures.handledDomEvents.push('mousedown', 'mousemove', 'mouseup');
227 gestures.registerEvents();
228 }
229 });
230
231 Ext.define('EXTJS_18900.Pie', {
232 override: 'Ext.chart.series.Pie',
233
234 // from 6.0.2
235 betweenAngle: function(x, a, b) {
236 let pp = Math.PI * 2,
237 offset = this.rotationOffset;
238
239 if (a === b) {
240 return false;
241 }
242
243 if (!this.getClockwise()) {
244 x *= -1;
245 a *= -1;
246 b *= -1;
247 a -= offset;
248 b -= offset;
249 } else {
250 a += offset;
251 b += offset;
252 }
253
254 x -= a;
255 b -= a;
256
257 // Normalize, so that both x and b are in the [0,360) interval.
258 x %= pp;
259 b %= pp;
260 x += pp;
261 b += pp;
262 x %= pp;
263 b %= pp;
264
265 // Because 360 * n angles will be normalized to 0,
266 // we need to treat b === 0 as a special case.
267 return x < b || b === 0;
268 },
269 });
270
271 // we always want the number in x.y format and never in, e.g., x,y
272 Ext.define('PVE.form.field.Number', {
273 override: 'Ext.form.field.Number',
274 submitLocaleSeparator: false,
275 });
276
277 // ExtJs 5-6 has an issue with caching
278 // see https://www.sencha.com/forum/showthread.php?308989
279 Ext.define('Proxmox.UnderlayPool', {
280 override: 'Ext.dom.UnderlayPool',
281
282 checkOut: function() {
283 let cache = this.cache,
284 len = cache.length,
285 el;
286
287 // do cleanup because some of the objects might have been destroyed
288 while (len--) {
289 if (cache[len].destroyed) {
290 cache.splice(len, 1);
291 }
292 }
293 // end do cleanup
294
295 el = cache.shift();
296
297 if (!el) {
298 el = Ext.Element.create(this.elementConfig);
299 el.setVisibilityMode(2);
300 //<debug>
301 // tell the spec runner to ignore this element when checking if the dom is clean
302 el.dom.setAttribute('data-sticky', true);
303 //</debug>
304 }
305
306 return el;
307 },
308 });
309
310 // 'Enter' in Textareas and aria multiline fields should not activate the
311 // defaultbutton, fixed in extjs 6.0.2
312 Ext.define('PVE.panel.Panel', {
313 override: 'Ext.panel.Panel',
314
315 fireDefaultButton: function(e) {
316 if (e.target.getAttribute('aria-multiline') === 'true' ||
317 e.target.tagName === "TEXTAREA") {
318 return true;
319 }
320 return this.callParent(arguments);
321 },
322 });
323
324 // if the order of the values are not the same in originalValue and value
325 // extjs will not overwrite value, but marks the field dirty and thus
326 // the reset button will be enabled (but clicking it changes nothing)
327 // so if the arrays are not the same after resetting, we
328 // clear and set it
329 Ext.define('Proxmox.form.ComboBox', {
330 override: 'Ext.form.field.ComboBox',
331
332 reset: function() {
333 // copied from combobox
334 let me = this;
335 me.callParent();
336
337 // clear and set when not the same
338 let value = me.getValue();
339 if (Ext.isArray(me.originalValue) && Ext.isArray(value) &&
340 !Ext.Array.equals(value, me.originalValue)) {
341 me.clearValue();
342 me.setValue(me.originalValue);
343 }
344 },
345
346 // we also want to open the trigger on editable comboboxes by default
347 initComponent: function() {
348 let me = this;
349 me.callParent();
350
351 if (me.editable) {
352 // The trigger.picker causes first a focus event on the field then
353 // toggles the selection picker. Thus skip expanding in this case,
354 // else our focus listener expands and the picker.trigger then
355 // collapses it directly afterwards.
356 Ext.override(me.triggers.picker, {
357 onMouseDown: function(e) {
358 // copied "should we focus" check from Ext.form.trigger.Trigger
359 if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) {
360 me.skip_expand_on_focus = true;
361 }
362 this.callParent(arguments);
363 },
364 });
365
366 me.on("focus", function(combobox) {
367 if (!combobox.isExpanded && !combobox.skip_expand_on_focus) {
368 combobox.expand();
369 }
370 combobox.skip_expand_on_focus = false;
371 });
372 }
373 },
374 });
375
376 // when refreshing a grid/tree view, restoring the focus moves the view back to
377 // the previously focused item. Save scroll position before refocusing.
378 Ext.define(null, {
379 override: 'Ext.view.Table',
380
381 jumpToFocus: false,
382
383 saveFocusState: function() {
384 let me = this,
385 store = me.dataSource,
386 actionableMode = me.actionableMode,
387 navModel = me.getNavigationModel(),
388 focusPosition = actionableMode ? me.actionPosition : navModel.getPosition(true),
389 refocusRow, refocusCol;
390
391 if (focusPosition) {
392 // Separate this from the instance that the nav model is using.
393 focusPosition = focusPosition.clone();
394
395 // Exit actionable mode.
396 // We must inform any Actionables that they must relinquish control.
397 // Tabbability must be reset.
398 if (actionableMode) {
399 me.ownerGrid.setActionableMode(false);
400 }
401
402 // Blur the focused descendant, but do not trigger focusLeave.
403 me.el.dom.focus();
404
405 // Exiting actionable mode navigates to the owning cell, so in either focus mode we must
406 // clear the navigation position
407 navModel.setPosition();
408
409 // The following function will attempt to refocus back in the same mode to the same cell
410 // as it was at before based upon the previous record (if it's still inthe store), or the row index.
411 return function() {
412 // If we still have data, attempt to refocus in the same mode.
413 if (store.getCount()) {
414 // Adjust expectations of where we are able to refocus according to what kind of destruction
415 // might have been wrought on this view's DOM during focus save.
416 refocusRow = Math.min(focusPosition.rowIdx, me.all.getCount() - 1);
417 refocusCol = Math.min(focusPosition.colIdx,
418 me.getVisibleColumnManager().getColumns().length - 1);
419 refocusRow = store.contains(focusPosition.record) ? focusPosition.record : refocusRow;
420 focusPosition = new Ext.grid.CellContext(me).setPosition(refocusRow, refocusCol);
421
422 if (actionableMode) {
423 me.ownerGrid.setActionableMode(true, focusPosition);
424 } else {
425 me.cellFocused = true;
426
427 // we sometimes want to scroll back to where we were
428 let x = me.getScrollX();
429 let y = me.getScrollY();
430
431 // Pass "preventNavigation" as true so that that does not cause selection.
432 navModel.setPosition(focusPosition, null, null, null, true);
433
434 if (!me.jumpToFocus) {
435 me.scrollTo(x, y);
436 }
437 }
438 } else { // No rows - focus associated column header
439 focusPosition.column.focus();
440 }
441 };
442 }
443 return Ext.emptyFn;
444 },
445 });
446
447 // should be fixed with ExtJS 6.0.2, see:
448 // https://www.sencha.com/forum/showthread.php?307244-Bug-with-datefield-in-window-with-scroll
449 Ext.define('Proxmox.Datepicker', {
450 override: 'Ext.picker.Date',
451 hideMode: 'visibility',
452 });
453
454 // ExtJS 6.0.1 has no setSubmitValue() (although you find it in the docs).
455 // Note: this.submitValue is a boolean flag, whereas getSubmitValue() returns
456 // data to be submitted.
457 Ext.define('Proxmox.form.field.Text', {
458 override: 'Ext.form.field.Text',
459
460 setSubmitValue: function(v) {
461 this.submitValue = v;
462 },
463 });
464
465 // this should be fixed with ExtJS 6.0.2
466 // make mousescrolling work in firefox in the containers overflowhandler
467 Ext.define(null, {
468 override: 'Ext.layout.container.boxOverflow.Scroller',
469
470 createWheelListener: function() {
471 let me = this;
472 if (Ext.isFirefox) {
473 me.wheelListener = me.layout.innerCt.on('wheel', me.onMouseWheelFirefox, me, { destroyable: true });
474 } else {
475 me.wheelListener = me.layout.innerCt.on('mousewheel', me.onMouseWheel, me, { destroyable: true });
476 }
477 },
478
479 // special wheel handler for firefox. differs from the default onMouseWheel
480 // handler by using deltaY instead of wheelDeltaY and no normalizing,
481 // because it is already
482 onMouseWheelFirefox: function(e) {
483 e.stopEvent();
484 let delta = e.browserEvent.deltaY || 0;
485 this.scrollBy(delta * this.wheelIncrement, false);
486 },
487
488 });
489
490 // add '@' to the valid id
491 Ext.define('Proxmox.validIdReOverride', {
492 override: 'Ext.Component',
493 validIdRe: /^[a-z_][a-z0-9\-_@]*$/i,
494 });
495
496 // force alert boxes to be rendered with an Error Icon
497 // since Ext.Msg is an object and not a prototype, we need to override it
498 // after the framework has been initiated
499 Ext.onReady(function() {
500 /*jslint confusion: true */
501 Ext.override(Ext.Msg, {
502 alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
503 if (Ext.isString(title)) {
504 let config = {
505 title: title,
506 message: message,
507 icon: this.ERROR,
508 buttons: this.OK,
509 fn: fn,
510 scope: scope,
511 minWidth: this.minWidth,
512 };
513 return this.show(config);
514 }
515 },
516 });
517 /*jslint confusion: false */
518 });
519 Ext.define('Ext.ux.IFrame', {
520 extend: 'Ext.Component',
521
522 alias: 'widget.uxiframe',
523
524 loadMask: 'Loading...',
525
526 src: 'about:blank',
527
528 renderTpl: [
529 '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
530 ],
531 childEls: ['iframeEl'],
532
533 initComponent: function() {
534 this.callParent();
535
536 this.frameName = this.frameName || this.id + '-frame';
537 },
538
539 initEvents: function() {
540 let me = this;
541 me.callParent();
542 me.iframeEl.on('load', me.onLoad, me);
543 },
544
545 initRenderData: function() {
546 return Ext.apply(this.callParent(), {
547 src: this.src,
548 frameName: this.frameName,
549 });
550 },
551
552 getBody: function() {
553 let doc = this.getDoc();
554 return doc.body || doc.documentElement;
555 },
556
557 getDoc: function() {
558 try {
559 return this.getWin().document;
560 } catch (ex) {
561 return null;
562 }
563 },
564
565 getWin: function() {
566 let me = this,
567 name = me.frameName,
568 win = Ext.isIE
569 ? me.iframeEl.dom.contentWindow
570 : window.frames[name];
571 return win;
572 },
573
574 getFrame: function() {
575 let me = this;
576 return me.iframeEl.dom;
577 },
578
579 beforeDestroy: function() {
580 this.cleanupListeners(true);
581 this.callParent();
582 },
583
584 cleanupListeners: function(destroying) {
585 let doc, prop;
586
587 if (this.rendered) {
588 try {
589 doc = this.getDoc();
590 if (doc) {
591 Ext.get(doc).un(this._docListeners);
592 if (destroying && doc.hasOwnProperty) {
593 for (prop in doc) {
594 if (Object.prototype.hasOwnProperty.call(doc, prop)) {
595 delete doc[prop];
596 }
597 }
598 }
599 }
600 } catch (e) {
601 // do nothing
602 }
603 }
604 },
605
606 onLoad: function() {
607 let me = this,
608 doc = me.getDoc(),
609 fn = me.onRelayedEvent;
610
611 if (doc) {
612 try {
613 // These events need to be relayed from the inner document (where they stop
614 // bubbling) up to the outer document. This has to be done at the DOM level so
615 // the event reaches listeners on elements like the document body. The effected
616 // mechanisms that depend on this bubbling behavior are listed to the right
617 // of the event.
618 /*jslint nomen: true*/
619 Ext.get(doc).on(
620 me._docListeners = {
621 mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
622 mousemove: fn, // window resize drag detection
623 mouseup: fn, // window resize termination
624 click: fn, // not sure, but just to be safe
625 dblclick: fn, // not sure again
626 scope: me,
627 },
628 );
629 /*jslint nomen: false*/
630 } catch (e) {
631 // cannot do this xss
632 }
633
634 // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
635 Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
636
637 this.el.unmask();
638 this.fireEvent('load', this);
639 } else if (me.src) {
640 this.el.unmask();
641 this.fireEvent('error', this);
642 }
643 },
644
645 onRelayedEvent: function(event) {
646 // relay event from the iframe's document to the document that owns the iframe...
647
648 let iframeEl = this.iframeEl,
649
650 // Get the left-based iframe position
651 iframeXY = iframeEl.getTrueXY(),
652 originalEventXY = event.getXY(),
653
654 // Get the left-based XY position.
655 // This is because the consumer of the injected event will
656 // perform its own RTL normalization.
657 eventXY = event.getTrueXY();
658
659 // the event from the inner document has XY relative to that document's origin,
660 // so adjust it to use the origin of the iframe in the outer document:
661 event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
662
663 event.injectEvent(iframeEl); // blame the iframe for the event...
664
665 event.xy = originalEventXY; // restore the original XY (just for safety)
666 },
667
668 load: function(src) {
669 let me = this,
670 text = me.loadMask,
671 frame = me.getFrame();
672
673 if (me.fireEvent('beforeload', me, src) !== false) {
674 if (text && me.el) {
675 me.el.mask(text);
676 }
677
678 frame.src = me.src = src || me.src;
679 }
680 },
681 });