Move menuResizer related functions to menu-resizer.js

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

js/src/main.js

@@ -7,6 +7,7 @@ import { PageSettings } from './modules/page_settings.js';
 import { crossFramingProtection } from './modules/cross_framing_protection.js';
 import { Indexes } from './modules/indexes.js';
 import { Config } from './modules/config.js';
+import { initializeMenuResizer } from './modules/menu-resizer.js';
 
 AJAX.registerOnload('main.js', () => AJAX.removeSubmitEvents());
 $(AJAX.loadEventHandler());
@@ -33,7 +34,7 @@ AJAX.registerTeardown('main.js', Functions.off());
 AJAX.registerOnload('main.js', Functions.on());
 
 $(Functions.dismissNotifications());
-$(Functions.initializeMenuResizer());
+$(initializeMenuResizer());
 $(Functions.floatingMenuBar());
 $(Functions.breadcrumbScrollToTop());
 

js/src/modules/ajax.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import { Functions } from './functions.js';
 import { Navigation } from './navigation.js';
 import { CommonParams } from './common.js';
+import { initializeTopMenuResizer } from './menu-resizer.js';
 
 /**
  * This object handles ajax requests for pages. It also
@@ -221,7 +222,7 @@ const AJAX = {
                 // Remove duplicate wrapper
                 // TODO: don't send it in the response
                 .children().first().remove();
-            $('#topmenu').menuResizer(Functions.mainMenuResizerCallback);
+            initializeTopMenuResizer();
         }
     },
     /**

js/src/modules/functions.js

@@ -5,6 +5,7 @@ import { CommonActions, CommonParams } from './common.js';
 import { mysqlDocKeyword, mysqlDocBuiltin } from './doc-links.js';
 import { Indexes } from './indexes.js';
 import { Config } from './config.js';
+import { resizeTopMenu } from './menu-resizer.js';
 
 /* global ChartType, ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js
 /* global DatabaseStructure */ // js/database/structure.js
@@ -3300,24 +3301,6 @@ Functions.showHints = function ($div) {
     });
 };
 
-Functions.mainMenuResizerCallback = function () {
-    // 5 px margin for jumping menu in Chrome
-    // eslint-disable-next-line compat/compat
-    return $(document.body).width() - 5;
-};
-
-/**
- * @return {function}
- */
-Functions.initializeMenuResizer = () => function () {
-    // Initialise the menu resize plugin
-    $('#topmenu').menuResizer(Functions.mainMenuResizerCallback);
-    // register resize event
-    $(window).on('resize', function () {
-        $('#topmenu').menuResizer('resize');
-    });
-};
-
 /**
  * var  toggleButton  This is a function that creates a toggle
  *                    sliding button given a jQuery reference
@@ -3840,7 +3823,7 @@ Functions.floatingMenuBar = () => function () {
                 'padding-top',
                 $('#floating_menubar').outerHeight(true)
             );
-            $('#topmenu').menuResizer('resize');
+            resizeTopMenu();
         }, 4);
     }
 };

js/src/modules/menu-resizer.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { Functions } from './modules/functions.js';
+import { Functions } from './functions.js';
 
 /**
  * Handles the resizing of a menu according to the available screen width
@@ -174,7 +174,7 @@ import { Functions } from './modules/functions.js';
     /**
      * Extend jQuery
      *
-     * @param {string} method
+     * @param {string|Function} method
      *
      * @return {any}
      */
@@ -188,3 +188,33 @@ import { Functions } from './modules/functions.js';
         }
     };
 }($));
+
+/**
+ * @return {void}
+ */
+function resizeTopMenu () {
+    $('#topmenu').menuResizer('resize');
+}
+
+/**
+ * @return {void}
+ */
+function initializeTopMenuResizer () {
+    $('#topmenu').menuResizer(() => $(document.body).width() - 5);
+}
+
+/**
+ * @return {function}
+ */
+function initializeMenuResizer () {
+    return function () {
+        // Initialise the menu resize plugin
+        initializeTopMenuResizer();
+        // register resize event
+        $(window).on('resize', function () {
+            resizeTopMenu();
+        });
+    };
+}
+
+export { initializeMenuResizer, initializeTopMenuResizer, resizeTopMenu };

js/src/modules/navigation.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import { Functions } from './functions.js';
 import { CommonParams } from './common.js';
 import { Config } from './config.js';
+import { resizeTopMenu } from './menu-resizer.js';
 
 /**
  * function used in or for navigation panel
@@ -1197,7 +1198,7 @@ Navigation.ResizeHandler = function () {
     this.mouseup = function (event) {
         $('body').css('cursor', '');
         Functions.configSet('NavigationWidth', event.data.resize_handler.getPos(event));
-        $('#topmenu').menuResizer('resize');
+        resizeTopMenu();
         $(document)
             .off('mousemove')
             .off('mouseup');
@@ -1284,7 +1285,7 @@ Navigation.ResizeHandler = function () {
         this.treeResize();
         const callbackSuccessGetConfigValue = (data) => {
             this.setWidth(data);
-            $('#topmenu').menuResizer('resize');
+            resizeTopMenu();
         };
         // Skip mobile
         if (isLoadedOnMobile === false) {

libraries/classes/Header.php

@@ -140,7 +140,6 @@ class Header
         $this->scripts->addFile('vendor/jquery/jquery-ui-timepicker-addon.js');
         $this->scripts->addFile('index.php', ['route' => '/messages', 'l' => $GLOBALS['lang']]);
         $this->scripts->addFile('shared.js');
-        $this->scripts->addFile('menu_resizer.js');
         $this->scripts->addFile('main.js');
 
         $this->scripts->addCode($this->getJsParamsCode());

test/classes/HeaderTest.php

@@ -262,7 +262,6 @@ class HeaderTest extends AbstractTestCase
             ['name' => 'vendor/jquery/jquery-ui-timepicker-addon.js', 'fire' => 0],
             ['name' => 'index.php', 'fire' => 0],
             ['name' => 'shared.js', 'fire' => 0],
-            ['name' => 'menu_resizer.js', 'fire' => 1],
             ['name' => 'main.js', 'fire' => 1],
         ];
         $this->assertSame($expected, $scripts->getFiles());

webpack.config.cjs

@@ -43,7 +43,6 @@ module.exports = [
             'jquery.sortable-table': './js/src/jquery.sortable-table.js',
             'main': './js/src/main.js',
             'makegrid': './js/src/makegrid.js',
-            'menu_resizer': './js/src/menu_resizer.js',
             'multi_column_sort': './js/src/multi_column_sort.js',
             'name-conflict-fixes': './js/src/name-conflict-fixes.js',
             'normalization': './js/src/normalization.js',