https://www.pinecrestidaho.org/apps/js/alert/v4/alertBox.js

1// Declare options
2var default_options = {
3	showAlertIcon: true,
4	visible: true,
5	targetLocation: ""
6};
7
8function alertBox(options) {
9	let alertBox = Object.assign({}, default_options, options || {});
10
11	function closeAlert(src) {
12		let ehabEle = document.getElementById('en-hp-alert-box');
13		if(alertBox.showAlertIcon){
14			let ehabEleHeight = 80;
15			let ehabEleWidth = 600;
16			let ehabEleLeft = 50;
17			let ehabOpacity = 1;
18			let counter = 5;
19			var id = setInterval(frame, 50);
20		  	function frame() {
21		    	if (counter == 0) {
22		      		clearInterval(id);
23		      		ehabEle.style.display = "none";
24		      		document.getElementById('en-hp-alert-box-overlay').style.display = 'none';
25		    		document.getElementById('en-hp-alert-box-overlay').setAttribute('aria-hidden', 'true')
26		    		alertBox.visible = false;
27		    		toggleHPAlertBell(true);
28		    	} else {
29		    		counter--; 
30		    		let tempHeight = ehabEleHeight - 16;
31		    		if(ehabEleHeight > 0 ){
32		    			ehabEleHeight = tempHeight;
33		    		}
34		    		let tempWidth = ehabEleWidth - 120;
35		    		if(ehabEleWidth > 0 ){
36		    			ehabEleWidth = tempWidth;
37		    		}
38		    		let tempLeft = ehabEleLeft + 10;
39		    		if(ehabEleLeft < 100 ){
40		    			ehabEleLeft = tempLeft;
41		    		}
42		    		ehabOpacity = ehabOpacity - .2;
43		    		
44		    		ehabEle.style.maxHeight = ehabEleHeight + "%"; 
45		    		ehabEle.style.width = ehabEleWidth + "px"; 
46		    		//ehabEle.style.left = ehabEleLeft + "%"; 
47		    		ehabEle.style.opacity = ehabOpacity;
48		    	}
49		  	}//frame
50		}else{
51			ehabEle.style.display = "none";
52      		document.getElementById('en-hp-alert-box-overlay').style.display = 'none';
53    		document.getElementById('en-hp-alert-box-overlay').setAttribute('aria-hidden', 'true')
54    		alertBox.visible = false;
55    		toggleHPAlertBell(true);
56		}//else
57
58		if(src == 'xButton'){
59			sessionStorage.setItem("alertClosedByXButton", "true");
60		}
61	}
62
63	function toggleHPAlertBell(show){
64		var ele = document.getElementById("en-hpa-show-icon");
65	}
66	
67	function toggleHPAlertBell(show){
68		var ele = document.getElementById("en-hpa-show-icon");
69		if(ele){
70			if(show){
71				ele.style.display = "block";
72			}else{
73				ele.style.display = "none";
74			}
75		}
76	}
77		
78	// Check if Alert is set to visible
79	if (alertBox.visible == true) {
80		// check if on homepage
81		if (window.location.pathname === '/' || window.location.pathname === '/index.jsp' || window.location.pathname === '/index1.jsp' || window.location.pathname === alertBox.targetLocation) {
82			var closeElement= document.querySelector(".close");
83			closeElement.addEventListener("click", function(event){closeAlert('xButton')});
84			document.querySelector("#en-hp-alert-box-overlay").addEventListener("click", function(event){closeAlert('overlayArea')});
85			
86			document.addEventListener("keyup", function(e){
87				if(!alertBox.visible) return;
88				if (e.keyCode === 27) {
89					closeAlert('escKey');
90				}
91			});
92			//revert the changed css property while closing the alert
93			let abEle = document.getElementById('en-hp-alert-box');
94			abEle.style.maxHeight = "80%"; 
95			abEle.style.width =  "min(600px, 98vw)";
96			abEle.style.opacity = 1;
97			//show the alert
98			document.getElementById("en-hp-alert-box").style.display = "block";
99			document.getElementById("en-hp-alert-box-overlay").style.display = "block";
100			//hide the bell icon
101			toggleHPAlertBell(false);
102			setTimeout(function () {
103				closeElement.focus();
104			}, 1);
105		}
106	} 
107}
108// make defaults public
109alertBox.default_options = default_options;