2 | 7 |8 | -------------------------------------------------------------------------------- /tests/modal_form.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /helpers/alwaysdirty.pkg/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.dirtyforms.helpers.alwaysdirty", 3 | "main": "jquery.dirtyforms.helpers.alwaysdirty.min.js", 4 | "version": "2.0.0", 5 | "homepage": "https://github.com/snikch/jquery.dirtyforms", 6 | "authors": [ 7 | "Mal Curtis
' + message + '
' + 49 | '' + 50 | ' ' + 51 | '' + 52 | '' + 53 | '', 54 | css: { 55 | width: this.width, 56 | padding: this.padding, 57 | color: this.color, 58 | border: this.border, 59 | backgroundColor: this.backgroundColor, 60 | cursor: 'auto' 61 | }, 62 | overlayCSS: { 63 | cursor: 'auto', 64 | opacity: this.overlayOpacity 65 | } 66 | }); 67 | 68 | // Bind Events 69 | choice.bindEnterKey = true; 70 | choice.proceedSelector = '.' + this.class + ' .dirty-proceed'; 71 | choice.staySelector = '.' + this.class + ' .dirty-stay,.blockOverlay'; 72 | 73 | // Support for Dirty Forms < 2.0 74 | if (choice.isDF1) { 75 | var close = function (decision) { 76 | return function (e) { 77 | if (e.type !== 'keydown' || (e.type === 'keydown' && (e.which == 27 || e.which == 13))) { 78 | $.unblockUI(); 79 | decision(e); 80 | return false; 81 | } 82 | }; 83 | }; 84 | var decidingCancel = $.DirtyForms.decidingCancel; 85 | $(document).keydown(close(decidingCancel)); 86 | $(choice.staySelector).click(close(decidingCancel)); 87 | $(choice.proceedSelector).click(close($.DirtyForms.decidingContinue)); 88 | } 89 | }, 90 | close: function () { 91 | $.unblockUI(); 92 | }, 93 | 94 | // Support for Dirty Forms < 2.0 95 | fire: function (message, title) { 96 | this.title = title; 97 | this.open({ isDF1: true }, message); 98 | }, 99 | 100 | // Support for Dirty Forms < 1.2 101 | bind: function () { 102 | }, 103 | stash: function () { 104 | return false; 105 | }, 106 | refire: function () { 107 | return false; 108 | }, 109 | selector: 'no-op' 110 | }; 111 | 112 | /*' + message + '
' + 46 | '' + 47 | '' + this.proceedButtonText + '' + 48 | '' + this.stayButtonText + '' + 49 | '
'; 50 | $.facebox(content); 51 | 52 | // Bind Events 53 | choice.bindEnterKey = true; 54 | choice.staySelector = '#facebox .dirty-stay, #facebox .close, #facebox_overlay'; 55 | choice.proceedSelector = '#facebox .dirty-proceed'; 56 | 57 | if (choice.isDF1) { 58 | var close = function (decision) { 59 | return function (e) { 60 | if (e.type !== 'keydown' || (e.type === 'keydown' && (e.which == 27 || e.which == 13))) { 61 | // Facebox hack: If we call close when returning from the stash, the 62 | // stash dialog will close, so we guard against calling close in that case. 63 | if (!$.DirtyForms.dialogStash) { 64 | $(document).trigger('close.facebox'); 65 | } 66 | decision(e); 67 | } 68 | }; 69 | }; 70 | var decidingCancel = $.DirtyForms.decidingCancel; 71 | $(document).bind('keydown.facebox', close(decidingCancel)); 72 | $(choice.staySelector).click(close(decidingCancel)); 73 | $(choice.proceedSelector).click(close($.DirtyForms.decidingContinue)); 74 | } 75 | }, 76 | close: function (continuing, unstashing) { 77 | // Facebox hack: If we call close when returning from the stash, the 78 | // stash dialog will close, so we guard against calling close in that case. 79 | if (!unstashing) { 80 | $(document).trigger('close.facebox'); 81 | } 82 | }, 83 | stash: function () { 84 | var isDF1 = typeof $.DirtyForms.isDeciding === 'function', 85 | $fb = $('#facebox'), 86 | $content = $fb.find('.content'); 87 | 88 | // Store the DOM state as actual HTML DOM values 89 | $content.find('datalist,select,textarea,input').not('[type="button"],[type="submit"],[type="reset"],[type="image"]').each(function () { 90 | storeFieldValue($(this)); 91 | }); 92 | 93 | return ($.trim($fb.html()) === '' || $fb.css('display') != 'block') ? 94 | false : 95 | isDF1 ? 96 | $content.clone(true) : 97 | $content.children().clone(true); 98 | }, 99 | unstash: function (stash, ev) { 100 | $.facebox(stash); 101 | }, 102 | 103 | // Support for Dirty Forms < 2.0 104 | fire: function (message, title) { 105 | this.title = title; 106 | this.open({ isDF1: true }, message, $.DirtyForms.ignoreClass); 107 | }, 108 | selector: $.DirtyForms.dialog.stashSelector, 109 | 110 | // Support for Dirty Forms < 1.2 111 | bind: function () { 112 | }, 113 | refire: function (content, ev) { 114 | this.unstash(content, ev); 115 | } 116 | }; 117 | 118 | var storeFieldValue = function ($field) { 119 | if ($field.is('select,datalist')) { 120 | $field.find('option').each(function () { 121 | var $option = $(this); 122 | if ($option.is(':selected')) { 123 | $option.attr('selected', 'selected'); 124 | } else { 125 | $option.removeAttr('selected'); 126 | } 127 | }); 128 | } else if ($field.is(":checkbox,:radio")) { 129 | if ($field.is(':checked')) { 130 | $field.attr('checked', 'checked'); 131 | } else { 132 | $field.removeAttr('checked'); 133 | } 134 | } else if ($field.is('textarea')) { 135 | $field.text($field.val()); 136 | } else { 137 | $field.attr('value', $field.val()); 138 | } 139 | }; 140 | 141 | /*' + message + '
' + 92 | '' + 93 | ' ' + 94 | '' + 95 | '' + 96 | '', 97 | 98 | // Not supported in 3.x 99 | before_open: function (PNotify) { 100 | if (!isPN1) { 101 | // Position this notice in the center of the screen. 102 | PNotify.get().css({ 103 | "top": ($(window).height() / 2) - (PNotify.get().height() / 2), 104 | "left": ($(window).width() / 2) - (PNotify.get().width() / 2) 105 | }); 106 | } 107 | 108 | // Make a modal screen overlay. 109 | if (modal_overlay) modal_overlay.fadeIn("fast"); 110 | else modal_overlay = $("", { 111 | "class": "ui-widget-overlay", 112 | "css": { 113 | "display": "none", 114 | "position": "fixed", 115 | "top": "0", 116 | "bottom": "0", 117 | "right": "0", 118 | "left": "0" 119 | } 120 | }).appendTo("body").fadeIn("fast"); 121 | } 122 | }); 123 | 124 | // Patch for PNotify 1.x 125 | notice = !isPN1 ? new PNotify(content) : $.pnotify(content); 126 | 127 | // Bind Events 128 | choice.bindEnterKey = true; 129 | choice.proceedSelector = '.' + this.class + ' .dirty-proceed'; 130 | choice.staySelector = '.' + this.class + ' .dirty-stay,.ui-widget-overlay'; 131 | 132 | // Support for Dirty Forms < 2.0 133 | if (choice.isDF1) { 134 | var close = function (decision) { 135 | return function (e) { 136 | if (e.type !== 'keydown' || (e.type === 'keydown' && (e.which == 27 || e.which == 13))) { 137 | notice.remove(); 138 | if (modal_overlay) modal_overlay.fadeOut("fast"); 139 | decision(e); 140 | return false; 141 | } 142 | }; 143 | }; 144 | // Trap the escape key and force a close. Cancel it so PNotify doesn't intercept it. 145 | var decidingCancel = $.DirtyForms.decidingCancel; 146 | $(document).keydown(close(decidingCancel)); 147 | $(choice.staySelector).click(close(decidingCancel)); 148 | $(choice.proceedSelector).click(close($.DirtyForms.decidingContinue)); 149 | } 150 | }, 151 | close: function () { 152 | notice.remove(); 153 | if (modal_overlay) modal_overlay.fadeOut("fast"); 154 | }, 155 | 156 | // Support for Dirty Forms < 2.0 157 | fire: function (message, title) { 158 | this.title = title; 159 | this.open({ isDF1: true }, message, $.DirtyForms.ignoreClass); 160 | }, 161 | 162 | // Support for Dirty Forms < 1.2 163 | bind: function () { 164 | }, 165 | stash: function () { 166 | return false; 167 | }, 168 | refire: function () { 169 | return false; 170 | }, 171 | selector: 'no-op' 172 | }; 173 | 174 | /*| Name | 109 |Type | 110 |Default | 111 |Description | 112 |
|---|---|---|---|
| title | 115 |string | 116 |'Are you sure you want to do that?' | 117 |Sets the title of the dialog. | 118 |
| proceedButtonText | 121 |string | 122 |'Leave This Page' | 123 |Sets the text of the continue button of the dialog. | 124 |
| stayButtonText | 127 |string | 128 |'Stay Here' | 129 |Sets the text of the cancel button of the dialog. | 130 |
| preMessageText | 133 |string | 134 |'' | 135 |Sets the text that precedes the message text. May contain HTML. | 136 |
| postMessageText | 139 |string | 140 |'' | 141 |Sets the text that follows the message text. May contain HTML. | 142 |
| width | 145 |int | 146 |430 | 147 |The width of the dialog. | 148 |
| Name | 108 |Type | 109 |Default | 110 |Description | 111 |
|---|---|---|---|
| title | 114 |string | 115 |'Are you sure you want to do that?' | 116 |Sets the title of the dialog. | 117 |
| proceedButtonClass | 120 |string | 121 |'' | 122 |Sets the CSS class of the continue button of the dialog (an HTML anchor tag element). | 123 |
| proceedButtonText | 126 |string | 127 |'Leave This Page' | 128 |Sets the text of the continue button of the dialog. | 129 |
| stayButtonClass | 132 |string | 133 |'' | 134 |Sets the CSS class of the cancel button of the dialog (an HTML anchor tag element). | 135 |
| stayButtonText | 138 |string | 139 |'Stay Here' | 140 |Sets the text of the cancel button of the dialog. | 141 |
| stashSelector | 144 |string | 145 |'#facebox .content' | 146 |When using stashing, setting this selector chooses the element of the modal dialog containing your form that will be included in the stash and later restored during unstash (if the user clicks cancel). | 147 |
| Name | 104 |Type | 105 |Default | 106 |Description | 107 |
|---|---|---|---|
| title | 110 |string | 111 |'Are you sure you want to do that?' | 112 |Sets the title of the dialog. | 113 |
| class | 116 |string | 117 |'dirty-dialog' | 118 |Sets the CSS class of the SPAN element that contains all of the elements of the dialog. | 119 |
| proceedButtonText | 122 |string | 123 |'Leave This Page' | 124 |Sets the text of the continue button of the dialog. | 125 |
| stayButtonText | 128 |string | 129 |'Stay Here' | 130 |Sets the text of the cancel button of the dialog. | 131 |
| width | 134 |string | 135 |'400px' | 136 |Sets the width of the dialog (passes the value to the css.width property of BlockUI). | 137 |
| padding | 140 |string | 141 |'10px' | 142 |Sets the padding of the dialog (passes the value to the css.padding property of BlockUI). | 143 |
| color | 146 |string | 147 |'#000' | 148 |Sets the foreground color of the dialog (passes the value to the css.color property of BlockUI). | 149 |
| border | 152 |string | 153 |'3px solid #aaa' | 154 |Sets the border of the dialog (passes the value to the css.border property of BlockUI). | 155 |
| backgroundColor | 158 |string | 159 |'#fff' | 160 |Sets the background color of the dialog (passes the value to the css.backgroundColor property of BlockUI). | 161 |
| overlayOpacity | 164 |float | 165 |0.5 | 166 |Sets the opacity of the dialog overlay (passes the value to the overlayCSS.opacity property of BlockUI). | 167 |
| Name | 125 |Type | 126 |Default | 127 |Description | 128 |
|---|---|---|---|
| title | 131 |string | 132 |'Are you sure you want to do that?' | 133 |Sets the title of the dialog. | 134 |
| class | 137 |string | 138 |'dirty-dialog' | 139 |Sets the CSS class of the DIV element (SPAN if using PNotify 1.3) that contains all of the elements of the dialog. | 140 |
| proceedButtonText | 143 |string | 144 |'Leave This Page' | 145 |Sets the text of the continue button of the dialog. | 146 |
| stayButtonText | 149 |string | 150 |'Stay Here' | 151 |Sets the text of the cancel button of the dialog. | 152 |
| styling | 155 |string | 156 |'bootstrap3' | 157 |Sets the CSS theme you want to style PNotify. Available choices: 'bootstrap3', 'jqueryui', or 'fontawesome'. See the theme section of the PNotify documentation for details. | 158 |
| width | 161 |string | 162 |'330' | 163 |Sets the width of the dialog. | 164 |
| Name | 110 |Type | 111 |Default | 112 |Description | 113 |
|---|---|---|---|
| title | 116 |string | 117 |' Are you sure you want to do that?' | 118 |Sets the title of the dialog. Supports HTML. | 119 |
| proceedButtonClass | 122 |string | 123 |'dirty-proceed' | 124 |Sets the CSS class of the continue button of the dialog (an HTML button tag element). The element with this class will automatically have the proceedButtonText inserted into it and a click event handler bound to it before showing the dialog. | 125 |
| proceedButtonText | 128 |string | 129 |'Leave This Page' | 130 |Sets the text of the continue button of the dialog. | 131 |
| stayButtonClass | 134 |string | 135 |'dirty-stay' | 136 |Sets the CSS class of the cancel button of the dialog (an HTML button tag element). The element with this class will automatically have the stayButtonText inserted into it before showing the dialog. | 137 |
| stayButtonText | 140 |string | 141 |'Stay Here' | 142 |Sets the text of the cancel button of the dialog. | 143 |
| dialogID | 146 |string | 147 |'dirty-dialog' | 148 |Sets the ID of the outermost element of the dialog. If there is an element with this ID on the page, it will be used for the dialog. If not, a default dialog will be automatically generated. | 149 |
| titleID | 152 |string | 153 |'dirty-title' | 154 |Sets the ID of the element that represents the dialog title. The element with this ID will automatically have the title text inserted into it before showing the dialog. | 155 |
| messageClass | 158 |string | 159 |'dirty-message' | 160 |Sets the CSS class of the element that represents the message body. The element with this class will automatically have the message inserted into it before showing the dialog. | 161 |
| preMessageText | 164 |string | 165 |'' | 166 |Sets the text that precedes the message text. May contain HTML. | 167 |
| postMessageText | 170 |string | 171 |'' | 172 |Sets the text that follows the message text. May contain HTML. | 173 |
| replaceText | 176 |boolean | 177 |true | 178 |Set to false to prevent the title, message, continue button text, and cancel button text in the dialog from being overwritten by the configured values. This is useful if you want to configure your dialog text entirely in the HTML of the page. | 179 |