Menu

DES OBJETS JAVASCRIPT INSTANCIÉ AUTOMATIQUEMENT EN FONCTION DU TEMPLATE HIERARCHY

juin 12, 2017 - Tous nos articles

Nous allons mettre en place un système d’initialisation d’objet javascript automatiquement en fonction du template hierarchy de WordPress, ou pour le dire plus simplement en fonction de la page sur laquelle on se trouve.

Par exemple si les objets javascript existent, peuvent être appelés automatiquement Single.init(), PageTemplatePageAccueil.init(), Postid50.init(), LoggedIn.init(), …

Le script se base sur les class css renvoyée par la fonction get_body_class, il faut donc impérativement utiliser ce petit bout de code dans votre header :


<body class="<?php echo join(' ', get_body_class()); ?>">

Passons au Javascript et commençons par récupérer les class du body sous forme de tableau


//On récupère le noeud dom <body>
var bodyDom = document.getElementsByTagName('body')[0];

//On récupère les class sur le body
var htmlClass = bodyDom.className;

//On coupe au niveau des ' '
htmlClass = htmlClass.split(' ');

On parcoure ensuite les différents class css contenu dans notre tableau et on instancie nos objets.

//Pour chaque valeur (IE9+)
htmlClass.forEach(function(element,index,array) {
	
	//On instancie un objet avec la string
	var currentObject = window[element];
	
	//Si cet objet existe
	if(currentObject != undefined){

		//Alors on l'initialie
		currentObject.init();
	}
});

Vous êtes maintenant capable d’instancier les objets nécessaires à chaque de vos pages, par exemple la page d’accueil :


var home = new (function()
{
	// Accès à l'objet
	var that = this;

	//Initialisation de l'objet
	this.init = function(){
		console.log('home init OK');
	};
});

Pour aller un peu plus loin, on va regrouper créer un objet Bootstrap et utilisé du camelCase (c’est plus joli ! /troll).


/**
 * Pour la home page
 */
var Home = new (function()
{
	// Accès à l'objet
	var that = this;

	//Initialisation de l'objet
	this.init = function(){
		console.log('Home init OK');
	};
});

/**
 * String Helper
 */
var StringHelper = new (function(){});

/**
 * Camelize string
 * @param  string str 
 * @return string
 */
StringHelper.camelize = function(str)
{
	return (str + "").replace(/-\D/g, function(match) {
		return match.charAt(1).toUpperCase();
	});
};

/**
 * Capitalize first letter
 * @param  string str 
 * @return string
 */
StringHelper.capitaliseFirstLetter = function(str)
{
	return str.charAt(0).toUpperCase()+str.slice(1);
};

/**
 * Boostrap
 */
var Bootstrap = new (function()
{	
	// Accès à l'objet
	var that = this;

	//Init
	this.init = function() 
	{
		//Appel d'objet dynamic
		that.dynamicClassCall();
	},
	
	/**
	 * Appel d'objet dynamique
	 */
	this.dynamicClassCall = function ()
	{
		//On récupéere le noeud dom <body>
		var bodyDom = document.getElementsByTagName('body')[0];

		//On récupère les class sur le body
		var htmlClass = bodyDom.className;
		
		//On camélise 
		htmlClass = StringHelper.camelize(htmlClass);
					
		//On coupe au niveau des ' '
		htmlClass = htmlClass.split(' ');

		//Pour chaque valeur
		htmlClass.forEach(function(element,index,array) {
						
			//On capitalize la première lettre
			var value = StringHelper.capitaliseFirstLetter(element);
						
			//On instancie un objet avec la string
			var currentObject = window[value];
						
			//Si cet objet existe
			if(currentObject != undefined){

				//Alors on l'initialie
				currentObject.init();
			}
		});
	};
});

//Initialisation du bootstrap
Bootstrap.init();

A vous d’organiser toussa dans des fichiers distincts, compiler, tester, minifier, …