dojo and Notes: Article 7 - dojo.fx.Toggler - Save the Object State

by Bernd Hort,
assono GmbH, Standort Hamburg,


dojo-Logo Those who have tried the example from last weeks article might have noticed a little something. When you first click on the session title, the session description while come visible. Then clicking again on the session title "apparently" nothing happens. The code behind the onClick event was just for opening the session description. Because it is already open, there is only a brief flicker to be seen. We will adjust the code so that the function remembers the current state and either displays or hides the session description.


This is the code from last week://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();    
});

If we take a closer look to the API we will discover that there is no property in the dojo Toggler object representing the current state of the toggler. Because there is no other way to find out if the corresponding element is visible or not we have to take care about it ourselves.

Instead of storing the Toggler object for every session title directly in the object descriptionTogglerList, we create a new object, which has two properties. One property for the toggler and one for the current state.//create new object with the toggler and store it in the list
descriptionTogglerListheadlineID = {
    toggler: toggler,
    isVisible: false
};

We also have to modify the functions for hiding and showing the session descriptions.
//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);
        }        
}
With this small adjustment our sample behaves a little bit more as one would expect.

In the sample database belonging to this series of articles you can find the content of this article in the form "webSpeedAgendaing-Step 5 | SpeedAgendaing-5" and the JavaScript library "SpeedAgendaing-Step5.js".

In the next article we will talk about the dialog dijit. The aim will be to reload and display information about the speakers in a dialog.

Technical article IBM Domino JavaScript Development

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

Do you want an individual solution? Contact us

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

We don’t sell your data. 100% guaranteed. See: Privacy Policy
assono GmbH

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

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 402

E-Mail adresses:
contact@assono.de
bewerbung@assono.de