Question

I’m struggling with trying to modify some Javascript code. I know what I want to change, but it is within a huge JS file of a regularly updated product. It’s basically a small customization to a product. Rather than hack the file directly, I thought it might be possible to externalize my changes and leave the core file intact.

The structure of the JS file that I’d like to change looks like:

(function()
{
   Company.CoolWidget = function(inArg)
   {
      Company.CoolWidget.superclass.constructor.call(this, inArg);

   };

   YAHOO.lang.augmentObject(Company.CoolWidget.prototype,
   {
      options:
      {
          ....
      },
      onReady: function COOL_onReady()
      {
          ....
      }
   }, true);
})();

I want to do everything in the standard onReady (COOL_onReady()) function, but add something to the end of it.
And I want to add a new method, something like:

onNewMethod: function EXT_COOL_newMethod()

I’m not sure how to do that and whether I even can do that, and I’m not sure if just loading the new JS file after the other JS file necessarily guarantees that the overwrite will happen.

Or maybe the question should be: How can I be minimally invasive in making changes to a YUI2 Javascript file.

Answer 1

I had a problem similar to this, but what I was trying to accomplish was a bug fix. I suppose you could consider this the same.

Y.Button.prototype._setTitle = function (p_sTitle) { 
  // http://yuilibrary.com/forum/viewtopic.php?p=885
  /*jslint nomen: true*/
  var sTitle = p_sTitle;
  if (!sTitle) {
    switch (this.get("type")) {
    case "radio":
      sTitle = this.RADIO_DEFAULT_TITLE;
      break;
    case "checkbox":
      sTitle = this.CHECKBOX_DEFAULT_TITLE;
      break;
    case "menu":
      sTitle = this.MENUBUTTON_DEFAULT_TITLE;
      break;
    case "split":
      sTitle = this.SPLITBUTTON_DEFAULT_TITLE;
      break;
    case "submit":
      sTitle = this.SUBMIT_TITLE;
      break;
    }
  }
  /*jslint nomen: false*/
  this._button.title = sTitle;
  /*jslint nomen: true*/
};

Prototype, I believe, is what you are after. The yuilibrary link above might be of assistance.

Good luck! 🙂