Changeset 32852 for main/trunk/greenstone3/web/interfaces/default/js/documentedit_scripts_util.js

Timestamp:

2019-03-04T21:13:35+13:00 (5 years ago)

Author:

ak19

Message:

Dr Bainbridge solved the weird bug whereby when you're in doc editing mode and quickly try to leave/reload the page before it's finished changing, you're asked to save changes. But no changes were made. The cause was complex: it checks for changes on page unload by comparing the initial states of editable elements against their final state on unload. When the page is unloaded prematurely (before the doc has finished loading) not all the editable elements have finished initialising, so the array keep track of initial states of editable elements, editableInitStates, does not match the final state. Dr Bainbridge added a counter variable to keep track of the number of editable elements that still need to finish initialising. It's incremented for every metadataTable row, since each is editable, and for every sectionText as this gets turned into a CKEditor. The count then gets decremented when each such individual element has finished initialising, which happens in the CKEditor.instanceReady handler for CKEditor items and in the setTimeout() which initialises metadataTable row elements. Previously the call to CKEditor's instanceReady() took place too late, in function documentedit_scripts::readyPageForEditing(), which got called much after CKEditor instances were all ready, and that's why adding the CKEDITOR's instanceReady handler in there didn't work. That problem is now overcome in adding the CKEDITOR instanceReady handler on documentReady. Another notable change is that the beforeunload() handler is now moved into the end of documentedit_scripts::readyPageForEditing(), since we don't want check for changes that need to be saved until the page has fully loaded. Further, it won't find any changes until editableInitStates and editableLastStates (current states) are both ready/all initialised, so that any popup about unsaved changes is now also accurate if the doc-editing page gets prematurely unloaded.

File:

• main/trunk/greenstone3/web/interfaces/default/js/documentedit_scripts_util.js (modified) (6 diffs)

main/trunk/greenstone3/web/interfaces/default/js/documentedit_scripts_util.js

@@ -21 +21 @@
 
 
-// If the user is attempting to leave the page, check if there are unsaved changes
-// and if so, display an "Are you sure you want to leave" message.
-// https://stackoverflow.com/questions/7080269/javascript-before-leaving-the-page
-// Newer versions of Firefox/Chrome don't display custom message (security feature):
-// https://stackoverflow.com/questions/22776544/why-is-jquery-onbeforeunload-not-working-in-chrome-and-firefox
-// and http://jsfiddle.net/XZAWS/
-// jquery bind() is deprecated: https://stackoverflow.com/questions/33654716/is-jquery-bind-deprecated
-$(window).on("beforeunload", function(event) {
-    
-    if(gs.cgiParams.docEdit == "1") { // like document.xsl, which checks the same var upon onload
-    // shouldn't check for whether changes are saved unless on Doc Editing page (DocEdit=1)
-    // else the following pop up always ends up appearing when attempting
-    // to leave a doc view page in Doc Editing Mode (when not yet actually Doc Editing)
-    
-    
-    var changes = changesToUpdate();
-    
-    //console.log("#### CHANGES before page reload: ", changes);
-    
-    if(changes.length > 0) {
-        console.log("The collection hasn't yet been saved after editing. Are you sure you want to leave?");
-        return "The collection hasn't yet been saved after editing. Are you sure you want to leave?";   
-    }
-    }
-
-});
-
+// We need to wait for all editable elements (metadataTable and sectionText) to be finished with initialising
+// before we try to store their current states in the editableInitStates array
+// To do this, we need to keep track of how many elements still require initialising.
+var editableElementsInitialisationProgress = 0;
+
+    
 
 function encodeDelimiters(meta_value) {
@@ -305 +284 @@
 {
     var resultArray = new Array();
-    getLastEditableStates();
-    for (var j in editableLastStates) 
-    {   
-        if (isNodeChanged(editableLastStates[j])) 
-        {
-            resultArray.push(editableLastStates[j].editableNode);
+    
+    console.log("**** changesToUpdate::editableElementsInitialisationProgress = " + editableElementsInitialisationProgress);
+    
+    // Only want to check for valid edited states if the editableInitStates has been fully set up:
+    // We don't bother if editableInitStates is not ready:
+    // if editableInitStates array has nothing in it (which means CKEditor is not ready)
+    // OR if some of the editable elements (metadataTable OR ckeditor editable values) still need to be initialised/initialising is only partway through 
+    if ((editableInitStates.length > 0) && (editableElementsInitialisationProgress == 0)) {
+        getLastEditableStates();
+        for (var j in editableLastStates) 
+        {   
+            if (isNodeChanged(editableLastStates[j])) 
+            {
+                resultArray.push(editableLastStates[j].editableNode);
+            }
         }
     }
@@ -337 +325 @@
     }
 
+    console.log("**** isNodeChanged() editableInitStates = ", editableInitStates);
     return true;
     
@@ -909 +898 @@
     //This registering can cause a sizeable delay so we'll thread it (effectively) so the browser is not paused
     cell.originalValue = cell.value;
-    setTimeout(function(){addEditableState(cell, editableInitStates)}, 0);
+    setTimeout(function(){
+        addEditableState(cell, editableInitStates);
+        // finished initialising one more editable element,
+        // so decrement the counter keeping track of how many elements still need initialising
+        editableElementsInitialisationProgress--;
+    },0);
 }
 
@@ -958 +952 @@
 function addFunctionalityToTable(table)
 {
-    table.find("tr").each(function()
+    var $tr_array = table.find("tr");   
+
+    
+    // We need to keep track of editableElementsInitialisationProgress: the number of editable elements that still need to be initialised/need to finish initialising
+    // Each table's rows means *that* many more editable elements still need initialising.
+    // So each time addFunctionalityToTable() is called on a table, we must increment our counter editableElementsInitialisationProgress
+    // with how many editable cells it has/how many rows it has.
+    editableElementsInitialisationProgress += $tr_array.length;
+    console.log("**** addFunctionalityToTable::editableElementsInitialisationProgress = " + editableElementsInitialisationProgress);
+    
+    $tr_array.each(function()
     {
         var cells = $(this).find("td");
@@ -1456 +1460 @@
 }
 */
+
+
+$( document ).ready(function() {
+    console.log( "**** Dom ready!" );
+    
+    // monitor whether ckeditor instances are all ready
+    // See https://stackoverflow.com/questions/18461206/how-to-retrieve-the-ckeditor-status-ready
+    // (and https://stackoverflow.com/questions/3447803/how-to-determine-if-ckeditor-is-loaded )
+    if(gs.cgiParams.docEdit == "1") { // CKEDITOR only exists in docEdit mode
+        //CKEDITOR.on( 'loaded', function( evt ) { // not triggered
+            //console.log("*** CKEDITOR loaded");
+            CKEDITOR.on( 'instanceReady', function( evt ) {
+                console.log("*** CKEDITOR instanceReady", evt);
+                addCKEEditableState(evt,editableInitStates);
+                // finished initialising one more editable element,
+                // so decrement the counter keeping track of how many elements still need initialising
+                editableElementsInitialisationProgress--;
+            } );
+        //} );
+    }
+    
+});
+
+
+