need to work on submenuDirection reactivity

This commit is contained in:
ayamoosa 2024-03-15 09:15:40 -07:00
parent 99ab5cec5b
commit f88cfc750f
2 changed files with 39 additions and 12 deletions

View File

@ -149,23 +149,45 @@ function UIContextMenu(options){
return false; return false;
}); });
// initialize menuAim plugin
$(contextMenu).menuAim({ $(contextMenu).menuAim({
submenuDirection: function (e){ submenuDirection: function(){
// if submenu will open to the left of menu item //if this is not a submenu
if (e.getBoundingClientRect().left + e.getBoundingClientRect().width > window.innerWidth) { // if(!options.is_submenu){
return 'left'; // if submenu is going to be on the right of the main menu
if(x_pos + $(contextMenu).width() + 10 > window.innerWidth){
console.log('right')
return "right";
} else { } else {
return 'right'; console.log('left')
return "left";
} }
// }
}, },
activate: function (e) { activate: function (e) {
//if submenu opens on right make submenuDirection right
// if($(contextMenu).offset().left + $(contextMenu).width() + 10 > window.innerWidth){
// $(contextMenu).menuAim({
// submenuDirection: 'right'
// });
// } else {
// $(contextMenu).menuAim({
// submenuDirection: 'left'
// });
// }
// hover over an item
let item = $(e).closest('.context-menu-item');
console.log('activate', e) console.log('activate', e)
// mark other items as inactive // mark other items as inactive
$(contextMenu).find('.context-menu-item').removeClass('context-menu-item-active'); $(contextMenu).find('.context-menu-item').removeClass('context-menu-item-active');
// mark this item as active // mark this item as active
$(e).addClass('context-menu-item-active'); $(item).addClass('context-menu-item-active');
// close any submenu that doesn't belong to this item // close any submenu that doesn't belong to this item
$(`.context-menu[data-parent-id="${menu_id}"]`).remove(); $(`.context-menu[data-parent-id="${menu_id}"]`).remove();
// mark this context menu as active // mark this context menu as active
@ -173,6 +195,7 @@ function UIContextMenu(options){
// activate submenu // activate submenu
// open submenu if applicable // open submenu if applicable
if($(e).hasClass('context-menu-item-submenu')){ if($(e).hasClass('context-menu-item-submenu')){
let item_rect_box = e.getBoundingClientRect(); let item_rect_box = e.getBoundingClientRect();
@ -193,6 +216,7 @@ function UIContextMenu(options){
}) })
} }
} }
}, },
deactivate: function (e) { deactivate: function (e) {
console.log('deactivate') console.log('deactivate')
@ -285,3 +309,5 @@ window.select_ctxmenu_item = function ($ctxmenu_item){
} }
export default UIContextMenu; export default UIContextMenu;

View File

@ -166,6 +166,7 @@
options.deactivate(activeRow); options.deactivate(activeRow);
} }
options.activate(row); options.activate(row);
activeRow = row; activeRow = row;
}; };
@ -277,13 +278,13 @@
// corner to decrease over time, as explained above. If the // corner to decrease over time, as explained above. If the
// submenu opens in a different direction, we change our slope // submenu opens in a different direction, we change our slope
// expectations. // expectations.
if (options.submenuDirection == "left") { if (options.submenuDirection() == "left") {
decreasingCorner = lowerLeft; decreasingCorner = lowerLeft;
increasingCorner = upperLeft; increasingCorner = upperLeft;
} else if (options.submenuDirection == "below") { } else if (options.submenuDirection() == "below") {
decreasingCorner = lowerRight; decreasingCorner = lowerRight;
increasingCorner = lowerLeft; increasingCorner = lowerLeft;
} else if (options.submenuDirection == "above") { } else if (options.submenuDirection() == "above") {
decreasingCorner = upperLeft; decreasingCorner = upperLeft;
increasingCorner = upperRight; increasingCorner = upperRight;
} }