https://www.smithfield-nc.com/common/scripts/ezpopup.js

1(function() {
2
3    function EZPopup() {
4
5        var data, width, height, $element, $modal;
6        var $body = $("body");
7        var bodyWidth = document.body.clientWidth;
8        var windowHeight = window.innerHeight;
9        var storage = window.localStorage;
10        var storage_prefix = "eztask:alert:seen:";
11        var isInEditor = window.location.pathname == "/design/Editor.aspx";
12        var circle = new Circle();
13        var timer = null;
14        var template = "<div id='ezpopup'><div id='ezpopup-modal'><div id='ezpopup-modal-header'><span id='ezpopup-modal-header-icon'><span class='ion-android-notifications'></span></span><span id='ezpopup-modal-header-title'>{{title}}</span><span id='ezpopup-modal-header-close'><button class='ezpopup-close ion-close ion-ios-close-empty' title='Hide Message' aria-label='Close Alert'></button></span></div><div id='ezpopup-modal-content'><div id='ezpopup-modal-content-padding'>{{description}}</div></div><div id='ezpopup-modal-footer'><div id='ezpopup-modal-footer-padding'><button autofocus>Okay, got it.</button></div></div></div></div>";
15        var seen = null;
16
17        function getData(url) {
18            $.ajax({

19                type: "GET",
20                url: url,
21                cache: false,
22                success: function(result) {
23                    parseData(result, this.dataTypes.indexOf("xml") > -1);
24                },
25                error: function(error) {
26                    console.warn("Could not fetch alert data from: " + url);
27                }
28            });
29        }
30
31        function parseData(result, isXML) {
32            if (isXML) {
33                data = ezUtilities.convertXMLtoJSON(result);
34            } else {
35                data = result;
36            }
37
38            if (data.length) {
39                data = data[0];
40                render();
41            }
42        }
43
44        function render() {
45            seen = checkIfSeen();
46            $element = $(ezUtilities.renderTemplate(template, data));
47
48            if (seen) {
49                $element.addClass("ezpopup--hidden").css("zIndex", "-1");
50            }
51
52            $body.prepend($element);
53            attachEvents();
54            circle.init(seen).onClick(open);
55        }
56
57        function close() {
58            $element.addClass("ezpopup--hidden");
59            clearTimeout(timer);
60            timer = setTimeout(function() {
61                circle.moveToCorner();
62                $element.css("zIndex", "-1");
63            }, 400);
64        }
65
66        function open() {
67            clearTimeout(timer);
68            circle.moveToCenter();
69            timer = setTimeout(function() {
70                $element.css("zIndex", "9999").removeClass("ezpopup--hidden");
71            }, 500);
72        }
73
74        function attachEvents() {
75            $element.find("#ezpopup-modal-header-close").on("click", close).on("click", markAsSeen);
76            $element.find("button").on("click", close).on("click", markAsSeen);
77        }
78
79        function checkIfSeen() {
80            return storage.getItem(createName()) ? true : false;
81        }
82
83        function markAsSeen() {
84            storage.setItem(createName(), new Date().toString());
85        }
86
87        function createName() {
88            return storage_prefix + data.title.toLowerCase().replace(/\W/g, "-");
89        }
90
91        return {
92            init: function(url) {
93                if (!isInEditor) {
94                    getData(url);
95                }
96            }
97        };
98
99    }
100
101    function Circle() {
102
103        var width, height;
104        var $element = $("<button id='ezpopupcircle' type='button' aria-label='Open collapsed notification popup' aria-haspopup='dialog' aria-expanded='false' class='ion-android-notifications' title='View Message'></button>");
105        var $body = $("body");
106        var inCorner = false;
107
108        function render() {
109            $body.prepend($element);
110        }
111
112        function cacheDimensions() {
113            width = $element.outerWidth();
114            height = $element.outerHeight();
115            return api;
116        }
117
118        function moveToCenter() {
119            $element.css("left", (document.body.clientWidth / 2) - (width / 2) + "px");
120            $element.css("top", (window.innerHeight / 2) - (height / 2) + "px");
121            inCorner = false;
122            return api;
123        }
124
125        function moveToCorner() {
126            $element.css("left", (document.body.clientWidth - 80) + "px");
127            $element.css("top", (window.innerHeight - 180) + "px");
128            inCorner = true;
129            return api;
130        }
131
132        function addClass(name) {
133            $element.addClass(name);
134            return api;
135        }
136
137        function removeClass(name) {
138            $element.removeClass(name);
139            return api;
140        }
141
142        function setExpanded(value) {
143            $element.attr("aria-expanded", value ? "true" : "false");
144            return api;
145        }
146
147        function init(seen) {
148            render();
149            cacheDimensions();
150
151            if (seen) {
152                moveToCorner();
153            } else {
154                moveToCenter();
155            }
156
157            return api;
158        }
159
160        $(window).on("resize", ezUtilities.debounce(function() {
161            if (inCorner) {
162                moveToCorner();
163            } else {
164                moveToCenter();
165            }
166        }, 250));
167
168        var api = {
169            init: init,
170            moveToCorner: moveToCorner,
171            moveToCenter: moveToCenter,
172            addClass: addClass,
173            removeClass: removeClass,
174            setExpanded: setExpanded,
175            onClick: function(func) {
176                $element.on("click", func);
177                return api;
178            }
179        };
180
181        return api;
182
183    }
184
185    window.ezPopup = new EZPopup();
186
187})();