<div class="tpl-company-overview">
<div class="vebego-container">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
<div class="company-hightlights">
<div>
<div class="mol-company">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div>
<div class="mol-company">
<div>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
<div class="company-list">
<div class="left">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
<div class="company-list-wrapper">
<div class='mol-company-card' data-index='0'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='mol-company-card' data-index='1'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='mol-company-card' data-index='2'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='mol-company-card' data-index='3'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='mol-company-card' data-index='4'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='mol-company-card' data-index='5'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div class='mol-company-card' data-index='6'>
<div class='company-card-teaser'>
<div class="image-wrapper">
<picture class="atm-image ">
<img class="" src="https://picsum.photos/290/130" alt="">
</picture>
</div>
<div class='wrap'>
<span class='title'>Hago</span>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
</div>
<div class='company-card-popup'>
<div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
<span class="button-content">
<span class="atm-icon fas fa-times fa-fw"></span>
</span>
</a>
</div>
<div>
<div class="atm-paragraph text-md">
<ul>
<li>Schoonmaakdiensten en specialistische reiniging</li>
<li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
<li>Actief in Nederland</li>
</ul>
</div>
</div>
<div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
<div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
<div id="company-popup-wrapper" class="mol-company-card"></div>
</div>
<div class="atm-pager">
<ul>
<li>
<a href="#">
<span class="atm-icon far fa-chevron-left "></span>
</a>
</li>
<li>
<a class="" href="#">
1
</a>
</li>
<li>
<a class="" href="#">
2
</a>
</li>
<li>
<a class="active" href="#">
3
</a>
</li>
<li>
<a class="" href="#">
4
</a>
</li>
<li>
<a class="" href="#">
5
</a>
</li>
<li>
<a class="" href="#">
6
</a>
</li>
<li>
<a href="#">
<span class="atm-icon far fa-chevron-right "></span>
</a>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="wrapper-checkbox">
<h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
</div>
<div class="wrapper-checkbox">
<h5 class="atm-heading ">The quick brown fox jumps over the lazy dog</h5>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
<div class="atm-form-checkbox ">
<input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
<label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>
</div>
</div>
<a class="atm-button atm-button-primary button-lg ">
<span class="button-content">
<span>Lees de klantcase</span>
<span class="atm-icon fal fa-chevron-right "></span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</div>
<div class="tpl-company-overview">
<div class="vebego-container">
{{render '@title'}}
<div class="company-hightlights">
{{#each company-highlight}}
<div>
{{render '@company'}}
</div>
{{/each}}
</div>
<div class="company-list">
<div class="left">
{{render '@title'}}
<div class="company-list-wrapper">
{{#each company-list}}
{{render '@company-card' this merge=true}}
{{/each}}
<div id="company-popup-wrapper" class="mol-company-card"></div>
</div>
{{render '@pager'}}
</div>
<div class="right">
<div class="wrapper-checkbox">
{{render '@heading--h5'}}
{{#each checkbox}}
{{render '@checkbox'}}
{{/each}}
</div>
<div class="wrapper-checkbox">
{{render '@heading--h5'}}
{{#each checkbox}}
{{render '@checkbox'}}
{{/each}}
</div>
{{render '@button-primary--icon-lg'}}
</div>
</div>
</div>
</div>
{
"company-highlight": [
{},
{}
],
"company-list": [
{
"index": 0
},
{
"index": 1
},
{
"index": 2
},
{
"index": 3
},
{
"index": 4
},
{
"index": 5
},
{
"index": 6
}
],
"checkbox": [
{},
{},
{},
{},
{}
]
}
.tpl-company-overview
{
.mol-title
{
@apply mb-10;
}
.company-hightlights
{
@apply grid;
@apply grid-cols-1;
@apply md:grid-cols-2;
@apply gap-4;
@apply mb-20;
}
.company-list
{
@apply grid;
@apply grid-cols-12;
@apply md:gap-16;
@apply mb-20;
.left
{
@apply order-2 md:order-1;
@apply col-span-12 md:col-span-8;
.company-list-wrapper
{
@apply grid;
@apply grid-cols-1;
@apply lg:grid-cols-2;
@apply xl:grid-cols-3;
@apply gap-4;
.company-card-popup
{
@apply hidden;
}
#company-popup-wrapper
{
@apply hidden;
@apply col-span-1 lg:col-span-2 xl:col-span-3 !important;
}
}
.atm-pager
{
@apply mt-10;
@apply pt-10;
@apply border-t;
@apply border-solid;
@apply border-shade;
}
}
.right
{
@apply order-1 md:order-2;
@apply col-span-12 md:col-span-4;
@apply mb-10;
.mol-inline-search
{
@apply mb-12;
}
.wrapper-checkbox
{
@apply mb-8;
}
.atm-heading
{
@apply mb-6;
}
}
}
}
class CompanyOverview {
constructor($el) {
this.$el = $el;
this.currentIndex = -1;
this.cardSelector = '.mol-company-card';
this.popupWrapperSelector = '#company-popup-wrapper';
this.$cards = $(this.$el).find(this.cardSelector).not(this.popupWrapperSelector);
this.$popupWrapper = $(this.$el).find(this.popupWrapperSelector);
}
init() {
var self = this;
// Open popup
self.$cards.find('.company-card-teaser').on('click', function (e) {
// Copy HTML to popup wrapper
self.copy(this);
// Move wrapper to correct DOM position
self.move(this);
// Show popup in popup wrapper
self.show(this);
});
// Close popup
self.$cards.find('.company-card-popup .company-popup-close').on('click', function (e) {
self.close(this);
});
}
copy(el) {
var $popup = $(el).parents(this.cardSelector).find('.company-card-popup');
this.$popupWrapper.html($popup.clone(true));
}
move(el) {
var $card = $(el).parents(this.cardSelector);
var index = parseInt($card.data('index'));
var cols = this.cols();
var remain = cols - index % cols;
var newIndex = Math.min(this.$cards.length, index + remain);
if (this.currentIndex != newIndex) {
this.$popupWrapper.insertAfter(this.$cards.filter('[data-index="' + (newIndex - 1) + '"]'));
this.currentIndex = newIndex;
}
}
cols() {
var w = $(window).outerWidth();
if (w >= 1280) return 3;
else if (w >= 1024) return 2;
else return 1;
}
close(el) {
var self = this;
self.$popupWrapper.find('.company-card-popup').slideUp(50, function(e) {
self.$popupWrapper.hide();
});
}
show(el) {
var self = this;
self.$popupWrapper.show();
self.$popupWrapper.find('.company-card-popup').slideDown(200);
}
}
(function () {
'use strict';
[...document.querySelectorAll('.tpl-company-overview')].forEach(($el) => {
const inst = new CompanyOverview($el);
inst.init();
});
})();
No notes defined.