Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iam-medvedev/wheel-monitor
Visual representation of scroll activity for debugging purposes
https://github.com/iam-medvedev/wheel-monitor
Last synced: 25 days ago
JSON representation
Visual representation of scroll activity for debugging purposes
- Host: GitHub
- URL: https://github.com/iam-medvedev/wheel-monitor
- Owner: iam-medvedev
- License: mit
- Created: 2023-08-15T19:59:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-16T16:12:22.000Z (about 1 year ago)
- Last Synced: 2024-09-18T12:40:28.858Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://npmjs.com/wheel-monitor
- Size: 1.22 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wheel Monitor
The Wheel Monitor is a TypeScript class that creates a visual representation of scroll activity for debugging purposes..
It provides an easy way to monitor and visualize wheel events on a webpage.
## Installation
You can install the Wheel Monitor using your preferred package manager:
```bash
yarn add -D wheel-monitor
```
or
```bash
npm install --save-dev wheel-monitor
```
or
```typescript
import { WheelMonitor } from 'https://esm.sh/wheel-monitor@latest';
```
## Usage
To use the Wheel Monitor, you need to import the `WheelMonitor` class and create an instance:
```ts
import { WheelMonitor } from 'wheel-monitor';
// Create an instance of WheelMonitor with custom settings
const monitor = new WheelMonitor({
axis: 'y',
height: 100,
width: 200,
barColor '#0000cc',
backgroundColor: '#fff',
className: 'custom-classname'
});
// To destroy the monitor and remove event listeners and canvas
monitor.destroy();
```
## Manual mode
Ability to programmatically trigger a wheel event. For example, if you handle events by yourself.
```ts
import { WheelMonitor } from 'wheel-monitor';
const monitor = new WheelMonitor({
manual: true,
});
window.addEventListener('wheel', (e) => {
monitor.trigger(e.deltaX);
});
```
## Scale mode
You can enable scaling mode so that the values on the chart are scaled like on the demo.
```ts
import { WheelMonitor } from 'wheel-monitor';
const monitor = new WheelMonitor({
scale: true,
});
```
## Overriding styles
You can add custom `className` with desired styles.
NOTE: If a custom `className` is specified, the default styles will not be applied.
Example:
```css
.wheel-monitor {
position: absolute !important;
}
```
```ts
import { WheelMonitor } from 'wheel-monitor';
const monitor = new WheelMonitor({
className: 'wheel-monitor',
});
```
## Options
The WheelMonitorSettings interface provides several options to customize the appearance and behavior of the monitor:
| Option | Description | Default Value |
| ----------- | ------------------ | ------------- |
| `manual` | `manual` mode flag | false |
| `scale` | `scale` mode flag | false |
| `axis` | Scroll axis | `x` or `y` |
| `height` | Canvas height | 100 |
| `width` | Canvas width | 200 |
| `zIndex` | Canvas z-index | 999999 |
| `barColor` | Chart bar color | `#0000cc` |
| `className` | Custom `className` | |
## License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.