sydcanem / bootstrap-contextmenu Goto Github PK

Is there any way to click on an item
the context menu is not hidden
and hidden by clicking
in the body of the page?

It would be great if this plugin support the open / close methods.
For example $('#context').contextmenu('open');

When I click on an item, onItem() is called and the menu is hidden. But hide.bs.context and hidden.bs.context are not triggred.

$('#filetree').contextmenu(
    target: "#filetree-contextmenu"
    scopes: "li > a"
    before: (event, element, target)->
        event.preventDefault()
        elem = event.target
        if elem.tagName isnt 'A'
            event.preventDefault()
            @closemenu(event)
            return false    
        true
    onItem: (c,e) -> 
       contextmenu_click(c,e)
).on('hide.bs.context', ->
     alert()
   #Not Triggered
)

Hi,
Thanks for the plugin, it looks nice, but what is the license ? Can I use it in commercial website ?
Thanks

hi, i'm using single context menu shared between several elements.
Is it possible in current version to find out which element was clicked to open menu?

The solution can be to toggle some class of element, e.g. context-open..

Hello.

<table>
     <tr id="row_0">
         <td>a</td>
         <td>b</td>
     </tr>
     <tr id="row_1">
         <td>c</td>
         <td>d</td>
     </tr>
</table>

I want get id value this row right click in table.
Please help me. Thank!

bootstrap supports "dropdown-submenu".
When I use submenu with this plugin,
Parent Menu is ok but child menu goes off screen if too close to border of parent.
http://getbootstrap.com/2.3.2/components.html

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
    ...
    </ul>
    </li>
    </ul>
