Skip to content

Commit 44e6afb

Browse files
author
zpfz
committed
published: 2020/5/31
Signed-off-by: zpfz <[email protected]>
0 parents  commit 44e6afb

17 files changed

+1909
-0
lines changed

‎.eslintrc

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"node": true
5+
},
6+
"parserOptions": {
7+
"ecmaVersion": 6,
8+
"sourceType": "module"
9+
},
10+
"rules": {
11+
"semi": 2
12+
}
13+
}

‎.gitignore

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
.DS_Store
2+
yarn.lock
3+
dist/.git
4+
5+
# Logs
6+
logs
7+
*.log
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
lerna-debug.log*
12+
13+
# Diagnostic reports (https://nodejs.org/api/report.html)
14+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
15+
16+
# Runtime data
17+
pids
18+
*.pid
19+
*.seed
20+
*.pid.lock
21+
22+
# Directory for instrumented libs generated by jscoverage/JSCover
23+
lib-cov
24+
25+
# Coverage directory used by tools like istanbul
26+
coverage
27+
*.lcov
28+
29+
# nyc test coverage
30+
.nyc_output
31+
32+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
33+
.grunt
34+
35+
# Bower dependency directory (https://bower.io/)
36+
bower_components
37+
38+
# node-waf configuration
39+
.lock-wscript
40+
41+
# Compiled binary addons (https://nodejs.org/api/addons.html)
42+
build/Release
43+
44+
# Dependency directories
45+
node_modules/
46+
jspm_packages/
47+
48+
# Snowpack dependency directory (https://snowpack.dev/)
49+
web_modules/
50+
51+
# TypeScript cache
52+
*.tsbuildinfo
53+
54+
# Optional npm cache directory
55+
.npm
56+
57+
# Optional eslint cache
58+
.eslintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variables file
76+
.env
77+
.env.test
78+
79+
# parcel-bundler cache (https://parceljs.org/)
80+
.cache
81+
.parcel-cache
82+
83+
# Next.js build output
84+
.next
85+
out
86+
87+
# Nuxt.js build / generate output
88+
.nuxt
89+
90+
# Gatsby files
91+
.cache/
92+
# Comment in the public line in if your project uses Gatsby and not Next.js
93+
# https://nextjs.org/blog/next-9-1#public-directory-support
94+
# public
95+
96+
# vuepress build output
97+
.vuepress/dist
98+
99+
# Serverless directories
100+
.serverless/
101+
102+
# FuseBox cache
103+
.fusebox/
104+
105+
# DynamoDB Local files
106+
.dynamodb/
107+
108+
# TernJS port file
109+
.tern-port
110+
111+
# Stores VSCode versions used for testing VSCode extensions
112+
.vscode-test
113+
114+
# yarn v2
115+
116+
.yarn/cache
117+
.yarn/unplugged
118+
.yarn/build-state.yml
119+
.pnp.*

