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>