home *** CD-ROM | disk | FTP | other *** search
/ PC-Online 1998 February / PCOnline_02_1998.iso / browser / net_linx / nethelp-v404.nif / nethelp-v404 / nethelp / Button.js < prev    next >
Text File  |  1997-07-02  |  8KB  |  299 lines
  1. /* ==================================================================
  2. FILE:   Button.js
  3. DESCR:  Button control for Netscape Help implementation.
  4. NOTES:  May require routine(s) from Utility.js.
  5. ================================================================== */
  6.  
  7. var UP       = 0
  8. var DOWN     = 1
  9. var SELECTED = 2
  10. var DISABLED = 3
  11.  
  12. // Disables the button bar without visibly disabling the buttons.
  13. var bDisableBtnBar = false
  14.  
  15. // Bind events to event handler.
  16. document.captureEvents( Event.MOUSEDOWN )
  17. document.onmousedown = mouseDownEvt
  18.  
  19. function mouseDownEvt( evt )
  20. {
  21.    //alert( "mouseDownEvt()" )
  22.  
  23.    // Block right click events to block potentially destabilizing local menus.
  24.    if ( evt.which == 3 ) {
  25.       return false
  26.    }
  27.  
  28.    // Block left mouse down when bar is disabled.
  29.    else if ( bDisableBtnBar ) {
  30.       return false
  31.    }
  32.  
  33.    return true
  34. }
  35.  
  36. /*
  37. DESCR:   Button class.
  38. PARAMS:  upImage        Image file for up state.
  39.          downImage      Image file for down state.
  40.          selectedImage  Image file for selected state.
  41.          disabledImage  Image file for disabled state.
  42.          command        Command to execute.
  43.          bBlender       Specifies that the button should behave as a
  44.                         blender-type button.
  45.          label          Text to go next to button. Use "" for no label.
  46.          toolTip        Mouse tip text. Use "" for no tool tip.
  47.          bar            The buttonBar object.
  48. RETURNS:
  49. NOTES:
  50. */
  51. function button( upImage, downImage, selectedImage, disabledImage, command,
  52.                  bBlender, label, toolTip, bar )
  53. {
  54.    this.state = UP  // Default state.
  55.  
  56.    this.buttonNumber = bar.aButtons.length
  57.  
  58.    this.aImages = new Array( upImage, downImage, selectedImage, disabledImage )
  59.  
  60.    this.command  = command
  61.    this.bBlender = bBlender
  62.    this.bOn      = false
  63.    this.label    = label
  64.    this.toolTip  = toolTip
  65.    this.bar      = bar
  66.  
  67.    this.mouseOverEvt = mouseOverEvt
  68.    this.mouseOutEvt  = mouseOutEvt
  69.    this.clickEvt     = clickEvt
  70.    this.enable       = enable
  71.    this.turnOff      = turnOff
  72.    this.setState     = setState
  73. }
  74.  
  75.    /*
  76.    DESCR:   Enables and disables a button.
  77.    PARAMS:  bEnable  Pass true for enable; false for disable.
  78.    RETURNS: 
  79.    NOTES:   
  80.    */
  81.    function enable( bEnable )
  82.    {
  83.       this.setState( bEnable ? UP : DISABLED )
  84.    }
  85.  
  86.    /*
  87.    DESCR:   Turns the button off if it is a blender button that is on.
  88.    PARAMS:
  89.    RETURNS: 
  90.    NOTES:
  91.    */
  92.    function turnOff()
  93.    {
  94.       if ( this.bBlender && this.bOn ) {
  95.          this.setState( UP )
  96.       }
  97.    }
  98.  
  99.    /*
  100.    DESCR:   Assigns state and sets button image.
  101.    PARAMS:  newState  State value for the button.
  102.    RETURNS: 
  103.    NOTES:   
  104.    */
  105.    function setState( newState )
  106.    {
  107.       this.state = newState
  108.       if ( this.bBlender && this.state == UP ) this.bOn = false
  109.  
  110.       document.images[ this.buttonNumber ].src = this.aImages[ this.state ]
  111.    }
  112.  
  113.    /*
  114.    DESCR:   Mouse over event handler.
  115.    PARAMS:  
  116.    RETURNS: 
  117.    NOTES:   
  118.    */
  119.    function mouseOverEvt()
  120.    {
  121.       if ( this.state == DISABLED ) return
  122.       if ( this.bBlender && this.bOn ) return
  123.  
  124.       if ( this.state == UP ) {
  125.          this.setState( SELECTED )
  126.       }
  127.    }
  128.  
  129.    /*
  130.    DESCR:   Mouse out event handler.
  131.    PARAMS:  
  132.    RETURNS: 
  133.    NOTES:   
  134.    */
  135.    function mouseOutEvt()
  136.    {
  137.       if ( this.state == DISABLED ) return
  138.       if ( this.bBlender && this.bOn ) return
  139.  
  140.       this.setState( UP )
  141.    }
  142.  
  143.    /*
  144.    DESCR:   Mouse click event handler.
  145.    PARAMS:  
  146.    RETURNS: 
  147.    NOTES:   
  148.    */
  149.    function clickEvt()
  150.    {
  151.       if ( this.state == DISABLED ) return
  152.       if ( this.bBlender && this.bOn ) return
  153.  
  154.       this.setState( DOWN )
  155.  
  156.       // If this is a blender button, turn off the other blenders.
  157.       if ( this.bBlender ) {
  158.          for ( var i = 0; i < this.bar.aButtons.length; i++ ) {
  159.             this.bar.aButtons[ i ].turnOff()
  160.          }
  161.          this.bOn = true
  162.       }
  163.  
  164.       // Execute command.
  165.       eval( this.command )
  166.    }
  167.  
  168. // End class definition: button.
  169.  
  170. /*
  171. DESCR:   Button bar class.
  172. PARAMS:  bgColor     Background color for the bar.
  173.          bLandscape  Pass true for landscape orientation, false for portrait.
  174.          align       Button alignment. Pass "LEFT" or "RIGHT".
  175.          width       Bar width in pixels or percentage.
  176.          spacing     For landscape, this refers to additional pixels to right
  177.                      of button image. Use "" for no extra space. For portrait,
  178.                      this refers to the height of an additional row between
  179.                      buttons. Use "" for no extra space.
  180.          barName     Identifier representing the bar.
  181. RETURNS: 
  182. NOTES:
  183. */
  184. function buttonBar( bgColor, bLandscape, align, width, spacing, barName )
  185. {
  186.    //top.trace( "buttonBar constructor()" )
  187.  
  188.    this.aButtons   = new Array()
  189.    this.bgColor    = bgColor
  190.    this.bLandscape = bLandscape
  191.    this.align      = align
  192.    this.width      = width
  193.    this.spacing    = spacing
  194.    this.barName    = barName
  195.  
  196.    this.addButton = addButton
  197.    this.create    = create
  198. }
  199.  
  200.    /*
  201.    DESCR:   Adds a button to a bar.
  202.    PARAMS:  button  The button object.
  203.    RETURNS: 
  204.    NOTES:   
  205.    */
  206.    function addButton( button )
  207.    {
  208.       this.aButtons[ this.aButtons.length ] = button
  209.    }
  210.    
  211.    /*
  212.    DESCR:   Writes the document.
  213.    PARAMS:  
  214.    RETURNS: 
  215.    NOTES:   
  216.    */
  217.    function create()
  218.    {
  219.       if ( this.aButtons.length == 0 ) return false
  220.  
  221.       var html
  222.  
  223.       html  = "<HTML>"
  224.       html  += "<HEAD>"
  225. //      html += "<STYLE TYPE = 'text/javascript'>"
  226. //      html += "classes.label.all.fontFamily = 'arial';"
  227. //      html += "classes.label.all.fontSize = '12px';"
  228. //      html += "classes.label.all.color = '#000066';"
  229. //      html += "</STYLE>"
  230.       html += "</HEAD>"
  231.  
  232.       html +=  "<BODY BGCOLOR = " + this.bgColor + ">"
  233.  
  234.       html += "<TABLE BORDER = 0 ALIGN = " + this.align + " WIDTH = " + this.width + ">"
  235.  
  236.       // For each button.
  237.       html += "<TR>"
  238.       for ( var i = 0; i < this.aButtons.length; i++ ) {
  239.          html += "<TD ALIGN = 'center'>"
  240.          html += "<A HREF = 'javascript:" + this.barName + ".aButtons[" + i + "].clickEvt()' "
  241.          html += "ONMOUSEOVER = '" + this.barName + ".aButtons[" + i + "].mouseOverEvt()' "
  242.          html += "ONMOUSEOUT = '" + this.barName + ".aButtons[" + i + "].mouseOutEvt()'>"
  243.          html += "<IMG SRC = '" + this.aButtons[ i ].aImages[ this.aButtons[ i ].state ] + "' BORDER = 0 ALT = '" + this.aButtons[ i ].toolTip + "'>"
  244.          html += "</A>"
  245.          if ( this.spacing != "" ) {
  246.             html += "<SPACER TYPE = 'block' WIDTH = " + this.spacing + ">"
  247.          }
  248.          html += "</TD>"
  249.  
  250.          if ( !this.bLandscape ) {
  251.  
  252.             // Add label cell and terminate row. Add spacer row.
  253.             html += "<TD ALIGN = 'left'>"
  254.             html += "<DIV CLASS = label>"
  255.             html += this.aButtons[ i ].label 
  256.             html += "</DIV>"
  257.             html += "</TD>"
  258.             html += "</TR>"
  259.             if ( this.spacing != "" ) {
  260.                html += "<TR><TD><SPACER TYPE = 'block' HEIGHT = " +
  261.                        this.spacing + "></TD></TR>"
  262.             }
  263.          }
  264.       }
  265.  
  266.       if ( this.bLandscape ) {
  267.  
  268.          // End row and fill next with labels.
  269.          html += "</TR>"
  270.          html += "<TR>"
  271.          for ( var i = 0; i < this.aButtons.length; i++ ) {
  272.             html += "<TD ALIGN = 'center'>"
  273.             html += "<DIV CLASS = label>"
  274.             html += this.aButtons[ i ].label
  275.             html += "</DIV>"
  276.             if ( this.spacing != "" ) {
  277.                html += "<SPACER TYPE = 'block' WIDTH = " + this.spacing + ">"
  278.             }
  279.             html += "</TD>"
  280.          }
  281.          html += "</TR>"
  282.       }
  283.  
  284.       html += "</TABLE></BODY></HTML>"
  285.  
  286.       with ( document ) {
  287.          open()
  288.          write( html )
  289.          close()
  290.       }
  291.  
  292.       return true
  293.    }
  294.  
  295. // End class definition: buttonBar.
  296.  
  297.  
  298.  
  299.