‎.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
gulpfile.js
2+
yarn.lock
3+
test/*.*

‎.prettierrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": true
3+
}

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Feng L.H.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<h1 align="center">RVerify.js</h1>
2+
<div align="center">
3+
4+
✅❎ A lightweight image rotation verification plugin.
5+
6+
![Build](https://img.shields.io/badge/build-passing-brightgreen?style=flat-square) ![Downloads](https://img.shields.io/npm/dt/rverify?style=flat-square&color=red)![Version](https://img.shields.io/github/package-json/v/zpfz/RVerify.js?style=flat-square&color=orange) ![License](https://img.shields.io/github/license/zpfz/RVerify.js?style=flat-square&color=blue)
7+
8+
</div>
9+
10+
## Installation
11+
Add `RVerify.js` and `RVerify.css` to your project.
12+
```js
13+
<script src="RVerify.js"></script>
14+
<link rel="stylesheet" href="RVerify.css"/>
15+
```
16+
You can get the corresponding CDN link from [unpkg](https://unpkg.com/rverify/).
17+
18+
RVerify.js is available via [npm](https://www.npmjs.com/package/rverify).
19+
```sh
20+
npm install --save rverify
21+
```
22+
23+
## Basic usage
24+
Simply call `action()` to activate the verification modal.
25+
```js
26+
RVerify.action(function(res){
27+
console.log(res);
28+
});
29+
```
30+
`res` will return 3 different codes:
31+
32+
- `0`: Verify failed.
33+
- `1`: Verify successful.
34+
- `2`: No action.(Return the code when the modal is closed before it successfully verified.)
35+
36+
## Configuration
37+
You can configure some parameters through `RVerify.configure({})`.
38+
39+
### mask
40+
Type: `Number`
41+
Default: `0.5`
42+
43+
Set the mask transparency.
44+
```js
45+
RVerify.configure({
46+
mask: 0.5
47+
})
48+
```
49+
50+
### maskClosable
51+
Type: `Boolean`
52+
Default: `false`
53+
54+
Set whether click the mask can be closed.
55+
```js
56+
RVerify.configure({
57+
maskClosable: true
58+
})
59+
```
60+
### closeIcon
61+
Type: `String`
62+
Default: `(SVG CODE)`
63+
64+
Set the modal close icon.
65+
```js
66+
RVerify.configure({
67+
closeIcon: '(Please copy the SVG code)'
68+
})
69+
```
70+
**NOTE**: It's recommended to set the SVG icon `width` and `height` to `20px`.
71+
72+
### sliderIcon
73+
Type: `String`
74+
Default: `(SVG CODE)`
75+
76+
Set the modal slider icon.
77+
```js
78+
RVerify.configure({
79+
sliderIcon: '(Please copy the SVG code)'
80+
})
81+
```
82+
**NOTE**: It's recommended to set the SVG icon `width` and `height` to `20px`.
83+
84+
### extraIcon
85+
Type: `String`
86+
Default: `(SVG CODE)`
87+
88+
Set the modal extra icon.
89+
```js
90+
RVerify.configure({
91+
extraIcon: '(Please copy the SVG code)'
92+
})
93+
```
94+
**NOTE**: It's recommended to set the SVG icon `width` and `height` to `15px`.
95+
96+
### tolerance
97+
Type: `Number`
98+
Default: `10`
99+
100+
Set the verification tolerance range.(Range: 5°~45°)
101+
```js
102+
RVerify.configure({
103+
tolerance: 10
104+
})
105+
```
106+
**NOTE**: In order to ensure a friendly verification effect, its value ranges from 5° to 45°.
107+
108+
### duration
109+
Type: `Number`
110+
Default: `500`
111+
112+
Set the modal delay closing time.(Unit: ms)
113+
```js
114+
RVerify.configure({
115+
duration: 1000
116+
})
117+
```
118+
119+
### title
120+
Type: `String`
121+
Default: `身份验证`
122+
123+
Set the modal title.
124+
```js
125+
RVerify.configure({
126+
title: 'Authentication'
127+
})
128+
```
129+
130+
### text
131+
Type: `String`
132+
Default: `拖动滑块，使图片角度为正`
133+
134+
Set the modal text.
135+
```js
136+
RVerify.configure({
137+
text: 'Drag the slider to make the image angle positive.'
138+
})
139+
```
140+
141+
### extra
142+
Type: `String`
143+
Default: `null`
144+
145+
Set extra features at the bottom of the modal.
146+
```js
147+
RVerify.configure({
148+
extra: 'View on Npm'
149+
})
150+
```
151+
152+
### extraColor
153+
Type: `String`
154+
Default: `#38F`
155+
156+
Set extra features text color at the bottom of the modal.
157+
```js
158+
RVerify.configure({
159+
extraColor: '#1ca280'
160+
})
161+
```
162+
163+
### extraLink
164+
Type: `String`
165+
Default: `https://github.com/zpfz`
166+
167+
Set extra features link at the bottom of the modal.
168+
```js
169+
RVerify.configure({
170+
extraLink: 'https://www.npmjs.com/package/rverify'
171+
})
172+
```
173+
174+
### zIndex
175+
Type: `Number`
176+
Default: `9999`
177+
178+
Set the modal z-index.
179+
```js
180+
RVerify.configure({
181+
zIndex: 1000
182+
})
183+
```
184+
185+
### album
186+
Type: `Array`
187+
Default: `[]`
188+
189+
Set the modal randomly displayed image album.
190+
```js
191+
RVerify.configure({
192+
album: [
193+
'https://www.humanewatch.org/app/uploads/2018/10/Elephant_zoo.jpg',
194+
'https://askabiologist.asu.edu/sites/default/files/styles/panopoly_image_full/public/side-content/tortoiseshell_she-cat.jpg?itok=tbXBe5H7',
195+
'http://www.caraphil.org/mainsite/wp-content/uploads/2016/01/Monching-CARA-rescued-cat-pet-for-adoption-animal-welfare-in-the-Philippines.jpg'
196+
]
197+
})
198+
```
199+
**NOTE**: One image needs to be set at least.
200+
201+
## Thanks
202+
RVerify © 2020-present, Feng L.H. Released under the [MIT License](https://mit-license.org/).

0 commit comments

Comments
 (0)