https://www.fanklub.com/resources/jquery/confirm-reveal/confirm-reveal.js

1
2/*
3   <script src="/resources/jquery/confirm-reveal/confirm-reveal.js"></script>
4
5		$(".-js-del-comment").on("click",function(ev) {
6				// catch the event 
7				ev.preventDefault();
8				// with a "password" set, the user has to enter the string in 
9				// order to be allowed to click "ok"
10				//confirmReveal.confirm(this,{password: "enterMeToProceed"})
11				confirmReveal.confirm(ev.target)
12		});
13
14		$(".-js-del-comment").on("ok.reveal", function(ev) {
15				// do something important here
16		});
17		$(".-js-del-comment").on("cancel.reveal", function(ev) {
18				// do something not so important here
19		});
20*/
21
22
23var confirmReveal = new Object();
24
25(function($) {
26
27	confirmReveal.defaultInit = function() {
28			$(document).on("click", "a[data-url]", function(ev) {
29				var elem = $(this);
30				var options = {
31					"title": elem.data("title"),
32					"body": elem.data("body"),
33					"body_class": elem.data("body-class"),
34					"ok": elem.data("ok"),
35					"ok_class": elem.data("ok-class")
36				}
37				confirmReveal.confirm(this, options)
38			});
39			$("a[data-url]").on("ok.reveal", function(ev) {
40					window.location.href = $(this).data("url");
41			});
42	}
43
44	confirmReveal.confirm = function(elem,options) {
45
46		elem = $(elem);
47
48		if (options == null) {
49			options = {};
50		}
51		defaults = {
52			modal_class: 'medium',
53			title: 'Aktion wirklich durchf&uuml;hren?',
54			title_class: '',
55			body: 'Diese Aktion kann nicht r&uuml;ckg&auml;ngig gemacht werden.',
56			body_class: '',
57			password: false,
58			prompt: 'Geben Sie <strong>%s</strong> ein um fortzufahren:',
59			footer_class: '',
60			ok: 'weiter',
61			onOk: function() {},
62			onCancel: function() {},
63			ok_class: 'button alert',
64			cancel: 'abbrechen',
65			cancel_class: 'button secondary',
66			animationIn: 'fade-in',
67			animationOut: 'fade-out'
68		};
69		settings = $.extend({}, defaults, options);
70
71		var confirm_button, confirm_html, confirm_label, el_options, modal, option, password, _ref;
72
73		el_options = elem.data('confirm');
74
75		if (!el_options) el_options = {};
76
77
78		option = function(name) {
79			return el_options[name] || settings[name];
80		};
81
82		modal_html  = "<div data-reveal class='reveal reveal-modal " + (option('modal_class')) 	+ "'>\n";
83		modal_html += "<h2 data-confirm-title class='" 				+ (option('title_class')) 	+ "'>" + option('title') + "</h2>\n";
84		modal_html += "<p data-confirm-body class='" 					+ (option('body_class')) 		+ "'>" + option('body') + "</p>\n";
85		modal_html += "<div data-confirm-footer class='" 			+ (option('footer_class')) 	+ "'>\n";
86		modal_html += "<a data-confirm-cancel class='" 				+ (option('cancel_class')) 	+ "'>" + option('cancel') + "</a>\n";
87		modal_html += "<a data-confirm-ok class='" 						+ (option('ok_class')) 			+ "'>" + option('ok') + "</a>\n";
88		modal_html += "</div>\n</div>";
89		modal = $(modal_html);
90
91		if ((password = option('password'))) {
92			// {{{
93			confirm_button = modal.find("[data-confirm-ok]");
94			confirm_label = (option('prompt')).replace('%s', password);
95			confirm_html = "<label>\n  " + confirm_label + "\n  <input data-confirm-password type='text'/>\n</label>";
96			modal.find('[data-confirm-body]').after($(confirm_html));
97			modal.find('[data-confirm-password]').on('keyup', function(e) {
98				var disabled;
99				disabled = $(this).val() !== password;
100				return confirm_button.toggleClass('disabled', disabled).prop('disabled', disabled);
101			}).trigger('keyup');
102			// }}}
103		}
104		
105		var cancelFunc; 
106		var confirmFunc;
107		if (Foundation && Foundation.Reveal) {
108			// >= Foundation 6
109			cancelFunc = function(e) {
110				// {{{
111				reveal.close();
112				// there might be a callback function
113				option('onCancel')();
114				// fire the cancel event
115				return elem.trigger('cancel.reveal', e);
116				// }}}
117			};
118
119			confirmFunc = function(e) {
120				// {{{
121				// if the password is not correct, don't do anything
122				if ($(this).prop('disabled')) { return false; }
123
124				reveal.close();
125				// there might be a callback function
126				option('onOk')();
127
128				const okEvent = new CustomEvent("ok.reveal", { detail: e});
129				elem.get(0).dispatchEvent(okEvent);
130
131				// fire the event
132				return elem.trigger('ok.reveal', e);
133				// }}}
134			}
135			
136			var reveal = new Foundation.Reveal(modal, {
137				"animationIn": 	option("animationIn"), //"hinge-in-from-top", 
138				"animationOut": option("animationOut") //"hinge-out-from-top"
139			});
140			reveal.open();
141
142		} else {
143			// < Foundation 6
144			cancelFunc = function(e) {
145				// {{{
146				modal.foundation('reveal', 'close');
147				// there might be a callback function
148				option('onCancel')();
149				// fire the cancel event
150				return elem.trigger('cancel.reveal', e);
151				// }}}
152			};
153
154			confirmFunc = function(e) {
155				// {{{
156				// if the password is not correct, don't do anything
157				if ($(this).prop('disabled')) { return false; }
158
159				modal.foundation('reveal', 'close');
160
161				// there might be a callback function
162				option('onOk')();
163
164				const okEvent = new CustomEvent("ok.reveal", { detail: e});
165				elem.get(0).dispatchEvent(okEvent);
166
167				// fire the event
168				return elem.trigger('ok.reveal', e);
169				// }}}
170			}
171
172			modal.appendTo($('body')).foundation().foundation('reveal', 'open').on('closed.fndtn.reveal', function(e) {
173				return modal.remove();
174			});
175
176		}
177
178
179		// confirm button {{{
180		modal.find('[data-confirm-ok]').on('click', confirmFunc);
181		// }}}
182
183		// cancel button {{{
184		modal.find('[data-confirm-cancel]').html(option('cancel')).on('click', cancelFunc);
185		// }}}
186
187		return false;

188
189	}
190
191}(jQuery));