Customize the ExperienceEditor Part 2 - Override the Sitecore functions in the JS

Here is my other posts of the same series about the customization of the Sitecore client without modifying the Sitecore JS:

• Customize the ExperienceEditor Part 1 - Include your custom JS
• Customize the ExperienceEditor Part 2 - Override the Sitecore functions in the JS

Today I will show you how I have inherit and override the javascript function defined by Sitecore with as few side effects as possible.

You just need to store the prototype of the original Sitecore's function, redefine this prototype and call the original function.
Here is the skeleton if the method of sitecore is:

sitecoreObject.prototype.methodName = function(param1) {
 //Do stuffs
}

This method can be override like this:

var originalProcess = sitecoreObject.prototype.methodName;
sitecoreObject.prototype.methodName = function (param1) {
    //Do my stuffs
 
    //Call teh original method and apply the correct context to this method
 originalProcess.call(this, request, command, name);    
};

Here is a real life. I will explain the client pipelines in a next post but the following method is responsible of the processing of the different processors:

scSitecore.prototype.process = function (request, command, name) {  
  name = (name == null ? command.command : name);
  this.state.pipeline = request.pipeline;
  var r;
  switch (name) {
    //The different case of the different processors names
  }
};

And I need to add my custom processor in it so basically adding another case:

var originalProcess = currentScJsWindow.scSitecore.prototype.process;
currentScJsWindow.scSitecore.prototype.process = function (request, command, name) {
    var localName = (name == null ? command.command : name);
    this.state.pipeline = request.pipeline;
    var r;

    if (localName === "ShowDialogInSidebar") {
        //Do my studd
    } else {
        //Call the normal handler
        originalProcess.call(this, request, command, name);
    }
};