Skip to content

Commit dd43ecb

Browse files
author
Timo Bechtel
committed
feat: initial commit
0 parents  commit dd43ecb

File tree

14 files changed

+11554
-0
lines changed

14 files changed

+11554
-0
lines changed

‎.eslintrc.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es6: true,
5+
node: true,
6+
},
7+
parserOptions: {
8+
ecmaVersion: 2019,
9+
sourceType: 'module',
10+
},
11+
extends: ['eslint:recommended'],
12+
};

‎.github/workflows/release.yml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
8+
jobs:
9+
release:
10+
name: Release
11+
runs-on: ubuntu-latest
12+
steps:
13+
- name: Checkout
14+
uses: actions/checkout@v1
15+
- name: Setup Node.js
16+
uses: actions/setup-node@v1
17+
with:
18+
node-version: 12
19+
- name: Install dependencies
20+
run: npm ci
21+
- name: Test
22+
run: npm test
23+
env:
24+
CI: true
25+
- name: Publish
26+
env:
27+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
28+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
29+
run: npx semantic-release
30+
- name: GitHub Pages
31+
uses: peaceiris/[email protected]
32+
with:
33+
github_token: ${{ secrets.GITHUB_TOKEN }}
34+
publish_dir: ./example
35+
allow_empty_commit: true

‎.github/workflows/test.yml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: Test
2+
3+
on: pull_request
4+
5+
jobs:
6+
test:
7+
name: Test
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout
11+
uses: actions/checkout@v1
12+
- name: Setup Node.js
13+
uses: actions/setup-node@v1
14+
with:
15+
node-version: 12
16+
- name: Install dependencies
17+
run: npm ci
18+
- name: Test
19+
run: npm test
20+
env:
21+
CI: true

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
.vscode

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
access = 'public'

‎.prettierrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
tabWidth: 2,
3+
semi: true,
4+
singleQuote: true,
5+
trailingComma: 'es5',
6+
};

‎.releaserc.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"plugins": [
3+
"@semantic-release/commit-analyzer",
4+
"@semantic-release/release-notes-generator",
5+
"@semantic-release/changelog",
6+
"@semantic-release/npm",
7+
"@semantic-release/git",
8+
"@semantic-release/github"
9+
]
10+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Timo Bechtel
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‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<h1 align="center">@compactjs/chatscroll</h1>
2+
<h3 align="center">Auto scroll to bottom</h3>
3+
<p align="center">
4+
<a href="https://www.npmjs.com/package/@compactjs/chatscroll" target="_blank">
5+
<img alt="Version" src="https://img.shields.io/npm/v/@compactjs/chatscroll.svg">
6+
</a>
7+
<a href="https://github.com/CompactJS/chatscroll/blob/master/LICENSE" target="_blank">
8+
<img alt="License: MIT" src="https://img.shields.io/github/license/CompactJS/chatscroll" />
9+
</a>
10+
</p>
11+
<p align="center">
12+
·
13+
<a href="https://github.com/CompactJS/chatscroll#readme">Homepage</a>
14+
·
15+
<a href="https://compactjs.github.io/chatscroll">View Demo</a>
16+
·
17+
<a href="https://github.com/CompactJS/chatscroll/issues">Report Bug / Request Feature</a>
18+
·
19+
</p>
20+
21+
## Table of Contents
22+
23+
- [Installation](#Install)
24+
- [Usage](#usage)
25+
- [Test](#run-tests)
26+
- [Contact](#contact)
27+
- [Contributing](#Contributing)
28+
- [License](#license)
29+
30+
## Install
31+
32+
### NPM:
33+
34+
```sh
35+
npm install @compactjs/chatscroll
36+
```
37+
38+
### CDN:
39+
40+
```html
41+
<script src="https://unpkg.com/@compactjs/chatscroll/dist/index.umd.js"></script>
42+
```
43+
44+
## Usage
45+
46+
### As module:
47+
48+
```javascript
49+
import { observe } from '@compactjs/chatscroll';
50+
```
51+
52+
### Example:
53+
54+
```javascript
55+
const container = document.getElementById('container');
56+
observe(container);
57+
```
58+
59+
Have a look at the [example](https://github.com/CompactJS/chatscroll/blob/master/example/index.html).
60+
61+
Or checkout the [demo](https://compactjs.github.io/chatscroll).
62+
63+
## Run tests
64+
65+
```sh
66+
npm run test
67+
```
68+
69+
## Contact
70+
71+
👤 **Timo Bechtel**
72+
73+
- Website: https://timobechtel.com
74+
- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)
75+
- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)
76+
77+
## 🤝 Contributing
78+
79+
Contributions, issues and feature requests are welcome!<br />
80+
81+
1. Check [issues](https://github.com/CompactJS/chatscroll/issues)
82+
1. Fork the Project
83+
1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)
84+
1. Test your changes `npm run test`
85+
1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)
86+
1. Push to the Branch (`git push origin feat/AmazingFeature`)
87+
1. Open a Pull Request
88+
89+
### Commit messages
90+
91+
This project uses semantic-release for automated release versions. So commits in this project follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) guidelines. I recommend using [commitizen](https://github.com/commitizen/cz-cli) for automated commit messages.
92+
93+
## Show your support
94+
95+
Give a ⭐️ if this project helped you!
96+
97+
## 📝 License
98+
99+
Distributed under the [MIT](https://github.com/CompactJS/chatscroll/blob/master/LICENSE) License.
100+
101+
---
102+
103+
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

‎example/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Test Page</title>
7+
</head>
8+
<body>
9+
<style>
10+
h1 {
11+
text-align: center;
12+
}
13+
#container {
14+
height: 500px;
15+
max-width: 500px;
16+
margin: 0 auto;
17+
overflow: hidden;
18+
}
19+
.message {
20+
position: relative;
21+
height: 50px;
22+
margin: 20px;
23+
border: 1px solid black;
24+
border-radius: 3px;
25+
padding: 10px 15px;
26+
line-height: 50px;
27+
animation: fade 0.5s;
28+
}
29+
@keyframes fade {
30+
from {
31+
opacity: 0;
32+
left: -500px;
33+
}
34+
to {
35+
opacity: 1;
36+
left: 0;
37+
}
38+
}
39+
</style>
40+
<h1>Example Chat</h1>
41+
<div id="container"></div>
42+
<script type="module">
43+
import { observe } from '../src/index.js';
44+
const container = document.getElementById('container');
45+
observe(container);
46+
47+
const addMessage = (text) => {
48+
const message = document.createElement('div');
49+
message.className = 'message';
50+
message.innerHTML = text;
51+
container.appendChild(message);
52+
};
53+
54+
setInterval((text) => {
55+
addMessage(
56+
'abcdefghijklmnopqrstuvwxyz'
57+
.split('')
58+
.sort(() => 0.5 - Math.random())
59+
.filter(() => Math.random() < 0.3)
60+
.join('')
61+
);
62+
}, 1000);
63+
</script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)