hochschulzugang (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/hochschulzugang

Fields

hochschulzugang.hbs

The partial is a wrapWith partial. This means that you can access all properties and hashes via props. See Mangony Handlebars Helper - wrapWith for detailed instructions.

Settings

Content

SASS

Variables

There are multiple variables which you can change:

Modifier Classes

There are modifier classes you can add to c-hochschulzugang:

hochschulzugang.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"hochschulzugangContextClass": "default",
				"hochschulzugangClasses": ""
			},
			"content": {
				"anchornav": {
					"variation": "default",
					"settings": {
						"anchorNavClasses": false,
						"hiddenListItemsId": "unique-id-hidden-list",
						"anchorNavJsOptions": ""
					},
					"content": {
						"headline": " "
					}
				},
				"sitemapHeaderArticle": {
					"variations": "noPicture",
					"settings": {
						"headerArticleContextClass": "default",
						"headerArticleClasses": false
					},
					"content": {
						"articleHeadline": "Hochschulzugang",
						"articleParagraph": "For further information please visit the following link.",
						"articleLink": "https://www.uni-muenchen.de/index.html"
					}
				}
			}
		}
	}
}

hochschulzugang.js

/**
 * Description of Hochschulzugang.
 * Class properties and decorators are supported.
 *
 * @module Hochschulzugang
 * @version v1.0.0
 *
 * @author Ognjen Jukanovic
 */

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

class Hochschulzugang extends Component {
	/**
	* Class Properties
	*/
	$el = $(this.el);
	$jsonLink = $(this.options.selectors.jsonLink, this.el);
	$title;
	$subTitle;
	$admissionModalityFromUrl;
	$linkFromUrl;
	$minorSubjectsFromUrl;
	$nationalityFromUrl;
	$printStatus = false;

	/**
	 * 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: {
				jsonLink: '[data-js-item="js-json-link"]',
				mainContainer: '[data-js-item="js-hochschulzugang"]',
				anchorNavigation: '[data-js-module="anchor-nav"]',
				admissionModality: '[data-js-item="js-admission-modality"]',
				defaultText: '[data-js-item="js-default-text"]'
			},
			classes: {
				isLoading: 'is-loading'
			}
		};

		super(obj, options);
	}

	/**
	* Lifecycle Hooks
	*/
	willMount() {
		console.log('Component Hochschulzugang will mount!');
	}

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


	/**
	 * @desc Debounce a function for a specific time
	 */
	bindEvents() {

		this.options.mainContainer = document.querySelector(
			this.options.selectors.mainContainer
		);

		this.options.jsonLink = document.querySelector(
			this.options.selectors.jsonLink
		).getAttribute("data-js-json-link");

		this.options.anchorNavigation = this.options.mainContainer.querySelector(
			this.options.selectors.anchorNavigation
		);

		this.options.admissionModality = this.options.mainContainer.querySelector(
			this.options.selectors.admissionModality
		);

		this.options.defaultText = document.querySelector(
			this.options.selectors.defaultText
		);

		// Header Article
		const urlOptions = decodeURI(window.location.href.split('?')[1]).split('&');
		if (urlOptions[0] !== 'undefined') {
			urlOptions.forEach((key) => {
				const option = key.split('=');

				if (option[0] === 'nationality') this.$title = option[1];
				// if (option[0] === 'nationality') this.options.mainContainer.querySelector('.header-article__article-headline').innerText = option[1];
				if (option[0] === 'admissionModality') {
					this.$admissionModalityFromUrl = option[1];
					// this.options.mainContainer.querySelector('.header-article__article-paragraph').innerText = option[1];

					this.$subTitle = option[1];
				}
				if (option[0] === 'link') this.$linkFromUrl = option[1];
				if (option[0] === 'minorSubjects') this.$minorSubjectsFromUrl = option[1];
				if (option[0] === 'nationality') this.$nationalityFromUrl = option[1];
			});
		} else {
			this.options.mainContainer.classList.remove(this.options.classes.isLoading);
			return 0;
		}

		this.getAndFillData();
		this.options.mainContainer.classList.remove(this.options.classes.isLoading);
	}

