https://www.childrensmuseum.org/assets/js/alert.js

1export {create, close, position}
2
3/**
4 * Function: position
5 * Positions the alert box
6 */
7function position() {
8    var $ = jQuery;
9    var box = $("#tcmi-alert-box");
10    if(box.length === 0) {
11        return;
12    }
13    var window_width = $(window).width();
14    var box_width = 0;
15    var full_screen = false;
16    if(box.data("full-screen") == "1") {
17        full_screen = true;
18        box.css("height", $(window).height() - 20 + "px");
19    }
20    if(window_width < 730 || full_screen) {
21        box_width = window_width - 20;
22    } else {
23        box_width = 700;
24    }
25    box.css("width", box_width + "px");
26    box.css("left", "50%");
27    box.css("margin-left", "-" + (box_width/2) + "px");
28    box.css("top", "50%");
29    box.css("margin-top", "-" + (box.outerHeight()/2) + "px");
30}
31
32/**
33 * Function: close
34 * Closes the alert box
35 */
36function close(animate) {
37    
38    var $ = jQuery;
39    $('div').removeAttr("inert")
40    animate = (animate == null || (typeof(animate) == "undefined")) ? true : animate;
41    if(!animate) {
42        $("#tcmi-alert-background").hide();
43        $("#tcmi-alert-box").hide();
44        $("#tcmi-alert-title").removeClass();
45        $("#tcmi-alert-close-button-wrapper").hide();
46    } else {
47        $("#tcmi-alert-background").fadeOut(200, function() {
48            $("#tcmi-alert-title").removeClass();
49            $("#tcmi-alert-close-button-wrapper").hide();
50        });
51        $("#tcmi-alert-box").fadeOut(200);
52    }
53}
54
55/**
56 * Function: create
57 * Opens the alert box
58 *
59 * Parameters:
60 *     message - The message to display in the alert box
61 *
62 *     title - Text to display in the header of the alert box
63 *
64 *     type - The type of the alert box (See the Valid Types section below).
65 *
66 *     show_close_button - True to display a button that allows the user to close to alert
67 *     box, false otherwise.
68 *
69 *     show_loading_icon - True to display a loading icon below the message text, false
70 *     otherwise.
71 *
72 *     full_screen - True if the alert box should match the size of the viewport, false
73 *     otherwise.
74 *
75 * Valid Types:
76 *     success - Used when notifying the user that an operation has completed
77 *     successfully. Changes the header text color to light-green.
78 *
79 *     error - Used when notifying the user that an error has occurred. Changes the
80 *     header text color to red.
81 *
82 *     notitle - Hides the header text of the alert box.
83 */
84function create(message, title, type, show_close_button, show_loading_icon,
85                    full_screen) {
86    var $ = jQuery;
87    var box = $("#tcmi-alert-box");
88    // remove all custom styles from the message wrapper
89    box.removeAttr("style");
90    $("#tcmi-alert-message").removeAttr("style");
91    $("#tcmi-alert-message").find(".tcmi-spinner").remove();
92    // remove full-screen data from the alert box
93    box.removeData("full-screen");
94    box.removeAttr("style");
95    // set alert box title
96    var title_element = $("#tcmi-alert-title");
97    title_element.show();
98    if(typeof(title) === "undefined" || !title) {
99        title = "Alert";
100    }
101    title_element.html(title);
102    // check the type of the alert
103    if(type == "success") {
104        title_element.addClass("tcmi-alert-title-success");
105    } else if(type == "error") {
106        title_element.addClass("tcmi-alert-title-error");
107    } else if(type == "notitle") {
108        title_element.hide();
109    }
110    // check if the close button should be visible
111    if(typeof(show_close_button) === "undefined") {
112        show_close_button = true;
113    }
114    // show the alert box background
115    var background = $("#tcmi-alert-background");
116    if(!background.is(":visible")) {
117        background.fadeIn(200);
118    }
119    // show the alert box
120    if(!box.is(":visible")) {
121        box.fadeIn(200);
122    }
123    // show or hide the close button
124    var button_wrapper = $("#tcmi-alert-close-button-wrapper");
125    if(show_close_button && !button_wrapper.is(":visible")) {
126        button_wrapper.show();
127    } else if(!show_close_button) {
128        button_wrapper.hide();
129        title_element.addClass("tcmi-alert-title-nobutton");
130    }
131    if(show_loading_icon) {
132        if(message != "") {
133            message = message + "<br/><br/>";
134        }
135        message = message + "<div class='tcmi-spinner blue'></div>";
136    }
137    // check if the alert box should be full screen
138    if(typeof(full_screen) === "undefined") {
139        full_screen = false;

140    }
141    if(full_screen) {
142        box.data("full-screen", "1");
143    }
144    // set the message
145    $("#tcmi-alert-message").html(message);
146    // accessibility attributes
147    $("#tcmi-alert-box").attr("role","dialog");
148    $("#tcmi-alert-box").attr("aria-modal",true);
149    $('div').not(".alert-no-inert").attr('inert', true)
150    $("#tcmi-alert-close-button").click(close);
151    $(".alert-close-button").click(close);
152    $(document).on("keydown", function(e)
153    {
154        if(e.key == "Escape" && show_close_button)
155        {
156            close()
157        }
158    })
159    // position the alert box
160    position();
161}
162
163$(window).resize(function() {
164    position();
165});