Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Add nested context menus #37
Description of the Change
Implemented nested context menus. Nested context menus are created by adding the class
The context menu keeps track of the currently active sub menu which can be controlled by keyboard and mouse. Opened sub menus stay inside the window boundaries (25px margin, as well as the main context menu). As the sub menu controls are based on the class names and not on specific elements the current flexibility of the component regarding the internal DOM structure is kept (as discussed in #5 )
Additionally added a scrollbar to menus which exceed the window boundaries:
As the implementation only jumps in if a context menu element with the class
Patched the test index.html to contain nested menus. A nested menu looks like:
<vue-context ref="menu" @close="onClose"> <template slot-scope="child"> <li tabindex="0"> <a href="#" class="v-context-item" @click.prevent="onClick('item 1')" > Do something </a> </li> <li class="v-context__sub"> <a href="#" class="v-context-item" @click.prevent="onClick('item 2')" > Do something else </a> <ul class="v-context"> <li tabindex="0"> <a href="#" class="v-context-item" @click.prevent="onClick('sub item 1')" > Submenu </a> </li> </ul> </li> </template> </vue-context>
Nested context menus are created by adding the class v-context__sub to a menu element. Inside the v-context__sub a new container (eg. a UL element) with the class v-context must be created. The v-context container will be opened if the v-context__sub is hovered or the menu element is expanded by keyboard right click.
@wol-soft I've merged your branch into my v5 release branch I'm working on right now. I did tweak some lines in there to match my coding style, but otherwise everything you've written is being merged.
Thank you for submitting this PR. It will be a nice addition to the component.