MAGNETOGRAMS-TRACKER (component )

src/app/shared/components/magnetograms-tracker/templates

Demo Section

Each variation will be presented in the following section.

Default

Magnetogram mit Tagesauwahl (Jahr, Monat, Tag) in Deutsch

Magnetograms Tracker Loading...

Defaul mit Monatsauswahl

Magnetogram mit Monatsauwahl (Jahr, Monat) in Englisch

Magnetograms Tracker Loading...

Defaul mit Jahresauswahl

Magnetogram mit Jahresauwahl (Jahr) in Englisch

Magnetograms Tracker Loading...

Landingpageversion (Eingebaut in detail-page2)

Überschrift Landingpage in Englisch

Magnetograms Tracker Loading...

Detailseitenansicht in Englisch (Eingebaut in detail-page (rte))

Überschrift in Detailseite

Magnetograms Tracker Loading...

Readme

magnetogramsTracker (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/magnetograms-tracker

Fields

magnetograms-tracker.hbs

Settings

Parameter Type Default Description
settings.magnetogramsTrackerClasses String '' Modifier classes for component
settings.magnetogramsTrackerContextClass String 'default' Context class of component ‘rte’: used for the view in a detailpage; ‘lpage’: used for the view in a landingpage
settings.magnetogramsTrackerTimeIntervall String ‘null’ ‘datenDay’ show a selection option from Year to month to day; ‘datenMonth’ show a selection option from Year to Month; ‘dateYear’ show a selection option for ‘years’
settings.magnetogramsTrackerVueJsID String ‘null’ name of the id of the div for integartion the vue.js-App. Standard, which the App can use, is ‘magnetograms-tracker’

Content

Parameter Type Description
content.headline String The Headline for the Modul
content.labelSelectYear String The Labelname of the selectionfield for the Year (Here you can but in the name for the specific Language)
content.labelSelectMonth String The Labelname of the selectionfield for the Month (Here you can but in the name for the specific Language)
content.labelSelectDay String The Labelname of the selectionfield for the Day (Here you can but in the name for the specific Language)
content.labelButtonNow String The name of the button ‘now’ (Here you can but in the name for the specific Language)
content.labelButtonPrevious String The name of the button ‘prev’ (Here you can but in the name for the specific Language)
content.labelButtonNext String The name of the button ‘next’ (Here you can but in the name for the specific Language)
content.textNoImagesAvailable String Infotext for not existing image

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

Modifier Classes

There are modifier classes you can add to c-magnetograms-tracker:

Modifier Description

Templates

magnetograms-tracker.hbs

<div class="c-magnetograms-tracker{{#if settings.magnetogramsTrackerContextClass}}--{{settings.magnetogramsTrackerContextClass}}{{else}}--default{{/if}}{{#if settings.magnetogramsTrackerClasses}} {{settings.magnetogramsTrackerClasses}}{{/if}}" data-css="c-magnetograms-tracker">
	{{#if content.headline}}
		<h2 class="magnetograms-tracker__headline">{{content.headline}}</h2>
	{{/if}}
	<div id="{{#if settings.magnetogramsTrackerVueJsID}}{{settings.magnetogramsTrackerVueJsID}}{{/if}}"
		class="magnetograms-tracker__vue"
		data-config='{
			"timeInterval": "{{settings.magnetogramsTrackerTimeIntervall}}",
			"baseUrl": "{{#if (prod)}}https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/{{else}}/api/magnetogram-tracker{{/if}}",
			"text": {
				"labelSelectYear": "{{#if content.labelSelectYear}}{{content.labelSelectYear}}{{/if}}",
				"labelSelectMonth": "{{#if content.labelSelectMonth}}{{content.labelSelectMonth}}{{/if}}",
				"labelSelectDay": "{{#if content.labelSelectDay}}{{content.labelSelectDay}}{{/if}}",
				"labelButtonNow": "{{#if content.labelButtonNow}}{{content.labelButtonNow}}{{/if}}",
				"labelButtonPrevious": "{{#if content.labelButtonPrevious}}{{content.labelButtonPrevious}}{{/if}}",
				"labelButtonNext": "{{#if content.labelButtonNext}}{{content.labelButtonNext}}{{/if}}",
				"textNoImagesAvailable": "{{#if content.textNoImagesAvailable}}{{content.textNoImagesAvailable}}{{/if}}"
			}
		}'>
		Magnetograms Tracker Loading...
	</div>
</div>

<script>
	//'https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/';
	document.addEventListener('DOMContentLoaded', function() {
		window.LmuMagnetogramsTracker.init("{{#if settings.magnetogramsTrackerVueJsID}}{{settings.magnetogramsTrackerVueJsID}}{{/if}}");
	})
</script>
<script src="{{@root.assets}}scripts/magnetograms-tracker.bundle.vue_3.js" defer></script>

Data File

magnetograms-tracker.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"magnetogramsTrackerContextClass": "default",
				"magnetogramsTrackerClasses": "",
				"magnetogramsTrackerJsOptions": {},
				"magnetogramsTrackerTimeIntervall": "datenDay",
				"magnetogramsTrackerVueJsID": "magnetograms-tracker"
			},
			"content": {
				"headline": "Magnetogram mit Tagesauwahl (Jahr, Monat, Tag) in Deutsch",
				"labelSelectYear": "Jahr",
				"labelSelectMonth": "Monat",
				"labelSelectDay": "Tag",
				"labelButtonNow": "Aktuell",
				"labelButtonPrevious": "Davor",
				"labelButtonNext": "Danach",
				"textNoImagesAvailable": "Für diesen Zeitpunkt sind noch keine Abbildungen verfügbar."
			}
		},
		"defaultmonth": {
			"docs": {
				"variationName": "Defaul mit Monatsauswahl"
			},
			"settings": {
				"magnetogramsTrackerContextClass": "default",
				"magnetogramsTrackerClasses": "",
				"magnetogramsTrackerJsOptions": {},
				"magnetogramsTrackerTimeIntervall": "datenMonth",
				"magnetogramsTrackerVueJsID": "magnetograms-tracker2"
			},
			"content": {
				"headline": "Magnetogram mit Monatsauwahl (Jahr, Monat) in Englisch",
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		},
		"defaultyear": {
			"docs": {
				"variationName": "Defaul mit Jahresauswahl"
			},
			"settings": {
				"magnetogramsTrackerContextClass": "default",
				"magnetogramsTrackerClasses": "",
				"magnetogramsTrackerJsOptions": {},
				"magnetogramsTrackerTimeIntervall": "datenYear",
				"magnetogramsTrackerVueJsID": "magnetograms-tracker3"
			},
			"content": {
				"headline": "Magnetogram mit Jahresauwahl (Jahr) in Englisch",
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		},
		"lpage": {
			"docs": {
				"variationName": "Landingpageversion (Eingebaut in detail-page2)"
			},
			"settings": {
				"magnetogramsTrackerContextClass": "lpage",
				"magnetogramsTrackerClasses": "",
				"magnetogramsTrackerJsOptions": {},
				"magnetogramsTrackerTimeIntervall": "datenDay",
				"magnetogramsTrackerVueJsID": "magnetograms-tracker4"
			},
			"content": {
				"headline": "Überschrift Landingpage in Englisch",
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		},
		"rte": {
			"docs": {
				"variationName": "Detailseitenansicht in Englisch (Eingebaut in detail-page (rte))"
			},
			"settings": {
				"magnetogramsTrackerContextClass": "rte",
				"magnetogramsTrackerClasses": "",
				"magnetogramsTrackerJsOptions": {},
				"magnetogramsTrackerTimeIntervall": "datenDay",
				"magnetogramsTrackerVueJsID": "magnetograms-tracker5"
			},
			"content": {
				"headline": "Überschrift in Detailseite",
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		}
	}
}

Styles

magnetograms-tracker.scss

/* ===================================================
component: magnetograms-tracker
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-magnetograms-tracker"] {

	clear: both;
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}


	.magnetograms-tracker__headline {
		@include headline-h2-styles();
	}

    .magnetograms-tracker__controls {
        button {
            margin-right: 5px;
            height: auto;
            width: auto;
        }

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

	.magnetograms-tracker__form {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		width: 100%;
		margin-bottom:20px;

		@include bp($bp-tablet-p) {
			flex-flow: row nowrap;
		}

	}

	.magnetograms-tracker__select_area {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;

		.magnetograms-tracker__select{
			margin: 10px 20px 10px 0px;
		}

	}

	.magnetograms-tracker__controls{
		align-self: flex-start;
		margin-top:15px;

		button {
			margin-right: 10px;
		}

		@include bp($bp-tablet-p) {
			align-self: flex-end;
			margin-bottom: 10px;
			margin-top:0px;
			margin-right: 0px;

			button {
				padding: 15px;
				margin-right: 5px;
			}
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-magnetograms-tracker--default {
}

.c-magnetograms-tracker--lpage {
	.magnetograms-tracker__headline {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}
}

.c-magnetograms-tracker--rte {
	@include rte-dimensions();
	margin-bottom: 60px;

	.magnetograms-tracker__headline {
		width: 100%;
		flex: 0 0 100%;
		margin-left: 0px;
	}

	img{
		margin-left: 0px;
	}
}

Scripts

magnetograms-tracker.js

HTML Output

Default

<div class="c-magnetograms-tracker--default" data-css="c-magnetograms-tracker">
	<h2 class="magnetograms-tracker__headline">Magnetogram mit Tagesauwahl (Jahr, Monat, Tag) in Deutsch</h2>
	<div id="magnetograms-tracker" class="magnetograms-tracker__vue" data-config='{
			"timeInterval": "datenDay",
			"baseUrl": "https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/",
			"text": {
				"labelSelectYear": "Jahr",
				"labelSelectMonth": "Monat",
				"labelSelectDay": "Tag",
				"labelButtonNow": "Aktuell",
				"labelButtonPrevious": "Davor",
				"labelButtonNext": "Danach",
				"textNoImagesAvailable": "Für diesen Zeitpunkt sind noch keine Abbildungen verfügbar."
			}
		}'>
		Magnetograms Tracker Loading...
	</div>
</div>
<script>
	//'https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/';
	document.addEventListener('DOMContentLoaded', function() {
		window.LmuMagnetogramsTracker.init("magnetograms-tracker");
	})
</script>
<script src="./scripts/magnetograms-tracker.bundle.vue_3.js" defer></script>

Defaul mit Monatsauswahl

<div class="c-magnetograms-tracker--default" data-css="c-magnetograms-tracker">
	<h2 class="magnetograms-tracker__headline">Magnetogram mit Monatsauwahl (Jahr, Monat) in Englisch</h2>
	<div id="magnetograms-tracker2" class="magnetograms-tracker__vue" data-config='{
			"timeInterval": "datenMonth",
			"baseUrl": "https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/",
			"text": {
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		}'>
		Magnetograms Tracker Loading...
	</div>
</div>
<script>
	//'https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/';
	document.addEventListener('DOMContentLoaded', function() {
		window.LmuMagnetogramsTracker.init("magnetograms-tracker2");
	})
</script>
<script src="./scripts/magnetograms-tracker.bundle.vue_3.js" defer></script>

Defaul mit Jahresauswahl

<div class="c-magnetograms-tracker--default" data-css="c-magnetograms-tracker">
	<h2 class="magnetograms-tracker__headline">Magnetogram mit Jahresauwahl (Jahr) in Englisch</h2>
	<div id="magnetograms-tracker3" class="magnetograms-tracker__vue" data-config='{
			"timeInterval": "datenYear",
			"baseUrl": "https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/",
			"text": {
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		}'>
		Magnetograms Tracker Loading...
	</div>
</div>
<script>
	//'https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/';
	document.addEventListener('DOMContentLoaded', function() {
		window.LmuMagnetogramsTracker.init("magnetograms-tracker3");
	})
</script>
<script src="./scripts/magnetograms-tracker.bundle.vue_3.js" defer></script>

Landingpageversion (Eingebaut in detail-page2)

<div class="c-magnetograms-tracker--lpage" data-css="c-magnetograms-tracker">
	<h2 class="magnetograms-tracker__headline">Überschrift Landingpage in Englisch</h2>
	<div id="magnetograms-tracker4" class="magnetograms-tracker__vue" data-config='{
			"timeInterval": "datenDay",
			"baseUrl": "https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/",
			"text": {
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		}'>
		Magnetograms Tracker Loading...
	</div>
</div>
<script>
	//'https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/';
	document.addEventListener('DOMContentLoaded', function() {
		window.LmuMagnetogramsTracker.init("magnetograms-tracker4");
	})
</script>
<script src="./scripts/magnetograms-tracker.bundle.vue_3.js" defer></script>

Detailseitenansicht in Englisch (Eingebaut in detail-page (rte))

<div class="c-magnetograms-tracker--rte" data-css="c-magnetograms-tracker">
	<h2 class="magnetograms-tracker__headline">Überschrift in Detailseite</h2>
	<div id="magnetograms-tracker5" class="magnetograms-tracker__vue" data-config='{
			"timeInterval": "datenDay",
			"baseUrl": "https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/",
			"text": {
				"labelSelectYear": "Year",
				"labelSelectMonth": "Month",
				"labelSelectDay": "Day",
				"labelButtonNow": "Now",
				"labelButtonPrevious": "Prev",
				"labelButtonNext": "Next",
				"textNoImagesAvailable": "No images are available for this time yet."
			}
		}'>
		Magnetograms Tracker Loading...
	</div>
</div>
<script>
	//'https://observatory.geophysik.uni-muenchen.de/geomagnetism/data/';
	document.addEventListener('DOMContentLoaded', function() {
		window.LmuMagnetogramsTracker.init("magnetograms-tracker5");
	})
</script>
<script src="./scripts/magnetograms-tracker.bundle.vue_3.js" defer></script>

Wonach suchst du?

Datenschutzhinweis mit Link