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