Wer das Beispiel aus dem Artikel von letzter Woche ausprobiert hat, dem wird vielleicht eine Kleinigkeit aufgefallen sein. Beim ersten Klick auf die Sessionüberschrift wird die Sessionbeschreibung sichtbar. Klickt man anschließend noch einmal auf die Sessionüberschrift, passiert "anscheinend" nichts. Wir hatten es so programmiert, dass sich die Sessionbeschreibung öffnen sollte. Das sie schon offen ist, ist lediglich ein kurzes Flackern zu sehen. Wir werden die Programmierung so anpassen, dass die Funktion sich den Zustand merkt und die Sessionbeschreibung entweder anzeigt oder wieder verbirgt.

Der Code von letzter Wocher sieht wie folgt aus:

//Loads fx (animation) package
dojo.require("dojo.fx");
//Loads the behavoir package
dojo.require("dojo.behavior");

//Object to hold all description toggler
var descriptionTogglerList = new Object();

function registerDescriptionToggle(headlineNode) {
		//calculate an id for the headline
		var headlineID = "head" + headlineNode.parentNode.id ;
		//and assign it to the element
		headlineNode.id = headlineID;
	 
		//add style to title for pointer
		dojo.style(headlineID, "cursor", "pointer");
	 
		//retrieve the description id from the parent node
		var descriptionID = "desc" + headlineNode.parentNode.id ;				
	 
		//create a new toggler
		var toggler = new dojo.fx.Toggler({
				node: descriptionID,
				showFunc: dojo.fx.wipeIn,
				hideFunc: dojo.fx.wipeOut
		});
		//hide the description
		toggler.hide();
			 
		//store the toggler in the list
		descriptionTogglerListheadlineID = toggler;
}

//shows a description
function showDescription(headlineID){
				descriptionTogglerListheadlineID.show();
}

//hide a description
function hideDescription(headlineID){
				descriptionTogglerListheadlineID.hide();
}


dojo.addOnLoad(function(){				
	// search for all headlines and register a toggler	
	dojo.query("div.session h1").forEach(registerDescriptionToggle);

	// add the behavior to the sessions headlines to open the description on click
	dojo.behavior.add({
			"div.session h1": {
				onclick: function(evt){
					var headlineID = evt.target.id;
					showDescription(headlineID);
			}
		}
	});

	// add the behavior to the description to close on click
	dojo.behavior.add({
			"div.session div.sessionDescription": {
				onclick: function(evt){
					var descriptionID = evt.target.id;
					var headlineID = descriptionID.replace(/^desc/g, "head");
					hideDescription(headlineID);
			}
		}
	});

	dojo.behavior.apply();		
});

Wenn man sich die API einmal näher anschaut, wird man feststellen, dass das dojo-Toggler-Objekt leider keine Eigenschaft besitzt, aus der wir auslesen könnten, ob das entsprechende Element zur Zeit sichtbar oder verborgen ist. Aus diesem Grund müssen wir uns den aktuellen Status selber merken.

Dazu speichern wir nicht mehr das Toggler-Objekt für jede Sessionüberschrift direkt in dem Objekt descriptionTogglerList. Sondern wir erzeugen uns ein Objekt, welches nebem dem Toggler auch den aktuellen Status vorhält.

//create new object with the toggler and store it in the list
descriptionTogglerListheadlineID = {
		toggler: toggler,
		isVisible: false
};

Jetzt müssen wir nur noch die Funktionen zum Anzeigen und Verbergen der Sessionbeschreibungen anpassen.

//shows a description
function showDescription(headlineID){
				descriptionTogglerListheadlineID.toggler.show();
				descriptionTogglerListheadlineID.isVisible = true;
}
//hide a description
function hideDescription(headlineID){
				descriptionTogglerListheadlineID.toggler.hide();
				descriptionTogglerListheadlineID.isVisible = false;
}
//toggle a description
function toggleDescription(headlineID){
				if (descriptionTogglerListheadlineID.isVisible){
								hideDescription(headlineID);								
				} else {
								showDescription(headlineID);
				}				
}

Mit dieser kleinen Anpassung verhält sich unser Beispiel doch eher so, wie man es erwarten würde.

In der zu dieser Artikelserien gehörenden Beispieldatenbank finden sie den Inhalt dieses Artikels in der Maske "webSpeedAgendaing-Step 5|SpeedAgendaing-5" und der JavaScript Bibliothek "SpeedAgendaing-Step5.js".

Im nächsten Artikel werden wir uns mit dem Dialog-Dijit beschäftigen. Ziel wird es sein, Informationen zum Referenten nachzuladen und in einem Dialog darzustellen.