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

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

La killer app sur iPhone

Hadrien — Sat, 22 Dec 2007 15:12:00 +0100

S'il n'y avait qu'une seule application à installer sur iPhone, ça serait celle-là. MobileScrobbler est un lecteur Last.FM pour iPhone jailbroken qui permet de scrobbler la musique de la partie iPod de l'iPhone en direct via le WIFI ou le EDGE et surtout, d'écouter le streaming Last.FM via WIFI et bientôt via EDGE aussi ! Toute la musique du monde gratuitement et légalement partout avec vous !

Pour ceux qui ne connaissent pas Last.FM, il s'agit d'un réseau social musical qui va scanner en permanence les titres musicaux que vous écoutez (scrobbling) et vous générer des recommandations musicales à votre goût. La deuxième partie de Last.FM est la webradio personnalisée. Grâce à cette base de données scrobblée, Last.FM vous diffusera seulement des morceaux correspondant à ce que vous écoutez d'habitude et vous fera découvrir de nouveaux morceaux correspondants à vos goûts.

Le problème de ce service, c'est qu'il n'était disponible que sur PC/Mac (Windows, Linux, Mac OS X). Mais grâce à Sam Steele, vous pouvez y accéder sur votre iPhone. Pour l'installer, il faudra d'abord jailbreaker son iPhone. La méthode fait un peu peur au premier abord mais est en fait très facile et surtout, réversible sur un iPhone Orange. Une fois le tutorial suivi avec sucès, vous aurez une nouvelle icone "Installer" sur votre iPhone qui vous permettra d'installer en toute facilité toute les applications disponibles sur iPhone dont MobileScrobbler.

L'interface de MobileScrobbler vous proposera de choisir un artiste ou des mot clefs pour lancer votre webradio personnalisée :

La web radio se lancera immédiatement si vous êtes connectés à un point d'accès Wifi (le streaming sur le réseau EDGE ne fonctionne pas, mais j'ai demandé son activation à l'auteur qui a accepté de l'implémenter dans la prochain version. Merci à lui) et vous proposera en plus de l'écoute des morceaux, un descriptif de l'artiste et des boutons pour bannir, "aimer" ou passer au morceau suivant, tout comme sur le lecteur sur PC/Mac :

De plus, si vous lancez MobileScrobbler pendant que l'iPod joue de la musique, non seulement il scrobblera votre musique mais en plus il vous affichera la même page que ci-dessus avec les informations de l'artiste joué par l'iPod !

La version actuelle est déjà très performante et quand on voit ce qui nous attends pour les prochaines versions (accès direct aux paroles, évenements, lecture des playlists des amis…), on comprends rapidement que cette application est indispensable.

En tout cas, c'est grâce à elle que j'ai été convaincu à 100% de l'achat et du jailbreak de mon iPhone. Je conseille à tout les possesseurs d'iPhone de le jailbreak au moins pour cette superbe application !

PS : Le streaming sur EDGE a été rajouté et sera disponible dans la prochaine release \o/

Flock 1.0, le browser 2.0

Hadrien — Sun, 04 Nov 2007 13:51:00 +0100

Flock arrive enfin en version 1.0 après près de deux ans de développement. Flock est un navigateur web bien différent de ses collègues. Ce fork (projet dérivé d'un autre) de Firefox, disponible pour Windows, Mac OS X et Linux apporte une dimension sociale au websurfing. L'interface est pensée pour faciliter l'accès et l'interaction avec les sites sociaux, dit web 2.0 comme Flickr, Youtube ou autre FaceBook. Hormis le fait que les services proposés sont plus ciblés pour les surfeurs américains, on trouve dans ce navigateur des idées très interressantes qui peuvent rendre le surf bien plus intuitif et agréables. Parmi ceux-ci, voici les détails qui m'ont marqué après 5 mn de test :

La Media Bar donne un accès direct aux médias photos et vidéos de Facebook, Flickr, Photobucket, Truveo et Youtube dans une barre latérale du plus bel effet. Vous pouvez voir les médias ou les inclure sur votre blog grâce à la fonctionnalité suivante :
Le WebClipboard. Il s'agit en pratique d'un presse papier multiple en drag'n'drop. Vous pouvez glisser dedans tout ce que se trouve sur le web : images, vidéos, textes, musiques, etc. Vous pouvez ensuite les blogguer ou les glisser sur un autre site web. Flock saura ce qu'il faut garder comme info (url pour une image, balise <object /> pour une vidéo, etc). L'image en tete de ce billet a été intégrée via ce Web Clipboard.
L'accès direct à certains éléments d'une page web. Ne parlons pas des flux RSS qui sont aujourd'hui d'une banalité sans nom et regardons plutot les icones à ses coté. Le bouton de gauche s'active si nous nous trouvons sur une page regroupant plusieurs médias d'un utilisateur comme une playslit Youtube par exemple, et permet d'afficher tout ces médias dans la media bar. Le bouton de droite détecte si un moteur de recherche est disponible dans la page et propose de l'installer.
L'éditeur de blog qui me permet d'écrire ce billet est très facile à configurer même si les plateformes proposées sont toute américaines et qu'on peut regretter l'absence d'Over-Blog Heureusement, on peut se connecter à n'importe quel type de blog proposant le xml-rpc (ici, un dotclear). Une fois le compte configuré, on peut écrire un nouveau billet en un clic dans l'interface de Flock, et réutiliser les medias stockés dans le web clipboard, ou glisser une image de votre bureau vers votr billet qui sera immédiatement uploadé vers votre compte Photobucket ou Piczo, puis inséré.

Je pourrais aussi vous parler de la rapidité avec laquelle se lance l'application, sa légéreté ou son design plus agréable que celui de Firefox. Je pourrais aussi vous rassurer sur le fait que toute les extenstions Firefox sont compatibles avec Flock et que chaque mise à jour de Firefox est intégré à Flock. Mais ça ne sera pas la peine, vous aurez tout comme moi déjà installé ce navigateur pour remplacer le panda rouge Qu'en pensez vous ?

Blogged with Flock

Tags: navigateur, browser, web2.0, Flock, Firefox, Mozilla, open source