'''

Again, not sure if this will affect anyone negatively, but I have a lot of absolutely positioned divs with z-indexes, and I'll need the context menu to always be above all others. Might be reasonable to add a z-index to the menu of say 9999, as I imagine most people would have z-indexes much lower than that, but would always want the menu on top. Thx again!

Code on README.MD doesn't work:

$('.context').contextmenu({
  target:'#context-menu', 
  before: function(e,context) {
  }
});

You have to explicitly return true to get this to work:

$('.context').contextmenu({
  target:'#context-menu', 
  before: function(e,context) {
    return true;
  }
});

The documentation says:

If this function returns false, the context menu will not be displayed.

...but the functionality is more like:

If this function returns true, the context menu will be displayed.

I have submitted a pull request (#76) with the fix and unit tests for this issue.

I have an image gallery and each item will have basically the same context menu. In the docs it is said that all events are fired on the context menu level though. Is there a way to pass the source of which element has opened the context menu into that event?

Right now, I am building in the way that each item has its own context menu and I find that a bit redundant, as I think one context menu should suffice, as long as I could differentiate from where it was opened.

If it is not possible, then please consider this a feature request to pass a source into the context menu handler.

I hope my use case is understandable and thank you very much for this plugin.

Hello,
I'm improving my cms with twitter bootstrap. My cms uses a right context menu to manage contents (you can see this video to see how it works http://www.alphalemon.com/alphalemon-cms-contents-management-screencast-tutorial).

Since now I've used medialize context menu https://github.com/medialize/jQuery-contextMenu but, due to twitter bootstrap, I'd like to use its context menu.

I've tried to use your plugin in my cms but it forces me to add position relative to the target div where the context menu must be displayed and this is not possible in my situation. Is it possible to remove this requirement?

Thanks a lot

Hello,

I try to use the javascript plugin, but I cannot get it work.
See jsfiddle here : http://jsfiddle.net/7qswF/2/

Am I missing something ?

What's the license of this plug in -- Apache License?

I'm attaching the context menu with ".class" selector. The onItem callback is executed N times (N= the elements that meet the jQuery selector) because for each element that meets the selector the contextmenu is individually created (:162) and therefore calls the listen function (binding the on click event).

Any recomendation how to fix this? (Except using a global binding for it with a check inside the before callback)

Menu key - http://en.wikipedia.org/wiki/Menu_key.

Tested this on an Ubuntu machine. The element which triggers contextmenu on right click was selected / focussed. Then pressed the menu button. Browser's contextmenu opens, not bootstrap-contextmenu.

I digged in a bit more and 'contextmenu' event is tiggered on pressing menu key. So it would seem bootstrap-contextmenu is somehow missing that event? If no, I would appreciate any advice with regards to what could be wrong / how can I debug this in my setup.

Hey there,

it is currently not possible to handle multiple context menus within one page. Opening a second context menu works, but the closing of this menus does not work correctly.

Thanks and best regards
Johannes

Hello,
Check this Fiddle.
http://jsfiddle.net/bababalcksheep/e3Y9u/.
Works great on dynamic elements too. for example new row in table etc.

Right click to open bootstrap contextmenu. Then right click somewhere else to open browser's default contextmenu.

Here's what we get:

Expected: only browsers right click menu should be visible

Clicking on the on the contextmenu itself or the ul element triggers the onItem callback. Taken on the demo page which shows elements text property on onItem callback. Clicking outside of any items while within the contextmenu shows all the items text.

Context Menu not viewable on browser dimensions is smaller than the context element.

https://jsfiddle.net/zumcncjx/1/

If you have a target="_blank" or even _self anchor (link) in a context menu, they do not work. Removing the return false; from the closemenu function fixes the issue, but I'm not sure of the other ramifications.

Thanks for the script, I've modified it to add a after call once the menu was closed :)

Modify constructor LN42

 this.before = this.options.before || this.before
 this.onItem = this.options.onItem || this.onItem
 this.after = this.options.after || this.after

Modify closemenu LN79

,closemenu: function(e) {
      if(this.getMenu().hasClass('open'))
           this.after();
      this.getMenu().removeClass('open');
 }

Add default after function LN92

,after: function(e) {
      return true;
 }

Add to clearMenus LN170

,clearMenus: function(e) {
      if (!e.ctrlKey) {
        $('[data-toggle=context]').each(function() {
              if(this.getMenu().hasClass('open'))
                   this.after();
          this.getMenu()
            .removeClass('open');
        });
      }
  }

Because you use .attr('data-target') if I dynamicly add .data('tartget', val) the plugin ignores the value... may want to switch it to checking .data('target').

I'm loving this context menu, but I can't figure out how to trigger it on a left mouse click. I figure someone has probably asked for/developed a solution for this, but I am unable to see it in the documentation/examples. Have I missed something?

I need support for touchscreen on mobile devices. I would like to open menu when user tap-and-hold instead of right mouse click

Plugin does support jquery object as target option.

var target = $('#context-menu');
$('.context').contextmenu({
  target:target , 
 })

I activated a contextmenu using data attributes on multiple input fields as below:

<div class="inputfield" id="input-field1" data-toggle="context" data-target="#context-menu">
<div class="inputfield" id="input-field2" data-toggle="context" data-target="#context-menu">
<div class="inputfield" id="input-field3" data-toggle="context" data-target="#context-menu">
....

There is no easy way to invoke onItem for the contentmenu unless I do:

$('#context-menu ul li').each(function(i, li) {
$(li).click(function() {
alert($(this).text());
});
});

or I do the following multiple times for each field:

$('#input-field1').contextmenu({
target:'#context-menu',
onItem: function(e, item) {
alert($(item).text());
}
});
...

// THIS DOES NOT WORK
$('.inputfield').each(function() {
$(this).contextmenu({
target:'#context-menu',
onItem: function(e, item) {
alert($(item).text());
});
});

I am expecting something more robust like:

$('#content-menu').setup({
onItem: function(e, item) {
alert($(item).text());
}
});

Does this make sense?

Hey there,

The plugin does not seem to 'hide' (open) contextmenu's when a new one is opened.
I saw something about it in the documentation, but it does not seem to work. Not when I use Javascript to toggle them, nor data-toggle.

Hi,

Is there a way to manually open context menu if some event happens ?
Actually what I am trying to accomplish is this
I have a big table with many cells and when I attach context menu for each of them it becomes slow - when I right click I wait a little for it to appear. What I think to do is to attach a right click event to each cell, and when the user clicks on it show the context menu.

Thanks

Found it already !!

hi
we trying to bind bootstrap to iframe basically we wanted context menu only for iframe. context menu binds and works fine for DIV but not for iframe.. If any help or suggestion in this regard it will be of great help
thank

hi
i wonder what can be done to prevent right click on the bootstrap-contextmenu itself.
also, we can still select text on the menu.

tried it with bootstrap 3 and on div columns. Doesnot work.
Menu opens outside row -> column scope.

Hey, maintainer(s) of sydcanem/bootstrap-contextmenu!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library sydcanem/bootstrap-contextmenu is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "sydcanem/bootstrap-contextmenu",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hey There,
thanks for great work done. I was trying to populate submenus/multilevel context menu.please share example if you have.
Thanks I advance,
Ganesh.

hi
i got another issue.
if u implement the context menu on the entire page, and right click at the bottom two corners, horizontal scrollbars appears.
thnx

I'm hoping this is an easy fix, but I want it to only open when I click the body, not it's children. (it's for a quick background image changer)

The clearMenus() function relies on the presence of the originally clicked dom element in order to close the menu.

If the element is removed from the dom the .open class never gets removed and the menu remains visible.

See this jsFiddle.

As an example scenario, I'm using an AngularJS ng-repeat directive to render a number of taskbar "items". Right clicking on these taskbar items opens up the bootstrap contextmenu.

One of options within this menu is responsible for closing a module and removing the taskbar item from the dom. When this happens the context menu stays visible.

The given demo page [1] fails with plenty of errors. Additionaly the demo page is based on an old version. It still uses $(item) instead of e.target.

[1] https://sydcanem.github.io/bootstrap-contextmenu/

Let's say you have a ul list with a single contextmenu so you have only one menu to manage and It also prevent to have several contextmenu opened at the same time on each li.
The thing is that it is impossible to get the li caller so you can perform the desired action following that li contextmenu just clicked.

Are submenus supported?

In line 5095 of jquery-1.10.2.js error

Uncaught TypeError: Object # has no method 'apply'

<<<< DEBUG >>>>>
handleObj.origType = 'contextmenu'

I know this has been asked before (e.g. #8, #14) but both of them have a link to a gist that doesn't exist any more, so I'll ask this again.

Assuming I have markup like this:

<table>
     <tr>
         <td data-toggle="context" data-target="#context-menu">Delete</td>
         <td data-toggle="context" data-target="#context-menu">Rename</td>
         <td data-toggle="context" data-target="#context-menu">Copy</td>
     </tr>
</table>

<div id="context-menu">
    <ul class="dropdown-menu" role="menu">
        <li><a tabindex="-1" href="#" onclick="eventHandler('Action1')">Action1</a></li>
        <li><a tabindex="-1" href="#" onclick="eventHandler('Action2')">Action2</a></li>
    </ul>
</div>

function eventHandler(action){
   alert(action + ": How do I get the original <td>"?");
}

How do I get the original <td> element that was right-clicked without using $().contextmenu();?

How I can display the menu with javascript without using the right mouse button?

I have simple code like this:

$('.canvas').contextmenu({
target: '#canvas-menu'
});

When I open the menu and click the canvas, the menu doesn't close. In my app, the canvas covers the entire screen, making it hard for the user to close the menu without selecting a menu item.

#15 with position: 'fixed' on the context menu, the position is not correct.

using e.clientX and e.clientY fixes the problem

I have a sort of tree view -- it's a bunch of nested uls inside a div at the top-level. When I open the context menu on a tree item and select a menu item, onItem is invoked and the context argument is always set to the whole div, not the specific item (e.g. the li, or the span in the li's label) that was right-clicked.

My current workaround is to use $(document.elementFromPoint(e.clientX, e.clientY)) in the before handler, but this seems a bit hacky. Is there another way to get at the clicked element?

If I annotate two divs with data-toggle="context" but point data-target at two different context menus, I can get both menus to show simultaneously by right clicking each div in succession. Note Bootstrap's implementation of Dropdowns, for example: http://getbootstrap.com/javascript/#dropdowns. In their docs, "Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it."

Is this by design? If so, perhaps a plugin-level option to allow only one context menu to be visible at any time is in order. I'll end up solving this in application code if what I'm suggesting is undesirable.

Thank you very much for your work on this plugin--it saved us valuable time in a crunch situation!

Using "absolute" position for the location of the menu drop-down will put the position absolutely relative to any parent divs whose position has been set to "relative". "Fixed" position ignores any parents. Looks like line 96 is where this would be changed. Thx.

Is it possible to add icons (glyphicons specifically) to the contextmenu somehow? The position of the icons would be to the left of the text.