Navigation data

The several pieces of data used to control the links and appearance of the navigation bar are collectively called NavData. First and foremost are the links. Secondary but required are the number of links to show in a row, the colors to use, css identifiers and classes and styles and transition parameters. Finally, there is optional html. This data is stored in one hierarchal object (i.e. the object contains other objects). NavData can be defined in a single object literal or object constructor.

Let's work from the outside in.

navData

Navigation data (NavData) can can be any function or object, however it must contain certain properties in order to be accepted by the Navigation Bar Renderer. NavData must have a property groups

group

groups is an array of group objects. The objects can be instances of any function, however they must contain certain properties in order to be accepted by the Navigation Bar Renderer. Each group must have a property links

link

links is an array of link objects. The objects can be instances of any function, however they must contain certain properties in order to be accepted by the Navigation Bar Renderer.

Every link has two components; text, the text to show in the browser and destination, the place to go when the text is clicked on.

Text and Destination templates: patterns with tokens

The way you enumerate your link information depends on how your pages are named.

Your link could have properties text and dest and you would be done with it.

But what if you have several like named destinations and almost similar texts? Or when the destination is almost the same as the text ? That's when link patterns with tokens can be used. Some examples shows it best.

  ruler - 800 pixels

text dest
jan jan-2003.html
feb feb-2003.html
mar mar-2003.html
...  

Example 1 has pattern
text: text, dest: text-2003.html

text dest
Step 1 step1.html
Step 2 step2.html
Step 3 step3.html
...  

Example 2 has pattern
text: Step n, dest: stepn.html

When you have patterned link information you can specify a replacement template (at the group level) in properties textTemplate and destTemplate.

A replacement template is a string containing tokens that are replaced at link resolution time. A token is part of the string between double pound signs.

Example1: destTemplate = "##text##-2003.html"
Example2: destTemplate = "step##n##.html"
textTemplate = "Step ##n##"

Link resolution time is the part of the program that tries to figure what the text and destination are. If a link is in a group that has a textTemplate or destTemplate property, then the text and dest will be constructed based on the template. Each token in the template will be extracted by searching for something between a pair of double pounds. Then the token will be used as property of the link object to obtain the value that should replace the token in the template.

If the templates are not present, then the link itself must have a text or dest property.

Example 1, part of an object literal defining the data: 

, destTemplate = "##text##-2003.html"
, links:
  [ { month:'jan'
    , month:'feb'
    , month:'mar'
    , ...
    }
  ]

Example 2, part of an object literal defining the data: 

, destTemplate = "step##n##.html"
, textTemplate = "Step ##n##"
, links:
  [ { n:1
    , n:2
    , n:3
    , ...
    }
  ]

Sample of code that does token replacement

var reToken = /##(.+)##/g
var token, re, tokenValue

if (textTemplate) {
  while ((token = reToken.exec(textTemplate)) != null) {
    re = new RegExp (token[0], 'g')
    token = token[1]
    tokenValue = link[token]
    if (tokenValue == undefined)
      return renderError ('Problem with ' + textTemplate + ', ' + token + ' is not a property of the link.')

    textTemplate = textTemplate.replace (re, link[token])token
}}
else
    textTemplate = coalesce (link.text, '')

Properties of hierarchical objects

navData, group and link objects form a hierarchy. When preparing a link for rendering, various properties are searched parentward to obtain information used during rendering. For example, the overColor property controls what color a cell background changes to when a mouse goes over the cell. If a link has overColor, that color will be used. If the link does not have overColor, then the group will be checked for overColor. If present, it will be used, otherwise the navData overColor will be used. I call this coalescent inheritance, obtaining a property value by looking at parent properties when necessary.

  function coalesce ()
  { // return first defined argument
    for (var i=0; i<arguments.length; i++) {
      if (arguments[i] != undefined) return arguments[i]
    }
  }

