2009-08-12 Jerome

* add an onbeforeunload event to warn the user when he is about to leave the page without saving. git-svn-id: https://svn.erp5.org/repos/public/erp5/trunk@28359 20353a03-c40f-0410-a6d1-a30d3c3de9de

2009-08-12 Jerome
* add an onbeforeunload event to warn the user when he is about to leave the page without saving. git-svn-id: https://svn.erp5.org/repos/public/erp5/trunk@28359 20353a03-c40f-0410-a6d1-a30d3c3de9de
5af3aed2 · Jérome Perrin · 2a77321f · 5af3aed2 · 5af3aed2 · 5af3aed2
Commit 5af3aed2 authored Aug 12, 2009 by Jérome Perrin
5 changed files
--- a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5.js.xml
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5.js.xml
@@ -61,6 +61,7 @@ function submitAction(form, act) {\n
 // reset the form action to it\'s original behaviour. This is actually\n
 // usefull when the user click the back button.\n
 function clickSaveButton(act) {\n
+  changed = false;\n
  document.forms[0].action = act;\n
 }\n
 \n
@@ -238,7 +239,49 @@ var resizeIFrameOnLoad = function() {\n
  }\n
 }\n
 \n
-addLoadEvent(indexAllCheckBoxesAtBTInstallationOnLoad);
+var changed = false;\n
+function installUnsavedChangesWarning(warning_message) {\n
+  window.onbeforeunload = function() {\n
+    if (changed) \n
+      return warning_message;\n
+  };\n
+};\n
+\n
+/* Add a onchange event handler for all fields inputs.\n
+This event handler set a dirty flag which cause a warning\n
+while leaving the page, unless leaving by:\n
+    - saving (see clickSaveButton function from this file)\n
+    - clicking a relation field wheel\n
+    - a dialog action\n
+*/\n
+var addOnChangeEventHandler = function() {\n
+  var master = document.getElementById("master");\n
+  divs = master.getElementsByTagName("div");\n
+  for (i=0; i<divs.length; i++) {\n
+    if (divs[i].getAttribute("class") == "input") {\n
+      nodes = divs[i].childNodes;\n
+\n
+      for (j=0; j<nodes.length; j++) {\n
+        if (nodes[j].nodeName == "INPUT" ||\n
+            nodes[j].nodeName == "SELECT" || \n
+            nodes[j].nodeName == "TEXTAREA") {\n
+         if (nodes[j].value == "update...") {\n
+           // this is a relation field wheel\n
+           nodes[j].onclick = function() { changed = false;};\n
+          } else {\n
+            if (!nodes[j].onchange) {\n
+              nodes[j].onchange = function() { changed = true; };\n
+            }\n
+          }\n
+        }\n
+      }\n
+    }\n
+  } \n
+}\n
+\n
+addLoadEvent(addOnChangeEventHandler);\n
+addLoadEvent(indexAllCheckBoxesAtBTInstallationOnLoad);\n
+

 ]]></string> </value>
        </item>

--- a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/template_erp5_xhtml_style.xml
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/template_erp5_xhtml_style.xml
@@ -86,7 +86,6 @@ IDEAS:\n
              </tal:block>\n
            </tal:block>\n
          </tal:block>\n
-          <!-- May need to remove duplicates -->\n
          <tal:block tal:repeat="js js_list">\n
            <script tal:attributes="src js" type="text/javascript"></script>\n
          </tal:block>\n
@@ -97,13 +96,12 @@ IDEAS:\n
          </tal:block>\n
        </head>\n
        <body tal:attributes="class body_css_class|nothing">\n
-          <form id="main_form"\n
+          <form id="main_form" \n
+                onsubmit="changed=false; return true"\n
                tal:attributes="enctype enctype | form/Form_getEnctype | nothing;\n
                action url;\n
                method python:str(path(\'form/method | string:post\')).lower()">\n
            <fieldset id="hidden_fieldset">\n
-              <!-- Hidden button as explained in http://ppewww.ph.gla.ac.uk/~flavell/www/formquestion.html -->\n
-              <!-- We should probably call the default method instead -->\n
              <input tal:condition="form_action | nothing"\n
                     id="hidden_button" type="submit" value="dummy"\n
                     tal:attributes="name string:${form_action}:method" />\n
@@ -135,10 +133,12 @@ IDEAS:\n
                  </div>\n
                </tal:block>\n
                <div tal:content="request/portal_status_message | nothing" id="transition_message" />\n
-                <div id="information_area" tal:condition="request/field_errors | nothing"\n
-                    i18n:translate="" i18n:domain="ui">\n
+                <tal:block tal:condition="request/field_errors | nothing">\n
+                  <div id="information_area" i18n:translate="" i18n:domain="ui">\n
                    Input data has errors. Please look at the error messages below.\n
                  </div>\n
+                  <script type="text/javascript">changed = true;</script>\n
+                </tal:block>\n
              </div>\n
              <div id="master">\n
                <tal:block metal:define-slot="main" />\n

--- a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/view_main.xml
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/view_main.xml
@@ -59,6 +59,10 @@
          <tal:block metal:use-macro="here/context_box_render/macros/master" />\n
        </tal:block>\n
        <tal:block metal:fill-slot="main">\n
+          <script type="text/javascript"\n
+            tal:define="message python:context.Base_translateString(\'You have unsaved changes\').replace(\'\\\'\', \'\\\\\\\'\')"\n
+            tal:content="string:installUnsavedChangesWarning(\'$message\')">\n
+          </script>\n
          <div class="document"\n
               tal:define="actions actions/object_view | python: []">\n
            <div class="actions"\n

--- a/product/ERP5/bootstrap/erp5_xhtml_style/bt/change_log
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/bt/change_log
+2009-08-12 Jerome
+* add an onbeforeunload event to warn the user when he is about to leave the page without saving.
+
 2009-08-12 Kazuhiko
 * add resizeIFrameOnLoad that can be used to adjust the height of iframe according to its content.


--- a/product/ERP5/bootstrap/erp5_xhtml_style/bt/revision
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/bt/revision
-802
\ No newline at end of file
+803
\ No newline at end of file