<div class="org-compliments-grid">
<div class="compliments-grid-items">
<div class="mol-compliments-card">
<h4>Een complimentje voor…<br><strong>Tom Peters</strong></h4>
<div class="compliment-content">
<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 class="author">Theresa Borg - Industries</div>
</div>
</div>
<div class="mol-compliments-card">
<h4>Een complimentje voor…<br><strong>Tom Peters</strong></h4>
<div class="compliment-content">
<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 class="author">Theresa Borg - Industries</div>
</div>
</div>
<div class="mol-compliments-card">
<h4>Een complimentje voor…<br><strong>Tom Peters</strong></h4>
<div class="compliment-content">
<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 class="author">Theresa Borg - Industries</div>
</div>
</div>
<div class="mol-compliments-card wide">
<h4>Een complimentje voor…<br><strong>Sanne Bisschoff</strong></h4>
<div class="compliment-content">
<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 class="author">Maria Koenen - Public Services</div>
</div>
</div>
<div class="mol-compliments-card image">
<h4>Een complimentje voor…<br><strong>Tom Peters</strong></h4>
<div class="compliment-content">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<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>
<div class="mol-compliments-card">
<h4>Een complimentje voor…<br><strong>Tom Peters</strong></h4>
<div class="compliment-content">
<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 class="author">Theresa Borg - Industries</div>
</div>
</div>
<div class="mol-compliments-card">
<h4>Een complimentje voor…<br><strong>Tom Peters</strong></h4>
<div class="compliment-content">
<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 class="author">Theresa Borg - Industries</div>
</div>
</div>
</div>
<div class="compliments-grid-button">
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Button</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
<div class="org-compliments-grid">
<div class="compliments-grid-items">
{{#each cards}}
{{ render '@compliments-card' this merge=true }}
{{/each}}
</div>
<div class="compliments-grid-button">
{{render '@button-primary--icon-left-md' button merge=true}}
</div>
</div>
{
"cards": [
{
"name": "Tom Peters",
"message": "Tom, je hebt altijd een positieve instelling en weet iedereen om je heen te motiveren.",
"author": "Theresa Borg - Industries"
},
{
"name": "Tom Peters",
"message": "Tom, je hebt altijd een positieve instelling en weet iedereen om je heen te motiveren.",
"author": "Theresa Borg - Industries"
},
{
"name": "Tom Peters",
"message": "Tom, je hebt altijd een positieve instelling en weet iedereen om je heen te motiveren.",
"author": "Theresa Borg - Industries"
},
{
"name": "Sanne Bisschoff",
"message": "Sanne, jouw inzet en oog voor detail maken echt het verschil. Je staat altijd klaar om anderen te helpen, zelfs als je het zelf druk hebt. Je bent een stille kracht binnen het team en dat wordt enorm gewaardeerd.",
"author": "Maria Koenen - Public Services",
"modifier": "wide"
},
{
"image": {
"src": "https://picsum.photos/id/237/300/300",
"alt": "Youssef"
},
"modifier": "image",
"author": null
},
{
"name": "Tom Peters",
"message": "Tom, je hebt altijd een positieve instelling en weet iedereen om je heen te motiveren.",
"author": "Theresa Borg - Industries"
},
{
"name": "Tom Peters",
"message": "Tom, je hebt altijd een positieve instelling en weet iedereen om je heen te motiveren.",
"author": "Theresa Borg - Industries"
}
]
}
.org-compliments-grid {
.compliments-grid-items {
@apply grid grid-cols-1 md:grid-cols-[repeat(3,1fr)] auto-rows-auto gap-6 my-0 mb-8;
}
.compliments-grid-button {
@apply flex justify-center;
}
}
(function () {
'use strict';
document.addEventListener('DOMContentLoaded', () => {
let grid = document.getElementById("compliments-grid");
let loadMore = document.getElementById("compliments-loadmore");
if (grid && loadMore) {
let totalPages = loadMore.dataset.totalPages;
let formId = loadMore.dataset.formId;
let pageId = loadMore.dataset.pageId;
let complimentFor = loadMore.dataset.complimentFor;
let loadingText = loadMore.dataset.loadingText;
let offset = loadMore.dataset.offset;
let pageNumber = 2;
let innerSpan = loadMore.firstElementChild?.firstElementChild?.children[1];
let initialText = innerSpan?.innerText;
loadMore.addEventListener("click", () => {
let surfaceControllerUrl = `/umbraco/surface/complimentssurface/loadmorecompliments?formId=${formId}&pageId=${pageId}&pageNumber=${pageNumber}&totalPages=${totalPages}&offset=${offset}`;
if (innerSpan) {
innerSpan.innerText = loadingText;
}
fetch(surfaceControllerUrl)
.then((response) => response.json())
.then((json) => {
if (json && json.length > 0) {
json.forEach(element => {
let card = document.createElement("div");
card.setAttribute("class", `mol-compliments-card${element.modifier ? " " + element.modifier : ""}`);
if (element.title) {
let title = document.createElement("h4");
let br = document.createElement("br");
let strong = document.createElement("strong");
strong.innerText = element.title;
title.innerText = complimentFor;
title.appendChild(br);
title.appendChild(strong);
card.appendChild(title);
}
let content = document.createElement("div");
content.setAttribute("class", "compliment-content");
if (element.image) {
let picture = document.createElement("picture");
picture.setAttribute("class", "atm-image");
let img = document.createElement("img");
img.setAttribute("class", "picture-image");
if (element.image.cropUrl) {
img.setAttribute("src", element.image.cropUrl);
}
img.setAttribute("alt", element.image.alt || "");
if (element.image.lazy) {
img.setAttribute("loading", "lazy");
}
picture.appendChild(img);
content.appendChild(picture);
} else if (element.complimentText) {
let paragraph = document.createElement("div");
paragraph.setAttribute("class", "atm-paragraph");
let p = document.createElement("p");
p.innerText = element.complimentText.text;
paragraph.appendChild(p);
content.appendChild(paragraph);
let author = document.createElement("div");
author.setAttribute("class", "author");
author.innerText = element.name + " - " + element.company;
content.appendChild(author);
}
card.appendChild(content);
grid.appendChild(card);
});
if (pageNumber >= totalPages) {
loadMore.classList.add("!hidden");
} else {
pageNumber++;
innerSpan.innerText = initialText;
}
}
});
});
}
});
})();
No notes defined.