Merge pull request #19712 from MauricioFauth/js-vendor-bundle

Import OpenLayers and Bootstrap directly using Webpack

.eslintignore

@@ -1,5 +1,3 @@
-js/vendor/
-js/dist/
 public/js/
 tmp/
 vendor/

bin/internal/check-release-excludes.sh

@@ -52,13 +52,13 @@ validateExtension() {
                 foundFileExt
             fi
         ;;
-        public/js/dist/*)
+        public/js/*)
             if [ "${extension}" != "js" ] && [ "${extension}" != "map" ]; then
                 foundFileExt
             fi
         ;;
-        resources/js/src/*)
-            if [ "${extension}" != "ts" ] && [ "${extension}" != "mjs" ]; then
+        resources/js/*)
+            if [ "${extension}" != "ts" ]; then
                 foundFileExt
             fi
         ;;

docs/faq.rst

@@ -694,8 +694,7 @@ A list of files and corresponding functionality which degrade gracefully when re
 * :file:`./setup/` (setup script)
 * :file:`./examples/` (configuration examples)
 * :file:`./resources/sql/` (SQL scripts to configure advanced functionalities)
-* :file:`./resources/js/src/` (Source files to re-build `./public/js/dist/`)
-* :file:`./resources/js/global.d.ts` JS type declaration file
+* :file:`./resources/js/` (Source files to re-build `./public/js/`)
 * Run `rm -rv vendor/tecnickcom/tcpdf && composer dump-autoload --no-interaction --optimize --dev` (exporting to PDF)
 * Run `rm -rv vendor/williamdes/mariadb-mysql-kbs && composer dump-autoload --no-interaction --optimize --dev` (external links to MariaDB and MySQL documentations)
 * Run `rm -rv vendor/code-lts/u2f-php-server && composer dump-autoload --no-interaction --optimize --dev` (U2F second factor authentication)

jest.config.cjs

@@ -3,7 +3,7 @@
 module.exports = {
     extensionsToTreatAsEsm: ['.ts'],
     coverageDirectory: '<rootDir>/build/javascript/',
-    collectCoverageFrom: ['<rootDir>/resources/js/src/**/*.ts'],
+    collectCoverageFrom: ['<rootDir>/resources/js/**/*.ts'],
     projects: [
         {
             coveragePathIgnorePatterns: [
@@ -14,7 +14,7 @@ module.exports = {
             testMatch: ['<rootDir>/tests/javascript/**/*.ts'],
             transform: { '\\.[jt]sx?$': 'babel-jest' },
             moduleNameMapper: {
-                '^phpmyadmin/(.*)$': '<rootDir>/resources/js/src/$1',
+                '^phpmyadmin/(.*)$': '<rootDir>/resources/js/$1',
                 '^@vendor/(.*)$': '<rootDir>/public/js/vendor/$1',
             },
             testEnvironment: 'jsdom',

package.json

@@ -27,7 +27,7 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^9.1.2",
-    "bootstrap": "5.3.5",
+    "bootstrap": "^5.3.5",
     "chart.js": "^4.4.3",
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-zoom": "^2.0.1",
@@ -79,7 +79,7 @@
     "postinstall": "yarn run build",
     "build": "webpack",
     "css-lint": "stylelint \"public/themes/**/scss/*.scss\" \"public/setup/scss/*.scss\"",
-    "js-lint": "eslint resources/js/src tests/javascript jest.config.cjs",
+    "js-lint": "eslint resources/js tests/javascript jest.config.cjs",
     "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

public/js/vendor/.gitignore

@@ -1,2 +0,0 @@
-/*
-!/.gitignore

resources/js/database/events.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from '../modules/ajax.ts';
 import { addDatepicker, getSqlEditor, slidingMessage } from '../modules/functions.ts';
 import { Navigation } from '../modules/navigation.ts';
@@ -121,7 +122,7 @@ const DatabaseEvents = {
                 eventsExportModal.querySelector('.modal-body').innerHTML = eventsExportTextarea;
             });
 
-            window.bootstrap.Modal.getOrCreateInstance(eventsExportModal).show();
+            bootstrap.Modal.getOrCreateInstance(eventsExportModal).show();
         }
     },
     editorDialog: function (isNew, $this) {
@@ -184,7 +185,7 @@ const DatabaseEvents = {
                         // Item created successfully
                         ajaxRemoveMessage($msg);
                         slidingMessage(data.message);
-                        window.bootstrap.Modal.getOrCreateInstance('#eventsEditorModal').hide();
+                        bootstrap.Modal.getOrCreateInstance('#eventsEditorModal').hide();
                         // If we are in 'edit' mode, we must
                         // remove the reference to the old row.
                         if (isEditMode && $editRow !== null) {
@@ -333,7 +334,7 @@ const DatabaseEvents = {
                     '<span class="visually-hidden">' + window.Messages.strLoading + '</span></div>';
             });
 
-            window.bootstrap.Modal.getOrCreateInstance(eventsEditorModal).show();
+            bootstrap.Modal.getOrCreateInstance(eventsEditorModal).show();
         });
     },
 

resources/js/database/routines.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from '../modules/ajax.ts';
 import { addDatepicker, getSqlEditor, slidingMessage } from '../modules/functions.ts';
 import { Navigation } from '../modules/navigation.ts';
@@ -137,7 +138,7 @@ const DatabaseRoutines = {
                 routinesExportModal.querySelector('.modal-body').innerHTML = routinesExportTextarea;
             });
 
-            window.bootstrap.Modal.getOrCreateInstance(routinesExportModal).show();
+            bootstrap.Modal.getOrCreateInstance(routinesExportModal).show();
         }
     },
     editorDialog: function (isNew, $this) {
@@ -203,7 +204,7 @@ const DatabaseRoutines = {
                     // Item created successfully
                     ajaxRemoveMessage($msg);
                     slidingMessage(data.message);
-                    window.bootstrap.Modal.getOrCreateInstance('#routinesEditorModal').hide();
+                    bootstrap.Modal.getOrCreateInstance('#routinesEditorModal').hide();
 
                     var tableId = '#' + data.tableType + 'Table';
                     // If we are in 'edit' mode, we must
@@ -356,7 +357,7 @@ const DatabaseRoutines = {
                     '<span class="visually-hidden">' + window.Messages.strLoading + '</span></div>';
             });
 
-            window.bootstrap.Modal.getOrCreateInstance(routinesEditorModal).show();
+            bootstrap.Modal.getOrCreateInstance(routinesEditorModal).show();
         });
     },
 
@@ -810,7 +811,7 @@ const DatabaseRoutines = {
             }
 
             const routinesExecuteModal = document.getElementById('routinesExecuteModal');
-            const modal = window.bootstrap.Modal.getOrCreateInstance(routinesExecuteModal);
+            const modal = bootstrap.Modal.getOrCreateInstance(routinesExecuteModal);
 
             const routinesExecuteButtonEventHandler = function () {
                 /**

resources/js/database/structure.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from '../modules/ajax.ts';
 import { getForeignKeyCheckboxLoader, loadForeignKeyCheckbox } from '../modules/functions.ts';
 import { Navigation } from '../modules/navigation.ts';
@@ -86,7 +87,7 @@ function fetchRealRowCount ($target) {
 
 function addTooltipToFavoriteIcons (): void {
     document.querySelectorAll('.favorite_table_anchor').forEach((favoriteTableAnchor: HTMLElement): void => {
-        new window.bootstrap.Tooltip(favoriteTableAnchor);
+        new bootstrap.Tooltip(favoriteTableAnchor);
     });
 }
 

resources/js/gis_data_editor.ts

@@ -252,16 +252,12 @@ function makeGeometryInputs (gisData): string {
  * @param {function} resolve
  */
 function loadJSAndGISEditor (resolve) {
-    let script;
-
-    script = document.createElement('script');
-    script.src = 'js/dist/table/gis_visualization.js';
-    document.head.appendChild(script);
+    let script: HTMLScriptElement;
 
     // OpenLayers.js is BIG and takes time. So asynchronous loading would not work.
     // Load the JS and do a callback to load the content for the GIS Editor.
     script = document.createElement('script');
-    script.src = 'js/vendor/openlayers/OpenLayers.js';
+    script.src = 'js/vendor/openlayers/openlayers.js';
     script.addEventListener('load', function () {
         resolve();
     });
@@ -272,6 +268,10 @@ function loadJSAndGISEditor (resolve) {
 
     document.head.appendChild(script);
 
+    script = document.createElement('script');
+    script.src = 'js/table/gis_visualization.js';
+    document.head.appendChild(script);
+
     gisEditorLoaded = true;
 }
 

resources/js/global.d.ts

@@ -4,13 +4,11 @@ interface Window {
     mysqlDocTemplate: string;
     themeImagePath: string;
     firstDayOfCalendar: string;
-    ol: any;
     opera: any;
     zxcvbnts: any;
     msCrypto: any;
     u2f: any;
     variableNames: string[];
-    bootstrap: typeof bootstrap;
 
     sprintf(format: string, ...values: (string|number)[]): string;
 }
@@ -18,7 +16,7 @@ interface Window {
 interface JQuery {
     sortableTable: (method: any) => any;
 
-    menuResizer: (method: string|Function) => any;
+    menuResizer: (method: string|(() => number)) => any;
 
     filterByValue: (value: any) => any;
 

resources/js/makegrid.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from './modules/ajax.ts';
 import {
     addDatepicker,
@@ -1758,7 +1759,7 @@ const makeGrid = function (t, enableResize = undefined, enableReorder = undefine
                 .on('mouseleave', function () {
                     g.showReorderHint = false;
 
-                    window.bootstrap.Tooltip.getOrCreateInstance(this, { title: g.updateHint(), html: true })
+                    bootstrap.Tooltip.getOrCreateInstance(this, { title: g.updateHint(), html: true })
                         .setContent({ '.tooltip-inner': g.updateHint() });
                 })
                 .on('dblclick', function (e) {
@@ -1835,7 +1836,7 @@ const makeGrid = function (t, enableResize = undefined, enableReorder = undefine
                 const $colVisibTh = $(colVisibTh).slice(0, 1);
 
                 colVisibTh.forEach((tableHeader: HTMLElement) => {
-                    window.bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: window.Messages.strColVisibHint })
+                    bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: window.Messages.strColVisibHint })
                         .setContent({ '.tooltip-inner': window.Messages.strColVisibHint });
                 });
 
@@ -2284,7 +2285,7 @@ const makeGrid = function (t, enableResize = undefined, enableReorder = undefine
                     return;
                 }
 
-                window.bootstrap.Tooltip.getOrCreateInstance(editRowAnchor.querySelector('a'));
+                bootstrap.Tooltip.getOrCreateInstance(editRowAnchor.querySelector('a'));
             });
         }
     };
@@ -2379,7 +2380,7 @@ const makeGrid = function (t, enableResize = undefined, enableReorder = undefine
 
     // create tooltip for each <th> with draggable class
     t.querySelectorAll('th.draggable').forEach((tableHeader: HTMLElement) => {
-        window.bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: g.updateHint(), html: true })
+        bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: g.updateHint(), html: true })
             .setContent({ '.tooltip-inner': g.updateHint() });
     });
 
@@ -2390,7 +2391,7 @@ const makeGrid = function (t, enableResize = undefined, enableReorder = undefine
             g.showMultiSortHint = true;
 
             t.querySelectorAll('th.draggable').forEach((tableHeader: HTMLElement) => {
-                window.bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: g.updateHint(), html: true })
+                bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: g.updateHint(), html: true })
                     .setContent({ '.tooltip-inner': g.updateHint() });
             });
         })
