1 // Call ToggleButton to wire an HTML button (typically an <img> tag) to a JS callback

     2 // when you want the button pressed state to be tied to a Ginebra snippets 

     3 // visible attribute.

     4 // 

     5 //

     6 // Params:

     7 //   id - the id of the button.  Ex:  <img id="buttonId" .../>

     8 //   snippetId - the id of the ginebra snippet to which the button state should be tied

     9 //   upImg - the path to the "up" image for the button.

    10 //   downImg - the path to the "down" image for the button.

    11 //   disabledImg - the path to the "disabled" image for the button.

    12 //   handler - the javascript callback to be called when triggered

    13 //   triggerOnMouseUp- if true the handler will be called on mouse-up, defaults to true.

    14 //   triggerOnMouseDown - if true the handler will be called on mouse-down, defaults to false.

    15 //   triggerOnMouseOut - if true the handler will be called on mouse-out, defaults to false.

    16 //

    17 function ToggleButton(id, snippetId, upImg, downImg, disabledImg, handler, triggerOnMouseUp, triggerOnMouseDown, triggerOnMouseOut) {

    18     this.id = id;

    19     this.snippetId = snippetId;

    20     this.upImg = upImg;

    21     this.downImg = downImg;

    22     this.disabledImg = disabledImg;

    23     this.handler = handler;

    24     this.isDown = false;

    25     this.enabled = true;

    26     this.triggerOnMouseUp= triggerOnMouseUp == undefined ? true : triggerOnMouseUp;

    27     this.triggerOnMouseDown = triggerOnMouseDown == undefined ? false : triggerOnMouseDown;

    28     this.triggerOnMouseOut = triggerOnMouseOut == undefined ? false : triggerOnMouseOut;

    29 

    30     // attach this class to the item as "button" for later access

    31     // delete/cleanup existing button (if any) and attach this as button

    32     dom = document.getElementById(this.id);

    33     if (dom.button) {

    34         delete dom.button;

    35     }

    36     dom.button = this;

    37 

    38     //! Provide easy access to button element.

    39     this.element = function() {

    40         return document.getElementById(this.id);

    41     }

    42 

    43     //! Allow client to change button images after object creation.

    44     this.updateImages = function(upImg, downImg, disabledImg) {

    45         this.upImg = upImg;

    46         this.downImg = downImg;

    47         this.disableImg = disabledImg;

    48         this.updateButton();

    49     }

    50 

    51     //! Updates button image to appropriate up/down/disabled icon.

    52     this.updateButton = function() {

    53         if (this.enabled) {

    54             // button is enabled

    55             if (this.isDown) {

    56                 // button is down

    57                 this.element().src = this.downImg;

    58             } else {

    59                 // button is up

    60                 this.element().src = this.upImg;

    61             }

    62         } else {

    63             // button is disabled

    64             this.element().src = this.disabledImg;

    65         }

    66     }

    67 

    68     //! Enables/Disables button.

    69     this.setEnabled = function(state) {

    70         this.enabled = state;

    71         this.updateButton();

    72     }

    73     

    74     //! Handler for the mouse down event.

    75     this.onMouseDown = function() {

    76         if (this.triggerOnMouseDown && this.enabled) {

    77             this.handler();

    78         }

    79     }

    80     

    81     //! Handler for the mouse up event.

    82     this.onMouseUp = function() {

    83         if (this.triggerOnMouseUp && this.enabled) {

    84             this.handler();

    85         }

    86     }

    87 

    88     //! Handler for the mouse out event.

    89     this.onMouseOut = function() {

    90         if (this.isDown) {

    91             if (this.triggerOnMouseOut && this.enabled) {

    92                 this.handler();

    93             }

    94         }

    95     }

    96     

    97     //! Handler for the snippet shown signal.

    98     this.onSnippetShown = function() {

    99         // When the snippet is shown the button should be down.

   100         this.isDown = true;

   101         this.updateButton.call(this);

   102     }

   103     

   104     //! Handler for the snippet hidden signal.

   105     this.onSnippetHidden = function() {

   106         // When the snippet is hidden the button should be up.

   107         this.isDown = false;

   108         this.updateButton.call(this);

   109     }

   110     

   111     //! After chrome is loaded, setup shown/hidden handlers.

   112     this.chromeLoadComplete = function() {

   113         // The up/down state of this button is tied to the visibility state of

   114         // the specified snippet.

   115         window.snippets[this.snippetId].shown.connect(this.onSnippetShown.bind(this));

   116         window.snippets[this.snippetId].hidden.connect(this.onSnippetHidden.bind(this));

   117     }

   118  

   119     // Make sure we can find the element.

   120     if (!this.element()) {

   121         alert("ToggleButton: element not found, " + id);

   122         return;

   123     }

   124     

   125     // Set up element event handlers.

   126     this.element().onmousedown = this.onMouseDown.bind(this);

   127     this.element().onmouseup = this.onMouseUp.bind(this);

   128     this.element().onmouseout = this.onMouseOut.bind(this);

   129 

   130     // Set the initial state of the button.

   131     this.updateButton();

   132 

   133     // can't access chrome snippets until chrome load complete

   134     window.chrome.chromeComplete.connect(this.chromeLoadComplete.bind(this));

   135 }

   136