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

     2 // 

     3 // (As opposed to ActionButton which is served all the way through QT Actions)

     4 //

     5 // Params:

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

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

     8 //   downImg - the path to the "down" image for the button.  Note: not yet working...

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

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

    11 //

    12 function SimpleButton(id, upImg, downImg, disabledImg, handler) {

    13     this.id = id;

    14     this.upImg = upImg;

    15     this.downImg = downImg;

    16     this.disabledImg = disabledImg;

    17     this.handler = handler;

    18     this.isDown = false;

    19     this.enabled = true;

    20 

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

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

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

    24     if(dom.button) {

    25         delete dom.button;

    26     }

    27     dom.button = this;

    28 

    29     this.element = function() {

    30         return document.getElementById(this.id);

    31     }

    32 

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

    34         this.upImg = upImg;

    35         this.downImg = downImg;

    36         this.disableImg = disabledImg;

    37         this.updateButton();

    38     }

    39 

    40     this.updateButton = function() {

    41         if(this.enabled) {

    42             if(this.isDown) {

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

    44             }

    45             else {

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

    47             }

    48         }

    49         else {

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

    51         }

    52     }

    53 

    54     this.setEnabled = function(state) {

    55         this.enabled = state;

    56         this.updateButton();

    57     }

    58 

    59     // Make sure we can find the element.

    60     if(!this.element()) {

    61         alert("SimpleButton: element not found, " + id);

    62         return;

    63     }

    64 

    65 // Commented out because onclick is not reliable.  Slight movements between mouse down

    66 // and mouse up seem to cancel the onclick.

    67 //    this.onClick = function() {

    68 //        //window.chrome.alert("SimpleButton::onClick: " + this);

    69 //        this.handler();

    70 //    }

    71     

    72     this.onMouseDown = function() {

    73         //window.chrome.alert("SimpleButton::onMouseDown " + this);

    74         this.isDown = true;

    75         this.updateButton.call(this);

    76     }

    77     

    78     this.onMouseUp = function() {

    79         //window.chrome.alert("SimpleButton::onMouseUp " + this);

    80         this.isDown = false;

    81         this.updateButton.call(this);

    82         this.handler();

    83     }

    84 

    85     this.onMouseOut = function() {

    86         //window.chrome.alert("SimpleButton::onMouseOut " + this);

    87         if (this.isDown ) {

    88             this.isDown = false;

    89             this.updateButton.call(this);

    90         }

    91     }

    92  

    93     // Set up element event handlers.

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

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

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

    97 //    this.element().onclick = this.onClick.bind(this);

    98 

    99     // Set the initial state of the button.

   100     this.updateButton();

   101 }

   102