@@ -2399,7 +2400,7 @@ const makeGrid = function (t, enableResize = undefined, enableReorder = undefine
             g.showMultiSortHint = false;
 
             t.querySelectorAll('th.draggable').forEach((tableHeader: HTMLElement) => {
-                window.bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: g.updateHint(), html: true })
+                bootstrap.Tooltip.getOrCreateInstance(tableHeader, { title: g.updateHint(), html: true })
                     .setContent({ '.tooltip-inner': g.updateHint() });
             });
         });

resources/js/modules/ajax-message.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import highlightSql from './sql-highlight.ts';
 
 /**
@@ -114,7 +115,7 @@ const ajaxShowMessage = function (message = null, timeout = null, type = null) {
         $retval
             .delay(newTimeOut)
             .fadeOut('medium', function () {
-                window.bootstrap.Tooltip.getInstance(this)?.dispose();
+                bootstrap.Tooltip.getInstance(this)?.dispose();
 
                 // Remove the notification
                 $(this).remove();
@@ -129,7 +130,7 @@ const ajaxShowMessage = function (message = null, timeout = null, type = null) {
          * Add a tooltip to the notification to let the user know that they
          * can dismiss the ajax notification by clicking on it.
          */
-        window.bootstrap.Tooltip.getOrCreateInstance($retval.get(0), { title: window.Messages.strDismiss })
+        bootstrap.Tooltip.getOrCreateInstance($retval.get(0), { title: window.Messages.strDismiss })
             .setContent({ '.tooltip-inner': window.Messages.strDismiss });
     }
 
