<nav class="m-context-menu js-context-menu">
<button type="button" class="a-button a-button--icon a-button--transparent a-button--icon js-context-menu-btn" aria-expanded="false" data-toggle-target="contextMenuText" data-toggle-text="Exportera|Stäng" data-toggle-icon-target="contextMenuIcon" data-toggle-icon="download|close" data-a11y-toggle="contextMenu" aria-controls="contextMenu">
<span class="a-button__text" id="contextMenuText">Exportera</span>
<svg class="icon a-button__icon m-context-me__icon" id="contextMenuIcon">
<use xlink:href="#icon-download"></use>
</svg>
</button>
<ul class="m-context-menu__list u-list-clean" id="contextMenu">
<li class="m-context-menu__item"><a href="#">PDF</a></li>
<li class="m-context-menu__item"><a href="#">JSON</a></li>
<li class="m-context-menu__item"><a href="#">PNG</a></li>
<li class="m-context-menu__item"><a href="#">Excel</a></li>
<li class="m-context-menu__item"><a href="#">Lorem ipsum dolor</a></li>
</ul>
</nav>
<nav class="m-context-menu js-context-menu">
<button type="button" class="a-button a-button--icon a-button--transparent a-button--icon js-context-menu-btn" aria-expanded="false" data-toggle-target="contextMenuText" data-toggle-text="Exportera|Stäng" data-toggle-icon-target="contextMenuIcon" data-toggle-icon="download|close" data-a11y-toggle="{{controls}}" aria-controls="{{controls}}" {{#if outsideClick}}data-close-on-outside-click="true"{{/if}}>
<span class="a-button__text" id="contextMenuText">Exportera</span>
<svg class="icon a-button__icon m-context-me__icon" id="contextMenuIcon">
<use xlink:href="#icon-download"></use>
</svg>
</button>
<ul class="m-context-menu__list u-list-clean" id="{{controls}}" {{#unless focusTrap}}data-focus-trap="false"{{/unless}}>
<li class="m-context-menu__item"><a href="#">PDF</a></li>
<li class="m-context-menu__item"><a href="#">JSON</a></li>
<li class="m-context-menu__item"><a href="#">PNG</a></li>
<li class="m-context-menu__item"><a href="#">Excel</a></li>
<li class="m-context-menu__item"><a href="#">Lorem ipsum dolor</a></li>
</ul>
</nav>
{
"name": "Context menu",
"controls": "contextMenu",
"focusTrap": true,
"outsideClick": false
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@include mixin.molecule(context-menu) {
display: inline-flex;
position: relative;
flex-direction: column;
button {
span {
pointer-events: none;
}
&[aria-expanded='true'] {
> svg {
width: var.$icon-size-medium;
height: var.$icon-size-medium;
}
}
}
@include bem.e(list) {
@extend %box-shadow;
position: absolute;
top: 100%;
left: func.rhythm(1);
width: auto;
min-width: calc(100% - #{func.rhythm(1)});
border: 1px solid colors.$color-concrete;
background-color: colors.$color-snow;
white-space: nowrap;
&[aria-hidden='true'],
&:not([aria-hidden]) {
display: none;
}
}
@include bem.e(item) {
padding: 0;
& + & {
border-top: 1px solid colors.$color-concrete;
}
a {
display: block;
padding: func.rhythm(1) func.rhythm(2);
color: colors.$color-cyberspace;
text-decoration: none;
&:hover,
&:focus {
background-color: colors.$color-ash;
}
}
}
}
.no-js {
@include mixin.molecule(context-menu) {
@include bem.e(list) {
display: initial;
}
}
}
const elements = document.querySelectorAll('[data-close-on-outside-click]');
function closeElement(element) {
document.addEventListener('mouseup', (e) => {
const childElement = element.nextElementSibling;
/* Close menu on all clicks except the trigger button,
the menu and it's child elements and if the menu is actually open. */
if (!element.contains(e.target) && !childElement.contains(e.target) && element.getAttribute('aria-expanded') === 'true') {
element.click();
}
});
}
if (elements) {
[].forEach.call(elements, closeElement);
}
No notes defined.