[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH][UX] Dropdown menu: Opening upwards if little space at the bottom

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
b791494d by Yves Ngalamulume at 2025-08-20T21:08:56+00:00
[ENH][UX] Dropdown menu: Opening upwards if little space at the bottom
---
* [ENH] Reorganize comments to clarify global loading of tiki-menu.js

* [FIX] Move tiki-menu.js from public/ to src/js/ and load it in tiki-setup for global menu positioning logic

* [FIX] Update the files

* [FIX] Update the files

* [FIX] Update the files

* [FIX] [200~Move tiki-menu.js from lib/ to src/js/ for improved frontend code organization and build pipeline integration.

* [FIX] Create dedicated file for dynamic dropdown menu positioning

* [FIX] Create dedicated file for dynamic dropdown menu positioning

* [FIX] Converts dropdown menu position class handling from native JS to jQuery

* [ENH] Dynamically positions dropdowns based on viewport space. Adjusts for both Bootstrap and Smartmenus structures when applicable.

* [FIX] Fixed duplication

* [REF] Update Kint and Kaltura dependencies to latest vesion
---
* [REF] Update Kint and Kaltura dependencies to latest vesion

See merge request tikiwiki/tiki!7970

* [ENH][UX] Opening upwards if little space at the bottom

See merge request tikiwiki/tiki!8044

- - - - -


5 changed files:

- .gitattributes
- installer/tiki-installer.php
- + src/js/jquery-tiki/tiki-menu.js
- themes/base_files/css/tiki_base.scss
- tiki-setup.php


Changes:

=====================================
.gitattributes
=====================================
@@ -4715,6 +4715,7 @@ lib/Theme/ThemeControlLib.php -text
 lib/Theme/ThemeLib.php -text
 lib/tiki-dynamic-js.php -text
 lib/tiki-js.js -text
+public/generated/js/jquery-tiki/tiki-menu.js -text
 lib/tikiaccesslib.php -text
 lib/TikiDate.php -text
 lib/DateCalc.php -text


=====================================
installer/tiki-installer.php
=====================================
@@ -799,6 +799,7 @@ $headerlib->add_cssfile('public/generated/js/vendor_dist/bootstrap/dist/css/boot
 $headerlib->add_cssfile(FONTAWESOME_CSS_PATH . '/all.css');
 $headerlib->add_cssfile('themes/base_files/css/tiki_base.css');
 $headerlib->add_jsfile('lib/tiki-js.js');
+$headerlib->add_jsfile(JS_ASSETS_PATH . '/jquery-tiki/tiki-menu.js');
 $headerlib->add_jsfile_dependency(NODE_PUBLIC_DIST_PATH . "/jquery/dist/jquery.min.js");
 $headerlib->add_jsfile_dependency(NODE_PUBLIC_DIST_PATH . "/jquery-migrate/dist/jquery-migrate.min.js", true);
 $headerlib->add_jsfile_dependency(NODE_PUBLIC_DIST_PATH . "/jquery-ui/dist/jquery-ui.js");


=====================================
src/js/jquery-tiki/tiki-menu.js
=====================================
@@ -0,0 +1,30 @@
+/**
+ * Dynamically adjusts the position of dropdown menus
+ * based on their location in the viewport.
+ *
+ * This script is separated to avoid executing logic in files
+ * meant only for global function and structure definitions.
+ *
+ * Dependencies: jQuery
+ */
+
+$(function () {
+    $(".sm-nav-item, .dropdown, .mega-menu").each(function () {
+        const rect = this.getBoundingClientRect();
+        const position = rect.top < window.innerHeight / 2 ? "top" : "bottom";
+
+        let $dropdown = $(this).find(".dropdown-menu");
+        if ($dropdown.length === 0) {
+            $dropdown = $(this).find("ul");
+        }
+
+        if ($dropdown.length > 0) {
+            if (position !== "bottom") {
+                $dropdown.removeClass("dropdown-menu-bottom");
+            } else {
+                $dropdown.addClass("dropdown-menu-bottom");
+            }
+        }
+    });
+});
+// end of src/js/tiki-menu.js


=====================================
themes/base_files/css/tiki_base.scss
=====================================
@@ -103,5 +103,12 @@ li.highlight {
         visibility: hidden; /* Hidden by default */
     }
 }
+/* --- Force all dropdowns to open upwards ---*/
+.dropdown-menu-bottom {
+    top: auto !important;
+    bottom: 100% !important;
+    margin-bottom: .5rem;
+    margin-top: 0 !important;
+}
 
 /* End of file */


=====================================
tiki-setup.php
=====================================
@@ -512,6 +512,13 @@ if (isset($prefs['fgal_elfinder_feature']) && $prefs['fgal_elfinder_feature'] ==
 }
 
 $headerlib->add_jsfile('lib/jquery_tiki/tiki-jquery.js');
+//This is applied globally so all menus can open upward when space is limited.
+//Since menus appear in many places in Tiki, we can’t handle them individually, so we load it once on page load to make it available site-wide.
+//templates/menu/clone.tpl
+//templates/menu/preview.tpl
+//templates/menu/quicklinks.tpl
+//templates/tiki-view_sheets_menu.tpl
+$headerlib->add_jsfile(JS_ASSETS_PATH . '/jquery-tiki/tiki-menu.js');
 $headerlib->add_jsfile('lib/tiki-js.js'); //This depends on tiki-jquery.js in at least one place, so must load after - benoitg - 2023-11-21
 
 if (isset($_REQUEST['geo_zoomlevel_to_found_location'])) {



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/b791494d94710a9c6e081a7d2af9a5150122ee28

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/b791494d94710a9c6e081a7d2af9a5150122ee28
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs