open-index/open-npm huggingface dataset:
npm package: @monomorph/sliding-panels
Description: A lightweight JavaScript library for creating sliding panels.
Author: monomorph
Latest version: 1.0.2

# Sliding Panels

A lightweight JavaScript library for creating sliding panels. 

## Installation
```bash
npm install sliding-panels
```

## usage
```javascript
import { SlidingPanels } from 'path/to/sliding-panels.js';
import 'path/to//sliding-panels.css';
```
## basic setup

```html
<button id="panel-button">Toggle Panel</button>
<div id="panel" style="display: none;">
  <div data-panel-handle>Drag Handle</div>
  <div>Panel Content</div>
</div>
```

## initialization
```javascript
import { SlidingPanels } from 'path/to/sliding-panels.js';

// Initialize SlidingPanels
const button = document.querySelector('#panel-button');
const panel = document.querySelector('#panel');
const slidingPanel = new SlidingPanels(button, panel,{options});

```

## arguments
```javascript
button: the trigger for a specific function [required],
panel: the target panel to trigger [required],
options: optional configuration
```
## options 

| Option          | Type      | Default    | Description                                                                |
| --------------- | :-------- | :--------- | :------------------------------------------------------------------------- |
| thresholdTop    | int       | 25         | The top threshold (in percentage) to automatically open the panel.         |
| thresholdBottom | int       | 70         | The bottom threshold (in percentage) to automatically close the panel.     |
| minVelocity     | int/float | 500.00     | The minimum velocity (in pixels per second) to trigger open/close actions. |
| orientation     | string    | 'vertical' | The orientation of the panel (vertical or horizontal)                      |


## example
```javascript
const options = {
  thresholdTop: 20,
  thresholdBottom: 80,
  minVelocity: 600,
  orientation: 'horizontal'
};
const slidingPanel = new SlidingPanels(button, panel, options);
```

## methods

| method |    description         
| --------------- | :-------- |
| togglePanel()    | Toggles the panel between open and closed states.       | 
| openPanel() | Opens the panel.       | 
| closePanel()     | Closes the panel. | 
| setPanelPosition(percentage) | Sets the panels position to a specific percentage.|
| destroy() | Removes all event listeners and cleans up the panel instance. |
| closeAll(exceptPanel)| Closes all panels except the one passed as an argument. |

## todo

add method to close all panels, when clicking/tapping outside panel