<div class="a-height-limit a-height-limit--white js-height-limit" data-height="300" data-toggle-text="Visa mindre">
<div class="a-height-limit__inner is-limited">
<p>Morbi ac arcu nisi. Praesent nec condimentum risus. Nulla facilisi. Fusce pharetra dui consequat, ullamcorper neque fermentum, tristique libero. Vestibulum vel tristique nisl. Praesent rutrum dictum lectus quis dignissim. Aenean eget risus fringilla, egestas purus at, tincidunt quam. Ut erat ex, interdum a mauris nec, egestas luctus quam.</p>
<p>Maecenas ut convallis elit. Sed mattis vel est sed dignissim. Vivamus eu diam bibendum, tincidunt nisl at, tempor massa. Praesent malesuada id ligula eu finibus. Sed ultricies tellus ligula, in interdum arcu vulputate non. Donec nunc orci, commodo sed turpis in, congue vestibulum ante. Etiam vel dolor eget ex aliquet porta non nec dolor.</p>
<p>Fusce bibendum risus nisi. Praesent nec condimentum risus. Nulla facilisi. Fusce pharetra dui consequat, ullamcorper neque fermentum, tristique libero. Vestibulum vel tristique nisl. Praesent rutrum dictum lectus quis dignissim. Aenean eget risus fringilla, egestas purus at, tincidunt quam. Ut erat ex, interdum a mauris nec, egestas luctus quam.</p>
</div>
<div class="row justify-content-center">
<button type="button" class="a-height-limit__btn is-hidden js-toggle-height">
<span class="a-height-limit__btn__text">Visa mer</span>
<svg class="icon">
<use xlink:href="#icon-arrow-down"></use>
</svg>
</button>
</div>
</div>
<div class="a-height-limit {{#if modifiers}} {{getmodifiers modifiers "a-height-limit"}}{{/if}} js-height-limit" data-height="300" data-toggle-text="Visa mindre">
<div class="a-height-limit__inner is-limited">
<p>Morbi ac arcu nisi. Praesent nec condimentum risus. Nulla facilisi. Fusce pharetra dui consequat, ullamcorper neque fermentum, tristique libero. Vestibulum vel tristique nisl. Praesent rutrum dictum lectus quis dignissim. Aenean eget risus fringilla, egestas purus at, tincidunt quam. Ut erat ex, interdum a mauris nec, egestas luctus quam.</p>
<p>Maecenas ut convallis elit. Sed mattis vel est sed dignissim. Vivamus eu diam bibendum, tincidunt nisl at, tempor massa. Praesent malesuada id ligula eu finibus. Sed ultricies tellus ligula, in interdum arcu vulputate non. Donec nunc orci, commodo sed turpis in, congue vestibulum ante. Etiam vel dolor eget ex aliquet porta non nec dolor.</p>
<p>Fusce bibendum risus nisi. Praesent nec condimentum risus. Nulla facilisi. Fusce pharetra dui consequat, ullamcorper neque fermentum, tristique libero. Vestibulum vel tristique nisl. Praesent rutrum dictum lectus quis dignissim. Aenean eget risus fringilla, egestas purus at, tincidunt quam. Ut erat ex, interdum a mauris nec, egestas luctus quam.</p>
</div>
<div class="row justify-content-center">
<button type="button" class="a-height-limit__btn is-hidden js-toggle-height">
<span class="a-height-limit__btn__text">Visa mer</span>
{{>@icon id="arrow-down"}}
</button>
</div>
</div>
{
"title": "Height limiter",
"description": "Toggla höjd på en container",
"modifiers": [
"white"
]
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@include mixin.atom(height-limit) {
@include bem.e(inner) {
position: relative;
&.is-limited {
overflow: hidden;
&::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50%;
background-image: linear-gradient(to bottom, rgba(colors.$color-ash, 0) 0%, rgba(colors.$color-ash, 1) 100%);
}
}
}
@include bem.m(white) {
@include bem.e(inner) {
&.is-limited {
&::after {
background-image: linear-gradient(to bottom, rgba(colors.$color-snow, 0) 0%, rgba(colors.$color-snow, 1) 100%);
}
}
}
}
@include bem.m(snow) {
@include bem.e(inner) {
&.is-limited {
&::after {
background-image: linear-gradient(to bottom, rgba(colors.$color-snow, 0) 0%, rgba(colors.$color-snow, 1) 100%);
}
}
}
}
@include bem.e(btn) {
display: flex;
position: relative;
z-index: 2;
flex-direction: column;
align-items: center;
border: 0;
background-color: transparent;
> svg {
width: var.$icon-size;
height: var.$icon-size;
}
&.is-clicked {
flex-direction: column-reverse;
> svg {
transform: rotate(180deg);
}
}
@include bem.e(text) {
display: block;
}
}
}
const elements = document.querySelectorAll('.js-height-limit');
function update(innerContainer, button, height) {
if (button.classList.contains('is-clicked')) {
return;
}
if (innerContainer.offsetHeight >= height) {
innerContainer.setAttribute('style', `max-height:${height}px;`);
innerContainer.classList.add('is-limited');
button.classList.remove('is-hidden');
} else {
innerContainer.removeAttribute('style');
innerContainer.classList.remove('is-limited');
button.classList.add('is-hidden');
}
}
function setup(element) {
const height = element.getAttribute('data-height');
const innerContainer = element.querySelector('[class*="inner"]');
const button = element.querySelector('.js-toggle-height');
const buttonTextElement = button.querySelector('span');
const buttonText = buttonTextElement.innerText;
const toggleText = element.getAttribute('data-toggle-text');
let topPosition;
update(innerContainer, button, height);
button.addEventListener('click', () => {
innerContainer.classList.toggle('is-limited');
innerContainer.setAttribute('style',
(innerContainer.style.maxHeight === `${height}px`) ? 'max-height:none' : `max-height:${height}px`);
buttonTextElement.innerText = (
buttonTextElement.innerText === buttonText) ? toggleText : buttonText;
button.classList.toggle('is-clicked');
if (!innerContainer.classList.contains('is-limited')) {
topPosition = document.documentElement.scrollTop;
} else {
window.scroll(0, topPosition);
}
setTimeout(() => update(innerContainer, button, height), 1);
});
window.addEventListener('resize', () => update(innerContainer, button, height));
}
if (elements) {
[].forEach.call(elements, setup);
}
No notes defined.