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

     9 //   triggerOnMouseDown - if true the action will be triggered on mouse-down, defaults to false.

    10 //   triggerOnMouseOut - if true the action will be triggered on mouse-out, defaults to false.

    11 //

    12 function ActionButton(id, upImg, downImg, disabledImg, action, triggerOnMouseUp, triggerOnMouseDown, triggerOnMouseOut) {

    13     this.id = id;

    14     this.upImg = upImg;

    15     this.downImg = downImg;

    16     this.disabledImg = disabledImg;

    17     this.action = action;

    18     this.isDown = false;

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

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

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

    22 

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

    24 

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

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

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

    28     if (dom.button) {

    29         delete dom.button;

    30     }

    31     dom.button = this;

    32 

    33     this.element = function() {

    34         return document.getElementById(this.id);

    35     }

    36 

    37     this.updateButton = function() {

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

    39         if (this.action.enabled) {

    40             if (this.isDown) {

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

    42             } else {

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

    44             }

    45         } else {

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

    47         }

    48     }

    49 

    50     // Make sure we can find the element.

    51     if (!this.element()) {

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

    53         return;

    54     }

    55 

    56     // --------------------------------

    57 

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

    59     onActionChanged = function() {

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

    61 //                              " this=" + this +

    62 //                              " action=" + this.action     +

    63 //                              " id=" + this.id     +

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

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

    66         this.updateButton();

    67     }

    68 

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

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

    71 //    this.onClick = function() {

    72 //        window.chrome.alert("ActionButton::onClick: " + this);

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

    74 //            this.action.trigger();

    75 //        }

    76 //        else {

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

    78 //        }

    79 //    }

    80     

    81     this.onMouseDown = function() {

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

    83         if (!this.isDown) {

    84             this.isDown = true;

    85             this.updateButton.call(this);

    86             if (this.triggerOnMouseDown) {

    87                 this.action.trigger();

    88             }

    89         }

    90     }

    91 

    92     this.onMouseUp = function() {

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

    94         if (this.isDown) {

    95             this.isDown = false;

    96             this.updateButton.call(this);

    97 

    98             if (this.triggerOnMouseUp) {

    99                 // Trigger the action.

   100                 this.action.trigger();

   101             }

   102         }

   103     }

   104 

   105     this.onMouseOut = function() {

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

   107         if (this.isDown) {

   108             this.isDown = false;

   109             this.updateButton.call(this);

   110             

   111             if (this.triggerOnMouseOut) {

   112                 // Trigger the action.

   113                 this.action.trigger();

   114             }

   115         }

   116     }

   117 

   118 

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

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

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

   122 

   123     // Set up element event handlers.

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

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

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

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

   128 

   129     // Set the initial state of the button.

   130     this.updateButton();

   131 }

   132