https://conqueringdiseases.org/js/dialogManager.js

1var dialogManager = (function () {
2
3    var dialogContainer, contentContainer, htmlContent, mustClose, confirmCallback;
4
5    htmlContent = {};
6
7    function initializeManager() {
8        dialogContainer = document.querySelector(".dialog-container");
9       
10        dialogContainer.addEventListener("click", (evt) => {
11            // hide the dialog
12
13            if (!mustClose && document.getElementById("page_overlay")===evt.srcElement) {
14                hideDialog();
15            }
16        });
17
18        document.getElementById("dialogCloseButton").addEventListener("click", function (evt) {
19            if (typeof (confirmCallback !== "undefined") && typeof (confirmCallback) === "function") {
20                confirmCallback(false);
21            }
22            
23            dialogContainer.setAttribute("data-toggle-visibility", "off");
24        });
25    }
26
27    function hideDialog() {
28        dialogContainer.setAttribute("data-toggle-visibility", "off");
29    }
30
31    function doRegisterTemplates(templateUrls) {
32        // fetch and store the template html
33        // templateUrls are objects that look like {templateId: '', templateUrl:''}
34
35        for (var i = 0; i < templateUrls.length; i++) {
36            //htmlContent[templateUrls[i].templateId] = templateUrls[i]
37            var templateId = templateUrls[i].templateId
38            fetchTemplateHtml(templateId).then(function (txt) {
39                htmlContent[templateId] = txt;
40            });
41        }
42    }
43
44    function fetchTemplateHtml(templateId) {
45        var options = {
46            method: "GET", // *GET, POST, PUT, DELETE, etc.
47            //mode: "cors", // no-cors, cors, *same-origin
48            //cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
49            credentials: "same-origin", // include, *same-origin, omit
50            headers: {
51                "Content-Type": "text/html",
52                "X-Requested-With": "XMLHttpRequest"
53                // "Content-Type": "application/x-www-form-urlencoded",
54            },
55            redirect: "error" // manual, *follow, error
56            //referrer: "no-referrer", // no-referrer, *client
57        };
58
59        return window.fetch("/templates/" + templateId + ".html", options)
60            .then(function (response) {
61                return response.text();
62            })
63            .catch(function (error) {
64                console.log('There was an error in the get call: ', error.message);
65            });
66    }
67
68    function doGetTemplate(templateId) {
69        return htmlContent[templateId];
70    }
71
72    function doShowConfirm(msg, callbackFn) {
73        mustClose = true;
74        confirmCallback = callbackFn;
75        var el = document.getElementById("dialog_content");
76
77        var footerEl = document.getElementById("dialog_footer");
78        footerEl.style.display = "flex";
79        footerEl.innerHTML = "";
80        
81        var confirmButton = document.createElement("button");
82        confirmButton.innerHTML = "Yes";
83        confirmButton.classList.add("raised-button");
84        confirmButton.addEventListener("click", function (evt) {
85            callbackFn(true);
86            
87            dialogContainer.setAttribute("data-toggle-visibility", "off");
88        });
89        footerEl.insertAdjacentElement("beforeend", confirmButton);
90
91        var cancelButton = document.createElement("button");
92        cancelButton.innerHTML = "No";
93        cancelButton.classList.add("raised-button");
94        cancelButton.addEventListener("click", function (evt) {
95            callbackFn(false);
96            
97            dialogContainer.setAttribute("data-toggle-visibility", "off");
98        });
99        footerEl.insertAdjacentElement("beforeend", cancelButton);
100
101        el.innerHTML = "";
102        el.innerHTML = msg;
103        dialogContainer.setAttribute("data-toggle-visibility", "on");
104    }
105
106    function showMessage(templateId, mustCloseDialog) {
107        mustClose = mustCloseDialog;
108        document.getElementById("dialog_footer").style.display = "none";
109        if (typeof(htmlContent[templateId]) === "undefined") {
110            // let's fetch it
111            fetchTemplateHtml(templateId).then(function (txt) {
112                htmlContent[templateId] = txt;
113                showDialogTemplate(templateId);
114            });
115        } else {
116            // let's just load it
117            showDialogTemplate(templateId);
118        }
119    }
120
121    function showDialogTemplate(templateId) {
122        var el = document.getElementById("dialog_content");
123        el.innerHTML = "";
124        el.innerHTML = doGetTemplate(templateId);
125        dialogContainer.setAttribute("data-toggle-visibility", "on");
126    }
127
128
129    if (document.readyState === "loading") {  // Loading hasn't finished yet
130        document.addEventListener("DOMContentLoaded", initializeManager);
131    } else {  // `DOMContentLoaded` has already fired
132        initializeManager();
133    }
134
135    return {
136        showDialog: showMessage,
137        showConfirm: doShowConfirm,
138        registerTemplates: doRegisterTemplates,
139        getTemplate: doGetTemplate
140    };
141})();