<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-a11y-toggle="contextMenu3" aria-controls="contextMenu3" data-close-on-outside-click="true">
        <span class="a-button__text">Exportera</span>
        <svg class="icon a-button__icon">
            <use xlink:href="#icon-download"></use>
        </svg>
    </button>
    <ul class="m-context-menu__list u-list-clean" id="contextMenu3" data-focus-trap="false">
        <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>
    </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-a11y-toggle="{{controls}}" aria-controls="{{controls}}" {{#if outsideClick}}data-close-on-outside-click="true"{{/if}}>
		<span class="a-button__text">Exportera</span>
		<svg class="icon a-button__icon">
			<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>
	</ul>
</nav>
{
  "name": "Context menu",
  "controls": "contextMenu3",
  "focusTrap": false,
  "outsideClick": true
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(context-menu) {
    	display: inline-flex;
    	position: relative;
    	flex-direction: column;
    
    	button {
    		span {
    			pointer-events: none;
    		}
    	}
    
    	@include e(list) {
    
    		@extend %box-shadow;
    
    		position: absolute;
    		top: 100%;
    		left: rhythm(1);
    		width: auto;
    		min-width: calc(100% - #{rhythm(1)});
    		border: 1px solid $color-concrete;
    		background-color: $color-snow;
    		white-space: nowrap;
    
    		&[aria-hidden='true'],
    		&:not([aria-hidden]) {
    			display: none;
    		}
    	}
    
    	@include e(item) {
    		padding: 0;
    
    		& + & {
    			border-top: 1px solid $color-concrete;
    		}
    
    		a {
    			display: block;
    			padding: rhythm(1) rhythm(2);
    			color: $color-cyberspace;
    			text-decoration: none;
    
    			&:hover,
    			&:focus {
    				background-color: $color-ash;
    			}
    		}
    	}
    }
    
    .no-js {
    	@include molecule(context-menu) {
    		@include e(list) {
    			display: initial;
    		}
    	}
    }
    
  • URL: /components/raw/context-menu/_context-menu.scss
  • Filesystem Path: src/molecules/context-menu/_context-menu.scss
  • Size: 874 Bytes
  • Content:
    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);
    }
    
  • URL: /components/raw/context-menu/context-menu.js
  • Filesystem Path: src/molecules/context-menu/context-menu.js
  • Size: 557 Bytes
  • Handle: @context-menu--close-on-outside-click
  • Preview:
  • Filesystem Path: src/molecules/context-menu/context-menu.hbs

No notes defined.