====== Nützliche Require.js Scripte ====== Hier das Basic Script wie man require.js klever integriert. ===== Reihenfolge der Dateien ===== Wie require.js Files lädt: - die require.js - danach die angegeben config.js - dann die main.js oder app.js aus der config.js - dann alle Module wie sie aufgerufen werden per ''require( '../..' )'' **Ein Hinweis:** Man kann einzelne Libraries mit //require('path/to/dein_modul');// angeben, aber sauberer, sicherer & stabiler ist, auch bei einzelnen Bilbiotheken immer den Paramter als array zu übergeben: ''require( ['path/to/dein_modul'] );'' ===== Code Beispiel der einzelnen Datein ===== Hier Drei Schritte als Code Beispiele um: zu implementieren, konfigurieren & ein eigenes Modul zu schreiben ==== Beispiel um require.js einfach zu implementieren ==== in den '''' Teil des HTML schreibt man:

Der Code lädt require.js und startet die configuration, diese sollte dann so ungefähr aussehen: ''/assets/js/require-config.js''


require.config({
	urlArgs : "bust=" + (new Date()).getTime(), // Cache Buster beim Entwickeln, dass immer die neuste Datei geladen wird
 	paths: {
	// Definieren von vorgegebenen Libraries
		'jquery'       : 'vendor/jquery',
		'jquery-clndr' : 'vendor/jquery.clndr.min',
		'uikit'        : 'vendor/uikit.min',
		'uikit-icons'  : 'vendor/uikit-icons.min',
		'TAFFY'        : 'vendor/taffy.min',
		'moment'       : 'vendor/moment-with-locales',
 		'mustache'     : 'vendor/mustache.min',
	},
	// Macht einen Wrapper um Plugins, und man kann sagen welches Sub-Library welche anderen Bibliotheken braucht
	shim: {
		'jquery-clndr' : ['jquery'],
		'uikit-icons'  : ['uikit'],
	}
});

requirejs( ['main'] ); // Lädt das Haupt-Script

Der hier gezeigte Vendor-Folder muss im gleichen Verzeichnis wie die config-file liegen, sprich: //assets/js/vendor/...// ==== Beispiel für eine main.js File ==== Am Ende des vorherigen Scripts wird die main.js im //assets/js/...// Folder geladen, diese kann so aussehen:


define( function( require ){

	/*
		R E Q U I R E D   S C R I P T S
		Die immer geladen werden sollen
	 */
	const jQuery       = require( 'jquery' );
	const uikit        = require( 'uikit' );
	const uikit_icons  = require( 'uikit-icons' );


	/*
		E I G E N E   S C R I P T S
	 */


	/* === Init ratioResizer === */
	const ratioResizer   = require( 'brandgrad/ratioResizer' ); // Modul Laden
	const youtubeResize  = new ratioResizer( 'iframe[src^="https://www.youtube.com"]', 16, 9 ); // Modul Starten
})

Das ist die //main.js// File oder auch //app.js// File. Am Ende wird ein Modul/eine Klasse geladen und gestartet. ==== Beispiel um Module mit IF-Bedingungen laden zu lassen ==== Dieser Code sollte Teil der main.js File. Require.js lädt sonst immer alle Scripte. Das funktioniert nur mit diesem Syntax!


	const page_has_kalender = document.querySelector( '#KalenderEvents' );

	if( page_has_kalender ){
		require( ['meine-module/kalender'], function ( kalendarModule ) {
			// ... Code falls man mit dem Modul was machen will
		});
	}

==== Beispiel für ein Modul ==== Auch diese muss in entsprechenden Folder liegen: ''assets/js/brandgrad/ratioResizer.js''


define( function( require ){

	//const jQuery       = require( 'jquery' );
	//const Mustache     = require( 'mustache' );

	return function( selector, ratio_width, ration_height ){

		/*
			S E T T I N G S
		 */
		let delay_timer = 500; // Window Event soll nur alle 0.5s abgefuert werden (performance)



		/*
			N O D E S
		 */
		let youtube_embeds = document.querySelectorAll( selector );



		/*
			I N I T
		 */
		resize_nodes( youtube_embeds, 16, 9 );



		/*
			E V E N T S
		 */
		var delay;
		window.addEventListener( 'resize', function(){
			clearTimeout( delay );
    		timer = setTimeout( function ( event ) {
				resize_nodes( youtube_embeds, 16, 9 );
			}, delay_timer );
		} )



		/*
			M E T H O D S
		 */
		function resize_nodes( node_list, ratio_width, ration_height ){
			for(let index = 0; index < youtube_embeds.length; index++) {
				resize_node( node_list[index], ratio_width, ration_height );
			}
		}

		function resize_node( node, ratio_width, ration_height ){
			node.style.width    = '100%';
			node.style.maxWidth = '100%';

			let current_width = node.offsetWidth;
			let new_height    = ( current_width / ratio_width ) * ration_height;

			node.style.height = new_height + 'px';
		}

		return {}
	}
})