I have decided to completely shift away from the original idea of placing the menu within the cell.
Here is what I propose instead:
- Place the menu outside the grid, hidden,
- Retain the link within the cell (this will activate the menu later),
- Add a click event to this link,
- Create a universal class for the menu (since there will only be one menu with changing context),
- This class will toggle the visibility of the menu,
- It will also store the contextual data (such as information from your grid)
- The click event on the links in the grid will include code to display the menu.
Here's an outline of the process:
Please note that error handling has been omitted for brevity.
var gridMenu = function(selector) {
var instance = this;
instance.element = document.querySelector(selector);
instance.context = null; // This can hold any relevant data based on your project
// 'sender' refers to the link in your cell
// 'context' represents your data (as mentioned above)
instance.open = function(sender, context) {
instance.context = context;
instance.element.style.display('block');
// Alternatively, you could use instance.element.classList.add('some_class_to_make_menu_visible')
// Consider adding positioning code here (valuable data may come from 'sender')
}
instance.close = function () {
instance.context = null;
instance.element.style.display = 'none';
// Another option is to remove the visibility class
}
// Click events for menu items (useful if the menu involves more than just simple links)
instance.menuItem1Click = function(e) {
// Customize actions here
instance.close();
// Call this at the end of each menu item's click event handler
}
// ... Include additional click event handlers for other menu items (one per item)
return instance;
}
// Instantiate your menu object somewhere in your 'document ready' script or during grid initiation
var menu = new gridMenu("#my_awesome_floating_menu");
This snippet demonstrates how to handle click events for links inside the grid:
function cellLinkClick(event) {
var context = {}; // Prepare any necessary data to send to the menu
menu.open(event, context);
}