gestioCOF/gestioncof/templates/tristate_js.html

{% load staticfiles %}
                <script type="text/javascript">
var supernifty_tristate = function() {
  var
    YES = { image: "{% static "images/yes.png" %}", state: "yes" },
    NO = { image: "{% static "images/no.png" %}", state: "no" },
    NONE = { image: "{% static "images/none.png" %}", state: "none" };

  function tristate_elements() {
    if ( document.getElementsByClassName != undefined ) {
      return document.getElementsByClassName( "tristate" );
    }
    else {
      var 
        all = document.getElementsByTagName('*'),
        alllength = all.length,
        result = [], i;
      for ( i = 0; i < alllength; i++ ) {
        if ( all[i].className == 'tristate' ) {
          result.push( all[i] );
        }
      }
      return result;
    }
  }

  return {
    init: function() {
      var list = tristate_elements(), 
        i, 
        html;
      for ( i = 0; i < list.length; i++ ) {
        var state = NONE;
        var value = list[i].getAttribute("value");
        if ( value == 'yes' )
          state = YES;
        else if ( value == 'no' )
          state = NO;
        html = "<img id=\"" + list[i].id + "_img\" src=\"" + state.image + "\" onclick=\"supernifty_tristate.update('" + list[i].id + "')\"/><input type=\"hidden\" id=\"" + list[i].id + "_frm\" name=\"" + list[i].id + "\" value=\"" + state.state + "\"/>";
        list[i].innerHTML = html;
      }
    },

    update: function(id) {
      var state = document.getElementById( id + "_frm" ).value, next;
      // yes -> no -> none -> yes
      if ( state == 'yes' ) {
        next = NO;
      }
      else if ( state == 'no' ) {
        next = NONE;
      }
      else { // assume none
        next = YES;
      }
      document.getElementById( id + "_img" ).src = next.image;
      document.getElementById( id + "_frm" ).value = next.state;
    }
  }
}();

// onload handler
var existing_onload = window.onload;
window.onload = function() {
  if ( existing_onload != undefined ) {
    existing_onload();
  }
  supernifty_tristate.init();
}
                </script>