Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - projet

Menu en colonne en Javascript

Hadrien — Tue, 12 Feb 2008 12:55:00 +0100

Xylpho voulait pour son site, un menu en colonne comme le fait Mac OS X :

Ce menu devait être à la fois accessible, référençable et dynamique. Donc, pas de flash ! Javascript à la rescousse. Je lui ai donc codé une classe JS qui construit un menu en colonne à partir de listes imbriquées…

En gros, tout le plan du site est intégré dans la page et structuré avec des ul et des li imbriqués :

Voir le code HTML

<ul id="menuCol">
	<li>
		2005
		<ul>
			<li>
				July
				<ul>
					<li>
						27
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=4">
									Joulie Interface
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				September
				<ul>
					<li>
						29
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=11">
									Version Texte
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				October
				<ul>
					<li>
						29
						<ul>
							<li class="selected">
								<a href="http://www.alti.info/post/2008/02/10/?id=18">
									Qjelt Octobre en VideoCast
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				November
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=19">
									www.alti.info
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				December
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=20">
									OW Pick !!!
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Ensuite, ma classe Javascript va masquer et afficher les bons ul selon les clicks sur les li. Le menu se crée en créant un nouvel objet de la sorte :

<script type="text/javascript" charset="utf-8">
//<![CDATA[
	var test = new MenuCol.Menu('menuCol');
	MenuCol.Item.open();
//]]>
</script>

La statique open() permet d'initialiser le menu sur le li qui contient la classe 'selected' afin de revenir sur le menu correspondant après un chargement de page.

Tout ceci fonctionne grâce au script MenuCol.js, que je rends disponible sous licence GPLv3. Faites en ce que voulez, mais souvenez vous de citer mon nom.

Voir le code Javascript

// Global object
var MenuCol = {};

/**
 * Flag to stop propagation of event
 * @type Boolean
 */
MenuCol._stopPropagation = false;

/**
 Shortcut to document.getElementById
 * @param {String/Element} id Element or Element's id
 * @returns Element
 */
MenuCol.get = function(id)
{
	var elmt = document.getElementById(id);
	if (elmt)
	{
		return elmt;
	}
	return id;
};

// Objects collection
MenuCols = new Array();

/**
 * Menu class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Menu = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Items inside Menu
	 * @type Array
	 */
	this.items = new Array();
	
	MenuCols.push(this);
	
	this.init();
}
MenuCol.Menu.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Item object with all li children
		var lis = this.element.getElementsByTagName('li');
		for (var i = 0; lis[i]; i++)
		{
			if (lis[i].parentNode == this.element)
			{
				var item = new MenuCol.Item(
					lis[i]
				);
				item.parent = this;
				this.items.push(
					item
				);
			}
		}
	},
	/**
	 * Hide menu
	 */
	hide: function()
	{
		this.element.style.display = 'none';
	},
	/**
	 * Show Menu
	 */
	show: function()
	{
		this.element.style.display = 'block';
	}
};

MenuCol.Items = new Array();
/**
 * MenuCol.Item class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Item = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Submenu
	 * @type MenuCol.Menu
	 */
	this.submenu = null;
	
	MenuCol.Items.push(this);
	
	this.init();
}
MenuCol.Item.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Menu object with all UL children
		var uls = this.element.getElementsByTagName('ul');
		for (var i = 0; uls[i]; i++)
		{
			if (uls[i].parentNode == this.element)
			{
				this.submenu = new MenuCol.Menu(
					uls[i]
				);
				this.submenu.parent = this;
				this.submenu.hide();
			}
		}
		
		// Add on click Event on element
		this.element.parent = this;
		this.element.onclick = this.onclick;
	},
	/**
	 * onclick event
	 */
	onclick: function()
	{
		// Exec only on first fire
		if (!MenuCol._stopPropagation)
		{
			// If item hasn't submenu, we don't do anything
			if (!this.parent.submenu)
			{
				return true;
			}
			
			// Hiding all sub menus of same level
			for (var i = 0; this.parent.parent.items[i]; i++)
			{
				if (this.parent.parent.items[i].submenu)
				{
					this.parent.parent.items[i].submenu.hide();
					this.parent.parent.items[i].activate(
						true,
						true
					);
				}
			}
			
			// …and their children
			for (i = 0; this.parent.submenu.items[i]; i++)
			{
				this.parent.submenu.items[i].activate(true);
				if (this.parent.submenu.items[i].submenu)
				{
					this.parent.submenu.items[i].submenu.hide();
				}
			}
			
			// Show corresponding sub menu
			this.parent.submenu.show();
			
			// And its parents
			var parent = this.parent ?
				this.parent :
				null;
			while (parent)
			{
				parent.parent.show();
				parent.activate(
					false,
					false
				);
				parent = parent.parent ?
					parent.parent.parent :
					null;
			}
			
			// Activate item
			this.parent.activate(
				false,
				true
			);
			
			// Prevents event propagation on parent's elements
			MenuCol._stopPropagation = true;
			setTimeout(
				function()
				{
					MenuCol._stopPropagation = false;
				},
				20
			)
		}
	},
	/**
	 * activate element
	 * @param {Boolean} oupa True to deactivate
	 */
	activate: function(oupa, submenu)
	{
		// Activate item
		if (!oupa)
		{
			this.element.className = 'selected';
		}
		else
		{
			this.element.className = '';
		}
		// Activate submenu
		if (submenu)
		{
			if (!oupa)
			{
				this.submenu.element.className = 'selected';
			}
			else
			{
				this.parent.element.className = '';
			}
		}
	}
};

