jquery.modalDialog.unobtrusive.js

/*
Uses declarative syntax to define a dialog. Syntax:

<a 
    href="{selector or url"
    data-rel="modalDialog"
    data-dialog-title="{title}"
    data-dialog-onopen="{onopen handler}"
    data-dialog-onbeforeopen="{onbeforeopen handler}"
    data-dialog-onclose="{onclose handler}"
    data-dialog-onnbeforeclose="{onbeforeclose handler}"
    data-dialog-maxWidth="{maxWidth}"
    data-dialog-skin="{skin}"
    data-dialog-ajax="{true or false}"
    data-dialog-destroyonclose="{true or false}"
    data-dialog-closeonbackgroundclick="{true or false}"
    data-dialog-closeonescape="{true or false}"
    data-dialog-zIndex="{default zIndex}"
    >link</a>

For node dialogs, these same properties can also be put on the dialog node as well.

TODO: Move some of the declarative settings into the core, because it is useful regardless of making
the trigger tag unobtrusive

TODO Make the dialog veil hide earlier when closing dialogs. It takes too long.
*/

(function ($) {
    var DIALOG_DATA_KEY = "modalDialogUnobtrusive";

    var dialogLinkHandler = function (e) {
        e.preventDefault();

        var $link = $(e.currentTarget);

        var href = $link.attr("data-dialog-url") || $link.attr("href");

        if (!href) {
            throw new Error("no href specified with data-rel='modalDialog'");
        }

        var settings = {
            contentOrUrl: href
        };

        var linkSettings = $.modalDialog.getSettings($link);
        $.extend(settings, linkSettings);

        var evt = new $.Event("dialogsettingscreate");
        evt.dialogSettings = settings;

        $link.trigger(evt);

        if (evt.isDefaultPrevented()) {
            return;
        }

        var dialog = $link.data(DIALOG_DATA_KEY);

        if (dialog) {
            var processedSettings = $.modalDialog._ensureSettings(settings);

            if (!$.modalDialog._areSettingsEqual(dialog.settings, processedSettings)) {
                dialog._destroy();
                dialog = null;
            }
        }

        if (!dialog) {
            dialog = $.modalDialog.create(settings);

            evt = new $.Event("dialogcreate");
            evt.dialogSettings = settings;
            evt.dialog = dialog;

            $link.trigger(evt);

            if (evt.isDefaultPrevented()) {
                return;
            }

            if (!settings.destroyOnClose) {
                $link.data(DIALOG_DATA_KEY, dialog);
            }
        }

        dialog.open();
    };

    $(document).on("click", "[data-rel='modalDialog']", dialogLinkHandler);

    $(document).on("click", ".close-dialog", function (e) {
        e.preventDefault();

        setTimeout(function () {
            var dialog = $.modalDialog.getCurrent();
            if (dialog) {
                dialog.close();
            }
        }, 0);
    });

})(jQuery);