https://humantech-spine.de/assets/js/vbox.js

1(function ($) {
2	$.vbox = function (options) {
3		const settings = $.extend({
4			redirectTo: '',
5			redirectOnFail: '',
6			title: 'Anwender-Information',
7			copy: 'Dieser Bereich ist ausschließlich Ärzten, Fachpersonal von Krankenhäusern und legitimierten Personen aus Fachkreisen vorbehalten.',
8			buttons: {
9				success: 'Ich bestätige, daß ich zu diesem Personenkreis gehöre.',
10				failure: 'Ich gehöre diesem Kreis nicht an.'
11			},
12			successMsg: {
13				header: 'Erfolg!',
14				body: 'Sie werden jetzt zurück zur Seite geleitet...'
15			},
16			failureMsg: {
17				header: 'Sorry!',
18				body: 'Sie sind nicht berechtigt diesen Bereich anzuzeigen...'
19			}
20		}, options);
21
22	    function reCenter() {
23	    	$('.vbox-container').css('top', `${Math.max(0, (($(window).height() - ($('.vbox-container').outerHeight() + 150)) / 2))}px`);
24	    	$('.vbox-container').css('left', `${Math.max(0, (($(window).width() - $('.vbox-container').outerWidth()) / 2))}px`);
25	    }
26    
27	    function buildHtml() {
28			let html = '';
29	        html += '<div class="vbox-overlay"></div>';
30	        html += '<div class="vbox-container">';
31	        html += `<h2>${settings.title}</h2>`;
32	        html += `<p>${settings.copy}</p>`;
33	        html += `<p><button id="success">${settings.buttons.success}</button></p>`;
34	        html += `<p><button id="failure">${settings.buttons.failure}</button><p>`;
35	        html += '</div>';
36	        $('body').append(html);
37	        $('.vbox-overlay').animate({opacity: 0.8}, 500, function () {
38	        	reCenter();
39	        	$('.vbox-container').css({opacity: 1});
40	        });    	
41	    }
42    
43	    function setSessionStorage(key, val) {
44	    	try {
45	    		sessionStorage.setItem(key, val);
46	    		return true;
47	    	} catch (e) {
48	    		return false;
49	    	}   	
50	    }
51    
52	    function handleSuccess() {
53	        $('.vbox-container').html(`<h3>${settings.successMsg.header}</h3><p><p>${settings.successMsg.body}</p></p>`);
54	        setTimeout(() => {
55	        	$('.vbox-container').animate({top: '-350px'}, 200, () => {
56	        		$('.vbox-overlay').animate({opacity: '0'}, 500, () => {
57	        			if (settings.redirectTo !== '')
58	        				window.location.replace(settings.redirectTo);
59	        			else
60	        				$('.vbox-overlay, .vbox-container').remove();
61	        			$('.content').css('visibility', 'visible');
62	        		});
63	        	});
64	        }, 2000);    	
65	    }
66
67	    function handleFailure() {
68	        $('.vbox-container').html(`<h3>${settings.failureMsg.header}</h3><p><p>${settings.failureMsg.body}</p></p>`);
69	        if (settings.redirectOnFail !== '') {
70	        	setTimeout(() => {
71	        		window.location.replace(settings.redirectOnFail);
72	        	}, 2000);
73	        }
74	    }
75
76	    if (sessionStorage.getItem('verified') === 'true') {
77	      return false;
78	    }
79
80	    $('.content').css('visibility', 'hidden');
81	    buildHtml();
82	
83	    $('.vbox-container #success').on('click', () => {
84	    	setSessionStorage('verified', 'true') 
85	    	handleSuccess();
86	    });
87	
88	    $('.vbox-container #failure').on('click', () => {
89	    	handleFailure();
90	    });
91	    
92	    $(window).resize(function () {
93	    	reCenter();
94	    });
95	};
96} (jQuery));