Skip to content

Commit 461d079

Browse files
tnhutnhu
committed
Inital commit
0 parents  commit 461d079

File tree

6 files changed

+1435
-0
lines changed

6 files changed

+1435
-0
lines changed

‎LICENSE.txt

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

‎README.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# <status-indicator/>
2+
3+
A web component to show status indicator as colored dots. [Demo](https://2z6nk70qx0.codesandbox.io/)
4+
5+
## Install
6+
7+
```bash
8+
npm i status-indicator
9+
```
10+
11+
## Usage
12+
13+
Import status-indicator.css in your CSS or JavaScript
14+
15+
```css
16+
@import 'status-indicator'
17+
```
18+
19+
```javascript
20+
import 'status-indicator/styles.css'
21+
```
22+
23+
```html
24+
<status-indicator></status-indicator>
25+
```
26+
27+
### API
28+
29+
```html
30+
<status-indicator active|positive|intermediary|negative|pulse></status-indicator>
31+
```
32+
33+
You are able to customize the dot by CSS variables, default configuration is listed below.
34+
35+
```css
36+
:root {
37+
--status-indicator-color: 216, 226, 233; /* #D8E2E9 */
38+
--status-indicator-color-active: 0, 149, 255; /* #0095FF */
39+
--status-indicator-color-positive: 75, 210, 143; /* #4BD28F */
40+
--status-indicator-color-intermediary: 255, 170, 0; /* #FFAA00 */
41+
--status-indicator-color-negative: 255, 77, 77; /* #FF4D4D */
42+
--status-indicator-size: 10px;
43+
--status-indicator-animation-time: 2s;
44+
--status-indicator-pulse-start-alpha: .5;
45+
--status-indicator-pulse-end-alpha: 0;
46+
}
47+
```
48+
49+
### LICENSE
50+
51+
MIT

‎demo.html

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>&lt;status-indicator/&gt;</title>
7+
<link rel="stylesheet" href="./styles.css">
8+
</head>
9+
10+
<body>
11+
<style>
12+
html,
13+
body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
display: grid;
18+
}
19+
20+
p {
21+
display: flex;
22+
justify-content: space-around;
23+
align-items: center;
24+
}
25+
26+
h1 {
27+
text-align: center;
28+
margin: 15px 0 0;
29+
}
30+
31+
p > span {
32+
display: inline-block;
33+
width: 10px;
34+
}
35+
36+
p > span:first-child {
37+
display: inline-block;
38+
width: 100px;
39+
}
40+
41+
p[prompt] {
42+
color: #aaa;
43+
}
44+
45+
alert-message {
46+
color: #4BD28F;
47+
position: fixed;
48+
right: 50px;
49+
bottom: 50px;
50+
}
51+
52+
:root {
53+
--status-indicator-size: 15px;
54+
}
55+
</style>
56+
<h1>&lt;status-indicator/&gt;</h1>
57+
<p>
58+
<span></span>
59+
<span></span>
60+
<span>active</span>
61+
<span>positive</span>
62+
<span>intermediary</span>
63+
<span>negative</span>
64+
</p>
65+
<p>
66+
<span></span>
67+
<status-indicator></status-indicator>
68+
<status-indicator active></status-indicator>
69+
<status-indicator positive></status-indicator>
70+
<status-indicator intermediary></status-indicator>
71+
<status-indicator negative></status-indicator>
72+
</p>
73+
<p>
74+
<span>pulse</span>
75+
<status-indicator pulse></status-indicator>
76+
<status-indicator active pulse></status-indicator>
77+
<status-indicator positive pulse></status-indicator>
78+
<status-indicator intermediary pulse></status-indicator>
79+
<status-indicator negative pulse></status-indicator>
80+
</p>
81+
82+
<p prompt>
83+
Hover to view code, click to copy code into clipboard.
84+
</p>
85+
86+
<alert-message></alert-message>
87+
88+
<script>
89+
function toClipboard(text, done) {
90+
var input = document.createElement('input'),
91+
body = document.body,
92+
style = input.style
93+
94+
style.width = '1px'
95+
style.height = '0px'
96+
style.border = 'none'
97+
style.margin = '0'
98+
style.padding = '0'
99+
style.position = 'absolute'
100+
style.opacity = 0
101+
102+
body.appendChild(input)
103+
104+
input.value = text
105+
input.select()
106+
document.execCommand('copy')
107+
108+
body.removeChild(input)
109+
110+
if (typeof done === 'function') { done() }
111+
}
112+
113+
document
114+
.querySelectorAll('status-indicator')
115+
.forEach(function (element) {
116+
element.setAttribute('title', element.outerHTML.replace(/=""/g, ''))
117+
118+
element.addEventListener('click', function(e) {
119+
toClipboard(e.target.getAttribute('title'), function() {
120+
var alert = document.querySelector('alert-message')
121+
122+
alert.textContent = 'Code copied'
123+
124+
setTimeout(function() {
125+
alert.textContent = ''
126+
}, 2000)
127+
})
128+
})
129+
})
130+
</script>
131+
</body>
132+
133+
</html>

0 commit comments

Comments
 (0)