context-js icon indicating copy to clipboard operation
context-js copied to clipboard

Renders off screen if invoked far right or bottom

Open Risingson opened this issue 4 years ago • 2 comments

Thanks a lot for this library. A crucial thing missing is that it should check if it can render visibly on screen. If not the menu and its submenus should open to the left xor up. image

Risingson avatar Jan 30 '21 19:01 Risingson

Agreed. I will try to work on this as soon as I can. Shouldn't take too long.

heapoverride avatar Feb 03 '21 15:02 heapoverride

I added the following code at the bottom of method "show(x, y)" and it works fine for my use case.

However, if there are several levels of submenus then they will open on top of each other (but can still be used). Ideally all submenus should probably open to the left of the main context menu when there is little room on the right...

let docWidth = document.documentElement.clientWidth, docHeight = document.documentElement.clientHeight; 

let dimensions = this.dom.getBoundingClientRect();
        
if (dimensions.left + dimensions.width > docWidth) {
    this.dom.style.left = docWidth - dimensions.width + 'px'; 
}

if (dimensions.top + dimensions.height > docHeight) {
    this.dom.style.top = docHeight - dimensions.height + 'px';
}  

kurtcodemander avatar Dec 15 '21 20:12 kurtcodemander