Skip to content

πŸ¦› JavaScript library for zooming and panning HTML content

License

Notifications You must be signed in to change notification settings

d2phap/happlajs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

48 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ¦› 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

πŸƒβ€β™‚οΈ Usage

Please see Docs project for full example.

HTML template

<body>
  <div id="board" tabindex="0">
    <div id="wrapper">
      <div id="boardContent">
        <!-- Your content here -->
        <img src="https://imageglass.org/img/iglogo.svg" alt="ImageGlass logo" />
      </div>
    </div>
  </div>
</body>

CSS

#board { width: 500px; height: 500px; }
#wrapper { width: 100%; height: 100%; }
#boardContent { display: inline-flex; }
#boardContent * {
  -webkit-user-drag: none;
  user-select: none;
}

JavaScript

// 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

// To be updated

🏹 Methods

// To be updated

πŸ’– Support my open source work

Buy me a beer? Buy me a beer? Become a sponsor

Cryptocurrency donation:

# Ethereum
0xc19be8972809b6b989f3e4ba16595712ba8e0de4

# Bitcoin
1PcCezBmM3ahTzfBBi5KVWnnd3bCHbas8Z

Thanks for your gratitude and finance help!

βš– License

See https://github.com/d2phap/happla/blob/main/LICENSE

FOSSA Status

πŸ’ͺ Other open source projects