1 /**
  2  * @fileOverview
  3  * @author <a href="https://www.labkey.org">LabKey</a> (<a href="mailto:info@labkey.com">info@labkey.com</a>)
  4  * @license Copyright (c) 2009-2016 LabKey Corporation
  5  * <p/>
  6  * Licensed under the Apache License, Version 2.0 (the "License");
  7  * you may not use this file except in compliance with the License.
  8  * You may obtain a copy of the License at
  9  * <p/>
 10  * http://www.apache.org/licenses/LICENSE-2.0
 11  * <p/>
 12  * Unless required by applicable law or agreed to in writing, software
 13  * distributed under the License is distributed on an "AS IS" BASIS,
 14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15  * See the License for the specific language governing permissions and
 16  * limitations under the License.
 17  * <p/>
 18  */
 19 (function($) {
 20 
 21     var onElemChange = function() {
 22         this._isDirty = true;
 23     };
 24 
 25     /**
 26      * Constructs a LABKEY.Form object. This object may be used to track the dirty state of an HTML form
 27      * and warn the user about unsaved changes if the user leaves the page before saving.
 28      * @class LABKEY.Form A utility class for tracking HTML form dirty state and warning the user about unsaved changes.
 29      * @constructor
 30      * @param {Object} config A configuration ojbect containing the following properties:
 31      * @param {Element} config.formElement A reference to the HTML form element you want to track.
 32      * @param {String} [config.warningMessage] A warning message to display if the user
 33      * attempts to leave the page while the form is still dirty. If not supplied, a default message is used.
 34      * @param {Boolean} [config.showWarningMessage] Set to false to stop this from displaying the warning message
 35      * when the user attempts to leave the page while the form is still dirty. If you only want to use this class
 36      * to track the dirty state only and not to warn on unload, set this to false.
 37      * @example
 38      <form id='myform' action="..." method="POST">
 39      <input type="text" name="Example" size="10"/>
 40      <input type="submit" value="Save"/>
 41      <button onclick="window.location.back();">Cancel</button>
 42      </form>
 43 
 44      <script type="text/javascript">
 45      var _form;
 46      LABKEY.Utils.onReady(function(){
 47         //create a new LABKEY.Form to track the dirty state of the form above.
 48         //if the user tries to navigate away while the form is dirty, it will warn the user
 49         //and provide an option to stay on the page.
 50         _form = new LABKEY.Form({
 51             formElement: 'myform',
 52             warningMessage: 'This is a custom warning message' //omit to get standard warning message
 53         });
 54     });
 55      </script>
 56      */
 57     LABKEY.Form = function(config) {
 58 
 59         if (!config || !config.formElement)
 60         {
 61             throw "Invalid config passed to LABKEY.Form constructor! Your config object should have a property named formElement which is the id of your form.";
 62         }
 63 
 64         var me = this;
 65         var formEl = $('#' + config.formElement);
 66         this.warningMessage = config.warningMessage || "Your changes have not yet been saved.";
 67         this._isDirty = false;
 68 
 69         //register for onchange events on all input elements
 70         formEl.find(':input').change(function() {
 71             onElemChange.call(me);
 72         });
 73 
 74         formEl.submit(function() { me.setClean(); });
 75 
 76         if (config.showWarningMessage !== false)
 77         {
 78             $(window).bind('beforeunload', function(e) {
 79                 if (me.isDirty())
 80                 {
 81                     e.returnMessage = me.warningMessage;
 82                     return me.warningMessage;
 83                 }
 84             });
 85         }
 86     };
 87 
 88     /**
 89      * Returns true if the form is currently dirty, false otherwise.
 90      */
 91     LABKEY.Form.prototype.isDirty = function() {
 92         return this._isDirty;
 93     };
 94 
 95     /**
 96      * Sets the form's dirty state to clean
 97      */
 98     LABKEY.Form.prototype.setClean = function() {
 99         this._isDirty = false;
100     };
101 
102     /**
103      * Sets the form's dirty state to dirty
104      */
105     LABKEY.Form.prototype.setDirty = function() {
106         this._isDirty = true;
107     };
108 
109 })(jQuery);
110