Skip to content

d2phap/happlajs

Folders and files

NameName
Last commit message
Last commit date
Jun 6, 2021
Jul 15, 2021
Feb 11, 2022
Jul 15, 2021
May 30, 2021
May 30, 2021
Jul 13, 2021
Jul 13, 2021
May 30, 2021
May 30, 2021
Jun 27, 2021
Nov 8, 2022
Feb 11, 2022
Jun 6, 2021
May 30, 2021

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