https://github.com/d2phap/happlajs
🦛 JavaScript library for zooming and panning HTML content
https://github.com/d2phap/happlajs
happlajs node-package npm-package panning typescript zoom-and-pan zoomable-images
Last synced: about 2 months ago
JSON representation
🦛 JavaScript library for zooming and panning HTML content
- Host: GitHub
- URL: https://github.com/d2phap/happlajs
- Owner: d2phap
- License: mit
- Created: 2021-05-30T05:09:31.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T03:18:25.000Z (over 2 years ago)
- Last Synced: 2025-03-31T12:57:25.475Z (3 months ago)
- Topics: happlajs, node-package, npm-package, panning, typescript, zoom-and-pan, zoomable-images
- Language: TypeScript
- Homepage: https://d2phap.github.io/happla
- Size: 1.7 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🦛 Happla
JavaScript library for zooming and panning HTML content. Live demo: https://d2phap.github.io/happla
## 🚀 Getting started
Run the command
```
npm i @d2phap/happla
```
- NPM package: https://www.npmjs.com/package/@d2phap/happla
- Github source: https://github.com/d2phap/happla
## 🏃♂️ Usage
Please see [Docs project](https://github.com/d2phap/happla/tree/main/docs) for full example.
### HTML template
```html
```
### CSS
```scss
#board { width: 500px; height: 500px; }
#wrapper { width: 100%; height: 100%; }
#boardContent { display: inline-flex; }
#boardContent * {
-webkit-user-drag: none;
user-select: none;
}
```
### JavaScript
```ts
// import library
import { Board } from '@d2phap/happla';
// get HTML elements
const elBoard = document.getElementById('board');
const elBoardContent = document.getElementById('boardContent');
// declare the board
const board = new Board(elBoard, elBoardContent, {
// your configs here
});
// enable functions of the board
board.enable();
```
## 🧱 Config options
```ts
// To be updated
```
## 🏹 Methods
```ts
// To be updated
```
## 💖 Support my open source work
### Cryptocurrency donation:
```bash
# Ethereum
0xc19be8972809b6b989f3e4ba16595712ba8e0de4
# Bitcoin
1PcCezBmM3ahTzfBBi5KVWnnd3bCHbas8Z
```
Thanks for your gratitude and finance help!
## ⚖ License
See https://github.com/d2phap/happla/blob/main/LICENSE
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fd2phap%2Fhappla?ref=badge_large)
## 💪 Other open source projects
- `ImageGlass` - A lightweight, versatile image viewer: https://imageglass.org
- `Fluent Reveal Effect Js` (Fluent Design System): https://github.com/d2phap/fluent-reveal-effect
- `Vue File selector` (Fluent Design System): https://github.com/d2phap/vue-file-selector
- `FileWatcherEx` - A wrapper of C# FileSystemWatcher for Windows: https://github.com/d2phap/FileWatcherEx