https://www.cabletiesandmore.com/js/dialogs.js?v=1780079011

1/**
2 * Allows windows-form-like dialogs for a web application using bootstrap 3 
3 * modals
4 * 
5 * @author Shane Gardner
6 * @since 1.0 Decemeber 20, 2017
7 * @version 1.0
8 */
9
10
11
12/**
13 * Creates private scoped environment for the ShowDialog() function and the 
14 * available parameter settings. They are assigned to the window object to allow
15 * global access
16 * 
17 * @param {jQuery} $
18 * @returns {void}
19 */
20(function( $ ) {
21
22    /**
23     * Used for both cancel buttons and blur induced modal closures
24     * 
25     * @type Integer
26     */
27    var CANCEL_VALUE = -1;
28
29    /**
30     * The Available Predefined button configs used for the ShowDialog function
31     * 
32     * @type Object
33     */
34    var DIALOG_BUTTON_TYPES = {
35        
36        'None': [],
37        'YesNo': [
38            {
39                text: 'Yes', // Displayed text
40                style: '', // Actual inline styles
41                cssClasses: 'btn-default', // As the name says classes assigned to button tag
42                value: 1 // Value sent to callback
43            }, 
44            {
45                text: 'No',
46                style: '',
47                cssClasses: 'btn-primary',
48                value: 0
49            }
50        ],
51        'YesNoCancel': [
52            {
53                text: 'Yes',
54                style: '',
55                cssClasses: 'btn-default',
56                value: 1
57            },  
58            {
59                text: 'No',
60                style: '',
61                cssClasses: 'btn-default',
62                value: 0
63            }, 
64            {
65                text: 'Cancel',
66                style: '',
67                cssClasses: 'btn-primary',
68                value: CANCEL_VALUE
69            }
70        ],
71        'OK': [
72            {
73                text: 'OK',
74                style: '',
75                cssClasses: 'btn-primary',
76                value: 1
77            }
78        ]
79        
80    };
81    
82    /**
83     * A list of Icon HTML snippets inserted to the 
84     * 
85     * @type Object
86     */
87    var DIALOG_ALERT_TYPES = {
88      
89        'None': '',
90        'Success': '<i class="fa fa-check-circle" style="color: #309b46; font-size: 4em;" aria-hidden="true"></i>',
91        'Warning': '<i class="fa fa-exclamation-triangle" style="color: #fccd09; /*background-color: #231f20;*/ font-size: 4em;" aria-hidden="true"></i>',
92        'Information': '<i class="fa fa-info-circle" style="color: #2a9fd9; font-size: 4em;" aria-hidden="true"></i>',
93        'Error': '<i class="fa fa-times-circle" style="color: #e61e27; font-size: 4em;" aria-hidden="true"></i>'
94        
95    };
96
97
98    /**
99     * Base ID used to assign to modal before an index is appended to the end
100     * to maintain jquery ID referencing integrity (only reference one element, 
101     * per selector).
102     * 

103     * @type String
104     */
105    var DIALOG_ID = "CT-bootstrap-dialog-";
106
107
108    /**
109     * Creates and places a formatted Bootstrap Modal at the end of the body 
110     * element, then displays it.
111     * 
112     * @param {string} message - Message displayed in modal body
113     * @param {string} heading - Message displayed in modal heading
114     * @param {function} callback - Function called after button click or Blur (if blur allowed)
115     * @param {array} buttonType - An array containing all the buttons on the modal settings. Use DIALOG_BUTTON_TYPES for list of predefined buttons. You may send in your own custom button config.
116     * @param {string} alertIcon - A string containing the HTML for the icon displayed on the modal in the icon section of the modal body. Use DIALOG_ALERT_TYPES, for predefined Icons.
117     * @param {boolean} enableBlur - Whether or not to allow closing on losing focus of the modal or hitting the esc key.
118     * @returns {void}
119     */
120    var ShowDialog = function (message, heading, callback , buttonType, alertIcon, enableBlur)
121    {
122        
123        message = typeof message !== 'undefined' ? message : '';
124        heading = typeof heading !== 'undefined' ? heading : '';
125        callback = typeof callback !== 'undefined' ? callback : function() {};
126        buttonType = typeof buttonType !== 'undefined' ? buttonType : DIALOG_BUTTON_TYPES.OK;
127        alertIcon = typeof alertIcon !== 'undefined' ? alertIcon : DIALOG_ALERT_TYPES.None;
128        enableBlur = typeof enableBlur !== 'undefined' ? enableBlur : true;
129        
130        // Search for existing modals
131        var $existingDialogs = $("[id^='" + DIALOG_ID + "']");
132        
133        // Create the ID as the base Dialog ID plus the number of other existant modals (next index up)
134        var modalID = DIALOG_ID + $existingDialogs.length;
135        
136        // If blur is not enabled set the bootstrap inline modal attributes to disable such actions
137        var blurOptions = enableBlur ? '' : 'data-backdrop="static" data-keyboard="false"';
138        
139        // Start the html estring for the standard bootstrap modal 
140        var modalHtml = '<div class="modal fade" id="' + modalID + '" role="dialog"' + blurOptions + '>\n\
141                        <div class="modal-dialog">\n\
142                            <div class="modal-content">\n\
143                                <div class="modal-header">\n\
144                                    ' + heading + '\n\
145                                </div>\n\
146                                <div class="modal-body">\n';
147        
148        
149        // If no alert Icon html was sent
150        if(alertIcon === '')
151        {
152            // The modal body should just contain the message
153            modalHtml += '         ' + message + '\n';
154        }
155        // Otherwise
156        else
157        {
158            // Format the body to have icon in a specific column on the left and the message in the right column (mimic .Net windows forms dialogs)
159            modalHtml += '          <div class="row">\n\
160                                        <div class="col-3">\n\
161                                            <div class="text-center">\n\
162                                                ' + alertIcon + '\n\
163                                            </div>\n\
164                                        </div>\n\
165                                        <div class="col-9">\n\
166                                            <div class="d-inline-block">\n\
167                                                ' + message + '\n\
168                                            </div>\n\
169                                        </div>\n\
170                                    </div>\n';
171        }                            
172                                    
173        // Close the modal body and start the footer                         
174        modalHtml +=            '</div>\n\
175                                <div class="modal-footer">\n';
176        
177        
178        // Iterate through the sent array of button configs (if any sent)
179        for(var i = 0; i < buttonType.length; i++)
180        {
181            // In the formatted HTML string for the button store the value to send to the callback in the value attribute
182            modalHtml += '          <button type="button" style="' + buttonType[i].style + '" class="btn ' + buttonType[i].cssClasse

182s + '" value="' + buttonType[i].value + '">' + buttonType[i].text + '</button>\n';
183        }
184        
185        
186        // Close the footer, modal-content, modal-dialog, and modal
187        modalHtml += '         </div>\n\
188                            </div>\n\
189                        </div>\n\
190                    </div>';
191        
192        
193        // Create a new jquery object with the formatted modal HTML
194        var $modal = $(modalHtml);
195        
196        // Show the modal and prepare events
197        $modal
198            .appendTo($('body')) // Add it to the DOM
199            .modal('show') // Display it
200            // Add a handler for the event the user closes the modal
201            .on('hide.bs.modal', function(e){
202                BlurHandler(e, callback);
203            })
204            // Now wire the click events for all the buttons on the modal
205            .find("button")
206                .on('click tap', function(e){
207                    ResponseHandler(e, callback);
208                });
209        
210    };
211    
212    
213    
214    
215    /**
216     * In the event the user closes the form without using one of the available
217     * buttons, call the callback function with the default cancel button value
218     * 
219     * @param {event} e
220     * @param {function} callback
221     * @returns {void}
222     */
223    function BlurHandler(e, callback)
224    {
225        // The element that triggered this event will definitely be the modal
226        var $modal = $(e.target);
227        
228        // Call the call back and send the response value
229        callback(CANCEL_VALUE);
230        
231        // When the modal is full closed (animation ends) remove it from the DOM
232        $modal.on('hidden.bs.modal', function(e){
233                $modal.remove();
234            });
235    }
236    
237    
238    
239    
240    /**
241     * The handler for actual modal button presses
242     * 
243     * @param {event} e
244     * @param {function} callback
245     * @returns {void}
246     */
247    function ResponseHandler(e, callback)
248    {
249        // Prevent the click from bubbling up through the DOM to contain them to
250        // the button, could prevent modals from closing on multi modal displays
251        e.stopPropagation();
252        e.preventDefault();
253        
254        // The element that triggered will definitely be the button as it should
255        // have no sub-elements
256        var $button = $(e.target);
257        
258        // Find the containing modal
259        var $modal = $button
260                        .closest('.modal');
261                
262        // Remove the event handlers that were set in the ShowDialog() function
263        $modal
264            .off('hide.bs.modal')
265            .find('button')
266                .off('click tap');
267    
268    
269        // Just before completely Closing trigger the callback for processing
270        callback($button.attr('value'));
271        
272        
273        // After callback returns, wire a closed event for the modal to
274        // completely remove it from the DOM once it completely closes
275        $modal
276            .on('hidden.bs.modal', function(e){
277                $modal.remove();
278            })
279            // Close it
280            .modal('hide');
281    
282    }
283    
284    
285    // Put the ShowDialog function into the public namespace as well as the 
286    // Available Alert and Button Option constants
287    window.DIALOG_BUTTON_TYPES = DIALOG_BUTTON_TYPES;
288    window.DIALOG_ALERT_TYPES = DIALOG_ALERT_TYPES;
289    window.ShowDialog = ShowDialog;
290
291}(jQuery));