Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Menu position offset #4

Open
nobalmohan opened this issue Feb 10, 2015 · 16 comments
Open

Feature: Menu position offset #4

nobalmohan opened this issue Feb 10, 2015 · 16 comments

Comments

@nobalmohan
Copy link

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%'
         });
@Templarian
Copy link
Owner

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.

@nobalmohan
Copy link
Author

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

@Templarian
Copy link
Owner

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

@nobalmohan
Copy link
Author

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 notifications@github.com
wrote:

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


Reply to this email directly or view it on GitHub
#4 (comment)
.

Thanks,
Nobal

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

@nobalmohan
Copy link
Author

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 nobal20@gmail.com 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 <notifications@github.com

wrote:

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


Reply to this email directly or view it on GitHub
#4 (comment)
.

Thanks,
Nobal

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

Thanks,
Nobal

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

@Templarian
Copy link
Owner

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

@Templarian
Copy link
Owner

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.

@nobalmohan
Copy link
Author

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 notifications@github.com
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
#4 (comment)
.

Thanks,
Nobal

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

@madmas
Copy link
Contributor

madmas commented Jan 15, 2016

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

@Templarian
Copy link
Owner

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.

madmas added a commit to madmas/ui.bootstrap.contextMenu that referenced this issue Jan 16, 2016
…f it is opened at bottomor left boundaries.
@madmas
Copy link
Contributor

madmas commented Jan 16, 2016

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

Templarian added a commit that referenced this issue Jan 16, 2016
@Templarian
Copy link
Owner

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. 😄

@madmas
Copy link
Contributor

madmas commented Jan 16, 2016

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

@Templarian
Copy link
Owner

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.

@madmas
Copy link
Contributor

madmas commented Jan 18, 2016

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

@josetaira
Copy link
Collaborator

This commit bc4d4d0 in PR #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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants