]> git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/Toolkit.js
0f39f71cb21b4f718e5a8a953daa2a55284a5859
[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 /*jslint confusion: true */
507 Ext.override(Ext.Msg, {
508 alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
509 if (Ext.isString(title)) {
510 let config = {
511 title: title,
512 message: message,
513 icon: this.ERROR,
514 buttons: this.OK,
515 fn: fn,
516 scope: scope,
517 minWidth: this.minWidth,
518 };
519 return this.show(config);
520 }
521 },
522 });
523 /*jslint confusion: false */
524 });
525 Ext.define('Ext.ux.IFrame', {
526 extend: 'Ext.Component',
527
528 alias: 'widget.uxiframe',
529
530 loadMask: 'Loading...',
531
532 src: 'about:blank',
533
534 renderTpl: [
535 '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
536 ],
537 childEls: ['iframeEl'],
538
539 initComponent: function() {
540 this.callParent();
541
542 this.frameName = this.frameName || this.id + '-frame';
543 },
544
545 initEvents: function() {
546 let me = this;
547 me.callParent();
548 me.iframeEl.on('load', me.onLoad, me);
549 },
550
551 initRenderData: function() {
552 return Ext.apply(this.callParent(), {
553 src: this.src,
554 frameName: this.frameName,
555 });
556 },
557
558 getBody: function() {
559 let doc = this.getDoc();
560 return doc.body || doc.documentElement;
561 },
562
563 getDoc: function() {
564 try {
565 return this.getWin().document;
566 } catch (ex) {
567 return null;
568 }
569 },
570
571 getWin: function() {
572 let me = this,
573 name = me.frameName,
574 win = Ext.isIE
575 ? me.iframeEl.dom.contentWindow
576 : window.frames[name];
577 return win;
578 },
579
580 getFrame: function() {
581 let me = this;
582 return me.iframeEl.dom;
583 },
584
585 beforeDestroy: function() {
586 this.cleanupListeners(true);
587 this.callParent();
588 },
589
590 cleanupListeners: function(destroying) {
591 let doc, prop;
592
593 if (this.rendered) {
594 try {
595 doc = this.getDoc();
596 if (doc) {
597 Ext.get(doc).un(this._docListeners);
598 if (destroying && doc.hasOwnProperty) {
599 for (prop in doc) {
600 if (Object.prototype.hasOwnProperty.call(doc, prop)) {
601 delete doc[prop];
602 }
603 }
604 }
605 }
606 } catch (e) {
607 // do nothing
608 }
609 }
610 },
611
612 onLoad: function() {
613 let me = this,
614 doc = me.getDoc(),
615 fn = me.onRelayedEvent;
616
617 if (doc) {
618 try {
619 // These events need to be relayed from the inner document (where they stop
620 // bubbling) up to the outer document. This has to be done at the DOM level so
621 // the event reaches listeners on elements like the document body. The effected
622 // mechanisms that depend on this bubbling behavior are listed to the right
623 // of the event.
624 /*jslint nomen: true*/
625 Ext.get(doc).on(
626 me._docListeners = {
627 mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
628 mousemove: fn, // window resize drag detection
629 mouseup: fn, // window resize termination
630 click: fn, // not sure, but just to be safe
631 dblclick: fn, // not sure again
632 scope: me,
633 },
634 );
635 /*jslint nomen: false*/
636 } catch (e) {
637 // cannot do this xss
638 }
639
640 // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
641 Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
642
643 this.el.unmask();
644 this.fireEvent('load', this);
645 } else if (me.src) {
646 this.el.unmask();
647 this.fireEvent('error', this);
648 }
649 },
650
651 onRelayedEvent: function(event) {
652 // relay event from the iframe's document to the document that owns the iframe...
653
654 let iframeEl = this.iframeEl,
655
656 // Get the left-based iframe position
657 iframeXY = iframeEl.getTrueXY(),
658 originalEventXY = event.getXY(),
659
660 // Get the left-based XY position.
661 // This is because the consumer of the injected event will
662 // perform its own RTL normalization.
663 eventXY = event.getTrueXY();
664
665 // the event from the inner document has XY relative to that document's origin,
666 // so adjust it to use the origin of the iframe in the outer document:
667 event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
668
669 event.injectEvent(iframeEl); // blame the iframe for the event...
670
671 event.xy = originalEventXY; // restore the original XY (just for safety)
672 },
673
674 load: function(src) {
675 let me = this,
676 text = me.loadMask,
677 frame = me.getFrame();
678
679 if (me.fireEvent('beforeload', me, src) !== false) {
680 if (text && me.el) {
681 me.el.mask(text);
682 }
683
684 frame.src = me.src = src || me.src;
685 }
686 },
687 });