<div class="pill">
<button class="btn pill-section pill-label" data-action="add-record">
<span class="text">Add record</span>
</button>
<div role="button" class="btn pill-section pill-icon dropdown js-dropdown" data-role="actions" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
<div class="icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
</svg>
</div>
<div class="dropdown-options" aria-hidden="true">
</div>
</div>
</div>
<div class="pill">
<button class="btn pill-section pill-label" data-action="add-record">
<span class="text">Add record</span>
</button>
<div role="button" class="btn pill-section pill-icon dropdown js-dropdown" data-role="actions" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
<div class="icon svg-wrap">
<svg viewBox="0 0 25 25">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
</svg>
</div>
<div class="dropdown-options" aria-hidden="true">
{{#each pageActions }}
<div class="dropdown-subheading">{{ section }}</div>
<ul>
{{#each actions }}
<li class="btn dropdown-item js-page-action" data-action="{{ name }}" role="menuitem">
<span class="link link-strong">{{ title }}</span>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
/* No context defined for this component. */
.dropdown {
position: relative;
display: block;
width: 100%;
height: 10rem;
&.-active {
.dropdown-label {
box-shadow: 0 5px 14px 0 rgba(black, 0.075);
&::after {
transform: translateY(-50%);
}
}
.dropdown-options {
opacity: 1;
visibility: visible;
}
}
&[data-role='actions'] {
.icon {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
}
.dropdown-options {
$tY: 2rem;
right: 0;
bottom: 0;
transform: translateY($tY) translateY(100%);
min-width: 75rem;
max-height: calc(100vh - 42rem);
overflow-y: scroll;
padding: 8.25rem;
filter: none;
@include font-primary-bold;
text-align: left;
.dropdown-subheading {
padding-bottom: 2rem;
border-bottom: 1px solid $color-irma-silver;
color: rgba($color-irma-slate, 0.7);
text-transform: uppercase;
&:not(:first-child) {
margin-top: 8rem;
}
}
.dropdown-item {
padding: 0 3rem;
height: 8rem;
line-height: 10rem;
&:first-child {
margin-top: 3rem;
}
}
}
}
&[data-role='form'] {
&:focus {
.dropdown-label {
box-shadow: 0 0 0 1px $color-irma-focus;
}
}
&.-active {
.dropdown-label {
box-shadow: 0 0 0 1px $color-irma-border,
0 5px 14px 0 rgba(black, 0.075);;
}
}
.dropdown-label {
display: block;
padding-left: 4rem;
background: white;
box-shadow: 0 0 0 1px $color-irma-border;
border-radius: 0.5rem;
@include font-primary-bold;
@include font-size-other(14px);
&::after {
content: '';
position: absolute;
right: 3rem;
top: 50%;
transform: translateY(-50%)/* rotate(180deg) */;
width: 0;
height: 0;
border: {
left: 1.5rem solid transparent;
right: 1.5rem solid transparent;
top: 1.75rem solid currentColor;
}
}
}
.dropdown-options {
transform: translateZ(0);
padding: 3rem;
}
.dropdown-item {
transition: all ($transition / 2);
padding: 1rem;
&:hover, &.-selected {
background: $color-irma-hover-select;
color: $color-irma-navy;
}
}
}
&[data-role='button'] {
position: initial;
width: 10rem;
height: calc(10rem + 5px);
&:hover, &:focus {
.icon {
background: $color-irma-navy;
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: $color-irma-slate;
transition: all $transition;
&::after {
content: '';
display: block;
width: 0;
height: 0;
border: {
left: 1.5rem solid transparent;
right: 1.5rem solid transparent;
top: 1.75rem solid white;
}
}
}
.dropdown-options {
right: 0;
bottom: -1rem;
transform: translateY(100%);
padding: 4rem 6rem;
.dropdown-item {
height: 8rem;
line-height: 10rem;
}
}
}
.dropdown-label {
position: relative;
display: inline-block;
height: 100%;
padding: 0 9rem 0 3rem;
overflow: hidden;
line-height: 10rem;
white-space: nowrap;
text-overflow: ellipsis;
transition: all $transition;
}
.dropdown-options {
position: absolute;
z-index: 5;
width: 100%;
padding: 3rem;
background: white;
visibility: hidden;
opacity: 0;
box-shadow: 0 5px 14px 0 rgba(black, 0.075),
0 0 0 1px $color-irma-silver;
transition: all $transition;
}
}
.dropdown-button {
position: relative;
display: flex;
}
/*
* _dropdown.js
*/
irma.dropdown = (function () {
'use strict';
var doAction = function (name) {
switch(name) {
case 'export-csv':
irma.searchPanel.exportResults('csv');
break;
case 'export-xml':
irma.searchPanel.exportResults('xml');
break;
default:
break;
}
};
var toggleDropdown = function ($dropdown, close) {
$dropdown.closest('.js-auto-save').data({ changed: true });
if ($dropdown.data().open || close) {
$dropdown.data('open', false);
$dropdown.removeClass('-active')
.find('.dropdown-options').attr('aria-hidden', true);
$dropdown.find('.dropdown-item').removeClass('-selected');
}
else if (!$(this).is('.-active')) {
$('.js-dropdown').not($dropdown).removeClass('-active')
.find('.dropdown-options').attr('aria-hidden', true);
$dropdown.addClass('-active')
.find('.dropdown-options').attr('aria-hidden', false);
setTimeout(function () {
$dropdown.data('open', true);
}, 100);
}
};
var navigateDropdown = function ($dropdown, direction) {
var $selected = $dropdown.find('.-selected').eq(0),
index = $dropdown.find('.dropdown-item').index($selected);
if ($selected && $selected.length > 0) {
$selected.removeClass('-selected');
$dropdown.find('.dropdown-item').eq(index + direction).addClass('-selected');
}
else {
$dropdown.find('.dropdown-item').eq(0).addClass('-selected');
}
};
var init = function () {
$(document).on('click', '.js-dropdown', function (e) {
e.stopPropagation();
var $selected = $(this).find('.-selected');
if ($selected.length > 0) {
$selected.eq(0).removeClass('-selected').trigger('click');
}
else {
toggleDropdown($(this));
}
}).on('click', function () {
$('.js-dropdown:not(.refine-search)').removeClass('-active').data('open', false)
.find('.dropdown-options').attr('aria-hidden', true);
}).on('click', '.dropdown-item', function () {
var $dropdown = $(this).closest('.js-dropdown'),
$dropdownLabel = $dropdown.find('.dropdown-label');
$dropdown.data($(this).data());
$dropdown.attr({
'data-name': $(this).data().name
});
$dropdownLabel.find('.text').text($(this).text());
var $input = $dropdownLabel.find('input');
if ($input.length) {
if ($(this).attr('data-value')) {
$input.val($(this).attr('data-value'));
}
else {
$input.val($(this).text());
}
if ($input.eq(0).attr('onchange')) {
$input.get(0).onchange();
}
}
}).on('focus', '.js-dropdown', function () {
// toggleDropdown($(this));
}).on('blur', '.js-dropdown', function () {
$('.js-dropdown:not(.refine-search)').removeClass('-active').data('open', false)
.find('.dropdown-options').attr('aria-hidden', true);
}).on('keydown', function (e) {
var $dropdown = $('.js-dropdown.-active').eq(0);
$dropdown = $dropdown.length > 0 ? $dropdown : $('.js-dropdown:focus').eq(0);
if ($dropdown.length > 0) {
if (e.which == 38 || e.which == 40) {
e.preventDefault();
if (!$dropdown.is('.-active')) {
toggleDropdown($dropdown);
}
var direction = e.which - 39;
navigateDropdown($dropdown, direction);
}
if (e.which == 27) {
toggleDropdown($dropdown, true);
}
}
});
$(document).on('click', '.js-page-action', function (e) {
e.stopPropagation();
doAction($(this).data().action);
$(this).closest('.dropdown').removeClass('-active');
});
};
return {
init: init
};
}());
There are no notes for this item.