ginebra2/chrome/js/ActionButton.js
changeset 0 1450b09d0cfd
child 3 0954f5dd2cd0
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/ginebra2/chrome/js/ActionButton.js	Tue May 04 12:39:35 2010 +0300
@@ -0,0 +1,132 @@
+// Call ActionButton to wire an HTML button (typically an <img> tag) to an action (QAction).
+// Params:
+//   id - the id of the button.  Ex:  <img id="buttonId" .../>
+//   upImg - the path to the "up" image for the button.
+//   downImg - the path to the "down" image for the button.  Note: not yet working...
+//   disabledImg - the path to the "disabled" image for the button.
+//   action - the targeted action
+//   triggerOnMouseUp- if true the action will be triggered on mouse-up, defaults to true.
+//   triggerOnMouseDown - if true the action will be triggered on mouse-down, defaults to false.
+//   triggerOnMouseOut - if true the action will be triggered on mouse-out, defaults to false.
+//
+function ActionButton(id, upImg, downImg, disabledImg, action, triggerOnMouseUp, triggerOnMouseDown, triggerOnMouseOut) {
+    this.id = id;
+    this.upImg = upImg;
+    this.downImg = downImg;
+    this.disabledImg = disabledImg;
+    this.action = action;
+    this.isDown = false;
+    this.triggerOnMouseUp= triggerOnMouseUp == undefined ? true : triggerOnMouseUp;
+    this.triggerOnMouseDown = triggerOnMouseDown == undefined ? false : triggerOnMouseDown;
+    this.triggerOnMouseOut = triggerOnMouseOut == undefined ? false : triggerOnMouseOut;
+
+    // window.chrome.alert("ActionButton");
+
+    // attach this object to the item as "button" for later access
+    // delete/cleanup existing button (if any) and attach this as button
+    dom = document.getElementById(this.id);
+    if (dom.button) {
+        delete dom.button;
+    }
+    dom.button = this;
+
+    this.element = function() {
+        return document.getElementById(this.id);
+    }
+
+    this.updateButton = function() {
+        // window.chrome.alert("ActionButton::updateButton " + this);
+        if (this.action.enabled) {
+            if (this.isDown) {
+                this.element().src = this.downImg;
+            } else {
+                this.element().src = this.upImg;
+            }
+        } else {
+            this.element().src = this.disabledImg;
+        }
+    }
+
+    // Make sure we can find the element.
+    if (!this.element()) {
+        alert("ActionButton: element not found, " + id);
+        return;
+    }
+
+    // --------------------------------
+
+    // Callback for changes in the action's state.
+    onActionChanged = function() {
+//          window.chrome.alert("ActionButton::on action changed " +
+//                              " this=" + this +
+//                              " action=" + this.action     +
+//                              " id=" + this.id     +
+//                              " enabled=" + this.action.enabled +
+//                              " src=" + this.element().src);
+        this.updateButton();
+    }
+
+// Commented out because onclick is not reliable.  Slight movements between mouse down
+// and mouse up seem to cancel the onclick.
+//    this.onClick = function() {
+//        window.chrome.alert("ActionButton::onClick: " + this);
+//        if(this.action.enabled) {
+//            this.action.trigger();
+//        }
+//        else {
+//            window.chrome.alert("ActionButton::onClick: not enabled");
+//        }
+//    }
+    
+    this.onMouseDown = function() {
+        // window.chrome.alert("ActionButton::onMouseDown " + this);
+        if (!this.isDown) {
+            this.isDown = true;
+            this.updateButton.call(this);
+            if (this.triggerOnMouseDown) {
+                this.action.trigger();
+            }
+        }
+    }
+
+    this.onMouseUp = function() {
+        // window.chrome.alert("ActionButton::onMouseUp " + this);
+        if (this.isDown) {
+            this.isDown = false;
+            this.updateButton.call(this);
+
+            if (this.triggerOnMouseUp) {
+                // Trigger the action.
+                this.action.trigger();
+            }
+        }
+    }
+
+    this.onMouseOut = function() {
+        // window.chrome.alert("ActionButton::onMouseOut " + this);
+        if (this.isDown) {
+            this.isDown = false;
+            this.updateButton.call(this);
+            
+            if (this.triggerOnMouseOut) {
+                // Trigger the action.
+                this.action.trigger();
+            }
+        }
+    }
+
+
+    // Connect to the action's "changed" signal.  Note: don't use bind here, causes crash in
+    // scope chain code (but only for first document that is loaded...).
+    this.action.changed.connect(createDelegate(this, onActionChanged));
+
+    // Set up element event handlers.
+    this.element().onmousedown = this.onMouseDown.bind(this);
+    this.element().onmouseup = this.onMouseUp.bind(this);
+    this.element().onmouseout = this.onMouseOut.bind(this);
+//    this.element().onclick = this.onClick.bind(this);
+
+    // Set the initial state of the button.
+    this.updateButton();
+}
+