The more you let things get inherited, the less you have to specify. If you had the patience to lay it out, you could have every cell change and fade to different colors at different rates... But not a consistent UI does that make.

link properties

A link can have these properties:

Used for link cell
text not required if group has textTemplate
dest not required if group has destTemplate
textTemplate inherits from group, do not normally specify at link level
destTemplate inherits from group, do not normally specify at link level
id ID="id" , think css
klass CLASS="klass", inherits from group.linkClass
style STYLE="style", inherits from group.linkStyle
atClass inherits from group.linkAtClass
atStyle inherits from group.linkAtStyle
outColor inherits from group, mouse out background color
overColor inherits from group, mouse over background color
duration inherits from group, duration (ms) of overColor to outColor transition
steps inherits from group, number of interpolation steps
token required if group has textTemplate or destTemplate

group properties

A group can have these properties:

Used for group cell
text If present a separate cell will be rendered for the group 'description'
dest If present the 'description' cell will contain a hyperlink to dest
id ID="id" , think css
klass CLASS="klass", inherits from navData.groupClass
style STYLE="style", inherits from navData.groupStyle
startNewRow Each group gets it's own row(s). [ = 1 | yes | true ]
inherits from navData.groupsStartNewRow
Used by link
textTemplate inherits from navData
destTemplate inherits from navData
linkClass inherits from navData
linkStyle inherits from navData
linkAtClass inherits from navData
linkAtStyle inherits from navData
outColor inherits from navData
overColor inherits from navData
duration inherits from navData
steps inherits from navData

navData properties

A navData can have these properties:

Used for nav bar table
id ID="id" for table, think css
klass CLASS="klass" for table
style STYLE="style" for table
postHTML Additional HTML placed directly after the navigation bar
Used by group
groupClass
groupStyle  
maxItemsPerRow Set to 1 to get a vertical bar
groupsStartNewRow Does each group gets it's own row(s)? [ = 1 | yes | true ]
Used by link
textTemplate
destTemplate
linkClass
linkStyle
linkAtClass
linkAtStyle
outColor
overColor
duration
steps

This is the navData for the navBar. There are some things here not yet discussed. The navData is defined in a separate JavaScript file and is included in your HTML in the HEAD tag. Thus the javascript writes a STYLE tag into the HEAD and is utilized when the page draws the nav bar rendered by invoking NavBar(NavBarLinks) function.

//--------------------------------------------------------------
// javascript generated css for nav bar
// Note: #NBLINKS corresponds to this.id = 'NBLINKS' in NavBarLinks()
//

css = " \
table#NBLINKS \
{ \
; border-collapse:collapse \
; margin-left:5px \
; margin-right:16px \
; width:100% \
; font-family: sans-serif \
; font-size:80% \
; border:0 \
} \
\
table#NBLINKS tr td \
{ \
; text-align:center \
; border: 1px solid #444444 \
; } \
\
table#NBLINKS tr td.Link \
{ \
; b-order: 1px solid #AAA \
} \
table#NBLINKS tr td.Here \
{ \
; b-order: 1px solid #CCC \
; font-weight:bold \
; background-color: #92B7E2 \
; color: #000000 \
} \
"

document.write ('&lt;STYLE TYPE="text/css">' + css + '&lt;/STYLE>')


//--------------------------------------------------------------
function NavBarLinks ()
{
  this.id = 'NBLINKS'           // use NBLINKS in css specifiers

  this.groups =
  [
    { linkClass:'Link'
    , links:
      [ { i: '' }
      , { i: 2 }
      , { i: 3 }
      , { i: 4 }
      , { i: 5 }
      ]
    , textTemplate: "Nav ##i##"
    , destTemplate: "NavigationBar##i##.html"
    }
  ]

  this.outColor  = "#FFFFFF"   // mouse out background color
  this.overColor = "#20B153"   // mouse over background color

  this.linkAtClass   = "Here"  // use Here in css specifiers
}

Comments or questions ? Contact Richard A. DeVenezia