mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
need to work on submenuDirection reactivity
This commit is contained in:
parent
99ab5cec5b
commit
f88cfc750f
@ -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
|
||||||
} else {
|
if(x_pos + $(contextMenu).width() + 10 > window.innerWidth){
|
||||||
return 'right';
|
console.log('right')
|
||||||
}
|
return "right";
|
||||||
|
} else {
|
||||||
|
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')
|
||||||
@ -284,4 +308,6 @@ window.select_ctxmenu_item = function ($ctxmenu_item){
|
|||||||
$($ctxmenu_item).addClass('context-menu-item-active');
|
$($ctxmenu_item).addClass('context-menu-item-active');
|
||||||
}
|
}
|
||||||
|
|
||||||
export default UIContextMenu;
|
export default UIContextMenu;
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user