Monkey Patching a Dijit Widget with AMD (Specifically dijit/DialogUnderlay). Possible?

Question

I am trying to make a simple change to the default behaviour of dijit/Dialog. I want the dialog to close when the underlay (background) is clicked.

I did this once on a previous incarnation of Dojo but am struggling to do it with the new AMD/requireJs style.

If I load the dijit/DialogUnderlay module when my application starts, I can monkey patch it but my changes only seem to affect the instance I have required, not all instances. Presumably require() only provides a copy.

Do I need to extend dijitDialog and use my child class? Is there a simpler way of doing what I want?

Answer 1

I think the general form of it goes like this:

require.config({
    paths: {
        'mylib': 'libs/mylib-x.y.x/mylib'
    }
});

define('mypatchedlib', ['mylib'], function (mylib) {

    // do your monkey patching here

    // and then return the patched version
    return mylib;
});

Then anywhere you want to use the lib, you do something like this:

require(['mypatchedlib'], function(mylib) {
    // use the patched lib
});

There is also a map config in RequireJS that lets you redirect all uses of a particular require to your new version, so that when someotherlib requests mylib, you automatically redirect them to use the patched version.

map: {
    'someotherlib': { 'mylib': 'mypatchedlib' }
}

Answer 2

You can use event delegation and leave your Dialog untouched. Here is an example to achieve what you describe. Just put a in your html and run the following :

require(["dojo/_base/window", "dijit/Dialog", "dojo/on", "dijit/form/Button"],
function(win, Dialog, on, Button){
    var dialogInstance = new Dialog({
        innerHTML : "Hello world !"
    });

    on(win.body(), "._underlay:click", function(evt){
       dialogInstance.hide();
    });

    var btn = new Button({ 
        label : "Show Dialog",
        onClick : function(evt) {
             dialogInstance.show();   
        }
    },"btn1");
});

If however you still want to extend dijit/Dialog, you can do the following (e.g. in a file such as MyDialog.js) :

define(["dojo/_base/declare", "dijit/DialogUnderlay"], 
function(declare, DialogUnderlay) {

    return declare(DialogUnderlay, {
        myCustomDialogProperty : foo
        // other customizations [...]
    });

});

See the documentation of dojo/_base/declare for other options...