ui.bootstrap.contextMenu icon indicating copy to clipboard operation
ui.bootstrap.contextMenu copied to clipboard

Feature: Menu position offset

Open nobalmohan opened this issue 10 years ago • 16 comments

In SPA with fixed height, there should be an option to position the menu via CSS class or by JS.

         if( event.pageY > 360 ) {
             popupPosition = (event.pageY - 250) + 'px';
         }else {
             popupPosition = event.pageY + 'px';
         }

         $ul.css({
             display: 'block',
             position: 'absolute',
             left: event.pageX + 'px',
             top: popupPosition,
             width: '15%'
         });

nobalmohan avatar Feb 10 '15 06:02 nobalmohan

Maybe something more along the lines of an anchor ability.

<any context-menu="" context-menu-anchor="top left"></any>

Where contextMenuAnchor can be:

default            - Calculate based on position and contextmenu size.
bottom right
bottom left
top right
top left

Would be a nice idea to have in the future.

Templarian avatar Feb 10 '15 06:02 Templarian

Yup. Something like this http://angular-ui.github.io/bootstrap/#/popover

nobalmohan avatar Feb 10 '15 06:02 nobalmohan

Yep. Now we wait for someone to make a pull request, or me to get bored enough to code it. :smile_cat:

Templarian avatar Feb 10 '15 06:02 Templarian

Give me the spec on how to do it. I will make a PR

On Tue, Feb 10, 2015 at 12:06 PM, Austin Andrews [email protected] wrote:

Yep. Now we wait for someone to make a pull request, or me to get bored enough to code it. [image: :smile_cat:]

— Reply to this email directly or view it on GitHub https://github.com/Templarian/ui.bootstrap.contextMenu/issues/4#issuecomment-73651729 .

Thanks, Nobal

nobal.in | @NobalMohan https://twitter.com/NobalMohan

nobalmohan avatar Feb 10 '15 13:02 nobalmohan

There are two use-case here: 1. Positioning of the pop-up 2. Making it fluid with respect to view port

On Tue, Feb 10, 2015 at 7:09 PM, Nobal Mohan [email protected] wrote:

Give me the spec on how to do it. I will make a PR

On Tue, Feb 10, 2015 at 12:06 PM, Austin Andrews <[email protected]

wrote:

Yep. Now we wait for someone to make a pull request, or me to get bored enough to code it. [image: :smile_cat:]

— Reply to this email directly or view it on GitHub https://github.com/Templarian/ui.bootstrap.contextMenu/issues/4#issuecomment-73651729 .

Thanks, Nobal

nobal.in | @NobalMohan https://twitter.com/NobalMohan

Thanks, Nobal

nobal.in | @NobalMohan https://twitter.com/NobalMohan

nobalmohan avatar Feb 11 '15 06:02 nobalmohan

Correct. I'm working on client work tonight. Will type out a spec of what it should look like/features tomorrow. :sweat_smile:

Templarian avatar Feb 11 '15 06:02 Templarian

So basically it will support the following locations...

contextmenu-right-click

I'm not 100% sure the best way to implement this. Basically:

  1. Render the full context menu.
  2. Get the width and height of the context menu.
  3. Calculate screen.height - (cursorPosition.y + contextMenu.height) = offset.y
  4. Similar to above calculate, screen.width - (cursorPosition.x + contextMenu.width) = offset.x
  5. Offset based on offset values from 4 and 5 as long as they are negative.

That is the basic idea.

Templarian avatar Feb 14 '15 07:02 Templarian

Thankns. This snippet will be helpful https://github.com/angular-ui-tree/angular-ui-tree/blob/master/source/directives/uiTreeNode.js#L168

On Sat, Feb 14, 2015 at 1:14 PM, Austin Andrews [email protected] wrote:

So basically it will support the following locations...

[image: contextmenu-right-click] https://cloud.githubusercontent.com/assets/338885/6198966/33357f3e-b3ea-11e4-8159-286af183c1ca.png

I'm not 100% sure the best way to implement this. Basically:

  1. Render the full context menu.
  2. Get the width and height of the context menu.
  3. Calculate screen.height - cursorPosition.y + contextMenu.height = offset.y
  4. Similar to above, screen.width - calculate cursorPosition.x + contextMenu.width = offset.x
  5. Offset based on offset values from 4 and 5.

That is the basic idea.

— Reply to this email directly or view it on GitHub https://github.com/Templarian/ui.bootstrap.contextMenu/issues/4#issuecomment-74365894 .

Thanks, Nobal

nobal.in | @NobalMohan https://twitter.com/NobalMohan

nobalmohan avatar Feb 19 '15 11:02 nobalmohan

:+1: this would be very helpful; any progress so far? :)

madmas avatar Jan 15 '16 12:01 madmas

Nope. Working on other open source projects at the moment. Now that nested menus are in this would be the next feature to add I think.

Definitely would take a pull request, but I'm probably not going to add this functionality for a while until I need it myself.

Templarian avatar Jan 15 '16 15:01 Templarian

Here it is :-) Didn't look at submenues for the first version ;)

madmas avatar Jan 16 '16 10:01 madmas

Looks awesome. I'm going to leave this issue opened to track the progress for nested menu's, but simply having support for single level will solve most users issue (nesting wasn't supported when this issue was created).

If anyone sees this and wants to pull request that functionality I'll definitely merge it. :smile:

Templarian avatar Jan 16 '16 17:01 Templarian

Cool thing, very happy to see it got merged so quickly :+1: Any plans on releasing a new version that contains this?

madmas avatar Jan 16 '16 19:01 madmas

Yea, should have time later today after my run (I have a few other minor features to edit in before I tag it for a release). Busy working on my other open source project for the next few hours.

Templarian avatar Jan 16 '16 19:01 Templarian

Cool, looking forward to it ;-) Thanks a lot for your work!

madmas avatar Jan 18 '16 10:01 madmas

This commit https://github.com/Templarian/ui.bootstrap.contextMenu/pull/52/commits/bc4d4d0ece0b9dce5b7213f744b63ed90aaa6d41 in PR https://github.com/Templarian/ui.bootstrap.contextMenu/pull/52 integrates the work done here with the Nested Menus.

I've only worked on the topCoordinate though. I'm still thinking of a good way to implement the leftCoordinate part. @madmas maybe you have some ideas?

josetaira avatar Apr 01 '16 11:04 josetaira