Changeset 33095

Timestamp:

2019-05-17T18:19:41+12:00 (5 years ago)

Author:

wy59

Message:

First phase of autocomplete list for map shape descriptions/labels. This commit associates an autocomplete list per map, not per whole page. But it does create the autocomplete Labels List from saved shape descriptions (on LOADing from archives) and then expands that list dynamically further with any labels entered (for a map) by the user, which last happens onblur of the description input field. The autocomplete Labels List does not allow duplicates, though this is not yet at its most efficient. At the moment the list is not expanded alphabetically yet, though this was an option we considered and will be using hereafter. Rather at present the list expands with new items added to the head first, with unshift.

Location:

main/trunk/greenstone3/web/interfaces/default

Files:

• js/map-scripts-editor.js (modified) (4 diffs)
• transform/pages/document.xsl (modified) (1 diff)

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

@@ -37 +37 @@
     this.resizable = false;
     this.dontResize = false;
+    this.autocompleteLabelsList = [];
 
     this.shapeOptions = {
@@ -124 +125 @@
         that.shapeOptions.description = description;        
         that.setSelectedDescription(that.shapeOptions.description);        
+    }
+
+    // Also add a COMPLETED description (i.e. when description input box loses focus)
+    // to the autocomplete list of descriptions/labels
+    descriptionInput.onblur = function () {
+        var description = this.value;
+        that.addToAutocompleteLabelsList(description)
     }
     
@@ -170 +178 @@
         
     }
+
+    $(function () {
+        // 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
+        });
+    });
+}
+
+
+// Ensure only unique labels are added to our autocomplete list
+MapEditor.prototype.addToAutocompleteLabelsList = function (newLabel) {
+    
+    if (!this.autocompleteLabelsList.includes(newLabel)) {
+        // TODO: add to end with push, add to start with unshift or sort alphabetically?
+        this.autocompleteLabelsList.unshift(newLabel);
+    }
 }
 
@@ -785 +819 @@
     
     for (var i=0; i<map_editor.overlays.length; i++) {
-        var shape = map_editor.overlays[i];
+        var shape = map_editor.overlays[i];
+
+        // set up the autocomplete list using saved labels/descriptions
+        map_editor.addToAutocompleteLabelsList(shape.description);
+
         // make the shapes selectable on load:
         if (ShapesUtil.overlayItemIsShape(shape)) {

main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

@@ -277 +277 @@
                         <div id = "FourthRow">
                             <p>Label Text:
-                                <input type="text" id="description-{@nodeID}" value="" />   
+                                <input type="text" class="description" id="description-{@nodeID}" value="" />              
                             </p>
                         </div>