Changeset 33095


Ignore:
Timestamp:
05/17/19 18:19:41 (22 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js

    r33088 r33095  
    3737    this.resizable = false;
    3838    this.dontResize = false;
     39    this.autocompleteLabelsList = [];
    3940
    4041    this.shapeOptions = {
     
    124125        that.shapeOptions.description = description;       
    125126        that.setSelectedDescription(that.shapeOptions.description);       
     127    }
     128
     129    // Also add a COMPLETED description (i.e. when description input box loses focus)
     130    // to the autocomplete list of descriptions/labels
     131    descriptionInput.onblur = function () {
     132        var description = this.value;
     133        that.addToAutocompleteLabelsList(description)
    126134    }
    127135   
     
    170178       
    171179    }
     180
     181    $(function () {
     182        // Overrides the default autocomplete filter function to
     183        // search only from the beginning of the string
     184        //resource: https://miroslavpopovic.com/posts/2012/06/jqueryui-autocomplete-filter-words-starting-with-term
     185        $.ui.autocomplete.filter = function (array, term) {
     186            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
     187            return $.grep(array, function (value) {
     188                return matcher.test(value.label || value.value || value);
     189            });
     190        };
     191
     192        $(".description").autocomplete({
     193            source: that.autocompleteLabelsList
     194        });
     195    });
     196}
     197
     198
     199// Ensure only unique labels are added to our autocomplete list
     200MapEditor.prototype.addToAutocompleteLabelsList = function (newLabel) {
     201   
     202    if (!this.autocompleteLabelsList.includes(newLabel)) {
     203        // TODO: add to end with push, add to start with unshift or sort alphabetically?
     204        this.autocompleteLabelsList.unshift(newLabel);
     205    }
    172206}
    173207
     
    785819   
    786820    for (var i=0; i<map_editor.overlays.length; i++) {
    787         var shape = map_editor.overlays[i];
     821        var shape = map_editor.overlays[i];
     822
     823        // set up the autocomplete list using saved labels/descriptions
     824        map_editor.addToAutocompleteLabelsList(shape.description);
     825
    788826        // make the shapes selectable on load:
    789827        if (ShapesUtil.overlayItemIsShape(shape)) {
  • main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

    r33088 r33095  
    277277                        <div id = "FourthRow">
    278278                            <p>Label Text:
    279                                 <input type="text" id="description-{@nodeID}" value="" />   
     279                                <input type="text" class="description" id="description-{@nodeID}" value="" />             
    280280                            </p>
    281281                        </div>
Note: See TracChangeset for help on using the changeset viewer.