In unserem Podcast diskutiert Thomas Bahn über Nutzen, Anwendungen und Erfahrungen aus den Bereichen Chatbots und Künstliche Intelligenz. Mehr erfahren

de · en

dojo und Notes: Artikel 7 - dojo.fx.Toggler - Objektzustand speichern

von Bernd,
assono GmbH, Standort Hamburg,

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.

Fachbeitrag HCL Domino JavaScript Entwicklung

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Sie haben Interesse an diesem Thema?

Gerne bieten wir Ihnen eine individuelle Beratung oder einen Workshop an.

Kontaktieren Sie uns

Weitere interessante Artikel

Sie haben Fragen?

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Gerne erstellen wir eine individuelle Demo für Sie.

assono GmbH

Standort Kiel (Zentrale)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 416
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de