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 //   triggerOnMouseUp- if true the handler will be called on mouse-up, defaults to true.

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

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

    14 //

    15 function SimpleButton(id, upImg, downImg, disabledImg, handler, triggerOnMouseUp, triggerOnMouseDown, triggerOnMouseOut) {

    16     this.id = id;

    17     this.upImg = upImg;

    18     this.downImg = downImg;

    19     this.disabledImg = disabledImg;

    20     this.handler = handler;

    21     this.isDown = false;

    22     this.enabled = true;

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

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

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

    26 

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

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

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

    30     if (dom.button) {

    31         delete dom.button;

    32     }

    33     dom.button = this;

    34 

    35     this.element = function() {

    36         return document.getElementById(this.id);

    37     }

    38 

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

    40         this.upImg = upImg;

    41         this.downImg = downImg;

    42         this.disableImg = disabledImg;

    43         this.updateButton();

    44     }

    45 

    46     this.updateButton = function() {

    47         if (this.enabled) {

    48             if (this.isDown) {

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

    50             }

    51             else {

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

    53             }

    54         }

    55         else {

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

    57         }

    58     }

    59 

    60     this.setEnabled = function(state) {

    61         this.enabled = state;

    62         this.updateButton();

    63     }

    64 

    65     // Make sure we can find the element.

    66     if (!this.element()) {

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

    68         return;

    69     }

    70 

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

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

    73 //    this.onClick = function() {

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

    75 //        this.handler();

    76 //    }

    77     

    78     this.onMouseDown = function() {

    79         this.isDown = true;

    80         this.updateButton.call(this);

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

    82             this.handler();

    83         }

    84     }

    85     

    86     this.onMouseUp = function() {

    87         this.isDown = false;

    88         this.updateButton.call(this);

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

    90             this.handler();

    91         }

    92     }

    93 

    94     this.onMouseOut = function() {

    95         if (this.isDown) {

    96             this.isDown = false;

    97             this.updateButton.call(this);

    98             

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

   100                 this.handler();

   101             }

   102         }

   103     }

   104  

   105     // Set up element event handlers.

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

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

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

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

   110 

   111     // Set the initial state of the button.

   112     this.updateButton();

   113 }

   114