Context menu component (context-menu)

The context menu component is designed to display hidden by default list by clicking the button.

Minimal markup

The component consists of a drop-down wrapper and elements. Without elements inside wrappers, it doesn't make sense, so the minimal markup looks like

<context-menu>
    <cm-button>Click me!</cm-button>
</context-menu>

Appearance

Generated markup

<div class="context-menu">
    <button aria-haspopup="true" class="context-menu__toggler context-menu__toggler-default">
       <i class="icon icon-dots"></i>
    </button>
    <div aria-expanded="false" class="context-menu__dropdown" style="display: none;">
        <ul class="context-menu__list">
            <li class="cm-item">
                <button class="cm-item__button">Click me!</button>
            </li>
        </ul>
    </div>
</div>

Opening of the drop-down list is performed by pressing the opening button, closing it - by clicking on the same button, link or button among the context menu items or by clicking outside the drop-down menu.

Wrapper component parameters <context-menu>

Positioning on the screen

The drop-down list is located relative to the opening button, and by default adjoins the lower and left borders and opens downwards.

Layout options

By default

Top (top)

Right (right)

Top right (top, right)

Automatic positioning The specified position is only a recommendation if auto-position = true parameter is enabled. If at a given position the drop-down list does not appear in the visibility area or does not fit into a restrictive container, it'll change its position so that it could:

1. appear on the screen as visible as possible
2. fit into the boundaries

Restrictive container The boundary property is a boundary selector, by default, or if an element is not found among the parents of the component by the selector, this container is a body page container.

The drop-down list cannot be expanded downwards and to the right, but can fit into the boundaries so it opens up and to the left

The drop-down list cannot fit into the boundaries when it opens up and to the left, so it opens down and to the left (this is a priority direction), trying also to be displayed as the most visible on the screen.

Context menu items

Button <cm-button>

<context-menu>
    <cm-button @click="someMethod">Click me!</cm-button>
</context-menu>

Properties of the <cm-button/> item

Event handlers should be attached to the item and additional attributes can be added. Without a handler, clicking on the button will simply close the open menu. This is the kind of markup used

<cm-button
         class="list-item-class"
         item-class="item-class"
         aria-label="Awesome Button!"
         @click="$notify({group: 'right-b', type: 'sucсess', title: 'Notification!'})">
     Send notification
</cm-button>

It will be generated into such HTML, by clicking the someMethod method will be called:

<li class="cm-item list-item-class">
    <button aria-label="Awesome Button!" class="cm-item__button item-class">
        Send notification
    </button>
</li>

Link <cm-link>

<context-menu>
    <cm-link href="https://some.url">This is a link elemen</cm-link>
</context-menu>

Properties of the <cm-link/> item

It is also possible to hang event handlers on the element and add additional attributes, for example, a markup like this

<context-menu>
    <cm-link href="#anchor"
             class="list-item-class"
             item-class="item-class"
             data-prop="someProp"
             @click.prevent="someMethod">
         This is a link element
    </cm-link>
</context-menu>

It will be generated into such HTML, and by clicking a transition will not happen, instead someMethod method will be called:

<li class="cm-item list-item-class">
    <a href="#anchor" data-prop="someProp" class="cm-item__link item-class">
        This is a link element
    </a>
</li>

Separator <cm-separator>

<context-menu>
    <cm-button>Above separator</cm-button>
    <cm-separator></cm-separator><!-- separator -->
    <cm-button>Below separator</cm-button>
</context-menu>

Panel <cm-panel>

The component is intended for placing content inside the context menu. See the example below.

<context-menu>
    <cm-panel>
        Default panel
    </cm-panel>
    <cm-panel secondary>
        Secondary panel
    </cm-panel>
</context-menu>

Properties of the <cm-panel/> item

Generated markup

<li class="cm-item">
    <div class="cm-item__panel">
        Default panel
    </div>
</li>
<li class="cm-item">
    <div class="cm-item__panel is-secondary">
        Secondary panel
    </div>
</li>

GET parameters in the address bar <cm-query>

The component is intended for inserting GET parameters into the address bar of the browser without reboot (e.g. for filtering or sorting), other components can monitor these parameters and update the data.

Properties of the <cm-query/> item

<context-menu>
    <cm-query :param="{state: 'active'}">
        I am active
    </cm-query>
    <cm-query :param="{state: 'not-active'}">
        I am not active
    </cm-query>
</context-menu>

This is how the HTML template of the button looks like:

<li class="cm-item">
   <button class="cm-item__button is-active">
        I am active
    </button>
</li>
<li class="cm-item">
    <button class="cm-item__button">
        I am not active
    </button>
</li>

AJAX request <cm-ajax>

The component is intended for sending data to the server with the possibility of calling the method for processing the received response, processing the sended event to which the response data are sent. The serverRequest mixin is used to send a request.

Properties of the <cm-ajax/> item

Events called by the <cm-ajax/> item

<context-menu>
    <cm-ajax
        method="post"
        url="https://httpbin.org/post"
        :params="{param1: 'one', param2: 'two'}"
        @sended="({ data }) => $notify({ group:'right-b', text: JSON.stringify(data) })">
        Send request
    </cm-ajax>
</context-menu>

Below you can see the result in HTML

<li class="cm-item">
    <button class="cm-item__button">
        Send request
    </button>
</li>

Styling of the opening button

The button that opens the context menu can be changed using a slot named toggler. The content of the slot is placed inside the <button> tag, so it should not contain semantically-block elements (<div>). Block content must be represented as <span style="display:block;">

Example

<context-menu>
    <span slot="toggler" class="new-toggler">Open me</span>
    <cm-button>
        Click me!
    </cm-button>
</context-menu>

<style>
.new-toggler {
    display: inline-block;
    color: white;
    background-color: lightseagreen;
    border: 1px solid aqua;
    padding: 5px 15px;
    margin-bottom: 3px;
    border-radius: 15px;
    height: 30px;
}
</style>