<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

    <div class="dropdown-label">
        <span class="text"></span>
    </div>

    <ul class="dropdown-options" aria-hidden="true">
    </ul>
</div>
<div type="button" 
		class="btn dropdown js-dropdown {{ class }}" 
		data-role="form"
		role="menu"
		tabindex="0"
		aria-haspopup="true"
		aria-label="{{ title }}" >

	<div class="dropdown-label">
		{{#if name }}
			<label class="-hidden" for="{{ name }}">{{ label }}</label>
			<input type="hidden" name="{{ name }}" value="{{ options.[0].value }}">
		{{/if}}
		<span class="text">{{ options.[0].title }}</span>
	</div>
	
	<ul class="dropdown-options" aria-hidden="true">
		{{#each options }}
			<li class="dropdown-item" data-value="{{ this.value }}" role="menuitem">{{ this.title }}</li>
		{{/each}}
	</ul>
</div>
/* No context defined for this component. */
  • Content:
    .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;
    }
  • URL: /components/raw/dropdown/_dropdown.scss
  • Filesystem Path: components/01-components/dropdown/_dropdown.scss
  • Size: 3.5 KB
  • Content:
    /* 
     *	_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
    	};
    
    }());
  • URL: /components/raw/dropdown/dropdown.js
  • Filesystem Path: components/01-components/dropdown/dropdown.js
  • Size: 3.5 KB

There are no notes for this item.