1  
   2  /*
   3   * This script requires:
   4   *   1. Prototype version 1.5 or greater
   5   *     - Homepage: http://prototype.conio.net/
   6   *     - Download: http://script.aculo.us/downloads
   7   *   2. DomReady addon for Prototype
   8   *     - Homepage: http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
   9   *     - Download: http://www.vivabit.com/code/domready/domready.js
  10   */
  11  
  12  /*
  13   * I needed something capable of not just unobtrusively running when a page
  14   * was loaded but also easily being called at my whim as a part of an Ajax
  15   * transaction.
  16   */
  17  var ZebraStripes = {
  18      /*
  19       * Call this function when you want something striped.  It will figure out
  20       * how to stripe the element.
  21       */
  22      stripe: function(el) {
  23          el = $(el);
  24          switch (el.tagName) {
  25              case "TABLE":
  26                  this._stripeTable(el);
  27                  break;
  28              case "OL":
  29              case "UL":
  30                  this._stripeNormalList(el);
  31                  break;
  32              case "DL":
  33                  this._stripeDefinitionList(el);
  34                  break;
  35          }
  36      },
  37      /***************************************************************************
  38       * Everything below here is psuedo-private
  39       **************************************************************************/
  40      /*
  41       * This class name will be applied to the odd numbered elements
  42       */
  43      _altClassName: "alt",
  44      /*
  45       * This property persists the data that tells the object whether
  46       * to stripe (_isEven == false) or unstripe (_isEven == true) an element
  47       */
  48      _isEven: true,
  49      /*
  50       * Cycles the _isEven property of this object between true and false
  51       */
  52      _cycle: function() {
  53          this._isEven = ! this._isEven;
  54      },
  55      /*
  56       * As a part of the Ajax-friendliness, it is important that we remove the
  57       * alt class from elements as well as add it.
  58       */
  59      _stripeElement: function(el) {
  60          el = $(el);
  61          if (this._isEven) {
  62              el.removeClassName(this._altClassName);
  63          } else {
  64              el.addClassName(this._altClassName);
  65          }
  66      },
  67      /*
  68       * This works to stripe the child nodes of TABLE, TBODY, OL and UL elements.
  69       */
  70      _stripeElements: function(els) {
  71          els = $(els);
  72          if (els.length == 0) {
  73              return
  74          }
  75          var parent = els[0].parentNode;
  76          this._isEven = true;
  77          for (var i = 0; i < els.length; i++ ) {
  78              if ((parent == els[i].parentNode) && (els[i].visible)) {
  79                  this._stripeElement(els[i]);
  80                  this._cycle();
  81              }
  82          }
  83      },
  84      /*
  85       * TBODY is not necessary, but I recommend it.  I debated about striping
  86       * THEAD and TFOOT, but chose not to.  Might be added later.
  87       */
  88      _stripeTable: function(table) {
  89          table = $(table);
  90          if (table.getElementsByTagName("tbody")) {
  91              var tableBodies = table.getElementsByTagName("tbody");
  92              for (var i = 0; i < tableBodies.length; i++) {
  93                  this._stripeElements(tableBodies[i].getElementsByTagName("tr"));
  94              }
  95          } else {
  96              this._stripeElements(table.getElementsByTagName("tr"));
  97          }
  98      },
  99      /*
 100       * This stripes OL and UL since they both have LI and only LI child nodes.
 101       */
 102      _stripeNormalList: function(list) {
 103          list = $(list);
 104          this._stripeElements(list.getElementsByTagName("li"));
 105      },
 106      /*
 107       * I have seen other function out there that can stripe DL, but they all
 108       * assumed that each DT would have only one DD following it.  That is not
 109       * always the case, and not the case in the project that spawned this
 110       * javascript.
 111       */
 112      _stripeDefinitionList: function(list) {
 113          list = $(list);
 114          Element.cleanWhitespace(list);
 115          var children = list.childNodes;
 116          var previousDt;
 117          for (var i = 0; i < children.length; i++) {
 118              switch (children[i].tagName) {
 119                  case "DT":
 120                      if (children[i].visible) {
 121                          this._stripeElement(children[i]);
 122                          this._cycle();
 123                      }
 124                      previousDt = children[i];
 125                      break;
 126                  case "DD":
 127                      if (previousDt.visible) {
 128                          this._stripeElement(children[i]);
 129                      }
 130                      break;
 131              }
 132          }
 133      }
 134  };
 135  
 136  /*
 137   * This function will go ahead and stripe all the elligible elements on the
 138   * page when the page first loads.
 139   */
 140  function initZebraStripes() {
 141      var toStripe = $$("dl.striped")
 142          .concat($$("ol.striped"))
 143          .concat($$("table.striped"))
 144          .concat($$("ul.striped"));
 145  
 146      toStripe.each(
 147          function(el) {
 148              ZebraStripes.stripe(el);
 149          }
 150      );
 151  }
 152  
 153  Event.onDOMReady(initZebraStripes);
 154  // Or you could substitute a different loader:
 155  //Event.observe(window, 'load', initZebraStripes)