@@ -5,57 +5,12 @@ JavaScript library for zooming and panning HTML content. Live demo: https://d2ph
55## 🚀 Getting started
66Run the command
77```
8- npm i @d2phap/happla
8+ npm i happlajs
99```
1010
11- - NPM package: https://www.npmjs.com/package/@d2phap/happla
12- - Github source: https://github.com/d2phap/happla
13-
14- ## 🏃♂️ Usage
15- Please see [ Docs project] ( https://github.com/d2phap/happla/tree/main/docs ) for full example.
16-
17- ### HTML template
18- ``` html
19- <body >
20- <div id =" board" tabindex =" 0" >
21- <div id =" wrapper" >
22- <div id =" boardContent" >
23- <!-- Your content here -->
24- <img src =" https://imageglass.org/img/iglogo.svg" alt =" ImageGlass logo" />
25- </div >
26- </div >
27- </div >
28- </body >
29- ```
30-
31- ### CSS
32- ``` scss
33- #board { width : 500px ; height : 500px ; }
34- #wrapper { width : 100% ; height : 100% ; }
35- #boardContent { display : inline-flex ; }
36- #boardContent * {
37- -webkit-user-drag : none ;
38- user-select : none ;
39- }
40- ```
41-
42- ### JavaScript
43- ``` ts
44- // import library
45- import { Board } from ' @d2phap/happla' ;
46-
47- // get HTML elements
48- const elBoard = document .getElementById (' board' );
49- const elBoardContent = document .getElementById (' boardContent' );
50-
51- // declare the board
52- const board = new Board (elBoard , elBoardContent , {
53- // your configs here
54- });
11+ - NPM package: https://www.npmjs.com/package/happlajs
12+ - Github source: https://github.com/d2phap/happlajs
5513
56- // enable functions of the board
57- board .enable ();
58- ```
5914
6015## 🧱 Config options
6116``` ts
@@ -83,19 +38,6 @@ board.enable();
8338</a >
8439
8540
86- ### Cryptocurrency donation:
87-
88- ``` bash
89- # Ethereum
90- 0xc19be8972809b6b989f3e4ba16595712ba8e0de4
91-
92- # Bitcoin
93- 1PcCezBmM3ahTzfBBi5KVWnnd3bCHbas8Z
94- ```
95-
96- Thanks for your gratitude and finance help!
97-
98-
9941
10042## ⚖ License
10143See https://github.com/d2phap/happla/blob/main/LICENSE
0 commit comments