Semantic-ui: [UI] Right Click Menu

[brigand]

Context menus are great, and I think having it in the app would get more people to recognize that.

HTML and CSS

It's basically the same as .ui.vertical.menu, except it's hidden by default, and absolutely positioned.

<div class="ui context menu">
    <a class="item">
        Fire
    </a>
    <a class="item">
        Hide
    </a>
    <a class="item">
        Give Nickname
    </a>
</div>

<div class="employee">John</div>
<div class="employee">Rick</div>
<div class="employee">Sam</div>

Javascript

This is similar to modal. What's a better way to say "show at", i.e. with a noun instead of a preposition.

var $firstEmployee = $('.employee').first();

// show the context menu
$menu.context("show at cursor");
$menu.context("show at element", $firstEmployee);
$menu.context("show at element", $firstEmployee, "center");
$menu.context("show at element", $firstEmployee, "bottom right");

// show for employee on right-click/long-press
$menu.context("attach events", ".employee", "show");

// default settings
{
   // can be overridden explicitly when shown
   position: "auto", 

  // maximum distance from context menu edges 
  //   before closing in pixels
  // Infinity also allowed for no limit
  distance: 100,

  // clicking outside the context menu will cause it 
  //   to close if true
  closable: true,

  // allow long press for touch screens
  touch: true,

   // how long the user must press
   //   on a touch device before showing
   //   the context menu
  delay: 500  
}

For transition, scale, duration, and easing see modal.

The positions you give are suggestions, and the context menu will stick as close to them as possible without being off the screen.

For example, if you tell it to appear on the left side of an element on the left side of the screen; it will push itself right until it's on the screen edge.

If you don't specify a setting, it'll use the most spacious setting.

Context Menu

Attaching events for show binds to the contextmenu event, and prevents the default action.

This is usually triggered by a right click, but can also be triggered by pressing the AppsKey for a focused element (e.g. input).

Touch Events

If settings.touch is true, if the user holds down a bound element for settings.delay milliseconds; without dragging outside the element; the context menu will be displayed.

Callbacks

onShow() : Boolean

this is the HTMLElement.

The menu is shown. Explicitly return false to prevent the menu from showing.

onHide() : Boolean

this is the HTMLElement.

The menu is hidden. Explicitly return false to prevent the menu from hiding.

onSelect(HTMLElement chosenItem) : Boolean

this is the HTMLElement.

An item is chosen. Explicitly return false to prevent the menu from hiding.

[jlukic]

This is a great idea, context menus are awesome and underused, and vertical menus like you said are basically styled like context menus.

This would also make sense if we create a menu behavior that matches up to the menu element, like form, which would be a good place to include things like following menus (FPO name) which attach to page when scrolled past.

I would recommend moving DOMelements out of the callback and overriding the this context inside the callback, as this is more developer friendly and preserves context.

I also think we might want to keep work on this till after we finish the major features required for a release version (build page, less variables, example layouts)

[brigand]

Ah, okay. I thought it would be good for the build page (#189 under Elements header), but I have an old context-menu plugin I can wire up to a vertical menu for now.

It doesn't have to be perfect initially, but I'll make it easy to swap out later.

[brigand]

I changed the OP to make the element be this. The chosen item should still be a parameter, though?

I like the following menu as well. Personally I prefer "sticky", and that's what most people know it as (I think).

[jlukic]

Yeah, sticky menu makes more sense. The this context onselect would be the selected item .context.menu .active.item, onShow and onHide`` would be the ui menu.

[brigand]

Ah, that makes sense. You can get the context menu using
$(this).parent() in the selected. I like it!

[brigand]

Here's the first draft of it. I just have it in a fiddle for now because I'm stuck on a laptop for a few days.

I comented the example fairly heavily, so let me know if I missed something.

Should it be $.fn.context or $.fn.menu. jQuery has contextmenu in use because it's a DOM event. I'll clean it up a bit later. The CSS is very simple, because it's basically a vertical menu. Maybe we could just change .ui.vertical.menu to .ui.vertical.menu, .ui.context.menu in the menu file, to prevent repeat code.

[tomsseisums]

Has this been merged with master? Cannot seem to find it.

[brigand]

@joltmode nope, it might need some tweaks, and we should probably add a simple context menu which looks more like the standard contextmenu (smaller font, less spacing).

And the docs need more love.

[faribauc]

Any update on this feature?

[kwent]

Bump, we are in 2017 🎉

[panpingo]

Bump, 2018. Still desired.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[nmalcolm]

Would love to see this implemented.

[digi604]

any updates?

[crewow]

its important even in 2019

[doganoo]

any progress?