MZL-SUBJECTS (LMU Fächerkombinator Module )

src/app/shared/components/mzl-subjects/templates

Demo Section

Each variation will be presented in the following section.

Default

Readme

mzlSubjects (component)

Description

This module generate the Fächerkombinator within Vue.js. The JSON-File with Information from the Database is loaded with a external URL from FS-DEV-SErver. You need to use a Browser with no Cros-Origin-Defense. How to start a browser without it see Wiki ‘Veams Komponente mit externen JSON-Daten’. The HTML-Code with the Komponent-specific CSS-Klass are located in the Vue.js-App in the same Komponent Folder

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/mzl-subjects

Fields

mzl-subjects.hbs

Settings

Parameter Type Default Description
settings.mzlSubjectsClasses String '' Modifier classes for component
settings.mzlSubjectsContextClass String 'default' Context class of component
settings.mzlSubjectsJsOptions Object null JavaScript options object which gets stringified

Content

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

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$mzl-subjects-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-mzl-subjects:

Modifier Description
is-modifier Please add a description!

Templates

mzl-subjects.hbs

<script type="text/javascript">	
	var facherKombinatorJsonUrl = '/api/facher-kombinator';
	{{#if (prod)}}
		facherKombinatorJsonUrl = '/assets/mocks/facher-kombinator/data.json';
	{{/if}}


	function facherKombinatorLoad() {
		window.LmuFacherkombinator.init({
			container : "#mzl-subjects",
			jsonUrl : facherKombinatorJsonUrl,
			text: {
				defaultOptionText : "Please select...",
				startAgainText: "Start Again",
				selectSubjectCombinationText: "Selected Subject Combination",
				teachingSubjectText: "Teaching Subject",
				didaktikSubjectText: "Didactic Subject",
			}



		});
	}	
	window.addEventListener("load", facherKombinatorLoad);
</script>


<!-- App start -->
<div id="mzl-subjects"></div>
    <!-- App end -->


<!--

<div id="mzl-subjects" class="c-mzl-subjects--default" data-css="c-mzl-subjects">
	{{#if content.headline}}
		<h2 class="mzl-subjects__headline">{{content.headline}}</h2>
	{{/if}}
	<form action="" method="" data-css="c-form" onsubmit="return false;" class="mzl-subjects__form">
		<fieldset class="mzl-subjects__fieldset">
			<div class="mzl-subjects__select form__select-free ">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">Unterrichtsfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select1" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Psychologie mit schulpsychologischem Schwerpunkt</option>
						<option>Sport</option>
						<option>Biologie</option>
						<option>Deutsch</option>
						<option>Chemie</option>
					</select>
				</div>
			</div>
			<div class="mzl-subjects__select form__select-free">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">1. Didaktikfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select2" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Deutsch</option>
					</select>
				</div>
			</div>
			<div class="mzl-subjects__select form__select-free">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">2. Didaktikfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select3" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Geographie</option>
						<option>Englisch</option>
					</select>
				</div>
			</div>
			<div class="mzl-subjects__select form__select-free">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">3. Didaktikfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select4" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Geschichte</option>
						<option>Chemie</option>
					</select>
				</div>
			</div>


			<div class="c-definition-list--default mzl-subjects__definition-list" data-css="c-definition-list">
				<h3 class="definition-list__headline">Gewählte Fächerkombination</h3>
				<dl class="definition-list__list"><dt class="definition-list__title">Unterrichtsfach</dt> <dd class="definition-list__description">Sport</dd> <dt class="definition-list__title">1. Didaktikfach</dt> <dd class="definition-list__description">Deutsch</dd> <dt class="definition-list__title">2. Didaktikfach</dt> <dd class="definition-list__description">Geographie</dd> <dt class="definition-list__title">3. Didaktikfach</dt> <dd class="definition-list__description">Geschichte</dd></dl>
			</div>

			<button class="form__submit-ci"><span class="form__submit-ci-text">Start again</span></button>

		</fieldset>
	</form>
</div>

-->

Data File

mzl-subjects.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"mzlSubjectsContextClass": "default",
				"mzlSubjectsClasses": "",
				"mzlSubjectsJsOptions": {}
			},
			"content": {
				"headline":"Headline für den Fächerkombinator"
			}
		}
	}
}

