Merge branch 'feature/LF2874/loading-indicator' into 'master'

Feature/lf2874/loading indicator

See merge request lfor/autocomplete-lhc!161

CHANGELOG.md

@@ -3,6 +3,11 @@
 This log documents significant changes for each release.  This project follows
 [Semantic Versioning](http://semver.org/).
 
+## [19.2.0] - 2024-03-07
+### Added
+- "showLoadingIndicator" option to show loading indicator on a Search autocomplete,
+  defaults to true.
+
 ## [19.1.1] - 2024-02-15
 ### Fixed
 - An issue where the search list items are not clickable after switching out

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "autocomplete-lhc",
-  "version": "19.1.1",
+  "version": "19.2.0",
   "main": [
     "source/auto_completion.css",
     "source/polyfill.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autocomplete-lhc",
-  "version": "19.1.1",
+  "version": "19.2.0",
   "description": "",
   "main": "source/index.js",
   "config": {

source/autoCompBase.js

@@ -2834,6 +2834,9 @@ if (typeof Def === 'undefined')
         } else {
           this.active = false;
           this.hide();
+          // Hide the loading indicator for Search autocomplete, if it is still shown due to
+          // previous query not finished yet.
+          this.progressElement?.classList.remove('show');
         }
         this.oldElementValue = this.domCache.get('elemVal');
       }

source/autoCompSearch.js

@@ -97,6 +97,11 @@
        */
       showListOnFocusIfEmpty_: false,
 
+      /**
+       * Whether to show a loading indicator when search is taking place.
+       */
+      showLoadingIndicator_: true,
+
 
       /**
        *  The constructor.  (See Prototype's Class.create method.)
@@ -236,8 +241,10 @@
        *    <li>colHeaders - Used when tableFormat is true, this is an array of
        *     column headers for the columns in the table.  If this is not supplied, no header
        *     row will be created.</li>
-       *     <li>showListOnFocusIfEmpty - (default: false) Whether to show a list when the
+       *    <li>showListOnFocusIfEmpty - (default: false) Whether to show a list when the
        *     empty field receives focus.</li>
+       *    <li>showLoadingIndicator - (default: true) Whether to show a loading indicator
+       *     during search.</li>
        *    <ul>Somewhat obsolete, but not yet deprecated, parameters:
        *      <li>buttonID - the ID of the button (if there is one) which activates
        *       a search.  If you use this option, do not set matchListValue.</li>
@@ -298,6 +305,20 @@
 
         this.showListOnFocusIfEmpty_ = options['showListOnFocusIfEmpty'] || false;
 
+        if (options['showLoadingIndicator'] === false)
+          this.showLoadingIndicator_ = false;
+
+        // If loading indicator is enabled, put the field into a span and add a <progress> element.
+        if (this.showLoadingIndicator_) {
+          var fieldParent = this.element.parentElement;
+          var fieldContainer = document.createElement('span');
+          fieldContainer.classList.add('loading-indicator-container');
+          fieldParent.replaceChild(fieldContainer, this.element);
+          fieldContainer.appendChild(this.element);
+          this.progressElement = document.createElement('progress');
+          fieldContainer.appendChild(this.progressElement);
+        }
+
         // Do not use the synchronous request option.  On Windows and Firefox,
         // if you use synchronous, and hit control+enter to run a search, the
         // Firefox Downloads window opens.  I don't know why.  See my post
@@ -335,6 +356,22 @@
       },
 
 
+      /**
+       * Frees any references this autocompleter has to DOM objects.
+       * Overrides detachFromDOM() in autoCompBase.js.
+       */
+      detachFromDOM: function() {
+        // Remove the containing element with class 'loading-indicator-container',
+        // if any.
+        var fieldParent = this.element.parentElement;
+        if (fieldParent.classList.contains('loading-indicator-container')) {
+          var originalParent = fieldParent.parentElement;
+          originalParent.replaceChild(this.element, fieldParent);
+        }
+        Def.Autocompleter.Search.superclass.detachFromDOM.apply(this);
+      },
+
+
       /**
        *  Initializes the itemToDataIndex_ map.
        */
@@ -408,6 +445,8 @@
               this.onComplete(results, true);
           }
           if (!results) { // i.e. if it wasn't cached
+            if (this.showLoadingIndicator_)
+              this.progressElement?.classList.add('show');
             // Run the search
             if (searchFn)
               this.useSearchFn(searchStr, Def.Autocompleter.Search.EXPANDED_COUNT);
@@ -810,6 +849,8 @@
         if (this.lastAjaxRequest_ === resultData) {
           this.lastAjaxRequest_ = null;
         }
+        if (this.showLoadingIndicator_)
+          this.progressElement?.classList.remove('show');
         const usedSearchFn = !!resultData.results;
         if (resultData.status === 200 || usedSearchFn) { // 200 is the "OK" status
           if (usedSearchFn) {
@@ -1127,6 +1168,8 @@
               this.onComplete(results, true);
           }
           if (!results) {
+            if (this.showLoadingIndicator_)
+              this.progressElement?.classList.add('show');
             if (this.search)
               this.useSearchFn(fieldVal, Def.Autocompleter.Base.MAX_ITEMS_BELOW_FIELD);
             else

source/auto_completion.css

@@ -58,6 +58,25 @@
 }
 
 
+.loading-indicator-container {
+  position: relative;
+  display: inline-block;
+}
+
+.loading-indicator-container progress {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+}
+
+.loading-indicator-container progress.show {
+  display: inline-block;
+}
+
+
 /* Class "auto_complete" is the completion options div */
 .auto_complete  {
   width: auto;

test/cypress/integration/searchList.cy.js

@@ -344,4 +344,52 @@ describe('search lists', function() {
       po.getAjaxAbortCount().should('equal', 2);
     });
   });
+
+  describe('loading indicator', function() {
+    beforeEach(function() {
+      po.openTestPage();
+      cy.window().then(function(win) {
+        win.Def.jqueryLite.ajaxFactory(2000);
+      });
+    });
+
+    it('should disable loading indicator', function() {
+      cy.get(po.searchCNESel).click().type('ar');
+      // A shorter timeout than the ajax delay to make sure the <progress> element never showed.
+      cy.get(po.searchCNESel + ' + progress', {timeout: 300}).should('not.exist');
+    });
+
+    it('should show loading indicator', function() {
+      cy.get(po.alleleSearch).click().type('rs');
+      cy.get(po.alleleSearch + ' + progress').should('have.class', 'show');
+      cy.get(po.alleleSearch + ' + progress').should('not.have.class', 'show');
+      // multi-select search field
+      cy.get(po.multiSearchCWE).click().type('rs');
+      cy.get(po.multiSearchCWE + ' + progress').should('have.class', 'show');
+      cy.get(po.multiSearchCWE + ' + progress').should('not.have.class', 'show');
+      // field with a search button
+      cy.get('#fe_search_button_cne').click().type('ab');
+      cy.get('#fe_search_button_cne_button').click();
+      cy.get('#fe_search_button_cne + progress').should('have.class', 'show');
+      cy.get('#fe_search_button_cne + progress').should('not.have.class', 'show');
+    });
+
+    it('should hide loading indicator when the field is cleared', function() {
+      cy.get(po.alleleSearch).clear().type('a');
+      cy.get(po.alleleSearch + ' + progress', {timeout: 300}).should('have.class', 'show');
+      cy.get(po.alleleSearch).clear();
+      // A shorter timeout than the ajax delay to make sure the <progress> element goes away before the ajax request finishes.
+      cy.get(po.alleleSearch + ' + progress', {timeout: 300}).should('not.have.class', 'show');
+    });
+
+    it('should remove wrapper element when the destroyed', function() {
+      cy.get('.loading-indicator-container ' + po.alleleSearch).should('exist');
+      cy.get('#dest_allele_search').click();
+      cy.get('.loading-indicator-container ' + po.alleleSearch).should('not.exist');
+      // multi-select search field
+      cy.get('.loading-indicator-container ' + po.multiSearchCWE).should('exist');
+      cy.get('#dest_multi_sel_search_cwe').click();
+      cy.get('.loading-indicator-container ' + po.multiSearchCWE).should('not.exist');
+    });
+  });
 });

