getaddress-autocomplete - npm Package Compare versions

Comparing version 1.0.23 to 1.0.24

package.json

 {
   "name": "getaddress-autocomplete",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "GetAddress.io - Autocomplete plug-in",
@@ -5,0 +5,0 @@ "main": "./dist/getaddress-autocomplete.mjs",

README.md

@@ -84,4 +84,7 @@ Javascript - Autocomplete.
           list_class_names:[],  /* list class names */
+          list_show_all_class_names:[], /* list show all class names */
           container_class_names:[], /* container class names */
+          container_focused_class_names:[], /* container focused class names */
           suggestion_class_names:[], /* suggestion class names */
+          suggestion_show_all_class_names:[], /* suggestion show all class names */
           highlight_suggestion:true, /* if true, highlights matched suggestion text */
@@ -88,0 +91,0 @@ highlight_suggestion_start_tag:'<b>',  /* highlighted suggestion text start tag */

src/AttributeValues.ts

@@ -9,5 +9,5 @@ import { Options } from "./Options";
     
-    readonly listClassNameShowAll:string;
-    //todo: add addtional class names
-
+    readonly listShowAllClassName:string;
+    readonly listShowAllAdditionalClassNames:string[]
+    
     readonly containerId:string
@@ -18,3 +18,4 @@ readonly containerClassName:string;
     readonly containerFocusedClassName:string;
-    //todo: add addtional class names
+    readonly containerFocusedAdditionalClassNames:string[]
+   
 
@@ -25,6 +26,7 @@ readonly suggestionClassName:string;
     readonly suggestionFocusedClassName:string;
-    //todo: add addtional class names
+    readonly suggestionFocusedAdditionalClassNames:string[]
+
     
     readonly suggestionShowAllClassName:string;
-    //todo: add addtional class names
+    readonly suggestionShowAllAdditionalClassNames:string[]
     
@@ -55,7 +57,11 @@ readonly id_prefix:string;
         }
-        this.listClassNameShowAll = `${css_prefix}_list_show`;
+        this.listShowAllClassName = `${css_prefix}_list_show`;
 
+        if(options.list_show_all_class_names)
+        {
+            this.listShowAllAdditionalClassNames  = options.list_show_all_class_names;
+        }
+
         this.containerId = `${this.id_prefix}-container${suffix}`;
         this.containerClassName = `${css_prefix}_container`;
-        this.containerFocusedClassName = `${css_prefix}_container_focused`;
         if(options.container_class_names)
@@ -65,6 +71,10 @@ {
         }
+
+        this.containerFocusedClassName = `${css_prefix}_container_focused`;
+        if(options.container_focused_class_names)
+        {
+            this.containerFocusedAdditionalClassNames  = options.container_focused_class_names;
+        }
         
         this.suggestionClassName = `${css_prefix}_suggestion`;
