Simple Materialize Confirmation Modals

Sat, 25 March 2017

ajs.js
jQuery.fn.extend({
    AjsConfirm: function(positive_callback, negative_callback) {
        if (typeof positive_callback == 'string') {
            if (positive_callback == 'off') {
                return this.each(function() {
                    $(this).off('click');
                });
            }
        }
        var bindButtonsFor = function(ajsId) {
            $('.' + ajsId + 'Ok').off('click');
            $('.' + ajsId + 'Cancel').off('click');
            $('.' + ajsId + 'Ok').on('click', function(e){
                e.preventDefault();
                $('#ajsConfirm' + ajsId).modal('close');
                positive_callback(e, $('#' + ajsId));
            });
            $('.' + ajsId + 'Cancel').on('click', function(e){
                e.preventDefault();
                $('#ajsConfirm' + ajsId).modal('close');
                negative_callback(e, $('#' + ajsId));
            });
        };
        return this.each(function() {
            $(this).off('click');
            $(this).on('click', function(e){
                e.preventDefault();
                var element = $(this);
                if (typeof positive_callback == "undefined"){
                    positive_callback = function(){};
                }
                if (typeof negative_callback == "undefined"){
                    negative_callback = function(){};
                }
                var ajsId = $(this).attr('id');
                var existing = $('#ajsConfirm' + ajsId).length;
                if (existing > 0) {
                    $('#ajsConfirm' + ajsId).modal('open');
                    return;
                }
                var title = '', message = '', ok = '', cancel = '';
                if (typeof $(this).attr('data-ajs-title') != "undefined") {
                    title = $('<h5 />').html($(this).attr('data-ajs-title'));
                }
                if (typeof $(this).attr('data-ajs-msg') != "undefined") {
                    message = $('<p />').html($(this).attr('data-ajs-msg'));
                }
                if (typeof $(this).attr('data-ajs-ok') != "undefined") {
                    if ($(this).attr('data-ajs-ok') != '') {
                        ok = $('<a />').addClass(ajsId + 'Ok').addClass('modal-action').addClass('btn-flat').addClass('blue').addClass('white-text').html($(this).attr('data-ajs-ok'));
                    }
                }
                if (typeof $(this).attr('data-ajs-cancel') != "undefined") {
                    if ($(this).attr('data-ajs-cancel') != '') {
                        cancel = $('<a />').css('marginRight', '10px').addClass(ajsId + 'Cancel').addClass('modal-action').addClass('btn-flat').addClass('grey').addClass('lighten-2').addClass('black-text').html($(this).attr('data-ajs-cancel'));
                    }
                }

                var wrap;
                wrap = $('<div />').attr('id', 'ajsConfirm' + ajsId).addClass('modal').append(
                    $('<div />').addClass('modal-content').append(title).append(message)
                ).append(
                    $('<div />').addClass('modal-footer').append(ok).append(cancel)
                );

                $('body').append(wrap);
                $('#ajsConfirm' + ajsId).modal();
                $('#ajsConfirm' + ajsId).modal('open');
                bindButtonsFor(ajsId);
            });
        });
    }
});
usage.html
<a href="#"
    data-example-tag="FooBar"
    class="confirmation"
    id="confirmation"
    data-ajs-ok="Yes"
    data-ajs-cancel="Cancel"
    data-ajs-title="Simple Confirmation"
    data-ajs-msg="Are you sure?"
>
    Confirm example
</a>
<pre>
    These attributes are utilised:

    id="" - must be unique to an element
    data-ajs-ok="" - the OK button text to display - optional
    data-ajs-cancel="" - the Cancel button text to display - optional
    data-ajs-title="" - the title of the modal - optional
    data-ajs-msg="" - the body message of the modal - optional
</pre>
<script>
    $(document).ready(function(){
        $('.confirmation').AjsConfirm(
            function(e, element) {
                // Confirmed
                console.log('Confirmed');
                console.log(element.attr('data-example-tag')); // FooBar
            },
            function(e, element) {
                // Cancelled
                console.log('Cancelled');
                console.log(element.attr('data-example-tag')); // FooBar
            }
        );
    });
</script>