@randstad-design/orbit-multitheme/src/assets/js/helpers/templates.js

multitheme Front-end code based on Randstad Human Forward components

const Mustache = require('mustache'); 

/**
 * The templates tool loads a template with view data. It caches template scripts.
 *
 * Example: loader.load('/path/to/template.html', 'selector', container, data);
 */
export class Templates {
	constructor() {
		this.templates = {};
		this.templateFiles = {};
		this.data = {};
	}

	/**
	 * Render a template
	 * @param {Object} template html template
	 * @param {Node} container
	 * @param {Object} data
	 */
	static renderTemplate(template, container, data) {
		// clear and fill the container
		container.innerHTML = Mustache.render(template, data);
	}


	/**
	 * <parentElement><element><template></template></element></parentElement>
	 * @param template - template to render
	 * @param templateElement - element to render template in
	 * @param data - data for template
	 * @param parentElement - element to append the template to
	 */
	static prependTemplate(template, templateElement, data, parentElement) {
		Templates.renderTemplate(template, templateElement, data);
		parentElement.insertBefore(templateElement, parentElement.firstChild);
	}


	/**
	 * <parentElement><element><template></template></element></parentElement>
	 * @param template - template to render
	 * @param templateElement - element to render template in
	 * @param data - data for template
	 * @param parentElement - element to append the template to
	 */
	static appendTemplate(template, templateElement, data, parentElement) {
		Templates.renderTemplate(template, templateElement, data);
		parentElement.insertBefore(templateElement, null);
	}

	static getTemplateFromPage(id) {
		return document.getElementById(id).innerHTML;
	}

}