test/pages/autocomp_atr.html

@@ -108,6 +108,7 @@
          placeholder="Type rs">
       </label>
     </div>
+    <button id="dest_allele_search" type="button">Destroy autocompleter</button>
 
     <div class="field">
         A test for case-senstive matching with search lists
@@ -180,6 +181,7 @@ <h2>Multi-select lists</h2>
        A Search CWE multi-select autocompleter:&nbsp;&nbsp;</label>
       <input autocomplete="off" id="multi_sel_search_cwe" type="text" />
     </div>
+    <button id="dest_multi_sel_search_cwe" type="button">Destroy autocompleter</button>
 
     <div class="field" id="tableFormatMultiSearchCWESection">
       <label for="table_format_multi_sel_search_cwe" id="table_format_multi_sel_search_cwe_lbl">

test/pages/autocompleter_test.js

@@ -22,6 +22,7 @@ var fe_prefetch_cwe_autoComp = new Def.Autocompleter.Prefetch('prefetch_cwe',
 var opts = {};
 opts['matchListValue']=true
 opts['autocomp']=true
+opts['showLoadingIndicator']=false
 new Def.Autocompleter.Search('fe_search_cne',
   '/form/get_search_res_list?fd_id=1284', opts);
 
@@ -208,8 +209,11 @@ opts = {
   'suggestionMode': Def.Autocompleter.USE_STATISTICS,
   'autocomp': true
 };
+var fe_multi_sel_search_cwe_autoComp =
 new Def.Autocompleter.Search('multi_sel_search_cwe',
   '/form/get_search_res_list?fd_id=2163', opts);
+document.querySelector('#dest_multi_sel_search_cwe').addEventListener('click', (event)=>{
+  fe_multi_sel_search_cwe_autoComp.destroy()});
 
 
 // Long prefetched list autocompleter with an odd number of items (for checking
@@ -299,8 +303,11 @@ new Def.Autocompleter.Prefetch('item_num_match_test', longList, opts);
 
 // A list to test for correct sorting of results.
 var opts = {valueCols: [0], tableFormat: true};
+var fe_allele_search_autoComp =
 new Def.Autocompleter.Search('allele_search',
     '/form/get_search_res_list?fd_id=alleles', opts);
+document.querySelector('#dest_allele_search').addEventListener('click', (event)=>{
+  fe_allele_search_autoComp.destroy()});
 
 // A search list to test for case-sensitive matching
 new Def.Autocompleter.Search('cs_match_search',