	/**
	 * @desc Data initialization
	 * @param {String} data - Results from JSON file
	 */
	initializationForm(data) {

		console.log('DD1', data.settings.nationality);
		console.log('DD2', this.checkIfExist(this.$nationalityFromUrl, data.settings.nationality));

		if (this.checkIfExist(this.$admissionModalityFromUrl, data.settings.admissionModality) && this.checkIfExist(this.$nationalityFromUrl, data.settings.nationality)) {
			// Admission Modality
			for (let item of data.admissionModality) {
				if (item.admissionModality === this.$admissionModalityFromUrl) {
					this.createDomElement(item, 'admissionModality');
				}
			}
		}

		// Link To Subject
		let linkParagraph = document.createElement('p');
		let linkHref = document.createElement('a');
		linkHref.innerHTML = data.linkToSubject.title;
		linkHref.href = this.$linkFromUrl;
		linkHref.target = '_blank';
		linkHref.classList.add('is-external');
		linkParagraph.appendChild(linkHref)
		this.options.admissionModality.appendChild(linkParagraph);

		// Minor Subjects
		let minorSubjectsTitle = document.createElement('h3');
		let minorSubjectsParagraph = document.createElement('p');
		minorSubjectsTitle.innerHTML = data.minorSubjects.title;
		minorSubjectsParagraph.innerHTML = data.minorSubjects.content[this.$minorSubjectsFromUrl];
		this.options.admissionModality.appendChild(minorSubjectsTitle);
		this.options.admissionModality.appendChild(minorSubjectsParagraph);

		// Anchor Title
		this.options.anchorNavigation.querySelector('.anchor-nav__headline').textContent = data.anchorLinks.title;

		if (this.checkIfExist(this.$admissionModalityFromUrl, data.settings.admissionModality) && this.checkIfExist(this.$nationalityFromUrl, data.settings.nationality)) {

			// Nationality
			this.printResult(data, 'nationality');

			// Application
			this.printResult(data, 'application');

			// Admission
			this.printResult(data, 'admission');

			// Registration
			this.printResult(data, 'registration');

			// Subject Change
			this.printResult(data, 'subjectChange');

			this.options.mainContainer.querySelector('.header-article__article-headline').innerText = this.$title;
			this.options.mainContainer.querySelector('.header-article__article-paragraph').innerHTML = this.$subTitle;
			this.options.defaultText.remove();
		} else {
			this.options.anchorNavigation.querySelector('.anchor-nav__headline').remove();
			this.options.anchorNavigation.querySelector('.anchor-nav__list').remove();
			this.options.admissionModality.remove();
		}
	}

	/**
	 * @desc Check If Element Exist
	 * @param {String} key - Key value
	 * @param {Object} items - Content
	 */
	checkIfExist(key, items) {
		for (let item of items) {
			if (item === key) return true;
		}
		return false
	}

	/**
	 * @desc Print Results
	 * @param {Object} items - Content
	 * @param {String} key - Key value
	 */
	printResult(items, key) {
		for (let item of items[key]) {
			if (item.admissionModality === this.$admissionModalityFromUrl && item.nationality === this.$nationalityFromUrl) {
				this.createDomElement(item, key);
			}
		}
	}

	/**
	 * @desc Create Dom Elements H2 and p
	 * @param {Object} item - Content
	 * @param {String} key - Key value
	 */
	createDomElement(item, key) {
		let textTitle;

		if (key === 'nationality') {
			textTitle = item.nationality;
		} else if (key === 'admissionModality') {
			textTitle = item.admissionModality;
		} else {
			textTitle = item.title;
		}

		let title = document.createElement('h2');
		title.id = key;
		title.innerHTML = textTitle;
		this.options.admissionModality.appendChild(title);

		let a = document.createElement('a');
		a.setAttribute('data-js-item', 'anchor-link')
		a.classList.add('anchor-nav__link');
		a.href = '#' + key;
		a.title = textTitle;
		a.innerHTML = textTitle;

		let li = document.createElement('li');
		li.classList.add('anchor-nav__list-item');
		li.appendChild(a);
		this.options.anchorNavigation.querySelector('.anchor-nav__list').appendChild(li);

		let paragraph = document.createElement('div');
		paragraph.classList.add('rte__contentcreator');
		paragraph.innerHTML = item.content;
		this.options.admissionModality.appendChild(paragraph);
	}

	/**
	 * @desc Get data from JSON and fill in function initializationForm
	 */
	getAndFillData() {
		const uri = this.options.jsonLink;
		if (uri) {
			this.getJSON(uri, (data) => {
				if (typeof data !== 'undefined') this.initializationForm(data);
			});
		}
	}

	/**
	 * @desc JSON request
	 * @param {Object} url - Link to JSON file
	 * @param {Object} callback - For results
	 * @param {Object} requestHeader - For request with Header like user, pass, type...
	 * @return {callback} - Return callback
	 */
	getJSON = (url, callback, requestHeader) => {
		const xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		if (requestHeader) {
			requestHeader.forEach((element) => {
				xhr.setRequestHeader(element.name, element.value);
			});
		}
		xhr.onload = () => {
			if (xhr.readyState === 4 && xhr.status === 200) {
				const res = xhr.responseText;
				callback(JSON.parse(res));
			} else {
				console.error(xhr.statusText);
			}
		};
		xhr.send(null);
	};

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

export default Hochschulzugang;