smalltooSNORTYVILLE ... How-tos, Reviews, & Pop Culture Fun!

Copyright © Snortyville. All rights reserved.
Unauthorized copy of content without written permission is strictly prohibited

New: In the Box: Dungeon Twister Review, In the Box: Axis and Allies Miniatures Review, The Mist, Anita Blake Comics, Vampire Hunter Reader’s Guide, Ratatouille

 

 

SNORTYWARE 2 by J.

Using Awk To Generate A Javascript Menu

On the site, we’ve been trying to implement a simple Javascript menu that can dynamically show whatever content the person is interested in. Space is saved and there’s more room to put text on a page.

The problem with the approach is that it’s hard to actually generate the menus if you have to write all of the Javascript by hand, especially in the case where you may have 20 or more entries in the menu (like I’m sure we’ll have in the Dresden Files Concordance.

The way we solved this problem was to 1) find a Javascript example that was suitable for our needs and
2) find a way to automatically generate the Javascript given a text input that could be as simple as a text file in notepad or as sophisticated as a text export from Excel.

Enter the ubiquitous awk script. As you may have been able to tell already, I enjoy using awk quite a bit, and since it is portable on both Windows and Unix platforms, I don’t have to worry about programming it again for each one.

In this case, I have a section of HTML/CSS that is going to be in every Javascript that I generate. This section can be written in the “BEGIN” portion of the awk script.

This Javascript example was found on the Javascriptworld website (www.javascriptworld.com/scripts/index.html). Look for Chapter 15: User Interface Design With Javascript; it is the second entry in that section (Sliding menus)

The BEGIN portion of the awk script looks like this:

BEGIN{
print("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\">")
print("<html xmlns=\"http://www.w3.org/1999/xhtml\">")
print("<head>")
print("  <title>Title</title>")
print("  <script type=\"text/javascript\" language=\"Javascript\">")
print("    <!-- Hide script from older browsers")
print("")
print("    function toggleMenu(currMenu) {")
print("      if (document.getElementById) {")
print("          thisMenu = document.getElementById(currMenu).style")
print("          if (thisMenu.display == \"block\") {")
print("                thisMenu.display = \"none\"")
print("          }")
print("          else {")
print("                  thisMenu.display = \"block\"")
print("          }")
print("          return false")
print("      }")
print("      else {")
print("            return true")
print("      }")
print("    }")
print("    // End hiding script-->")
print("    </script>")
print("    <style type=\"text/css\">")
print("    <!--")
print("    .menu  {display:none; margin-left:20px}")
print("    -->")
print("    </style>")
print("</head>")
print("<body bgcolor=\"#FFFFFF\">")
print("<h2>"name"</h2>")
pagecount=1
}


The BEGIN portion of the script is called when the script is first executed and prints the above section only once. The script then will take text input line by line and produce the dynamic portions of the Javascript. Right now, the script takes a line of input and uses that as the clickable portion of the menu. It then reads the next lines until it comes to a line with an <end> tag, which tells it to stop reading for that entry in the menu. The body of the awk script looks like this:

{
print("<h3>")
print(" <a href=\"page"pagecount".html\" onclick=\"return toggleMenu(\'menu"pagecount"\')\">"$0"</a>")
print("</h3>")
getline
print("<span class=\"menu\" id=\"menu"pagecount"\">")
while ($0 !~ /<end>/)
{
  print("    "$0"<br \/>")
  getline
}
print("</span>")
pagecount++
}


The END portion of the awk script just prints out some HTML at the end to finish off the Javascript. It’s shown below

END{
print("<\/body>")
print("<\/html>")
}

So if we have the following text to place in a menu:

Little Miss Sunshine:
Funny story of a dysfunctional family and their adventures while trying to make it to a beauty
pageant
Three Stars
<end>
Snakes on Plane:
Way overhyped B-movie about...Snakes on a plane. Did not deserve the attention it got
It was fun to watch, but that’s about it.
Two Stars!
<end>

The menu should act like the following
 
Title

The Movies

Little Miss Sunshine:

Funny story of a dysfunctional family and their adventures while trying to make it to a beauty
pagent
Three Stars

Snakes on Plane:

Way overhyped B-movie about...Snakes on a plane. Did not deserve the attention it got
It was fun to watch, but that's about it.
Two Stars!

The script is called with the command “gawk -v name=<Menu Name> -f <awkscript>.awk <filename>.txt”, where <Menu Name> is whatever you decide to call your menu, <awkscript is whatever you decide to call the awk script, and filename is whatever the import filename is called.

In the next installment of Snortyware, we’ll get back to the file sorting and duplicate finder problem.

J.