1 // Call ActionButton to wire an HTML button (typically an <img> tag) to an action (QAction).

     2 // Params:

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

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

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

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

     7 //   action - the targeted action

     8 //

     9 function ActionButton(id, upImg, downImg, disabledImg, action) {

    10     this.id = id;

    11     this.upImg = upImg;

    12     this.downImg = downImg;

    13     this.disabledImg = disabledImg;

    14     this.action = action;

    15     this.isDown = false;

    16 

    17     //window.chrome.alert("ActionButton");

    18 

    19     // attach this object to the item as "button" for later access

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

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

    22     if(dom.button) {

    23         delete dom.button;

    24     }

    25     dom.button = this;

    26 

    27     this.element = function() {

    28         return document.getElementById(this.id);

    29     }

    30 

    31     this.updateButton = function() {

    32         //window.chrome.alert("ActionButton::updateButton " + this);

    33         if(this.action.enabled) {

    34             if(this.isDown) {

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

    36             }

    37             else {

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

    39             }

    40         }

    41         else {

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

    43         }

    44     }

    45 

    46     // Make sure we can find the element.

    47     if(!this.element()) {

    48         alert("ActionButton: element not found, " + id);

    49         return;

    50     }

    51 

    52     // --------------------------------

    53 

    54     // Callback for changes in the action's state.

    55     onActionChanged = function() {

    56 //          window.chrome.alert("ActionButton::on action changed " +

    57 //                              " this=" + this +

    58 //                              " action=" + this.action     +

    59 //                              " id=" + this.id     +

    60 //                              " enabled=" + this.action.enabled +

    61 //                              " src=" + this.element().src);

    62         this.updateButton();

    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("ActionButton::onClick: " + this);

    69 //        if(this.action.enabled) {

    70 //            this.action.trigger();

    71 //        }

    72 //        else {

    73 //            window.chrome.alert("ActionButton::onClick: not enabled");

    74 //        }

    75 //    }

    76     

    77     this.onMouseDown = function() {

    78         //window.chrome.alert("ActionButton::onMouseDown " + this);

    79         if(!this.isDown) {

    80         this.isDown = true;

    81         this.updateButton.call(this);

    82       if((this.id == 'zoomBarBtnIn') || (this.id == 'zoomBarBtnOut') || (this.id == 'zoomIn') || (this.id == 'zoomOut'))

    83     	    this.action.trigger();

    84         }

    85     }

    86     

    87     this.onMouseUp = function() {

    88         //window.chrome.alert("ActionButton::onMouseUp " + this);

    89         if(this.isDown) {

    90         this.isDown = false;

    91         this.updateButton.call(this);

    92       

    93         // Trigger the action.

    94         this.action.trigger();

    95     }

    96     }

    97     

    98     this.onMouseOut = function() {

    99         //window.chrome.alert("ActionButton::onMouseOut " + this);

   100         if (this.isDown ) {

   101             this.isDown = false;

   102             this.updateButton.call(this);

   103             

   104         if((this.id == 'zoomBarBtnIn') || (this.id == 'zoomBarBtnOut') || (this.id == 'zoomIn') || (this.id == 'zoomOut'))

   105             this.action.trigger();

   106         }

   107     }

   108 

   109 

   110     // Connect to the action's "changed" signal.  Note: don't use bind here, causes crash in

   111     // scope chain code (but only for first document that is loaded...).

   112     this.action.changed.connect(createDelegate(this, onActionChanged));

   113 

   114     // Set up element event handlers.

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

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

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

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

   119 

   120     // Set the initial state of the button.

   121     this.updateButton();

   122 }

   123