Demo Section

Each variation will be presented in the following section.

Default

Prof. Dr. Irene Götz mit einem ganz langen Namen

Alternative text that describes the image

Einrichtung test dann mit sehr

Funktion

Aufgabengebiet

Lorem ipsum consetetno sea takimata sanctus est Lorem ipsum dolor sit amet.

Dienststelle

Erdgeschoss, Raum 404 B

Martiusstr.2

80333 München

Wegbeschreibung

Email schreiben

persönliche Website

+49 (0)8956565656

Weitere Informationen

+49(0)8933298657

+49(0)8933298656

Readme

personDetail (`component`)

Description

Modul to show the detailsite of one person in a lightbox. The Markup will be integrated (hardcopy) in the templates.js-file (src/app/shared/scripts) to generate a overlay filled with an JSON-Object.

Requirements

Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/person-detail

Fields

`person-detail.hbs`

Settings

Parameter	Type	Default	Description
settings.personDetailClasses	String	`''`	Modifier classes for component
settings.personDetailContextClass	String	`'default'`	Context class of component
settings.personDetailJsOptions	Object	`null`	JavaScript options object which gets stringified

Content

Parameter	Type	Description
content.personDetailField	String	Please add a description!

JavaScript Options

The module gives you the possibility to override default JS options:

Option	Type	Default	Description
optionOne	String	`'is-option'`	Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description
$person-detail-my-custom-var	`0px`	Please add a description!

Modifier Classes

There are modifier classes you can add to c-person-detail:

Modifier	Description
is-modifier	Please add a description!

Templates

person-detail.hbs

