Last active
August 29, 2015 14:00
-
-
Save MartinL83/11124938 to your computer and use it in GitHub Desktop.
Simple confirm modal on inputs / links / whatever trough data-attr. Will launch a (Twitter) Bootstrap modal on elements that have a data-confirm-action="confirm". Some settings available. **Needs loads of improvements**
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Confirmation modal on elements that have 'confirm' class. | |
// Will launch a modal and ask for confirmation. | |
// data-confirm-action="confirm" - Will enable the confirm modal | |
// data-confirm-title="" - Custom title, optional | |
// data-confirm-text="" - Custom modal text, optional. | |
;(function ( $, window, document, undefined ) { | |
// Create the defaults once | |
var pluginName = "confirmAction", | |
defaults = { | |
title: '', // Title for modal | |
content: '', // Content for modal | |
form: '', // Parent form ($ object) if any. | |
url: '' // URL to execute if link. | |
}; | |
// Global setting to set if we have confirmed or not. | |
var confirmed = false; | |
// The actual plugin constructor | |
function Plugin ( element, options ) { | |
this.element = element; | |
this.settings = $.extend( {}, defaults, options ); | |
this._defaults = defaults; | |
this._name = pluginName; | |
this.getTitle(this.element,this.settings); // Set title | |
this.getContent(this.element,this.settings); // Set content | |
this.getUrl(this.element,this.settings); // Set url (if any) | |
this.getForm(this.element,this.settings); // Get parent form (if any) | |
this.init(); | |
} | |
Plugin.prototype = { | |
init: function () { | |
var self = this; | |
var elm = jQuery(self.element); | |
elm.click(function(e){ | |
if( confirmed === false ) { | |
e.preventDefault(); | |
self.confirm(self.element,self.settings); | |
} | |
}); | |
}, | |
//Will get fired when element gets clicked on. | |
confirm: function(element,settings) { | |
this.createModal(element,settings); | |
}, | |
//Calculate title for modal | |
getTitle: function (element,settings) { | |
if ( jQuery(element).attr('data-confirm-title') ) { | |
settings.title = jQuery(element).attr('data-confirm-title'); | |
} | |
else { | |
settings.title = 'Bekräfta'; | |
} | |
}, | |
//Calculate content for modal | |
getContent: function(element,settings) { | |
if( jQuery(element).attr('data-confirm-text') ) { | |
settings.content = jQuery(element).attr('data-confirm-text'); | |
} | |
else { | |
settings.content = 'Denna åtgärd går ej att ångra. Är du säker på detta?'; | |
} | |
}, | |
//Get URL of element to go to after confirm | |
getUrl: function(element,settings) { | |
var elm = jQuery(element); | |
if( settings.url === '' && settings.form === '' && elm.attr('href') ){ | |
settings.url = elm.attr('href'); | |
} | |
}, | |
//Get form to submit after confirm. | |
getForm: function(element,settings) { | |
var elm = jQuery(element); | |
if( settings.url === '' && settings.form === '' ){ | |
var formObject = elm.parent('form'); | |
settings.form = formObject; | |
} | |
}, | |
//Function to perform when "confirm" is clicked in modal | |
confirmAction: function(element,settings){ | |
// We have confirmed the action | |
confirmed = true; | |
if(this.settings.url !== '' && this.settings.form === ''){ | |
window.location.href = this.settings.url; | |
} | |
else if (this.settings.url === '' && this.settings.form !== '') { | |
jQuery(this.element).trigger('click'); | |
} | |
else { | |
alert('End URL or form object not specified'); | |
} | |
}, | |
//Creates the modal dialog. | |
createModal: function(element,settings){ | |
var self = this; | |
var id = 'infoModal'+jQuery(element).index(); | |
var title = this.settings.title; | |
var content = this.settings.content; | |
var modal_wrap; | |
//Build modal. | |
modal_wrap = jQuery('<div />') | |
.addClass('modal fade') | |
.attr('id',id) | |
.appendTo('body'); | |
var modalInner = jQuery('<div />') | |
.addClass('modal-dialog') | |
.appendTo(modal_wrap); | |
var modalContent = jQuery('<div />') | |
.addClass('modal-content') | |
.appendTo(modalInner); | |
var header_wrap = jQuery('<div />') | |
.addClass('modal-header') | |
.appendTo(modalContent); | |
var header_title = jQuery('<h4 />') | |
.text(title) | |
.appendTo(header_wrap); | |
var body = jQuery('<div />') | |
.addClass('modal-body') | |
.html(content) | |
.appendTo(modalContent); | |
var footer = jQuery('<div />') | |
.addClass('modal-footer') | |
.appendTo(modalContent); | |
var footerClose = jQuery('<button />') | |
.attr('type','button') | |
.attr('data-dismiss','modal') | |
.text('Avbryt') | |
.addClass('btn btn-default') | |
.appendTo(footer); | |
var confirm = jQuery('<button />') | |
.attr('type','button') | |
.text('Fortsätt') | |
.addClass('btn btn-primary') | |
.appendTo(footer) | |
.click(function(){ | |
self.confirmAction(element,settings); | |
}); | |
//Clear DOM on close | |
modal_wrap.modal('show').on('hidden.bs.modal', function (e) { | |
jQuery('#'+id).remove(); | |
}); | |
} | |
}; | |
// A really lightweight plugin wrapper around the constructor, | |
// preventing against multiple instantiations | |
$.fn[ pluginName ] = function ( options ) { | |
return this.each(function() { | |
if ( !$.data( this, "plugin_" + pluginName ) ) { | |
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); | |
} | |
}); | |
}; | |
})( jQuery, window, document ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment