gistfile1.txt

require('core');

// this code just copies in the requisite SC.ButtonView behavior to enable a standard image view to function as a button

MyApp.ImageButtonView = SC.ImageView.extend({

  value: null, // could also use a CSS selector here -- see SC.ImageView
  isEnabled: YES,
  action: null,
    target: null,
    _isMouseDown: false, 

  // on mouse down, set active only if enabled.  
  /** @private */
  mouseDown: function(evt) {
    this.setClassName('active',this.get('isEnabled')) ;
    this._isMouseDown = true;
    return true ;
  },

  // remove the active class on mouse down as well
  /** @private */
  mouseOut: function(evt)
  {
    this.setClassName('active', false);
    return true;
  },

  // add the active class name if the mouse is down
  // this covers a scenario where the user drags out and back on to a button
  mouseOver: function(evt)
  {
    this.setClassName('active', this._isMouseDown) ;
    return true;
  },

  // on mouse up, trigger the action only if we are enabled and the mouse
  // was released inside the view.
  /** @private */
  mouseUp: function(evt) {
    this.setClassName('active', false) ;
    this._isMouseDown = false;
    var tgt = Event.element(evt) ;
    var inside = false ;
    while(tgt && (tgt != this.rootElement)) tgt = tgt.parentNode;
    if (tgt == this.rootElement) inside = true ;

    if (inside && this.get('isEnabled')) {
        var action = this.get('action');
        var target = this.get('target') || null;
        if (action) SC.app.sendAction(action, target, this);
    }
    
    return true ;
  }
  
}) ;