src/Toolkit.js

   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, {
   8     IPAddress: function(v) {
   9         return Proxmox.Utils.IP4_match.test(v);
  10     },
  11     IPAddressText: gettext('Example') + ': 192.168.1.1',
  12     IPAddressMask: /[\d.]/i,
  13
  14     IPCIDRAddress: function(v) {
  15         let result = Proxmox.Utils.IP4_cidr_match.exec(v);
  16         // limits according to JSON Schema see
  17         // pve-common/src/PVE/JSONSchema.pm
  18         return result !== null && result[1] >= 8 && result[1] <= 32;
  19     },
  20     IPCIDRAddressText: gettext('Example') + ': 192.168.1.1/24<br>' + gettext('Valid CIDR Range') + ': 8-32',
  21     IPCIDRAddressMask: /[\d./]/i,
  22
  23     IP6Address: function(v) {
  24         return Proxmox.Utils.IP6_match.test(v);
  25     },
  26     IP6AddressText: gettext('Example') + ': 2001:DB8::42',
  27     IP6AddressMask: /[A-Fa-f0-9:]/,
  28
  29     IP6CIDRAddress: function(v) {
  30         let result = Proxmox.Utils.IP6_cidr_match.exec(v);
  31         // limits according to JSON Schema see
  32         // pve-common/src/PVE/JSONSchema.pm
  33         return result !== null && result[1] >= 8 && result[1] <= 128;
  34     },
  35     IP6CIDRAddressText: gettext('Example') + ': 2001:DB8::42/64<br>' + gettext('Valid CIDR Range') + ': 8-128',
  36     IP6CIDRAddressMask: /[A-Fa-f0-9:/]/,
  37
  38     IP6PrefixLength: function(v) {
  39         return v >= 0 && v <= 128;
  40     },
  41     IP6PrefixLengthText: gettext('Example') + ': X, where 0 <= X <= 128',
  42     IP6PrefixLengthMask: /[0-9]/,
  43
  44     IP64Address: function(v) {
  45         return Proxmox.Utils.IP64_match.test(v);
  46     },
  47     IP64AddressText: gettext('Example') + ': 192.168.1.1 2001:DB8::42',
  48     IP64AddressMask: /[A-Fa-f0-9.:]/,
  49
  50     IP64CIDRAddress: function(v) {
  51         let result = Proxmox.Utils.IP64_cidr_match.exec(v);
  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',
  64     IP64CIDRAddressMask: /[A-Fa-f0-9.:/]/,
  65
  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
  72     MacPrefix: function(v) {
  73         return (/^[a-f0-9][02468ace](?::[a-f0-9]{2}){0,2}:?$/i).test(v);
  74     },
  75     MacPrefixMask: /[a-fA-F0-9:]/,
  76     MacPrefixText: gettext('Example') + ': 02:8f - ' + gettext('only unicast addresses are allowed'),
  77
  78     BridgeName: function(v) {
  79         return (/^vmbr\d{1,4}$/).test(v);
  80     },
  81     VlanName: function(v) {
  82        if (Proxmox.Utils.VlanInterface_match.test(v)) {
  83          return true;
  84        } else if (Proxmox.Utils.Vlan_match.test(v)) {
  85          return true;
  86        }
  87        return true;
  88     },
  89     BridgeNameText: gettext('Format') + ': vmbr<b>N</b>, where 0 <= <b>N</b> <= 9999',
  90
  91     BondName: function(v) {
  92         return (/^bond\d{1,4}$/).test(v);
  93     },
  94     BondNameText: gettext('Format') + ': bond<b>N</b>, where 0 <= <b>N</b> <= 9999',
  95
  96     InterfaceName: function(v) {
  97         return (/^[a-z][a-z0-9_]{1,20}$/).test(v);
  98     },
  99     InterfaceNameText: gettext("Allowed characters") + ": 'a-z', '0-9', '_'<br />" +
 100                        gettext("Minimum characters") + ": 2<br />" +
 101                        gettext("Maximum characters") + ": 21<br />" +
 102                        gettext("Must start with") + ": 'a-z'",
 103
 104     StorageId: function(v) {
 105         return (/^[a-z][a-z0-9\-_.]*[a-z0-9]$/i).test(v);
 106     },
 107     StorageIdText: gettext("Allowed characters") + ":  'A-Z', 'a-z', '0-9', '-', '_', '.'<br />" +
 108                    gettext("Minimum characters") + ": 2<br />" +
 109                    gettext("Must start with") + ": 'A-Z', 'a-z'<br />" +
 110                    gettext("Must end with") + ": 'A-Z', 'a-z', '0-9'<br />",
 111
 112     ConfigId: function(v) {
 113         return (/^[a-z][a-z0-9_]+$/i).test(v);
 114     },
 115     ConfigIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '_'<br />" +
 116                   gettext("Minimum characters") + ": 2<br />" +
 117                   gettext("Must start with") + ": " + gettext("letter"),
 118
 119     HttpProxy: function(v) {
 120         return (/^http:\/\/.*$/).test(v);
 121     },
 122     HttpProxyText: gettext('Example') + ": http://username:password&#64;host:port/",
 123
 124     CpuSet: function(v) {
 125         return Proxmox.Utils.CpuSet_match.test(v);
 126     },
 127     CpuSetText: gettext('This is not a valid CpuSet'),
 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     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
 139     // email regex used by pve-common
 140     proxmoxMail: function(v) {
 141         return (/^[\w+-~]+(\.[\w+-~]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/).test(v);
 142     },
 143     proxmoxMailText: gettext('Example') + ": user@example.com",
 144
 145     DnsOrIp: function(v) {
 146         if (!Proxmox.Utils.DnsName_match.test(v) &&
 147             !Proxmox.Utils.IP64_match.test(v)) {
 148             return false;
 149         }
 150
 151         return true;
 152     },
 153     DnsOrIpText: gettext('Not a valid DNS name or IP address.'),
 154
 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     },
 160     HostPortText: gettext('Host/IP address or optional port is invalid'),
 161
 162     HostList: function(v) {
 163         let list = v.split(/[ ,;]+/);
 164         let i;
 165         for (i = 0; i < list.length; i++) {
 166             if (list[i] === '') {
 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     },
 179     HostListText: gettext('Not a valid list of hosts'),
 180
 181     password: function(val, field) {
 182         if (field.initialPassField) {
 183             let pwd = field.up('form').down(`[name=${field.initialPassField}]`);
 184             return val === pwd.getValue();
 185         }
 186         return true;
 187     },
 188
 189     passwordText: gettext('Passwords do not match'),
 190
 191     email: function(value) {
 192         let emailre = /^[\w+~-]+(\.[\w+~-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/;
 193         return emailre.test(value);
 194     },
 195 });
 196
 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',
 200     submitLocaleSeparator: false,
 201 });
 202
 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
 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
 218     checkOut: function() {
 219         let cache = this.cache,
 220             len = cache.length,
 221             el;
 222
 223         // do cleanup because some of the objects might have been destroyed
 224         while (len--) {
 225             if (cache[len].destroyed) {
 226                 cache.splice(len, 1);
 227             }
 228         }
 229         // end do cleanup
 230
 231         el = cache.shift();
 232
 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
 238             el.dom.setAttribute('data-sticky', true);
 239             //</debug>
 240         }
 241
 242         return el;
 243     },
 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
 256         let me = this;
 257         me.callParent();
 258
 259         // clear and set when not the same
 260         let value = me.getValue();
 261         if (Ext.isArray(me.originalValue) && Ext.isArray(value) &&
 262             !Ext.Array.equals(value, me.originalValue)) {
 263             me.clearValue();
 264             me.setValue(me.originalValue);
 265         }
 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);
 285                 },
 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     },
 296 });
 297
 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() {
 306         var me = this,
 307             store = me.dataSource,
 308             actionableMode = me.actionableMode,
 309             navModel = me.getNavigationModel(),
 310             focusPosition = actionableMode ? me.actionPosition : navModel.getPosition(true),
 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)) {
 321             // Separate this from the instance that the nav model is using.
 322             focusPosition = focusPosition.clone();
 323
 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();
 340             }
 341
 342             // Do not leave the element in that state in case refresh fails, and restoration
 343             // closure not called.
 344             activeElement.resumeFocusEvents();
 345
 346             // if the store is expanding or collapsing, we should never scroll the view.
 347             if (store.isExpandingOrCollapsing) {
 348                 return Ext.emptyFn;
 349             }
 350
 351             // The following function will attempt to refocus back in the same mode to the same cell
 352             // as it was at before based upon the previous record (if it's still in the store),
 353             // or the row index.
 354             return function() {
 355                 var all;
 356
 357                 // May have changed due to reconfigure
 358                 store = me.dataSource;
 359
 360                 // If we still have data, attempt to refocus in the same mode.
 361                 if (store.getCount()) {
 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                             }
 405                         }
 406                     }
 407                 } else { // No rows - focus associated column header
 408                     focusPosition.column.focus();
 409                 }
 410             };
 411         }
 412         return Ext.emptyFn;
 413     },
 414 });
 415
 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.
 419 Ext.define('Proxmox.form.field.Text', {
 420     override: 'Ext.form.field.Text',
 421
 422     setSubmitValue: function(v) {
 423         this.submitValue = v;
 424     },
 425 });
 426
 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
 431 Ext.define(null, {
 432     override: 'Ext.layout.container.boxOverflow.Scroller',
 433
 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;
 455         } else {
 456             me.wheelListener = me.layout.innerCt.on(
 457                 'wheel', me.onMouseWheel, me, { destroyable: true },
 458             );
 459         }
 460
 461         owner.setScrollable(scrollable);
 462     },
 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
 467 // also use the 'wheel' event instead of 'mousewheel' (fixed in 7.3)
 468 Ext.define('Proxmox.form.field.Spinner', {
 469     override: 'Ext.form.field.Spinner',
 470
 471     onRender: function() {
 472         let me = this;
 473
 474         me.callParent();
 475
 476         // Init mouse wheel
 477         if (me.mouseWheelEnabled) {
 478             // Unlisten Ext generated listener ('mousewheel' is deprecated anyway)
 479             me.mun(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
 480
 481             me.mon(me.bodyEl, 'wheel', me.onMouseWheel, me);
 482         }
 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     },
 499 });
 500
 501 // add '@' to the valid id
 502 Ext.define('Proxmox.validIdReOverride', {
 503     override: 'Ext.Component',
 504     validIdRe: /^[a-z_][a-z0-9\-_@]*$/i,
 505 });
 506
 507 Ext.define('Proxmox.selection.CheckboxModel', {
 508     override: 'Ext.selection.CheckboxModel',
 509
 510     // [P] use whole checkbox cell to multiselect, not only the checkbox
 511     checkSelector: '.x-grid-cell-row-checker',
 512
 513     // TODO: remove all optimizations below to an override for parent 'Ext.selection.Model' ??
 514
 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) {
 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         }
 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 = [];
 553         len = records.length;
 554         me.suspendChanges();
 555         for (; i < len; i++) {
 556             record = records[i];
 557             if (me.isSelected(record)) {
 558                 committed = false;
 559                 me.onSelectChange(record, false, suppressEvent, commit);
 560                 if (!committed) {
 561                     removalBlocked.push(record);
 562                 }
 563                 if (me.destroyed) {
 564                     return false;
 565                 }
 566             }
 567         }
 568         if (removalBlocked.length > 0) {
 569             records.remove(removalBlocked);
 570         }
 571         selected.remove(records); // [P] FAST(er)
 572         me.lastSelected = selected.last();
 573         me.resumeChanges();
 574         // fire selchange if there was a change and there is no suppressEvent flag
 575         me.maybeFireSelectionChange(records.length > 0 && !suppressEvent);
 576         return records.length;
 577     },
 578
 579
 580     doMultiSelect: function(records, keepExisting, suppressEvent) {
 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         }
 607
 608         let gotBlocked, blockedRecords = [];
 609         commit = function() {
 610             if (!selected.getCount()) {
 611                 me.selectionStart = record;
 612             }
 613             gotBlocked = false;
 614             change = true;
 615         };
 616
 617         for (i = 0; i < len; i++) {
 618             record = records[i];
 619             if (me.isSelected(record)) {
 620                 continue;
 621             }
 622
 623             gotBlocked = true;
 624             me.onSelectChange(record, true, suppressEvent, commit);
 625             if (me.destroyed) {
 626                 return;
 627             }
 628             if (gotBlocked) {
 629                 blockedRecords.push(record);
 630             }
 631         }
 632         if (blockedRecords.length > 0) {
 633             records.remove(blockedRecords);
 634         }
 635         selected.add(records);
 636         me.lastSelected = record;
 637
 638         // fire selchange if there was a change and there is no suppressEvent flag
 639         me.maybeFireSelectionChange(change && !suppressEvent);
 640     },
 641     deselectDuringSelect: function(toSelect, suppressEvent) {
 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;
 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;
 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         ];
 666     },
 667 });
 668
 669 // stop nulling of properties
 670 Ext.define('Proxmox.Component', {
 671     override: 'Ext.Component',
 672     clearPropertiesOnDestroy: false,
 673 });
 674
 675 // Fix drag&drop for vms and desktops that detect 'pen' pointerType
 676 // NOTE: this part has been rewritten in ExtJS 7.4, so re-check once we can upgrade
 677 Ext.define('Proxmox.view.DragZone', {
 678     override: 'Ext.view.DragZone',
 679
 680     onItemMouseDown: function(view, record, item, index, e) {
 681         // Ignore touchstart.
 682         // For touch events, we use longpress.
 683         if (e.pointerType !== 'touch') {
 684             this.onTriggerGesture(view, record, item, index, e);
 685         }
 686     },
 687 });
 688
 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
 705 // force alert boxes to be rendered with an Error Icon
 706 // since Ext.Msg is an object and not a prototype, we need to override it
 707 // after the framework has been initiated
 708 Ext.onReady(function() {
 709     Ext.override(Ext.Msg, {
 710         alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
 711             if (Ext.isString(title)) {
 712                 let config = {
 713                     title: title,
 714                     message: message,
 715                     icon: this.ERROR,
 716                     buttons: this.OK,
 717                     fn: fn,
 718                     scope: scope,
 719                     minWidth: this.minWidth,
 720                 };
 721             return this.show(config);
 722             }
 723         },
 724     });
 725 });
 726 Ext.define('Ext.ux.IFrame', {
 727     extend: 'Ext.Component',
 728
 729     alias: 'widget.uxiframe',
 730
 731     loadMask: 'Loading...',
 732
 733     src: 'about:blank',
 734
 735     renderTpl: [
 736         '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
 737     ],
 738     childEls: ['iframeEl'],
 739
 740     initComponent: function() {
 741         this.callParent();
 742
 743         this.frameName = this.frameName || this.id + '-frame';
 744     },
 745
 746     initEvents: function() {
 747         let me = this;
 748         me.callParent();
 749         me.iframeEl.on('load', me.onLoad, me);
 750     },
 751
 752     initRenderData: function() {
 753         return Ext.apply(this.callParent(), {
 754             src: this.src,
 755             frameName: this.frameName,
 756         });
 757     },
 758
 759     getBody: function() {
 760         let doc = this.getDoc();
 761         return doc.body || doc.documentElement;
 762     },
 763
 764     getDoc: function() {
 765         try {
 766             return this.getWin().document;
 767         } catch (ex) {
 768             return null;
 769         }
 770     },
 771
 772     getWin: function() {
 773         let me = this,
 774             name = me.frameName,
 775             win = Ext.isIE
 776                 ? me.iframeEl.dom.contentWindow
 777                 : window.frames[name];
 778         return win;
 779     },
 780
 781     getFrame: function() {
 782         let me = this;
 783         return me.iframeEl.dom;
 784     },
 785
 786     beforeDestroy: function() {
 787         this.cleanupListeners(true);
 788         this.callParent();
 789     },
 790
 791     cleanupListeners: function(destroying) {
 792         let doc, prop;
 793
 794         if (this.rendered) {
 795             try {
 796                 doc = this.getDoc();
 797                 if (doc) {
 798                     Ext.get(doc).un(this._docListeners);
 799                     if (destroying && doc.hasOwnProperty) {
 800                         for (prop in doc) {
 801                             if (Object.prototype.hasOwnProperty.call(doc, prop)) {
 802                                 delete doc[prop];
 803                             }
 804                         }
 805                     }
 806                 }
 807             } catch (e) {
 808                 // do nothing
 809             }
 810         }
 811     },
 812
 813     onLoad: function() {
 814         let me = this,
 815             doc = me.getDoc(),
 816             fn = me.onRelayedEvent;
 817
 818         if (doc) {
 819             try {
 820                 // These events need to be relayed from the inner document (where they stop
 821                 // bubbling) up to the outer document. This has to be done at the DOM level so
 822                 // the event reaches listeners on elements like the document body. The effected
 823                 // mechanisms that depend on this bubbling behavior are listed to the right
 824                 // of the event.
 825                 Ext.get(doc).on(
 826                     me._docListeners = {
 827                         mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
 828                         mousemove: fn, // window resize drag detection
 829                         mouseup: fn, // window resize termination
 830                         click: fn, // not sure, but just to be safe
 831                         dblclick: fn, // not sure again
 832                         scope: me,
 833                     },
 834                 );
 835             } catch (e) {
 836                 // cannot do this xss
 837             }
 838
 839             // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
 840             Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
 841
 842             this.el.unmask();
 843             this.fireEvent('load', this);
 844         } else if (me.src) {
 845             this.el.unmask();
 846             this.fireEvent('error', this);
 847         }
 848     },
 849
 850     onRelayedEvent: function(event) {
 851         // relay event from the iframe's document to the document that owns the iframe...
 852
 853         let iframeEl = this.iframeEl,
 854
 855             // Get the left-based iframe position
 856             iframeXY = iframeEl.getTrueXY(),
 857             originalEventXY = event.getXY(),
 858
 859             // Get the left-based XY position.
 860             // This is because the consumer of the injected event will
 861             // perform its own RTL normalization.
 862             eventXY = event.getTrueXY();
 863
 864         // the event from the inner document has XY relative to that document's origin,
 865         // so adjust it to use the origin of the iframe in the outer document:
 866         event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
 867
 868         event.injectEvent(iframeEl); // blame the iframe for the event...
 869
 870         event.xy = originalEventXY; // restore the original XY (just for safety)
 871     },
 872
 873     load: function(src) {
 874         let me = this,
 875             text = me.loadMask,
 876             frame = me.getFrame();
 877
 878         if (me.fireEvent('beforeload', me, src) !== false) {
 879             if (text && me.el) {
 880                 me.el.mask(text);
 881             }
 882
 883             frame.src = me.src = src || me.src;
 884         }
 885     },
 886 });