@@ -150,7 +151,7 @@ const ajaxShowMessage = function (message = null, timeout = null, type = null) {
  */
 const ajaxRemoveMessage = function ($thisMessageBox: JQuery | boolean): void {
     if ($thisMessageBox !== undefined && typeof $thisMessageBox !== 'boolean' && $thisMessageBox instanceof $) {
-        window.bootstrap.Tooltip.getInstance($thisMessageBox.get(0))?.dispose();
+        bootstrap.Tooltip.getInstance($thisMessageBox.get(0))?.dispose();
 
         $thisMessageBox
             .stop(true, true)

resources/js/modules/ajax.ts

@@ -785,8 +785,7 @@ const AJAX = {
             var script = document.createElement('script');
             var self = this;
 
-            var file = name.indexOf('vendor/') !== -1 ? name : 'dist/' + name;
-            script.src = 'js/' + file + '?' + 'v=' + encodeURIComponent(CommonParams.get('version'));
+            script.src = 'js/' + name + '?' + 'v=' + encodeURIComponent(CommonParams.get('version'));
             script.async = false;
             script.onload = function () {
                 self.done(name, callback);

resources/js/modules/functions.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from './ajax.ts';
 import { Navigation } from './navigation.ts';
 import { CommonParams } from './common.ts';
@@ -147,7 +148,7 @@ export function addDatepicker ($thisElement, type = undefined, options = undefin
     if (type === 'time') {
         $thisElement.timepicker($.extend(defaultOptions, options));
         // Add a tip regarding entering MySQL allowed-values for TIME data-type
-        window.bootstrap.Tooltip.getOrCreateInstance($thisElement.get(0), { title: window.Messages.strMysqlAllowedValuesTipTime })
+        bootstrap.Tooltip.getOrCreateInstance($thisElement.get(0), { title: window.Messages.strMysqlAllowedValuesTipTime })
             .setContent({ '.tooltip-inner': window.Messages.strMysqlAllowedValuesTipTime });
     } else {
         $thisElement.datetimepicker($.extend(defaultOptions, options));
@@ -197,10 +198,10 @@ export function addDateTimePicker () {
 
         // Add a tip regarding entering MySQL allowed-values for TIME and DATE data-type
         if (this.classList.contains('timefield')) {
-            window.bootstrap.Tooltip.getOrCreateInstance(this, { title: window.Messages.strMysqlAllowedValuesTipTime })
+            bootstrap.Tooltip.getOrCreateInstance(this, { title: window.Messages.strMysqlAllowedValuesTipTime })
                 .setContent({ '.tooltip-inner': window.Messages.strMysqlAllowedValuesTipTime });
         } else if (this.classList.contains('datefield')) {
-            window.bootstrap.Tooltip.getOrCreateInstance(this, { title: window.Messages.strMysqlAllowedValuesTipDate })
+            bootstrap.Tooltip.getOrCreateInstance(this, { title: window.Messages.strMysqlAllowedValuesTipDate })
                 .setContent({ '.tooltip-inner': window.Messages.strMysqlAllowedValuesTipDate });
         }
     });
@@ -1527,7 +1528,7 @@ export function dismissNotifications () {
                 message = $(this).hasClass('copyQueryBtn') ? window.Messages.strCopyToClipboard : window.Messages.strEditQuery;
             }
 
-            window.bootstrap.Tooltip.getOrCreateInstance('.ajax_notification', { title: message })
+            bootstrap.Tooltip.getOrCreateInstance('.ajax_notification', { title: message })
                 .setContent({ '.tooltip-inner': message });
         });
 
@@ -2496,7 +2497,7 @@ export function onloadEnumSetEditor (): void {
             centralColumnsModal = document.getElementById('centralColumnsModal');
         }
 
-        const modal = window.bootstrap.Modal.getOrCreateInstance(centralColumnsModal);
+        const modal = bootstrap.Modal.getOrCreateInstance(centralColumnsModal);
 
         centralColumnsModal.addEventListener(
             'shown.bs.modal',
@@ -2834,7 +2835,7 @@ export function showHints ($div: JQuery<HTMLElement> | undefined = undefined) {
 
     $newDiv.get(0).querySelectorAll('.pma_hint').forEach((hintElement: HTMLElement): void => {
         const content = hintElement.querySelector('span').textContent;
-        window.bootstrap.Tooltip.getOrCreateInstance(hintElement, { title: content })
+        bootstrap.Tooltip.getOrCreateInstance(hintElement, { title: content })
             .setContent({ '.tooltip-inner': content });
     });
 }

resources/js/modules/functions/mainMenuResizerCallback.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-export default function mainMenuResizerCallback () {
+export default function mainMenuResizerCallback (): number {
     // 5 px margin for jumping menu in Chrome
     // eslint-disable-next-line compat/compat
     return $(document.body).width() - 5;

resources/js/modules/navigation/event-loader.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { CommonParams } from '../common.ts';
 import { Navigation } from '../navigation.ts';
 import handleCreateViewModal from '../functions/handleCreateViewModal.ts';
@@ -8,10 +9,10 @@ import isStorageSupported from '../functions/isStorageSupported.ts';
 function updateFavoriteTableButton (buttonId: string, htmlContent: string): void {
     const currentButton = document.getElementById(buttonId);
     // Remove current tooltip before changing the button
-    window.bootstrap.Tooltip.getInstance(currentButton)?.dispose();
+    bootstrap.Tooltip.getInstance(currentButton)?.dispose();
     currentButton.outerHTML = htmlContent;
     // Enable tooltip of the new button
-    new window.bootstrap.Tooltip(document.getElementById(buttonId));
+    new bootstrap.Tooltip(document.getElementById(buttonId));
 }
 
 /**

resources/js/server/privileges.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from '../modules/ajax.ts';
 import {
     checkPassword,
@@ -68,7 +69,7 @@ const EditUserGroup = {
                     return;
                 }
 
-                const modal = window.bootstrap.Modal.getInstance(editUserGroupModal);
+                const modal = bootstrap.Modal.getInstance(editUserGroupModal);
                 const modalBody = editUserGroupModal.querySelector('.modal-body');
                 const saveButton = editUserGroupModal.querySelector('#editUserGroupModalSaveButton');
 

resources/js/server/status/monitor.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from '../../modules/ajax.ts';
 import { addDatepicker, prettyProfilingNum } from '../../modules/functions.ts';
 import { CommonParams } from '../../modules/common.ts';
@@ -24,7 +25,7 @@ var chartSize;
 var monitorSettings;
 
 function serverResponseError () {
-    window.bootstrap.Modal.getOrCreateInstance('#serverResponseErrorModal').show();
+    bootstrap.Modal.getOrCreateInstance('#serverResponseErrorModal').show();
 }
 
 function serverResponseErrorModalReloadEventHandler () {
@@ -674,7 +675,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 json = JSON.parse(data);
             } catch (err) {
                 alert(window.Messages.strFailedParsingConfig);
-                window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
+                bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
 
                 return;
             }
@@ -682,7 +683,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
             // Basic check, is this a monitor config json?
             if (! json || ! json.monitorCharts || ! json.monitorCharts) {
                 alert(window.Messages.strFailedParsingConfig);
-                window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
+                bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
 
                 return;
             }
@@ -706,7 +707,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 rebuildGrid();
             }
 
-            window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
+            bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
         };
 
         if (input.files[0]) {
@@ -765,7 +766,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 if (typeof data !== 'undefined' && data.success === true) {
                     logVars = data.message;
                 } else {
-                    window.bootstrap.Modal.getOrCreateInstance('#monitorInstructionsModal').hide();
+                    bootstrap.Modal.getOrCreateInstance('#monitorInstructionsModal').hide();
                     serverResponseError();
 
                     return;
@@ -1019,7 +1020,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 && typeof window.localStorage.monitorVersion !== 'undefined'
                 && monitorProtocolVersion !== window.localStorage.monitorVersion
             ) {
-                window.bootstrap.Modal.getOrCreateInstance('#incompatibleMonitorConfigModal').show();
+                bootstrap.Modal.getOrCreateInstance('#incompatibleMonitorConfigModal').show();
             }
         }
 
@@ -1352,12 +1353,12 @@ AJAX.registerOnload('server/status/monitor.js', function () {
         const logAnalyseModal = document.getElementById('logAnalyseModal');
 
         function logAnalyseModalSlowLogEventHandler () {
-            window.bootstrap.Modal.getOrCreateInstance(logAnalyseModal).hide();
+            bootstrap.Modal.getOrCreateInstance(logAnalyseModal).hide();
             loadLog('slow', min, max);
         }
 
         function logAnalyseModalGeneralLogEventHandler () {
-            window.bootstrap.Modal.getOrCreateInstance(logAnalyseModal).hide();
+            bootstrap.Modal.getOrCreateInstance(logAnalyseModal).hide();
             loadLog('general', min, max);
         }
 
@@ -1400,7 +1401,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
             logAnalyseModalGeneralLogButton?.removeEventListener('click', logAnalyseModalGeneralLogEventHandler);
         });
 
-        window.bootstrap.Modal.getOrCreateInstance(logAnalyseModal).show();
+        bootstrap.Modal.getOrCreateInstance(logAnalyseModal).show();
     }
 
     function loadLog (type: string, min: Date, max: Date) {
@@ -1664,7 +1665,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
             }
         });
 
-        window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).show();
+        bootstrap.Modal.getOrCreateInstance(analysingLogsModal).show();
 
         var url = 'index.php?route=/server/status/monitor/slow-log';
         if (opts.src === 'general') {
@@ -1686,15 +1687,15 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 if (typeof data !== 'undefined' && data.success === true) {
                     logData = data.message;
                 } else {
-                    window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide();
+                    bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide();
                     serverResponseError();
 
                     return;
                 }
 
                 if (logData.rows.length === 0) {
-                    window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide();
-                    window.bootstrap.Modal.getOrCreateInstance('#analysingLogsNoDataFoundModal').show();
+                    bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide();
+                    bootstrap.Modal.getOrCreateInstance('#analysingLogsNoDataFoundModal').show();
 
                     return;
                 }
@@ -1743,7 +1744,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 const analysingLogsLogDataLoadedModal = document.getElementById('analysingLogsLogDataLoadedModal');
 
                 function analysingLogsLogDataLoadedModalJumpEventHandler () {
-                    window.bootstrap.Modal.getOrCreateInstance(analysingLogsLogDataLoadedModal).hide();
+                    bootstrap.Modal.getOrCreateInstance(analysingLogsLogDataLoadedModal).hide();
                     $(document).scrollTop($('#logTable').offset().top);
                 }
 
@@ -1757,8 +1758,8 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                     analysingLogsLogDataLoadedModalJumpButton?.removeEventListener('click', analysingLogsLogDataLoadedModalJumpEventHandler);
                 });
 
-                window.bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide();
-                window.bootstrap.Modal.getOrCreateInstance(analysingLogsLogDataLoadedModal).show();
+                bootstrap.Modal.getOrCreateInstance(analysingLogsModal).hide();
+                bootstrap.Modal.getOrCreateInstance(analysingLogsLogDataLoadedModal).show();
             }
         );
 
@@ -2016,7 +2017,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
                 tooltipContent += '<br>' + window.Messages.strMoreCountColumnExplanation;
             }
 
-            new window.bootstrap.Tooltip(amountColumn.get(0), { title: tooltipContent, html: true });
+            new bootstrap.Tooltip(amountColumn.get(0), { title: tooltipContent, html: true });
         }
 
         $('#logTable').find('table').tablesorter({
@@ -2073,7 +2074,7 @@ AJAX.registerOnload('server/status/monitor.js', function () {
             }
         });
 
-        window.bootstrap.Modal.getOrCreateInstance(queryAnalyzerModal).show();
+        bootstrap.Modal.getOrCreateInstance(queryAnalyzerModal).show();
     }
 
     /* Loads and displays the analyzed query data */

resources/js/sql.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import * as bootstrap from 'bootstrap';
 import { AJAX } from './modules/ajax.ts';
 import { checkFormElementInRange, checkSqlQuery, prepareForAjaxRequest } from './modules/functions.ts';
 import { Navigation } from './modules/navigation.ts';
@@ -1209,7 +1210,7 @@ function browseForeignDialog ($thisA) {
         browseForeignModal = document.getElementById('browseForeignModal');
     }
 
-    const modal = window.bootstrap.Modal.getOrCreateInstance(browseForeignModal);
+    const modal = bootstrap.Modal.getOrCreateInstance(browseForeignModal);
 
     browseForeignModal.addEventListener('hidden.bs.modal', function () {
         // remove event handlers attached to elements related to dialog

resources/js/src/ol.mjs

@@ -1,36 +0,0 @@
-import { Attribution, MousePosition, Zoom } from 'ol/control.js';
-import { createStringXY } from 'ol/coordinate.js';
-import { isEmpty } from 'ol/extent.js';
-import { LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from 'ol/geom.js';
-import { Tile, Vector as VectorLayer } from 'ol/layer.js';
-import { OSM, Vector as VectorSource } from 'ol/source.js';
-import { Circle, Fill, Stroke, Style, Text } from 'ol/style.js';
-import { Feature, Map, View } from 'ol';
-import { get as getProjection } from 'ol/proj.js';
-
-const ol = {
-    control: {
-        Attribution, MousePosition, Zoom
-    },
-    coordinate: {
-        createStringXY
-    },
-    extent: {
-        isEmpty
-    },
-    geom: {
-        LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon
-    },
-    layer: {
-        Tile, Vector: VectorLayer
-    },
-    source: {
-        OSM, Vector: VectorSource
-    },
-    style: {
-        Circle, Fill, Stroke, Style, Text
-    },
-    Feature, Map, View, getProjection
-};
-
-export default ol;

resources/js/table/gis_visualization.ts

@@ -1,6 +1,15 @@
 import $ from 'jquery';
 import { AJAX } from '../modules/ajax.ts';
 import { escapeHtml } from '../modules/functions/escape.ts';
+import { Feature, Map, View } from 'ol';
+import { Attribution, MousePosition, Zoom } from 'ol/control';
+import { createStringXY } from 'ol/coordinate';
+import { isEmpty } from 'ol/extent';
+import { LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from 'ol/geom';
+import { Tile, Vector as VectorLayer } from 'ol/layer';
+import { get as getProjection } from 'ol/proj';
+import { OSM, Vector as VectorSource } from 'ol/source';
+import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
 
 /**
  * @fileoverview    functions used for visualizing GIS data
@@ -428,11 +437,11 @@ class OlVisualization extends GisVisualization {
     }
 
     drawOpenLayers () {
-        if (typeof window.ol === 'undefined') {
+        if (! document.querySelector('script[src*="js/vendor/openlayers/openlayers.js"]')) {
             return undefined;
         }
 
-        const olCss = 'js/vendor/openlayers/theme/ol.css';
+        const olCss = 'js/vendor/openlayers/openlayers.css';
         if (! document.querySelector('link[rel="stylesheet"][href="' + olCss + '"]')) {
             const link = document.createElement('link');
             link.rel = 'stylesheet';
@@ -441,28 +450,28 @@ class OlVisualization extends GisVisualization {
             document.head.appendChild(link);
         }
 
-        const vectorSource = new window.ol.source.Vector({
+        const vectorSource = new VectorSource({
             features: getFeaturesFromOpenLayersData(this.data),
         });
-        const map = new window.ol.Map({
+        const map = new Map({
             target: this.target,
             layers: [
-                new window.ol.layer.Tile({ source: new window.ol.source.OSM() }),
-                new window.ol.layer.Vector({ source: vectorSource }),
+                new Tile({ source: new OSM() }),
+                new VectorLayer({ source: vectorSource }),
             ],
-            view: new window.ol.View({ center: [0, 0], zoom: 4 }),
+            view: new View({ center: [0, 0], zoom: 4 }),
             controls: [
-                new window.ol.control.MousePosition({
-                    coordinateFormat: window.ol.coordinate.createStringXY(4),
+                new MousePosition({
+                    coordinateFormat: createStringXY(4),
                     projection: 'EPSG:4326'
                 }),
-                new window.ol.control.Zoom,
-                new window.ol.control.Attribution
+                new Zoom,
+                new Attribution
             ]
         });
 
         const extent = vectorSource.getExtent();
-        if (! window.ol.extent.isEmpty(extent)) {
+        if (! isEmpty(extent)) {
             map.getView().fit(extent, { padding: [20, 20, 20, 20] });
         }
 
@@ -502,40 +511,40 @@ function getFeaturesFromOpenLayersData (geometries: any[]): any[] {
         let olGeometry: any = null;
         const style: any = {};
         if (geometry.geometry.type === 'LineString') {
-            olGeometry = new window.ol.geom.LineString(geometry.geometry.coordinates);
-            style.stroke = new window.ol.style.Stroke(geometry.style.stroke);
+            olGeometry = new LineString(geometry.geometry.coordinates);
+            style.stroke = new Stroke(geometry.style.stroke);
         } else if (geometry.geometry.type === 'MultiLineString') {
-            olGeometry = new window.ol.geom.MultiLineString(geometry.geometry.coordinates);
-            style.stroke = new window.ol.style.Stroke(geometry.style.stroke);
+            olGeometry = new MultiLineString(geometry.geometry.coordinates);
+            style.stroke = new Stroke(geometry.style.stroke);
         } else if (geometry.geometry.type === 'MultiPoint') {
-            olGeometry = new window.ol.geom.MultiPoint(geometry.geometry.coordinates);
-            style.image = new window.ol.style.Circle({
-                fill: new window.ol.style.Fill(geometry.style.circle.fill),
-                stroke: new window.ol.style.Stroke(geometry.style.circle.stroke),
+            olGeometry = new MultiPoint(geometry.geometry.coordinates);
+            style.image = new Circle({
+                fill: new Fill(geometry.style.circle.fill),
+                stroke: new Stroke(geometry.style.circle.stroke),
                 radius: geometry.style.circle.radius,
             });
         } else if (geometry.geometry.type === 'MultiPolygon') {
-            olGeometry = new window.ol.geom.MultiPolygon(geometry.geometry.coordinates);
-            style.fill = new window.ol.style.Fill(geometry.style.fill);
-            style.stroke = new window.ol.style.Stroke(geometry.style.stroke);
+            olGeometry = new MultiPolygon(geometry.geometry.coordinates);
+            style.fill = new Fill(geometry.style.fill);
+            style.stroke = new Stroke(geometry.style.stroke);
         } else if (geometry.geometry.type === 'Point') {
-            olGeometry = new window.ol.geom.Point(geometry.geometry.coordinates);
-            style.image = new window.ol.style.Circle({
-                fill: new window.ol.style.Fill(geometry.style.circle.fill),
-                stroke: new window.ol.style.Stroke(geometry.style.circle.stroke),
+            olGeometry = new Point(geometry.geometry.coordinates);
+            style.image = new Circle({
+                fill: new Fill(geometry.style.circle.fill),
+                stroke: new Stroke(geometry.style.circle.stroke),
                 radius: geometry.style.circle.radius,
             });
         } else if (geometry.geometry.type === 'Polygon') {
-            olGeometry = new window.ol.geom.Polygon(geometry.geometry.coordinates);
-            style.fill = new window.ol.style.Fill(geometry.style.fill);
-            style.stroke = new window.ol.style.Stroke(geometry.style.stroke);
+            olGeometry = new Polygon(geometry.geometry.coordinates);
+            style.fill = new Fill(geometry.style.fill);
+            style.stroke = new Stroke(geometry.style.stroke);
         } else {
             throw new Error();
         }
 
         if (geometry.geometry.srid !== 3857) {
             const source  = 'EPSG:' + (geometry.geometry.srid !== 0 ? geometry.geometry.srid : 4326);
-            const sourceProj = window.ol.getProjection(source);
+            const sourceProj = getProjection(source);
 
             if (sourceProj) {
                 olGeometry = olGeometry.transform(
@@ -546,11 +555,11 @@ function getFeaturesFromOpenLayersData (geometries: any[]): any[] {
         }
 
         if (geometry.style.text) {
-            style.text = new window.ol.style.Text(geometry.style.text);
+            style.text = new Text(geometry.style.text);
         }
 
-        const feature = new window.ol.Feature(olGeometry);
-        feature.setStyle(new window.ol.style.Style(style));
+        const feature = new Feature(olGeometry);
+        feature.setStyle(new Style(style));
         features.push(feature);
     }
 
@@ -572,7 +581,7 @@ class GisVisualizationController {
 
         $(document).on('click', '#useOsmAsBaseLayerSwitch', this.boundOnChoiceChange);
 
-        if (typeof window.ol === 'undefined') {
+        if (! document.querySelector('script[src*="js/vendor/openlayers/openlayers.js"]')) {
             $('#useOsmAsBaseLayerSwitch, #useOsmAsBaseLayerSwitchLabel').hide();
             $('#useOsmAsBaseLayerSwitch').prop('checked', false);
         }