• Rolf
  • Member
  • Offline
  • Registered: 2009-09-22
  • Posts: 11

Topic: Mif.Menu - hide menu when clicking other element?

My case: I want to add Mif.Menu to a file/item manager I've been working on. Files/items are representated as div block elements on the page. You can select one or more of them like in Finder or Explorer and you can drag/drop them etc.
Now I want to add Mif.Menu to enable quick actions like copy/paste. I can attach Mif.Menu to each file/item-div individually, but I probably attach it to the container (which could be document.body, or some div). I'm playing with both options, the first is ofcourse more memory intensive and probably not needed.

Anyway- when you right click a file/item-div I get the context menu as expected, which works fine. When you click on the document.body ("outside" the context menu) the menu hides as expected as well. However, when you (left) click on another file/item-div on the page, the Mif.Menu is not being closed. I expect the Mif.Menu to close to mimic OS behavior (I'm not focusing on the item anymore for which the Mif.Menu is being shown).

How can I get the menu to close?
Mind you, the file/item-divs you can click on to select have a e.stopPropagation() so the event doesn't go all the way to the body.

I thought of a maybe-solution (but requires changes in org. code): instead of adding mousedown to the document (in addHideOnExtraClick) you could use something like outerClick (http://cpojer.net/blog/Custom_outerClick_event) for closing the menu?

Thanks in advance

Quote Post 1

Thumbs up Thumbs down

  • moro
  • Administrator
  • Offline
  • Registered: 2008-06-17
  • Posts: 352
  • User Karma: 1

Re: Mif.Menu - hide menu when clicking other element?

if you use stopPropagation outerClick does not fired too. Do not use stopPropogation.

moro's Website

Quote Post 2

Thumbs up Thumbs down

  • Rolf
  • Member
  • Offline
  • Registered: 2009-09-22
  • Posts: 11

Re: Mif.Menu - hide menu when clicking other element?

Actually, if I attach Mif.Menu to all file-divs individually and add the outerClick event in the 'addHideOnExtraClick' method & removing it again in 'hideOnExtraClick' in works as I expected.

Though, I would also need to hide the menu when I right click other file-div elements. At the moment it displays new Mif.Menu's each time I'd right-click a file-div-element (which sort of stacks the menu's etc.).

PS, I can not remove the stopPropagation on file-div-elements, because else click-events on these elements also fire events on the outer container holding the file-div-elements w(this be doc.body) which has an event attached, my 'unselectAll' method.
Compare it to the desktop that contains several file/folder icons you can select and by click on the desktop itself you would deselect all those you selected. Maybe I should start using outerClick for this as well, though adding one event to the outer container makes sense, just like (at first) your addEvent in 'addHideOnExtraClick' makes sense...


moro wrote:

if you use stopPropagation outerClick does not fired too. Do not use stopPropogation.

Last edited by Rolf (2010-03-22 00:32:42)

Quote Post 3

Thumbs up Thumbs down

  • Rolf
  • Member
  • Offline
  • Registered: 2009-09-22
  • Posts: 11

Re: Mif.Menu - hide menu when clicking other element?

Oh, and when I add only one Mif.Menu, attaching it to the container element that holds all file-div-elements it works as well (so far just tested quickly in Firefox).
Mif.Menu is closed when I click anywhere else besides "inside" the (context) menu. Would you say this wouldn't work in all situations? I would say relying on outerClick is better than depending on the document.body, since it could be "covered" with other elements stopping events (as in my situation).. when you check with an outerClick it's more independent.

Or am I missing something?

Quote Post 4

Thumbs up Thumbs down

  • moro
  • Administrator
  • Offline
  • Registered: 2008-06-17
  • Posts: 352
  • User Karma: 1

Re: Mif.Menu - hide menu when clicking other element?

outerClick is the same as addHideOnExtraClick, but it's use click instead mousedown.
outerClick work because you don't use stopPropogation event for click, if you add stopPropogation for click it's too don't work.

moro's Website

Quote Post 5

Thumbs up Thumbs down