Styles

mzl-subjects.scss

/* ===================================================
component: mzl-subjects
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-mzl-subjects"] {
	.mzl-subjects__headline {
		@include headline-h2-styles();
	}

	.mzl-subjects__select {
		padding-top: 16px;

		&:first-child {padding-top: 0px;}
	}

	.mzl-subjects__definition-list {
		width: 100%;
		margin-left: 0;
		margin-bottom: 16px;
		margin-top: 0px;
	}


}


/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-mzl-subjects--default {
	margin-bottom: 60px;

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

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

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

.c-mzl-subjects--rte {
	@include rte-dimensions();

	margin-bottom: 15px;

	@include bp($bp-desktop-m) {
		margin-bottom: 10px;
	}
}

Scripts

mzl-subjects.js

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

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

class MzlSubjects extends Component {
	/**
	* Class Properties
	*/

	/**
	 * 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);
	}

	didMount() {
		console.log('Component MzlSubjects mounted!');
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default MzlSubjects;

HTML Output

Default

<script type="text/javascript">
	var facherKombinatorJsonUrl = '/api/facher-kombinator';
	facherKombinatorJsonUrl = '/assets/mocks/facher-kombinator/data.json';
	function facherKombinatorLoad() {
		window.LmuFacherkombinator.init({
			container: "#mzl-subjects",
			jsonUrl: facherKombinatorJsonUrl,
			text: {
				defaultOptionText: "Please select...",
				startAgainText: "Start Again",
				selectSubjectCombinationText: "Selected Subject Combination",
				teachingSubjectText: "Teaching Subject",
				didaktikSubjectText: "Didactic Subject",
			}
		});
	}
	window.addEventListener("load", facherKombinatorLoad);
</script>
<!-- App start -->
<div id="mzl-subjects"></div>
<!-- App end -->
<!--
<div id="mzl-subjects" class="c-mzl-subjects--default" data-css="c-mzl-subjects">
		<h2 class="mzl-subjects__headline">Headline für den Fächerkombinator</h2>
	<form action="" method="" data-css="c-form" onsubmit="return false;" class="mzl-subjects__form">
		<fieldset class="mzl-subjects__fieldset">
			<div class="mzl-subjects__select form__select-free ">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">Unterrichtsfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select1" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Psychologie mit schulpsychologischem Schwerpunkt</option>
						<option>Sport</option>
						<option>Biologie</option>
						<option>Deutsch</option>
						<option>Chemie</option>
					</select>
				</div>
			</div>
			<div class="mzl-subjects__select form__select-free">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">1. Didaktikfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select2" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Deutsch</option>
					</select>
				</div>
			</div>
			<div class="mzl-subjects__select form__select-free">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">2. Didaktikfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select3" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Geographie</option>
						<option>Englisch</option>
					</select>
				</div>
			</div>
			<div class="mzl-subjects__select form__select-free">
				<div class="form__label-wrapper">
					<label for="" class="form__select-free-label">3. Didaktikfach</label>
				</div>
				<div class="form__select-free-wrapper">
					<select id="mzl_select4" class="form__select-free-el">
						<option selected="selected" value="">Bitte wählen Sie...</option>
						<option>Geschichte</option>
						<option>Chemie</option>
					</select>
				</div>
			</div>
			<div class="c-definition-list--default mzl-subjects__definition-list" data-css="c-definition-list">
				<h3 class="definition-list__headline">Gewählte Fächerkombination</h3>
				<dl class="definition-list__list"><dt class="definition-list__title">Unterrichtsfach</dt> <dd class="definition-list__description">Sport</dd> <dt class="definition-list__title">1. Didaktikfach</dt> <dd class="definition-list__description">Deutsch</dd> <dt class="definition-list__title">2. Didaktikfach</dt> <dd class="definition-list__description">Geographie</dd> <dt class="definition-list__title">3. Didaktikfach</dt> <dd class="definition-list__description">Geschichte</dd></dl>
			</div>
			<button class="form__submit-ci"><span class="form__submit-ci-text">Start again</span></button>
		</fieldset>
	</form>
</div>
-->

Wonach suchst du?

Datenschutzhinweis mit Link