-        this.suggestionFocusedClassName = `${css_prefix}_suggestion_focused`;
-        this.suggestionShowAllClassName = `${css_prefix}_suggestion_show_all`;
         if(options.suggestion_class_names){
@@ -74,2 +84,12 @@ this.suggestionAdditionalClassNames  = options.suggestion_class_names;
 
+        this.suggestionShowAllClassName = `${css_prefix}_suggestion_show_all`;
+        if(options.suggestion_show_all_class_names){
+            this.suggestionShowAllAdditionalClassNames  = options.suggestion_show_all_class_names;
+        }
+
+        this.suggestionFocusedClassName = `${css_prefix}_suggestion_focused`;
+        if(options.suggestion_focused_class_names){
+            this.suggestionFocusedAdditionalClassNames  = options.suggestion_focused_class_names;
+        }
+        
         this.inputClassName = `${css_prefix}_input`;
@@ -76,0 +96,0 @@ if(options.input_class_names){

src/Autocomplete.ts

@@ -7,5 +7,2 @@ import AttributeValues from "./AttributeValues";
 
-//todo: autocomplete filter
-//todo: aria
-
 export default class Autocomplete
@@ -60,3 +57,4 @@ {
         this.input.addEventListener('focus', (event) => {
-            this.container.classList.add(this.attributeValues.containerFocusedClassName);
+            this.addContainerFocusedClassNames();
+            
             if(this.attributeValues.options.select_on_focus){
@@ -195,3 +193,4 @@ this.input.select();
                 this.clearList();
-                this.container.classList.remove(this.attributeValues.containerFocusedClassName);
+                this.removeContainerFocusedClassNames();
+                
             }
@@ -311,3 +310,12 @@ this.showAllClicked = false;
     {
-            let element = document.getElementById(fieldName);
+            if(!fieldName){
+                return;
+            }
+
+            let element = document.getElementById(fieldName) as HTMLElement;
+            
+            if(!element){
+                element = document.querySelector(fieldName) as HTMLElement;
+            }
+
             if(element)
@@ -415,7 +423,7 @@ {
 
-        const toFocus = suggestions[index] as HTMLElement;
-        if (toFocus) {
+        const focusedSuggestion = suggestions[index] as HTMLElement;
+        if (focusedSuggestion) {
             this.selectedIndex = index;
-            toFocus.classList.add(this.attributeValues.suggestionFocusedClassName);
-            toFocus.focus();
+            this.addSuggestionFocusedClassName(focusedSuggestion);
+            focusedSuggestion.focus();
             return;
@@ -428,3 +436,7 @@ }
 
-    removeSuggestionFocusedClassName(suggestions: HTMLCollection) {
+    addSuggestionFocusedClassName = (suggestion:HTMLElement)=> {
+        suggestion.classList.add(this.attributeValues.suggestionFocusedClassName);
+    }
+
+    removeSuggestionFocusedClassName = (suggestions: HTMLCollection)=> {
         
@@ -434,3 +446,2 @@ for (let i = 0; i < suggestions.length; i++) {
         }
-        
     }
@@ -498,3 +509,3 @@
                     {
-                        this.list.classList.add(this.attributeValues.listClassNameShowAll); 
+                        this.addListShowAllClassNames();
                     }
@@ -529,2 +540,22 @@
 
+    
+
+    private addContainerFocusedClassNames = () =>{
+        this.container.classList.add(this.attributeValues.containerFocusedClassName);
+        
+        if(this.attributeValues.containerFocusedAdditionalClassNames){
+            for(const name of this.attributeValues.containerFocusedAdditionalClassNames){
+                this.container.classList.add(name);
+            }
+        }
+    };
+    private removeContainerFocusedClassNames = () =>{
+        this.container.classList.remove(this.attributeValues.containerFocusedClassName);
+        if(this.attributeValues.containerFocusedAdditionalClassNames){
+            for(const name of this.attributeValues.containerFocusedAdditionalClassNames){
+                this.container.classList.remove(name);
+            }
+        }
+    };
+
     private addInputShowClassNames =()=>{
@@ -547,2 +578,20 @@ this.input.classList.add(this.attributeValues.inputShowClassName);
 
+    private removeListShowAllClassNames =()=>{
+        this.list.classList.remove(this.attributeValues.listShowAllClassName); 
+        if(this.attributeValues.listShowAllAdditionalClassNames){
+            for(const name of this.attributeValues.listShowAllAdditionalClassNames){
+                this.list.classList.remove(name);
+            }
+        }
+    }
+
+    private addListShowAllClassNames =()=>{
+        this.list.classList.add(this.attributeValues.listShowAllClassName); 
+        if(this.attributeValues.listShowAllAdditionalClassNames){
+            for(const name of this.attributeValues.listShowAllAdditionalClassNames){
+                this.list.classList.add(name);
+            }
+        }
+    }
+
     clearList = ()=>{
@@ -555,3 +604,3 @@ this.list.replaceChildren(...[]);
         this.removeInputShowClassNames();
-        this.list.classList.remove(this.attributeValues.listClassNameShowAll); 
+        this.removeListShowAllClassNames();
         document.removeEventListener('click', this.documentClick);
@@ -597,3 +646,11 @@ };
         li.className = this.attributeValues.suggestionClassName;
+        
         li.classList.add(this.attributeValues.suggestionShowAllClassName);
+        
+        if(this.attributeValues.suggestionShowAllAdditionalClassNames){
+            for(const name of this.attributeValues.suggestionShowAllAdditionalClassNames){
+                li.classList.add(name);
+            }
+        }
+
         if(this.attributeValues.suggestionAdditionalClassNames){
@@ -600,0 +657,0 @@ for(const name of this.attributeValues.suggestionAdditionalClassNames){

src/GetAddress.ts

@@ -20,8 +20,16 @@ import Autocomplete from "./Autocomplete";
 
-    const textbox = document.getElementById(id) as HTMLInputElement;
-    
+    if(!id){
+        return;
+    }
+
+    const allOptions = new Options(options);
+
+    let textbox = document.getElementById(id) as HTMLInputElement;
     if(!textbox){
+        textbox = document.querySelector(id) as HTMLInputElement;
+    }
+    if(!textbox){
         return;
     }
-    const allOptions = new Options(options);
+    
     const client = new Client(api_key, allOptions.alt_autocomplete_url,allOptions.alt_get_url);
@@ -28,0 +36,0 @@ const outputFields = new OutputFields(allOptions.output_fields);

src/Options.ts

@@ -22,2 +22,6 @@ import {AutocompleteFilter} from "getaddress-api";
     suggestion_class_names:string[] = [];
+    suggestion_focused_class_names:string[] = [];
+    suggestion_show_all_class_names:string[] = [];
+    list_show_all_class_names:string[] = [];
+    container_focused_class_names:string[] = [];
     highlight_suggestion = true;
@@ -75,3 +79,7 @@ highlight_suggestion_start_tag = "<b>";
     enable_get?:boolean;
+    list_show_all_class_names?:string[];
+    container_focused_class_names?:string[];
+    suggestion_focused_class_names?:string[];
+    suggestion_show_all_class_names?:string[];
 }
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48025

increased by7.93%

Lines of code

969

increased by8.03%

Number of lines in readme file

124

increased by2.48%

No dependency changes