Changeset 33099 for main/trunk

Timestamp:

2019-05-21T18:33:09+12:00 (5 years ago)

Author:

wy59

Message:

In previous commits, the autocompletelist was a member variable of the mapeditor: one autocomplete labels list per map. Now we want one list per whole document/page, i.e. one autocomplete list covering all the maps on one page. This means making the autocomplete list 'global' to the file instead of a member var of mapeditor. It had as further consequence that there needed to be a global hashmap to maintain unique labels, from which the autocomplete labels list would get constituted. Another consequence was that the jquery handler, which would setup the autocomplete to source from our autocomplete labels array, would need to be global to the file and no longer called from within a map editor method. So this jquery method likewise needs to be called only once per document and not for each map in a doc. The mapeditor LOAD function now still keeps a local labels hashmap to work out unique labels per loaded mapeditor, then adds these to our global labels hashmap (by calling jquery extend), to ensure uniqueness of the sum of all labels on the page. And finally, the LOAD function converts that recalculated global hashmap into an array to reset our autocomplete labels list/array.

File:

• main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js (modified) (10 diffs)

main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js

@@ +1 @@
+var global_autocompleteLabelsList = [];
+var global_labels_hashmap = {};
 
 function MapEditor(id) {
@@ -36 +38 @@
     this.resizable = false;
     this.dontResize = false;
-    this.autocompleteLabelsList = [];
+    
 
     this.shapeOptions = {
@@ -132 +134 @@
     descriptionInput.onblur = function () {
         var description = this.value;
-        that.addToAutocompleteLabelsList(description)
+        that.addToAutocompleteLabelsList(description);
     }
     
@@ -178 +180 @@
         }
     }
-
-    // Having got our unique (set) of descriptions/labels, we're ready to set it up as the source for our autocomplete list
-    $(function setupAutocompleteLabelsList() {
-        // Overrides the default autocomplete filter function to
-        // search only from the beginning of the string
-        //resource: https://miroslavpopovic.com/posts/2012/06/jqueryui-autocomplete-filter-words-starting-with-term
-        $.ui.autocomplete.filter = function (array, term) {
-            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
-            return $.grep(array, function (value) {
-                return matcher.test(value.label || value.value || value);
-            });
-        };
-
-        $(".description").autocomplete({
-            source: that.autocompleteLabelsList
-        });
-    });
 }
 
@@ -201 +186 @@
 MapEditor.prototype.addToAutocompleteLabelsList = function (newLabel) {
     
-    if (newLabel !== "" && !this.autocompleteLabelsList.includes(newLabel)) {
+    if (newLabel !== "" && !global_autocompleteLabelsList.includes(newLabel)) {
         // add to autocomplete list and sort alphabetically
-        this.autocompleteLabelsList.push(newLabel);
-        this.autocompleteLabelsList.sort();
+        global_autocompleteLabelsList.push(newLabel);
+        global_autocompleteLabelsList.sort();        
     }
+
+    console.log("the added new label to global autocomplete array:"); console.log(global_autocompleteLabelsList);
 }
 
@@ -819 +806 @@
     map_editor.overlays = new_overlays;
 
-    var labels_hashmap = {};
+    var local_labels_hashmap = {};
     for (var i=0; i<map_editor.overlays.length; i++) {
         var shape = map_editor.overlays[i];
@@ -826 +813 @@
         //map_editor.addToAutocompleteLabelsList(shape.description); // inefficient in ensuring uniqueness of values, use (hash)map
         if (shape.description !== "") {
-            labels_hashmap[shape.description] = 1;  // we just want the shape.description added to the map as key, don't care about value
+            local_labels_hashmap[shape.description] = 1;  // we just want the shape.description added to the map as key, don't care about value
                                                     // so that we can maintain a list of unique descriptions
         }
@@ -841 +828 @@
     this.mapEditorHistory.presentOverlayPush();
     
-    var keys = Object.keys(labels_hashmap);
-    // DO NOT assign "this.autocompleteLabelsList = keys(labels_hashmap);"
+    
+    // DO NOT assign "this.autocompleteLabelsList = keys(local_labels_hashmap);"
     // Because Javascript is like Java and (in this) like C, not like C++. JavaScript uses Call-By-Sharing for objects:
     // when reference addresses that are overwritten inside functions,
@@ -849 +836 @@
     // Instead, push.apply=addAll elements of keys to our autocomplete list, see 
     // https://stackoverflow.com/questions/35658464/what-is-the-equivalent-of-java-collection-addall-for-javascript-arrays/35658514
-    this.autocompleteLabelsList.push.apply(this.autocompleteLabelsList, keys); // addAll keys to our autocompleteLabelsList
-    this.autocompleteLabelsList.sort();
+
+    // Combining contents of one JavaScript Object/hashmap (or associative 'array') into another is also described as merging our JavaScript Objects, so see
+    // https://stackoverflow.com/questions/929776/merging-objects-associative-arrays
+    // We've decided to use the jQuery based suggested solution for merging hashmaps:
+    // $.extend(obj1, obj2); means obj1 = obj1 + obj2. Overwriting any existing properties in obj1 with new values in obj2.
+
+    console.log("@@@@ Adding local contents to global: "); console.log(local_labels_hashmap);
+    console.log("@@@@ global map before: "); console.log(global_labels_hashmap);
+    
+
+    $.extend(global_labels_hashmap, local_labels_hashmap);
+
+    console.log("@@@@ global map after: "); console.log(global_labels_hashmap);
+
+    // important to empty our global autocomplete labels list array
+    //See https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript
+    // and https://www.jstips.co/en/javascript/two-ways-to-empty-an-array/
+    global_autocompleteLabelsList.length = 0;
+    
+    var keys = Object.keys(global_labels_hashmap);
+    global_autocompleteLabelsList.push.apply(global_autocompleteLabelsList, keys); // addAll keys to our global_autocompleteLabelsList (turns map's keys into array)
+
+    console.log("@@@@ global ARRAY after setting to global map: "); console.log(global_autocompleteLabelsList);
+    global_autocompleteLabelsList.sort();   
 }
 
@@ -893 +902 @@
     }
 }
+
+
+// Having got our unique (set) of descriptions/labels, we're ready to set it up as the source for our autocomplete list
+$(function setupAutocompleteLabelsList() {
+    // Overrides the default autocomplete filter function to
+    // search only from the beginning of the string
+    //resource: https://miroslavpopovic.com/posts/2012/06/jqueryui-autocomplete-filter-words-starting-with-term
+    $.ui.autocomplete.filter = function (array, term) {
+        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
+        return $.grep(array, function (value) {
+            return matcher.test(value.label || value.value || value);
+        });
+    };
+
+    $(".description").autocomplete({
+        source: global_autocompleteLabelsList
+    });
+});