<div class="show-more ">
<div class="show-more__content js-show-more-content">
<p><strong><a href="http://casa-f.swegon.se/">Fan selection program</a></strong></p>
<p>The CASA F series consists of 8 models in three physical sizes and covers flows up to 2.5 m³/s.
CASA F is an acoustically insulated roof ventilator with energy efficient EC fans that are approved according to EU’s Ecodesign directive for 2015.</p>
<p>CASA F is available in two designs, with or without an integrated control system.
Wi-Fi communications and web interface available as an option for easy and quick commissioning.
Operating data and graphs are presented in real time and you get an overview page of the fan’s status.</p>
<p>All sizes as standard are equipped with an assembly frame and folding fan for easy service and maintenance.</p>
<p>CASA F is available in two designs, with or without an integrated control system.
Wi-Fi communications and web interface available as an option for easy and quick commissioning.
Operating data and graphs are presented in real time and you get an overview page of the fan’s status.</p>
<p>All sizes as standard are equipped with an assembly frame and folding fan for easy service and maintenance.</p>
</div>
<div class="show-more__btn-holder js-show-more-btn-holder">
<button class="show-more__btn js-show-more-btn" data-hide-text="Dölj -">Visa mer +</button>
</div>
</div>
<div class="show-more {{ getmodifiers modifiers "show-more"}}">
<div class="show-more__content js-show-more-content">
{{#>@partial-block}}
<p><strong><a href="http://casa-f.swegon.se/">Fan selection program</a></strong></p>
<p>The CASA F series consists of 8 models in three physical sizes and covers flows up to 2.5 m³/s.
CASA F is an acoustically insulated roof ventilator with energy efficient EC fans that are approved according to EU’s Ecodesign directive for 2015.</p>
<p>CASA F is available in two designs, with or without an integrated control system.
Wi-Fi communications and web interface available as an option for easy and quick commissioning.
Operating data and graphs are presented in real time and you get an overview page of the fan’s status.</p>
<p>All sizes as standard are equipped with an assembly frame and folding fan for easy service and maintenance.</p>
<p>CASA F is available in two designs, with or without an integrated control system.
Wi-Fi communications and web interface available as an option for easy and quick commissioning.
Operating data and graphs are presented in real time and you get an overview page of the fan’s status.</p>
<p>All sizes as standard are equipped with an assembly frame and folding fan for easy service and maintenance.</p>
{{/@partial-block}}
</div>
<div class="show-more__btn-holder js-show-more-btn-holder">
<button class="show-more__btn js-show-more-btn" data-hide-text="{{hideText}}">{{showMoreText}}</button>
</div>
</div>
{
"showMoreText": "Visa mer +",
"hideText": "Dölj -"
}
class ShowMore {
constructor(showMore) {
this.showMore = showMore;
this.showMoreContent = showMore.querySelector('.js-show-more-content');
this.showMoreBtnHolder = showMore.querySelector('.js-show-more-btn-holder');
this.showMoreBtn = this.showMoreBtnHolder.querySelector('.js-show-more-btn');
this.showMoreText = this.showMoreBtn.innerHTML;
this.hideText = this.showMoreBtn.dataset.hideText;
this.init();
}
init() {
this.addEventListeners();
this.displayShowMoreBtn();
}
showMoreBtnNeeded() {
const maxContentHeight = parseInt(window.getComputedStyle(this.showMoreContent, null).getPropertyValue('max-height'));
const actualContentHeight = this.showMoreContent.scrollHeight;
if (actualContentHeight > maxContentHeight) {
return true;
}
return false;
}
displayShowMoreBtn() {
this.showMoreBtnNeeded()
? this.showMoreBtnHolder.classList.add('show-more__btn-holder--visible')
: this.showMoreBtnHolder.classList.remove('show-more__btn-holder--visible');
}
addEventListeners() {
this.showMoreBtn.addEventListener('click', () => {
this.showMore.classList.toggle('show-more--active');
this.showMoreBtn.innerHTML = this.showMore.classList.contains('show-more--active') ? this.hideText : this.showMoreText;
});
this.showMore.addEventListener('update', () => {
this.showMore.classList.remove('show-more--active');
this.showMoreBtn.innerHTML = this.showMoreText;
this.displayShowMoreBtn();
});
}
}
export default ShowMore;
import ShowMore from './ShowMore';
document.addEventListener('DOMContentLoaded', function () {
const els = document.querySelectorAll('.show-more');
for (let el of els) {
new ShowMore(el);
}
});
.show-more {
background: $color-white;
overflow: hidden;
&--gray {
background: $color-gray-1;
}
&--preamble {
background: none;
}
}
.show-more__btn-holder {
position: relative;
text-align: center;
display: none;
padding: 0 size(2) size(2);
&--visible {
display: block;
&:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: size(12.5);
background-image: linear-gradient(to top, $color-white, rgba($color-white, 0));
.show-more--active & {
content: none;
}
.show-more--gray & {
background-image: linear-gradient(to top, $color-gray-1, rgba($color-gray-1, 0));
}
}
}
}
.show-more__btn {
position: relative;
display: inline-block;
padding: size(1.25) size(2);
border: 1px solid $color-gray-4;
border-radius: size(3);
cursor: pointer;
z-index: 1;
}
.show-more__content {
position: relative;
overflow: hidden;
max-height: 300px;
.show-more--small & {
max-height: 180px;
}
.show-more--active & {
max-height: none;
}
}
No notes defined.