How to override a JS function in the Media Module without editing the actual module files?

Question

Drupal.media.browser.validateButtons = function() {
    // The media browser runs in an IFRAME. The Drupal.media.popups.mediaBrowser()
    // function sets up the IFRAME and "OK" and "Cancel" buttons that are outside
    // of the IFRAME, so that their click handlers can destroy the IFRAME while
    // retaining information about what media items were selected. However,
    // Drupal UI convention is to place all action buttons on the same "line"
    // at the bottom of the form, so if the form within the IFRAME contains a
    // "Submit" button or other action buttons, then the "OK" and "Cancel"
    // buttons below the IFRAME break this convention and confuse the user.
    // Therefore, we add "Submit" and "Cancel" buttons inside the IFRAME, and
    // have their click action trigger the click action of the corresonding
    // "OK" and "Cancel" buttons that are outside the IFRAME. media.css contains
    // CSS rules that hide the outside buttons.
    //
    // We don't add a "Submit" button if the form already has one, since in these
    // cases, another round-trip to the server is needed before the user's
    // selection is finalized. For these cases, when the form's real Submit
    // button is clicked, the server either returns another form for the user to
    // fill out, or else a completion page that contains or sets the
    // Drupal.media.browser.selectedMedia variable. If the latter, then
    // Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad() auto-triggers the
    // "OK" button action to finalize the selection and remove the IFRAME.
    //
    // @todo An alternate, less hacky solution would be most welcome.
    if (!($('.form-submit', this).length > 0)) {
        $('<a class="button fake-ok">Submit</a>').appendTo(this).bind('click', Drupal.media.browser.submit);
        if (!($('.fake-cancel', this).length > 0)) {
            $('<a class="button fake-cancel">Cancel</a>').appendTo(this).bind('click', Drupal.media.browser.submit);
        }
    } else if (!($('.fake-cancel', this).length > 0)) {
        var parent = $('.form-actions', this);
        if (!parent.length) {
            parent = $('form > div', this);
        }
        $('<a class="button fake-cancel">Cancel</a>').appendTo(parent).bind('click', Drupal.media.browser.submit);
    }
};​

(See also http://jsfiddle.net/S6WXc/.)

This function in the Media Modules js/media.browser.js is clashing with what I've added into the Media Select popup via Form Alter (A simple AJAX call to display thumbnails of images, that when clicked open up in a Colorbox modal window).

I've tracked the problem down to something in Media Module and Colorbox clashing, since when I click a thumb that opens the Colorbox modal popup, an event is launched that duplicates the 'fake' Submit / Cancel buttons in the Library tab, and also some of the Library thumbnails (my own thumbs are shown in the Web tab).

Not going in further detail, is there some way to override the function in the Media Module without editing the actual original .js file? I don't fancy doing edits each time I update it so to override it in my module or my own .js file would be preferable.

Answer 1

You can simply do it like that :

Drupal.media.browser.validateButtons = function(){ // Your code ... };

Of corse, this assignment must be after the original one.

Answer 2

I added this into my own JS file so that once the initial loading of the Library tab is completed, the functions handling it are overwritten and the weird bug is gone -- quick testing reveals that everything also works as expected so I think this is it!

Now I'll issue some bug reports based on my findings and hope the module developers might come up with some proper way to navigate around this. :)

Drupal.media.browser.validateButtons = function(){ 
  // Something in Colorbox is calling this function again, so we 'empty' it after loading. 
  // @TODO: Come up with something less hacky.
};

Drupal.behaviors.mediaLibrary = {    
  // Something in Colorbox is calling this function again, so we 'empty' it after loading. 
  // @TODO: Come up with something less hacky.
}

Answer 3

Another possible way how to override a JS function is to edit original JavaScript and replace it with the hook_js_alter using your custommodule.

This is the sample code:

/**
 * Path to the new file.js 
 */
function  custommodule_js_alter(&$javascript) {
  $javascript[drupal_get_path('module', 'altered_module') . '/path/to/file.js']['data'] = drupal_get_path('module', 'custommodule') . '/path/to/file.js';
}

Source with mode details.