/**
 * Open menu on activated li. Will open on li with 'selected' class
 */
MenuCol.Item.open = function()
{
	for (var i = 0; MenuCol.Items[i]; i++)
	{
		if (MenuCol.Items[i].element.className == 'selected')
		{
			if (MenuCol.Items[i].submenu)
			{
				MenuCol.Items[i].element.onclick();
				
			}
			else
			{
				MenuCol.Items[i].parent.parent.element.onclick();
				MenuCol.Items[i].activate();
			}
		}
	}
}

Voici un exemple du résultat qui affiche les archives de ce blog.
Télécharger le script

Hadrien.eu V2

Hadrien — Sat, 21 Jul 2007 19:21:00 +0200

Je viens de mettre en ligne la version 2 de ma home page : Hadrien.eu !

Même si le contenu est pas forcément très intéressant (CV, screenshots de créations web, etc), le site reste à voir de par sa conception. Réalisé en Ajax à l'aide de YUI, ce site est digne d'une animation flash avec l'accessibilité en plus. Je vous invite à y jeter un œil

Hadrien.eu V2

EDIT : Hadrien.eu a été sélectionné pour participer au Concours Cascading Style Summer Refresh 2007 \o/ Je vous préviendrais pour venir voter en masse pour lui

Ça fuse !!!

Hadrien — Fri, 26 Jan 2007 17:19:22 +0000

Je viens de découvrir FUSE. FUSE est un Système de fichier virtuel qui permet, à l'aide de plugin, d'ajouter très facilement d'autres systèmes de fichiers à votre système sans toucher à votre kernel. Un portage pour Mac OS X est désormais disponible chez Google Code et nous permet d'utiliser les systèmes de fichiers SSHFS et Spotlight FS.

En pratique, SSHFS permet de monter un dossier SSH dans le finder et de manipuler et éditer les fichiers en toute transparence. Très pratique pour travailler sur un serveur de dev avec TextMate. Toute la hiérarchie m'apparaît comme étant en local. (Faut que je teste le plugin SVN de TextMate :D).
Le second, Spotlight FS, est censé permettre d'avoir un accès plus complet aux dossiers intelligents de Spotlight. Là où les "smart folder" de Mac OS X ne nous permettent que d'afficher les résultats de la requête, un dosser Spotlight FS affiche les résultats comme étant un vrai dossier contenant de vrais fichiers… en théorie. Chez moi ça a planté. Peut être dans une prochaine version…

Tiens, d'ailleurs, Ce qui pourrait être énorme, ce serait un FTP FS qui nous permettrait enfin sur Mac d'avoir accès au FTP en écriture dans le Finder !

TextMate et Javascript

Hadrien — Sun, 10 Sep 2006 17:10:17 +0000

Hier, j'ai fait quelque chose que je n'avais encore pratiquement jamais fait : j'ai acheté une licence logicielle !!!

Ce logiciel, c'est TextMate. Superbe éditeur texte avec des fonctions originale et ultra pratiques. Je conseilles à tout les développeurs macusers de l'essayer ! En plus, il est pas très cher : 39$ seulement.

Ce nouvel outil tombe bien car je viens de me lancer dans un nouveau projet afin de mettre en pratique tout ce que j'ai appris en Javascript Objet depuis l'obtention de mon BTS et mon nouvel emploi.
Ce nouveau projet est une librairie javascript permettant de transformer un formulaire standard en formulaire web2.0 très facilement. Écrite en full object, cette librairie sera compatible avec tout les navigateur modernes (et même les vieux... IE...) et sera entièrement personnalisable.

Et bien sur, tout ceci sera distribué avec une licence libre. Laquelle, je ne sais pas encore. Sûrement une GPL ou une LGPL.

Je lance un appel ! J'ai des petits problèmes de compatibilité avec Safari. Celui ci plante de façon très étrange sur certains événements de ma librairie. Je cherche donc quelqu'un de callé en JS Object et qui connait bien les bugs de Safari pour me donner un petit coup de main Contactez moi par IM :

AIM/MSN : hadrienl@mac.com
Jabber : moi@im.hadrien.eu

Je posterais une démo quand les travaux auront bien avancé.