The jsLib software is designed for producing complex web presentations with a cascading menu for navigating through individual slides. A presentation can have content coming from many different web pages. This web presentation is a simple example. Its content comes from three different web pages.
This presentation has two panes. On the right is the content pane. It contains the text that you are reading right now. On the left is a navigation pane. It contains a menu.
At this moment, the menu shows that "Purpose" is the selected menu item. When a different menu item is selected the content displayed in the content pane will change. For some menu items ("Files", for example) a new menu will appear below the original menu. Generally, the menus in the navigation pane form a menu cascade.
Menus in the menu cascade remember their selected menu item even when they are not selected. For example, suppose you select "Files" in the top menu. A new menu should appear in the cascade. If you select "JavaScript" in the new menu, then "Purpose" in the top menu, then go back to "Files" in the top menu, you will find that "JavaScript" is still selected.
The currently implemented functionality in jsLib works correctly on the following browsers:
The only other browser on which jsLib has been tested is Internet Explorer. It does not work there.
jsLib layout involves three singleton objects:
VisualU is a singleton object that educates DOM elements, usually of type HTMLDivElement, to be visuals. A visual will automatically size itself to fill any pane that it is placed into. VisualU can also create a visual from scratch.
Logging of student graduation events for visuals can be turned on by setting VisualU.debug.GRADUATION or Education.debug.GRADUATION to true.
VisualU.teach(element) teaches element to be a visual.
VisualU.create() returns a new HTMLDivElement visual.
PaneU is a singleton object that educates DOM elements, usually of type HTMLDivElement, to be panes. A pane represents a rectangular region of the browser window. It has no appearence on its own, but can contain a visual. PaneU can also create a pane from scratch.
Logging of student graduation events for panes can be turned on by setting PaneU.debug.GRADUATION or Education.debug.GRADUATION to true.
PaneU.teach(element, name) teaches element to be a pane. The parameter name is used to identify element in its toString() method.
PaneU.create(name) returns a new HTMLDivElement pane whose identifier is name.
Layout is a singleton object that lays out visuals in a browser window. After Layout.initialize() is invoked, Layout always has a current pane. The current pane can be accessed as Layout.currentPane. It will only be null if all of the browser window space has been allocated.
A visual can be added to the current pane by invoking one of the methods putLeft(), putRight(), putTop(), putBottom(), or putRest() with the visual as the first parameter. The first four of these methods have CSS length parameters to specify one of the dimension of the added visual. These methods will set Layout.currentPane to be a new pane that occupies the unused window space. The putRest() method gives all of the current pane space to its visual parameter and sets Layout.currentPane to null.
Client code can retain a copy of Layout.currentPane for future use. A new visual can be placed in the pane by invoking setVisual() with the pane as the first parameter and the new visual as the second parameter.
Invokations of the setVisual() method can be logged by setting Layout.debug.SET_VISUAL to true. Since all of the "put" methods invoke setVisual, their invokations will also be logged.
Changes to Layout.currentPane can be logged by setting Layout.debug.CURRENT_PANE to true.
Layout.initialize() configures document.body to be the root pane and sets Layout.currentPane to be document.body.
Layout.putLeft(visual, width) sets the width of visual to width and adds it into the left side of the current pane. Then the current pane is replaced by a new pane that occupies the leftover window space.
Layout.putRight(visual, width) sets the width of visual to width and adds it into the right side of current pane. Then the current pane is replaced by a new pane that occupies the leftover window space.
Layout.putTop(visual, height) sets the height of visual to height and adds it into the top side of the current pane. Then the current pane is replaced by a new pane that occupies the leftover window space.
Layout.putBottom(visual, height) sets the height of visual to height and adds it into the bottom side of the current pane. Then the current pane is replaced by a new pane that occupies the leftover window space.
Layout.putRest(visual) makes visual occupy the entire current pane. Then the current pane is replaced by null.
Layout.setVisual(pane, visual) replaces the old visual of pane by visual.