<h1 class="supersize">
    Event
    <div class="m-natural-language-form  m-natural-language-form--arrow">
        <label for="naturalSelect" class="m-natural-language-form__label">i Stockholm</label>
        <select id="naturalSelect" class="m-natural-language-form__select js-natural-language-select">
            <option value="på goto10">på Goto 10</option>
            <option value="stockholm" data-color="peacock" selected>i Stockholm</option>
            <option value="malmo" data-color="jade">i Malmö</option>
            <option value="streaming" data-color="ocean">som streamas</option>
        </select>
    </div>

</h1>
<{{textElement}}{{#if elementClass}} class="{{elementClass}}"{{/if}}>
	Event
	<div class="m-natural-language-form {{#if modifier}} m-natural-language-form--{{modifier}}{{/if}}">
	{{#if select}}
		<label for="naturalSelect" class="m-natural-language-form__label">i Stockholm</label>
		<select id="naturalSelect" class="m-natural-language-form__select js-natural-language-select">
			<option value="på goto10">på Goto 10</option>
			<option value="stockholm" data-color="peacock" selected>i Stockholm</option>
			<option value="malmo" data-color="jade">i Malmö</option>
			<option value="streaming" data-color="ocean">som streamas</option>
		</select>
	{{/if}}
	{{#unless select}}
		<input type="text" value="i Stockholm" class="m-natural-language-form__input js-natural-language-input" data-color="peacock">
		<span class="m-natural-language-form__temp-text js-temp-text">i Stockholm</span>
	{{/unless}}
	</div>
	{{#unless modifier}} lorem ipsum{{/unless}}
</{{textElement}}>
{
  "title": "Select",
  "select": true,
  "textElement": "h1",
  "elementClass": "supersize",
  "modifier": "arrow"
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(natural-language-form) {
    	display: inline-block;
    	position: relative;
    
    	@include m(arrow) {
    		@include e(label) {
    			padding-right: rhythm(4);
    			border-bottom: 2px solid currentColor;
    			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
    			background-repeat: no-repeat;
    			background-position: calc(95%) 60%;
    			background-size: $icon-size-medium $icon-size-medium;
    			text-decoration: none;
    
    			&[data-color='ocean'] {
    				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%2350b2fc' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
    			}
    
    			&[data-color='peacock'] {
    				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23c27fec' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
    			}
    
    			&[data-color='jade'] {
    				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%2355c7b4' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
    			}
    
    			@include bp-up(sm) {
    				border-bottom: 4px solid currentColor;
    				background-position: calc(100%) 60%;
    			}
    
    			@include bp-up(lg) {
    				border-bottom: 5px solid currentColor;
    			}
    		}
    	}
    
    	@include e(select) {
    		position: absolute;
    		top: 0;
    		right: 0;
    		bottom: 0;
    		left: 0;
    		padding-right: rhythm(4);
    		opacity: 0;
    		cursor: pointer;
    	}
    
    	@include e(label) {
    		display: inline-block;
    		font-family: inherit;
    		font-size: inherit;
    		text-decoration: underline;
    		cursor: pointer;
    
    		option:not(:checked) {
    			color: $color-cyberspace;
    		}
    
    		&[data-color='ocean'] {
    			color: $color-ocean;
    		}
    
    		&[data-color='peacock'] {
    			color: $color-peacock;
    		}
    
    		&[data-color='jade'] {
    			color: $color-jade;
    		}
    	}
    
    	@include e(input) {
    		position: relative;
    		z-index: 1;
    		top: 0;
    		left: 0;
    		width: 100%;
    		min-width: none;
    		max-width: none;
    		padding: 0;
    		border: 0;
    		background: transparent;
    		text-decoration: underline;
    		cursor: pointer;
    
    		&[data-color='ocean'] {
    			color: $color-ocean;
    		}
    
    		&[data-color='peacock'] {
    			color: $color-peacock;
    		}
    
    		&[data-color='jade'] {
    			color: $color-jade;
    		}
    	}
    
    	@include e(temp-text) {
    		position: absolute;
    		z-index: -1;
    		top: 0;
    		opacity: 0;
    		white-space: nowrap;
    		pointer-events: none;
    	}
    }
    
  • URL: /components/raw/natural-language-form/_natural-language-form.scss
  • Filesystem Path: src/molecules/natural-language-form/_natural-language-form.scss
  • Size: 2.9 KB
  • Content:
    const selects = document.querySelectorAll('.js-natural-language-select');
    const inputs = document.querySelectorAll('.js-natural-language-input');
    
    function sync(el, option) {
    	const { color } = option.dataset;
    
    	el.dataset.color = color;
    	el.innerText = option.innerText;
    }
    
    function setupSelect(select) {
    	const parent = select.parentNode;
    	const text = parent.querySelector('label');
    
    	select.addEventListener('change', () => {
    		sync(text, select.options[select.selectedIndex]);
    	});
    
    	// Next tick
    	setTimeout(() => {
    		sync(text, select.options[select.selectedIndex]);
    	}, 0);
    }
    
    if (selects) {
    	[].forEach.call(selects, setupSelect);
    }
    
    function syncInput(el, input, value) {
    	el.innerText = value;
    
    	setTimeout(() => {
    		const selectWidth = el.getBoundingClientRect().width;
    		input.style.width = `${selectWidth}px`;
    	}, 0);
    }
    
    if (inputs) {
    	[].forEach.call(inputs, (input) => {
    		const text = input.nextElementSibling;
    
    		syncInput(text, input, input.value);
    
    		input.addEventListener('input', (e) => {
    			syncInput(text, input, e.target.value);
    		});
    
    		input.addEventListener('change', (e) => {
    			syncInput(text, input, e.target.value);
    		});
    	});
    }
    
  • URL: /components/raw/natural-language-form/natural-language-form.js
  • Filesystem Path: src/molecules/natural-language-form/natural-language-form.js
  • Size: 1.2 KB
  • Handle: @natural-language-form--select-with-arrow
  • Preview:
  • Filesystem Path: src/molecules/natural-language-form/natural-language-form.hbs

No notes defined.