<div class="c-person-detail{{#if settings.personDetailContextClass}}--{{settings.personDetailContextClass}}{{else}}--default{{/if}}{{#if settings.personDetailClasses}} {{settings.personDetailClasses}}{{/if}}"
     data-css="c-person-detail"
     data-js-module="person-detail"{{#if settings.personDetailJsOptions}}
     data-js-options='{{stringify settings.personDetailJsOptions}}'{{/if}}>
	  {{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
		<div class="person-detail__frame">
			{{#if content.personname}}<h1 class="person-detail__personname">{{content.personname}}</h1>{{/if}}
			<div class="person-detail__infoarea">
				{{#if content.figure}}
					{{#with content.figure}}
						{{> figure }}
					{{/with}}
				{{/if}}
				<div class="person-detail__info">
					{{#if content.organization_unit}}
						<p class="person-detail__organization-unit">{{content.organization_unit}}</p>
					{{/if}}
					{{#if content.function}}
						<p class="person-detail__function">{{content.function}}</p>
					{{/if}}
					{{#if content.job_description}}
						<p class="person-detail__job-description">{{content.job_description}}</p>
					{{/if}}
					{{#if content.personinfo}}
						<p class="person-detail__personinfo">{{content.personinfo}}</p>
					{{/if}}
				</div>
				<div class="person-detail__contactarea">
						<div class="person-detail__address">
							{{#if content.office}}
								<p class="person-detail__office">{{content.office}}</p>
							{{/if}}
							{{#if content.room}}
								<p class="person-detail__room">{{content.room}}</p>
							{{/if}}
							{{#if content.street}}
								<p class="person-detail__street">{{content.street}}</p>
							{{/if}}
							{{#if content.plz_city}}
								<p class="person-detail__plz-city">{{content.plz_city}}</p>
							{{/if}}
							{{#if content.addressitems}}
							<p class="person-detail__linkarea">
								{{#each content.addressitems}}
									{{> person-detail__link}}
								{{/each}}
							</p>
							{{/if}}
						</div>
						<div class="person-detail__contact">
							{{#if content.contactitems}}
								{{#each content.contactitems}}
								<p class="person-detail__linkarea"></p>
									{{> person-detail__link}}
								</p>
								{{/each}}
							{{/if}}
							{{#if content.phone}}
							<p class="person-detail__phone">
								{{content.phone}}
							</p>
							{{/if}}
							{{#if content.fax}}
							<p class="person-detail__fax">
								{{content.fax}}
							</p>
							{{/if}}
						</div>
					</div>
			</div>
		</div>
		{{/wrapWith}}
	{{/wrapWith}}
</div>

person-detail__link.hbs

<a {{#if content.linkTarget}}target="{{content.linkTarget}}" {{/if}}href="{{content.linkHref}}"
			class="person-detail__link{{#if content.linkClasses}} {{content.linkClasses}}{{/if}}{{#is
					content.linkTarget "_blank"}} is-external{{/is}}" {{#is
			content.linkTarget "_blank"}} title="Link öffnet in neuem Fenster"{{/is}}>{{content.linkText}}</a>

Data File

person-detail.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"personDetailContextClass": "default",
				"personDetailClasses": "",
				"personDetailJsOptions": {}
			},
			"content": {
				"personname":"Prof. Dr. Irene Götz mit einem ganz langen Namen",
				"figure": {
					"settings": {
						"figureId": "",
						"figureContextClass": "default",
						"figureClasses": "person-detail__figure is-right",
						"figureJsModule": "overlay-handler"
					},
					"content": {
						"figureZoom": false,
						"figurePicture": {
							"settings": {
								"pictureContextClass": "default",
								"pictureClasses": "person-detail__picture",
								"lazyload": false,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://via.placeholder.com/400x400",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src": "https://via.placeholder.com/300x300",
												"imageWidth": "300w"
											},
											{
												"src": "https://via.placeholder.com/600x600",
												"imageWidth": "600w"
											},
											{
												"src": "https://via.placeholder.com/1200x1200",
												"imageWidth": "1200w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "1vw"
											},
											{
												"screenWidth": "(min-width: 768px)",
												"imageWidth": "33.33333vw"
											}
										]
									}
								]
							}
						}
					}
				},
				"organization_unit":"Einrichtung test dann mit sehr",
				"function":"Funktion",
				"job_description":"Aufgabengebiet",
				"personinfo":"Lorem ipsum consetetno sea takimata sanctus est Lorem ipsum dolor sit amet.",
				"office":"Dienststelle",
				"room":"Erdgeschoss, Raum 404 B",
				"street":"Martiusstr.2",
				"plz_city":"80333 München",
				"addressitems": [
					{
						"content": {
							"linkText": "Wegbeschreibung",
							"linkClasses": "is-external",
							"linkHref": "http://www.zuendfunk.de",
							"linkTarget": "_blank"
						}
					}
				],
				"contactitems":[
					{
						"content": {
							"linkText": "Email schreiben",
							"linkClasses": "is-mail",
							"linkHref": "mailto:info@lmu.de",
							"linkTarget": false
						}
					},
					{
						"content": {
							"linkText": "persönliche Website",
							"linkClasses": "is-external",
							"linkHref": "https://www.lmu.de",
							"linkTarget": "_blank"
						}
					},
					{
						"content": {
							"linkText": "+49 (0)8956565656",
							"linkClasses": "is-phone",
							"linkHref": "tel:+4908923232314",
							"linkTarget": false
						}
					},
					{
						"content": {
							"linkText": "Weitere Informationen",
							"linkClasses": "is-download",
							"linkHref": "https://www.lmu.de",
							"linkTarget": false
						}
					}
				],
				"phone":"+49(0)8933298657",
				"fax":"+49(0)8933298656"
			}
		}
	}
}

Styles

person-detail.scss

/* ===================================================
component: person-detail
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-person-detail"] {

	background-color: $color-white;

	.person-detail__frame {
		padding-top: 30px;
		padding-bottom: 100px;

		@include bp($bp-tablet-p) {
			padding-bottom: 30px;
		}
	}

	.person-detail__personname {

		@include headline-h1-styles();

	}

	.person-detail__figure {

		@include grid-column(12);
		display: none;

		@include bp($bp-tablet-p) {

			@include grid-column(4);
			display: inline-block;
			margin-bottom: 30px;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-right {
			float: right;
			margin-left: 40px;
		}

		&.is-left {
			margin-left: 0;
			margin-right: 40px;
		}

	}

	.person-detail__contactarea {
		clear: both;

		@include bp($bp-tablet-l) {
			clear: none;
		}
	}

	.person-detail__organization-unit {

		font-size: 1.7rem;
		line-height: (24/17);
		letter-spacing: .3px;
		color: $color-dark;
		font-family: $font-bold;
		font-weight: 700;
		margin-bottom: 13px;

		@include bp($bp-tablet-p) {
			font-size: 1.8rem;
			line-height: (28/18);
			margin-bottom: 10px;
		}

		@include bp($bp-desktop-m) {
			font-size: 2rem;
			line-height: (28/20);
			margin-bottom: 15px;
		}

	}

	.person-detail__function, .person-detail__job-description {

		color: $color-gray;

	}

	.person-detail__personinfo {

		margin-top: 18px;

		@include bp($bp-tablet-p) {
			margin-top: 15px;
		}

		@include bp($bp-desktop-m) {
			margin-top: 20px;
		}

	}

	.person-detail__contactarea {
		margin-top: 22px;
		display: flex;
		flex-direction: column;

		@include bp($bp-tablet-p) {
			margin-top: 20px;
			flex-direction: row;
		}

		@include bp($bp-desktop-m) {
			margin-top: 25px;
		}

		.person-detail__link {
			font-family: $font-bold;
			font-weight: 700;
			font-size: 1.5rem;
			color: $color-green;
			text-decoration: none;
			transition: color $animation-duration-std/2 $animation-easing-std;

			@include bp($bp-desktop-m) {
				font-size: 1.6rem;
			}

			&:focus {
				outline: none;
			}

			&:hover,
			&:focus {
				color: $color-dark;

				&::before {
					@include sprites-icon-arrow-black();

					transform: translateX(5px);
				}
			}

			&::before {
				@include pseudo();
				@include sprites-icon-arrow-green100();

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				vertical-align: unset;
				transition: transform $animation-duration-std $animation-easing-std;
			}

			/*
			MODIFIERS
			----------------------- */
			&.a11y-focus-key {
				@include a11y-focus-key();
			}

			&.is-external {
				color: $color-green;
				transition: color $animation-duration-std/3 $animation-easing-std;

				&:focus {
					outline: none;
				}

				&:hover,
				&.a11y-focus-key {
					color: $color-dark;

					&::before {
						@include sprites-icon-externalarrow-black();
					}
				}

				&.a11y-focus-key {
					@include a11y-focus-key();
				}

				&::before {
					@include pseudo();
					@include sprites-icon-externalarrow-green100();

					position: relative;
					display: inline-block;
					top: 1px;
					margin-right: 10px;
					vertical-align: unset;

					@include print() {
						display: none;
					}
				}
			}

			&.is-internal {

				&:hover,
				&.a11y-focus-key {
					color: $color-dark;
				}

				&.a11y-focus-key {
					@include a11y-focus-key();
				}
			}

			&.is-mail,
			&[href*="mailto:"] {
				color: $color-green;
				transition: color $animation-duration-std/3 $animation-easing-std;
				display: inline-block;

				&:focus {
					outline: none;
				}

				&:hover,
				&.a11y-focus-key {
					color: $color-dark;

					&::before {
						@include sprites-icon-mail-grey();
					}
				}

				&.a11y-focus-key {
					@include a11y-focus-key();
				}

				&::before {
					@include pseudo();
					@include sprites-icon-mail-green();

					position: relative;
					display: inline-block;
					top: 1px;
					margin-right: 10px;
					vertical-align: unset;

					@include print() {
						display: none;
					}
				}
			}

			&.is-download {
				color: $color-green;
				transition: color $animation-duration-std/3 $animation-easing-std;
				display: inline-block;

				&:focus {
					outline: none;
				}

				&:hover,
				&.a11y-focus-key {
					color: $color-dark;

					&::before {
						@include sprites-icon-download-black();
					}
				}

				&.a11y-focus-key {
					@include a11y-focus-key();
				}

				&::before {
					@include pseudo();
					@include sprites-icon-download-green100();

					position: relative;
					display: inline-block;
					top: 1px;
					margin-right: 10px;
					vertical-align: unset;

					@include print() {
						display: none;
					}
				}
			}

			&.is-phone {
				color: $color-dark;
				transition: color $animation-duration-std/3 $animation-easing-std;
				display: inline-block;

				&:focus {
					outline: none;
				}

				&:hover,
				&.a11y-focus-key {
					color: $color-green;

					&::before {
						@include sprites-icon-phone-green();
					}
				}

				&.a11y-focus-key {
					@include a11y-focus-key();
				}

				&::before {
					@include pseudo();

					@include sprites-icon-phone-grey();

					position: relative;
					display: inline-block;
					top: 3px;
					margin-right: 10px;
					vertical-align: unset;

					@include print() {
						top: 0px;
						width: auto;
						background-image: none;
						content: "Tel.:"
					}
				}
			}
		}
	}

	.person-detail__address {
		width: 100%;

		@include bp($bp-tablet-p) {
			width: 50%;
			padding-right: 15px;
		}

		.person-detail__linkarea{
			margin-top: 25px;
		}
	}

	.person-detail__contact {
		width: 100%;
		padding-top: 22px;

		@include bp($bp-tablet-p) {
			width: 50%;
			padding-left: 15px;
			padding-top: 0px;
		}

		.person-detail__linkarea {
			margin-bottom: 5px;
		}
	}

	.person-detail__phone {

		font-family: $font-bold;
		font-weight: 700;
		display: block;

		&::before {
			@include pseudo();

			@include sprites-icon-phone-grey();

			position: relative;
			display: inline-block;
			top: 3px;
			margin-right: 10px;
			vertical-align: unset;

			@include print() {
				top: 0px;
				width: auto;
				background-image: none;
				content: "Tel.:"
			}
		}
	}

	.person-detail__fax {

		font-family: $font-bold;
		font-weight: 700;
		display: block;

		&::before {
			@include pseudo();

			@include sprites-icon-fax-grey();

			position: relative;
			display: inline-block;
			top: 3px;
			margin-right: 10px;
			vertical-align: unset;

			@include print() {
				top: 0px;
				width: auto;
				background-image: none;
				content: "Fax:"
			}
		}
	}

	.person-detail__office {
		font-family: $font-bold;
		font-weight: 700;
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-person-detail--default {
}

Scripts

person-detail.js

/**
 * Description of PersonDetail.
 * Class properties and decorators are supported.
 *
 * @module PersonDetail
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class PersonDetail extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
			},
			classes: {}
		};

		super(obj, options);
	}

	/**
	 * Subscribe to global events of Veams or App namespace.
	 */
	get subscribe() {
		return {
			'{{context.EVENTS.resize}}': 'render'
		};
	}

	didMount() {

		setTimeout(() => {
			this.getPersonDetailHeightScroll();
		}, 3500);
	}

	/**
	 * Render class
	 */
	render() {
		setTimeout(() => {
			this.getPersonDetailHeightScroll();
		}, 500);
	}
	/**
	 * Get the Height of the Persondetailcontainer
	 */
	getPersonDetailHeightScroll() {
		let heightViewport = window.innerHeight;

		this.options.screenHeight = heightViewport;
		this.el.style.height = 'auto';
		this.el.style.overflowY = 'visible';
		let heightPersondetail = this.$el.outerHeight();
		if(heightPersondetail > heightViewport){
			this.el.style.height = heightViewport + 'px';
			this.el.style.overflowY = 'scroll';

		} else {
			this.el.style.height = 'auto';
			this.el.style.overflowY = 'visible';
		}

	}
}

export default PersonDetail;

HTML Output

Default

<div class="c-person-detail--default" data-css="c-person-detail" data-js-module="person-detail" data-js-options='{}'>
	<div class="grid__container">
		<div class="grid__row">
			<div class="person-detail__frame">
				<h1 class="person-detail__personname">Prof. Dr. Irene Götz mit einem ganz langen Namen</h1>
				<div class="person-detail__infoarea">
					<figure class="c-figure--default person-detail__figure is-right" data-css="c-figure" data-js-module="overlay-handler">
						<div class="figure__wrapper">
							<picture class="c-picture--default
										 person-detail__picture" data-css="c-picture">
								<!--[if IE 9]><audio><![endif]-->
								<source srcset="
										 https://via.placeholder.com/300x300  300w  , 
										 https://via.placeholder.com/600x600  600w  , 
										 https://via.placeholder.com/1200x1200  1200w  " sizes=" 
										   1vw 
										  ,  (min-width: 768px) 33.33333vw " />
								<!--[if IE 9]></audio><![endif]-->
								<img class="
										 picture__image" src="https://via.placeholder.com/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
							</picture>
						</div>
					</figure>
					<div class="person-detail__info">
						<p class="person-detail__organization-unit">Einrichtung test dann mit sehr</p>
						<p class="person-detail__function">Funktion</p>
						<p class="person-detail__job-description">Aufgabengebiet</p>
						<p class="person-detail__personinfo">Lorem ipsum consetetno sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
					<div class="person-detail__contactarea">
						<div class="person-detail__address">
							<p class="person-detail__office">Dienststelle</p>
							<p class="person-detail__room">Erdgeschoss, Raum 404 B</p>
							<p class="person-detail__street">Martiusstr.2</p>
							<p class="person-detail__plz-city">80333 München</p>
							<p class="person-detail__linkarea">
								<a target="_blank" href="http://www.zuendfunk.de" class="person-detail__link is-external is-external" title="Link öffnet in neuem Fenster">Wegbeschreibung</a>
							</p>
						</div>
						<div class="person-detail__contact">
							<p class="person-detail__linkarea"></p>
							<a href="mailto:info@lmu.de" class="person-detail__link is-mail">Email schreiben</a>
							</p>
							<p class="person-detail__linkarea"></p>
							<a target="_blank" href="https://www.lmu.de" class="person-detail__link is-external is-external" title="Link öffnet in neuem Fenster">persönliche Website</a>
							</p>
							<p class="person-detail__linkarea"></p>
							<a href="tel:+4908923232314" class="person-detail__link is-phone">+49 (0)8956565656</a>
							</p>
							<p class="person-detail__linkarea"></p>
							<a href="https://www.lmu.de" class="person-detail__link is-download">Weitere Informationen</a>
							</p>
							<p class="person-detail__phone">
								+49(0)8933298657
							</p>
							<p class="person-detail__fax">
								+49(0)8933298656
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

PERSON-DETAIL (LMU-Intern Modul )

src/app/shared/components/person-detail/templates

Demo Section

Default

Prof. Dr. Irene Götz mit einem ganz langen Namen

Readme

personDetail (`component`)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

`person-detail.hbs`

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

person-detail.hbs

person-detail__link.hbs

Data File

person-detail.hjson

Styles

person-detail.scss

Scripts

person-detail.js

HTML Output

Default

Wonach suchst du?

PERSON-DETAIL (LMU-Intern Modul )

src/app/shared/components/person-detail/templates

Demo Section

Default

Prof. Dr. Irene Götz mit einem ganz langen Namen

Readme

personDetail (component)

Description

Requirements

Installation

Installation with Veams from local machine

Fields

person-detail.hbs

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

person-detail.hbs

person-detail__link.hbs

Data File

person-detail.hjson

Styles

person-detail.scss

Scripts

person-detail.js

HTML Output

Default

Wonach suchst du?

personDetail (`component`)

`person-detail.hbs`