Teamleden overzicht - modals

V000-11

Geef een overzichtje aan teamleden weer met meer informatie als de bezoeker er op klikt.

Hoe te gebruiken?

Laad onderstaande code in de website. Let op het gaat hierbij om 3 stukken. HTML, CSS en JS. Zorg dat de HTML in de view gezet wordt. De CSS in de style.css en de JS in de script.js va de website.

Voorvertoning

HTML
Kopiëren<div class="container">
	<div class="row">
		<div class="col-12 col-sm-9 col-md-6">
			<nc-text name="team"></nc-text>
		</div>
	</div>

	<div class="py-3"></div>

	<nc-preset-list columns="3" name="teams" attributes="class=team-members">
		<div class="team-member-preview">
			<div class="image">
				<nc-image name="{%name%}-image" width="480" height="480"></nc-image>
			</div>

			<button data-target="#team-member-{%name%}-modal" class="show-modal">
				<div class="content">
					<span class="title" data-text="{%name%}-team-member-name">Naam</span>
					<span class="title" data-text="{%name%}-team-member-function">Functie</span>
				</div>
			</button>
		</div>

		<div id="team-member-{%name%}-modal">
			<div class="modal-backdrop"></div>

			<div class="modal" tabindex="-1" role="dialog" aria-label="Team lid informatie" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
					<div class="modal-content team-member-modal">
						<div class="image">
							<nc-image name="{%name%}-image" width="480" height="480"></nc-image>
						</div>

						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>

						<div class="content">
							<div class="row">
								<div class="col-12 col-lg-7 mb-3">
									<nc-element name="{%name%}-team-member-name" attributes="class=title h3,data-reference={%name%}-team-member-name" default="Naam" type="span"></nc-element>
								</div>

								<div class="col-12 col-lg-5 order-lg-2 mb-3">
									<nc-element name="{%name%}-team-member-function" attributes="class=contact-function,data-reference={%name%}-team-member-function" default="Functie" type="p"></nc-element>
									<nc-element name="{%name%}-team-member-phone" attributes="class=contact-phone" default="Telefoonnummer" type="p"></nc-element>
									<nc-element name="{%name%}-team-member-email" attributes="class=contact-email" default="E-mailadres" type="p"></nc-element>
								</div>

								<div class="col-12 col-lg-7">
									<nc-text name="{%name%}-team-member-text"></nc-text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</nc-preset-list>
</div>

CSS
Kopiëren/* Preview */
.team-members .team-member-preview {
	position: relative;
	overflow: hidden;
	border-radius: 100%;
	color: black;
}

.team-members button.show-modal {
	display: block;
	border: 0;
	padding: 0;
	background: none;
	width: 100%;
}

.team-members .team-member-preview {
	margin-bottom: 2rem;
}

.team-members .team-member-preview:last-child {
	margin-bottom: 0;
}

.team-members .team-member-preview .content,
.team-members .team-member-preview .content::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 500ms;
}

.team-members .team-member-preview img {
	display: block;
	aspect-ratio: 1/1;
}

.team-members .team-member-preview .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.team-members .team-member-preview .content>* {
	z-index: 1;
}

.team-members .team-member-preview .content::before {
	content: '';
	background-color: var(--primary);
}

.team-members .team-member-preview:active .content,
.team-members .team-member-preview:focus .content,
.team-members .team-member-preview:focus-within .content,
.team-members .team-member-preview:hover .content {
	opacity: 1;
}

.team-members .team-member-preview:active .content::before,
.team-members .team-member-preview:focus .content::before,
.team-members .team-member-preview:focus-within .content::before,
.team-members .team-member-preview:hover .content::before {
	opacity: 0.5;
}

.team-members .team-member-preview .content .title {
	font-size: 1.25em;
}

.team-members .team-member-preview .content .title,
.team-members .team-member-preview .content .contact-function {
	pointer-events: none;
}

/* Modal */
.team-member-modal {
	margin-top: 16rem;
}

.team-member-modal .image {
	position: absolute;
	right: 0;
	top: -16rem;
	width: 20rem;
	margin-right: 15px;
	border-radius: 100%;
	overflow: hidden;
}

@media screen and (max-width: 991px) {
	.team-member-modal .image {
		width: 18rem;
	}
}

.team-member-modal .close {
	position: absolute;
	top: -15rem;
	right: 0;
	height: 1.5em;
	width: 1.5em;
	z-index: 1000;
	opacity: 1;

	font-size: 2em;
	margin-right: calc(15px + 1rem);
	border-radius: 100%;
	transition: all 0.5s;

	background-color: #fff;
	color: var(--primary);
}

.team-member-modal .content {
	padding: 2rem calc(1rem + 15px) 1rem;
}

.team-member-modal .contact-phone,
.team-member-modal .contact-email,
.team-member-modal .contact-function {
	margin-bottom: 0.25em;
}

.team-member-modal .contact-phone::before,
.team-member-modal .contact-email::before,
.team-member-modal .contact-function::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	padding-right: 0.5rem;
	font: var(--fa-font-solid);
	width: 1.5em;
}

.team-member-modal .contact-phone::before {
	content: "\f095";
}

.team-member-modal .contact-email::before {
	content: "\f0e0";
}

.team-member-modal .contact-function::before {
	content: "\f0b1";
}

/* Beheerbaarheid */
body[data-editor-mode="content"] .team-members .team-member-preview {
	border-radius: 0;
}

body[data-editor-mode="content"] .team-members .team-member-preview .content {
	position: relative;
	opacity: 1;
}

body[data-editor-mode="content"] .team-members .team-member-preview .content::before {
	opacity: 1;
}

body[data-editor-mode="content"] .team-member-modal {
	margin-top: 0;
}

body[data-editor-mode="content"] .team-member-modal .close {
	top: 0;
}

body[data-editor-mode="content"].modal-open .team-member-modal .image {
	display: none;
}

JS
KopiërenonComplete(function() {
	const updateTeamMembers = () => {
		const items = document.querySelectorAll('.team-members [class^="col-"]');
		if (items && items.length) {
			for (let i = 0; i < items.length; i++) {
				const item = items[i];

				const nameTargets = item.querySelectorAll('[data-text$="-team-member-name"]');
				for (let j = 0; j < nameTargets.length; j++) {
					const nameTarget = nameTargets[j];
					const nameReference = item.querySelector('[data-reference="' + nameTarget.getAttribute('data-text') + '"]');
					if (nameReference) {
						nameTarget.textContent = nameReference.textContent;
					}
				}

				const functionTargets = item.querySelectorAll('[data-text$="-team-member-function"]');
				for (let j = 0; j < functionTargets.length; j++) {
					const functionTarget = functionTargets[j];
					const functionReference = item.querySelector('[data-reference="' + functionTarget.getAttribute('data-text') + '"]');
					if (functionReference) {
						functionTarget.textContent = functionReference.textContent;
					}
				}
			}
		}
	}
	if (window.editor) {
		window.editor.addEventListener('reloaded', updateTeamMembers)
	}
	updateTeamMembers()
})