diff --git a/.babelrc b/.babelrc
index 405c127..8b0252d 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,12 +1,15 @@
{
"presets": [
- ["@babel/preset-env", {
- "targets": {
- "browsers": [
- "last 5 versions",
- "Explorer >= 10"
- ]
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "browsers": [
+ "last 5 versions",
+ "Explorer >= 11"
+ ]
+ }
}
- }]
+ ]
]
}
diff --git a/.gitignore b/.gitignore
index 1786a45..5773e1e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
node_modules/
npm-debug.log
-.DS_Store
\ No newline at end of file
+coverage/
+.DS_Store
diff --git a/README.md b/README.md
index 57fee6b..6d852f8 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,16 @@
# JavaScript Captcha #
-### Simple captcha component (~2KB) written in pure JavaScript with no dependencies ###
+### Simple captcha component (<2KB) written in pure JavaScript with no dependencies ###
-Easy to resolve random math addition rendered within basic canvas element.
+Simple numeric captcha rendered within basic [canvas element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas).
+
+### Demo ###
+
+Demo can be seen [here](https://www.rvdizajn.com/js-captcha/).
### Install ###
```
-npm install js-captcha
+npm install js-captcha --save
```
### Usage ###
@@ -19,8 +23,7 @@ or
```
import jCaptcha from 'jCaptcha';
```
-
-Set captcha input element:
+Define main captcha input element in HTML:
```
```
@@ -29,53 +32,73 @@ Initialize it:
```
```
-Call `validate()` method when required (e.g. on submit event):
+And then call `validate()` method when required (e.g. on form submit event):
```
```
-No extra styling included, just style it as you wish, see options below.
+No stylings included, just style it as you wish, see options below.
### Options ###
-jCaptcha can take an optional parameters - an object of key/value settings:
+jCaptcha can take an optional parameter - an [Object] of key/value settings:
+
+ Name | Required | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| el | false | [String] | 'jCaptcha' | CSS class for input element |
+| requiredValue | false | [String] | '*' | Render new random numbers on error validate |
+| resetOnError | false | [Boolean] | true | Mandatory field indicator |
+| focusOnError | false | [Boolean] | true | Focus input field on error validate |
+| clearOnSubmit | false | [Boolean] | true' | Clear input value on every validate |
+| callback | false | [Function] | null | As invoked function these useful arguments are returned: response (type: *String*, value: *'success'* or *'error'*), captcha (type: *Element*) and number of tries (type: *Number*) |
+| canvasClass | false | [String] | 'jCaptchaCanvas' | CSS class of canvas captcha
+| canvasStyle | true | [Object] | {} | Canvas stylings object, required for canvas appearance |
+| canvasStyle.width | false | [Number] | null | Width of canvas captcha element (in px) |
+| canvasStyle.height | false | [Number] | null | Height of canvas captcha element (in px) |
+| canvasStyle.font | false | [String] | '' | Font size and font family of canvas captcha element |
+| canvasStyle.fillStyle | false | [String] | '' | Text color of canvas captcha element |
+| canvasStyle.textAlign | false | [String] | '' | Text align of canvas captcha element |
+| canvasStyle.textBaseline | false | [String] | '' | Text baseline of canvas captcha element |
-- **el** String *(default:jCaptcha)* - css class for input element
-- **requiredValue** String *(default:\*)* - required filed indicator
-- **resetOnError** Boolean *(default:true)* - render new random numbers on error validate
-- **focusOnError** Boolean *(default:true)* - focus input field on error validate
-- **clearOnSubmit** Boolean *(default:true)* - clear input value on every validate
-- **canvasWidth** Number *(default:50)* - width of canvas captcha element (in px)
-- **canvasHeight** Number *(default:15)* - height of canvas captcha element (in px)
-- **canvasFontSize** String *(default:15px)* - font size of canvas captcha element
-- **canvasFontFamily** String *(default:Arial)* - font family of canvas captcha element
-- **canvasFillStyle** String *(default:#ddd)* - text color of canvas captcha element
-- **callback** Object *(default:null)* - as invoked function these useful arguments are returned: *response* and *captcha input node*
### API ###
-`reset()` - generate new random numbers
+`reset()` - generate and render new random numbers
`validate()` - validate entered result in input field
-### Demo ###
-
-Demo available [here](https://www.rvdizajn.com/js-captcha/).
### Browser support ###
diff --git a/dist/index.html b/dist/index.html
index f0b3bc8..a2bd288 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,243 +1,312 @@
jCaptcha - Simple captcha component written in pure JavaScript with no dependencies
JavaScript Captcha
jCaptcha
Tiny captcha component written in pure JavaScript with no dependencies based on canvas element