Javascript libraries

From WormBaseWiki
Jump to navigationJump to search

Suggested Development Guidelines

If implementing a new DHTML feature, please try to make use of a library that is already in use at the site. If you add a new feature that relies on a third party library, please add the library to the /js directory tree, load it via wormbase.js and document its use here or on another wiki page (or at least provide a link)!


The wormbase index page header no longer contains directives to load stylesheets and various javascript libraries. All external javascript libraries (and their dependencies), as well as stylesheets are loaded via the library /js/wormbase.js.

The use of wormbase.js will be extended from the index page to all pages on the site. When adding new javascript libraries, please avoid library/version conflicts by loading external libraries directly from the page header.

Potential Gotchas

  1. Loading multiple instances or different versions of the same library: After wormbase.js is implemented site-wide, please add and/or use your third party libraries in /usr/local/wormbase/html/js. If the libraries need updating, please update them there rather then loading newer versions elsewhere. It would be helpful to put all javascript libraries in this directory tree.
  2. Watch global variables: When variables are initialized at the top-level of any script, they are not lexically scoped. Since they will be visible to all javascript functions loaded on the page, try to name gloabls in such a way that they may are not likely to get redefined are accidentally used somewhere else. For example: balloonAjaxResponse vs. ajaxResponse.

The wormbase index page header

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>WormBase - Home Page</title>
  <!-- Please load dependent stylesheets and scripts via wormbase.js -->
  <script type="text/javascript" src="/js/wormbase.js"></script>

Structure of the wormbase.js library

 // Global Stylesheet, etc
 document.write('<link rel="stylesheet" href="/stylesheets/wormbase.css">');
 document.write('<link rel="alternate" type="application/atom+xml" title="Atom"
                       href="" />');
 document.write('<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
                       href="" />');

 // General utilities
 document.write('<script type="text/javascript" src="/js/cross_browser.js"></script>');
 document.write('<script type="text/javascript" src="/js/prototype.js"></script>');
 document.write('<script type="text/javascript" src="/js/browserUA.js"></script>');

 // autocompletion
 document.write('<link rel="stylesheet" href="/stylesheets/autocomplete.css">');
 document.write('<script type="text/javascript" src="/js/wormbase_autocomplete.js"></script>');
 document.write('<script type="text/javascript" src="/js/autocomplete/yahoo.js"></script>');
 document.write('<script type="text/javascript" src="/js/autocomplete/dom.js"></script>');
 document.write('<script type="text/javascript" src="/js/autocomplete/event.js"></script>');
 document.write('<script type="text/javascript" src="/js/autocomplete/connection.js"></script>');
 document.write('<script type="text/javascript" src="/js/autocomplete/autocomplete.js"></script>' );

 // balloon tooltips
 document.write('<script type="text/javascript" src="/js/balloon.js"></script>');

Proposed changes

Individual CGI script and/or pages may require a specialized subset of the javascript libraries and stylesheets, or may have dependencies that should be loaded with every wormbase page. In order to accomodate page-specific loading, we propose something akin to the suggestion below.

From an email excerpt(sic):

How about this:  A loader function in wormbase.js that will
conditionally print out libraries/CSS as requested. javascript array
syntax is nasty but it would be easier thans CGI params and would not
exclude static HTML pages.

For example, on the cient page, it would be something like:

<script type="text/javascript" src="/js/wormbase.js"></script>
<script type="text/javascript">
 <!--only specify custom/conditionally loading libs/css-->
 var toLoad = new array;
 toLoad[0] = 'exotic';
 toLoad[1] = 'esoteric';