Wavyzz/dolibarr
2
0
Fork 1
mirror of https://github.com/Dolibarr/dolibarr.git synced 2025-12-16 06:21:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

FIX : Ergonomy : edge detection for dropdown (#31023)

Browse Source 
* Fix edge detection for dropdown

* add missing class

* Dropdown fix for md too

* Fix any js handled event must start with a log

---------

Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>
This commit is contained in:
John BOTELLA
2024-09-23 04:02:32 +02:00
committed by GitHub
parent a5dc3e0170
commit 5470ad0128
3 changed files with 141 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
htdocs/core/js/lib_head.js.php
View File

@@ -1323,18 +1323,41 @@ jQuery(document).ready(function() {
jQuery(document).ready(function() {
jQuery(".butAction.dropdown-toggle").on("click", function(event) {
console.log("Click on .butAction.dropdown-toggle");
var parentholder = jQuery(event.target).parent();
var offset = parentholder.offset();
var widthdocument = $(document).width();
var left = offset.left;
var right = widthdocument - offset.left - parentholder.width();
var widthpopup = parentholder.children(".dropdown-content").width();
console.log("left="+left+" right="+right+" width="+widthpopup+" widthdocument="+widthdocument);
if (widthpopup + right >= widthdocument) {
right = 10;
let parentHolder = jQuery(event.target).parent();
let dropDownContent = parentHolder.children(".dropdown-content");
let offset = parentHolder.offset();
let widthDocument = $(document).width();
let heightDocument = $(document).height();
let right = widthDocument - offset.left - parentHolder.width();
let widthPopup = parentHolder.children(".dropdown-content").width();
if (widthPopup + right >= widthDocument) {
//right = 10;
}
parentHolder.toggleClass("open");
// Check tooltip is in viewport
let dropDownContentTop = dropDownContent.offset().top;
let dropDownContentLeft = dropDownContent.offset().left;
let dropDownContentHeight = dropDownContent.outerHeight();
let dropDownContentBottom = dropDownContentTop + dropDownContentHeight;
let viewportBottom = $(window).scrollTop() + $(window).height();
// Change dropdown Up/Down orientation if dropdown is close to bottom viewport
if(parentHolder.hasClass('open')
&& dropDownContentBottom > viewportBottom // Check bottom of dropdown is behind viewport
&& dropDownContentTop - dropDownContentHeight > 0 // check if set dropdown to --up will not go over the top of document
){
parentHolder.addClass("--up");
}else{
parentHolder.removeClass("--up");
}
// Change dropdown left/right offset if dropdown is close to left viewport
if(parentHolder.hasClass('open') && dropDownContentLeft < 0){
parentHolder.addClass("--left");
}else{
parentHolder.removeClass("--left");
}
parentholder.toggleClass("open");
parentholder.children(".dropdown-content").css({"right": right+"px", "left": "auto"});
});
// Close drop down
@@ -1344,7 +1367,7 @@ jQuery(document).ready(function() {
let parentholder = jQuery(".dropdown-toggle").closest(".dropdown.open");
if(parentholder){
// Hide the menus.
parentholder.removeClass("open");
parentholder.removeClass("open --up --left");
}
}
});