Introducing DOCJSLIB Version 2.0: Event Handling - Doc JavaScript

onClick Event Handling

As we mentioned earlier, your second challenge in writing DOCJSLIB-based application is the onClick event handler. By now, you should know that DOCJSLIB calls this event handler in a different name, handleImageClick(). Most of your application's ideas and concepts would be implemented in this function. In our Pop-out Elements application, we define it as follows:

function handleImageClick(id, clickParam1, clickParam2) {
  var imgBoxID = id + "Box";      // derive box id
  var visibility = getVisibility(imgBoxID);      // check box visibility
  visibility = !visibility;                      // alternate visibility
  var elementWidth = getWidth(imgBoxID);         // get box width
  var distanceFromLeft = (visibility) ? elementWidth : 0; // set image position
  setPosFromLeft(id, distanceFromLeft);          // move image
  setVisibility(imgBoxID, visibility);           // set box visibility
  maxZ++;                                        // last one always on top
  setZposition(id,  maxZ);                       // set image Z
  setZposition(imgBoxID, maxZ);                  // set box Z
}

The function has three parameters. The image's ID and two other parameters that were passed from the main application. In our example, we don't use these parameters, clickParam1 and clickParam2.

Here is a run down of the function:

• var imgBoxID = id + "Box";. This line derives the paired box's ID. The automatic derivation is by concatenating the "Box" string to the image's ID. The box's ID is now stored in imgBoxID, and it will be used later to reference the box's properties.
• var visibility = getVisibility(imgBoxID);. This line gets the visibility property of the box.
• visibility = !visibility;. This line reverses the box's visibility property. If it was true, this line switches it to false, and vice versa. This line is the crux of the popping effect.
• var elementWidth = getWidth(imgBoxID);. This line gets the box's width in pixels.
• var distanceFromLeft = (visibility) ? elementWidth : 0;. This line computes the index tab's distance from the left edge of the window. If the box is exposed (visibility is true), the tab is positioned elementWidth pixels from the left of the window. If the box is hidden (visibility is false), the tab is aligned with the left edge of the window (distance is 0).
• setPosFromLeft(id, distanceFromLeft);. This line sets the index tab image's position from the left edge of the window, according to the distance computed above.
• setVisibility(imgBoxID, visibility);. This line sets the box's visibility, after the switch above.
• maxZ++;. This line increments the highest Z index. As explained earlier in this column, every click on an index tab puts it on top of the images' heap. The next line assigns this value to the index tab image.
• setZposition(id, maxZ);. This line sets the index tab's Z index.
• setZposition(imgBoxID, maxZ);. This line sets the Z index of the box to the same value as its paired index tab image.

Make yourself comfortable with this function. You will spend many hours writing it for your applications.