diff --git a/README.md b/README.md index c3669c1..8e9d102 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ npm install getaddress-find ``` ### Or CDN ``` - + ``` ## Usage @@ -73,13 +73,16 @@ getAddress.find( id:'getaddress_input', /* The id of the textbox' */ name:'getaddress_input', /* The name of the textbox' */ class:'', /* The class of the textbox' */ - label:'Enter your Postcode' /* The label of the textbox' */ + label:'Enter your Postcode', /* The label of the textbox (deprecated, use placeholder)' */ + placeholder:'Enter your Postcode', /* The placeholder of the textbox' */ + value:'' /* The initial value of the textbox' */ }, button:{ id:'getaddress_button', /* The id of the botton' */ class:'', /* The class of the botton' */ label:'Search', /* The label of the botton' */ - disabled_message:'disabled message' /* The disabled message of the botton' */ + disabled_message:'disabled message', /* The disabled message of the botton' */ + clear_on_submit:true /* Clear output fields on submit ' */ }, dropdown:{ id:'getaddress_dropdown', /* The id of the dropdown' */ diff --git a/package-lock.json b/package-lock.json index 931693e..2b40e4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "getaddress-find", - "version": "1.0.9", + "version": "2.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "getaddress-find", - "version": "1.0.9", + "version": "2.0.3", "license": "MIT", "dependencies": { "getaddress-api": "^1.1.13" diff --git a/package.json b/package.json index 071626b..86d09bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "getaddress-find", - "version": "2.0.2", + "version": "2.0.3", "description": "GetAddress.io - Find by postcode plug-in", "main": "dist/getaddress-find.mjs", "type": "module", diff --git a/src/Find.ts b/src/Find.ts index 2f62868..bec1f92 100644 --- a/src/Find.ts +++ b/src/Find.ts @@ -53,6 +53,10 @@ export default class Find{ let addressResult = await this.getAddress.get(id); if(addressResult.isSuccess){ let success = addressResult.toSuccess(); + if (!this.button.config.clear_on_submit) + { + this.clearAll(); + } this.outputFields.bind(success.address); AddressSelectedEvent.dispatch(this.context,success.address); @@ -117,7 +121,10 @@ export default class Find{ if(query && query !== this.input.config.label) { button.disable(); - this.clearAll(); + if(this.button.config.clear_on_submit) + { + this.clearAll(); + } await this.lookup(query); } return false; diff --git a/src/Input.ts b/src/Input.ts index 02e5a4f..253407b 100644 --- a/src/Input.ts +++ b/src/Input.ts @@ -14,7 +14,8 @@ export default class Input let input = document.createElement("input"); input.id = this.config.id; input.type = "text"; - input.value = this.config.label; + input.placeholder = this.config.label !== '' ? this.config.label : this.config.placeholder; + input.value = this.config.value; if(this.config.class) { @@ -24,28 +25,8 @@ export default class Input input.name = this.config.name; input.autocomplete = "off"; - let styleAttr:Attr = this.getDefaultStyle(); - input.attributes.setNamedItem(styleAttr); - input.addEventListener("submit", ()=>{return false}); - input.addEventListener("focus", ()=> - { - input.removeAttribute('style'); - if(input.value === this.config.label){ - input.value = ''; - } - }); - - input.addEventListener("blur", ()=> - { - if(!input.value){ - input.value = this.config.label; - let styleAttr:Attr = this.getDefaultStyle(); - input.attributes.setNamedItem(styleAttr); - } - }); - let container = document.getElementById(this.config.container_id); if(container){ @@ -55,13 +36,6 @@ export default class Input return input; } - private getDefaultStyle = ()=> - { - let styleAttr:Attr = document.createAttribute("style"); - styleAttr.value = this.config.muted_style; - return styleAttr; - } - onKeyPress = (action:()=>void) => { this.inputElement.addEventListener("keypress", (e) => diff --git a/src/Types.ts b/src/Types.ts index f2ab08a..ee9416a 100644 --- a/src/Types.ts +++ b/src/Types.ts @@ -18,8 +18,9 @@ export class Config{ export class InputConfig extends Config { - label:string = "Search.."; - muted_style:string = "color:#CBCBCB;"; + label:string = ""; + placeholder:string = "Search.."; + value:string = ""; class = ""; id = "getaddress_input" + this.getIdSuffix(); name = "getaddress_input" + this.getIdSuffix(); @@ -32,7 +33,7 @@ export class ButtonConfig extends Config id = "getaddress_button" + this.getIdSuffix(); class = ""; disabled_message= "Fetching Addresses..."; - + clear_on_submit:boolean = true; } export class DropdownConfig extends Config