{"id":15685981,"url":"https://github.com/d2phap/happlajs","last_synced_at":"2025-05-07T18:22:06.819Z","repository":{"id":42636958,"uuid":"372128378","full_name":"d2phap/happlajs","owner":"d2phap","description":"🦛 JavaScript library for zooming and panning HTML content","archived":false,"fork":false,"pushed_at":"2023-03-06T03:18:25.000Z","size":1786,"stargazers_count":9,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T12:57:25.475Z","etag":null,"topics":["happlajs","node-package","npm-package","panning","typescript","zoom-and-pan","zoomable-images"],"latest_commit_sha":null,"homepage":"https://d2phap.github.io/happla","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d2phap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["d2phap"],"patreon":"d2phap","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://donorbox.org/imageglass","https://www.paypal.me/d2phap"]}},"created_at":"2021-05-30T05:09:31.000Z","updated_at":"2023-11-10T08:23:59.000Z","dependencies_parsed_at":"2024-02-01T17:15:41.558Z","dependency_job_id":"6d918f2c-f899-481e-833a-459bf992de02","html_url":"https://github.com/d2phap/happlajs","commit_stats":null,"previous_names":["d2phap/happlajs"],"tags_count":0,"template":false,"template_full_name":"d2phap/npm-package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Fhapplajs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Fhapplajs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Fhapplajs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Fhapplajs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d2phap","download_url":"https://codeload.github.com/d2phap/happlajs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931823,"owners_count":21827175,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["happlajs","node-package","npm-package","panning","typescript","zoom-and-pan","zoomable-images"],"created_at":"2024-10-03T17:34:02.168Z","updated_at":"2025-05-07T18:22:06.786Z","avatar_url":"https://github.com/d2phap.png","language":"TypeScript","readme":"# 🦛 Happla\nJavaScript library for zooming and panning HTML content. Live demo: https://d2phap.github.io/happla\n\n\n## 🚀 Getting started\nRun the command\n```\nnpm i @d2phap/happla\n```\n\n- NPM package: https://www.npmjs.com/package/@d2phap/happla\n- Github source: https://github.com/d2phap/happla\n\n## 🏃‍♂️ Usage\nPlease see [Docs project](https://github.com/d2phap/happla/tree/main/docs) for full example.\n\n### HTML template\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"board\" tabindex=\"0\"\u003e\n    \u003cdiv id=\"wrapper\"\u003e\n      \u003cdiv id=\"boardContent\"\u003e\n        \u003c!-- Your content here --\u003e\n        \u003cimg src=\"https://imageglass.org/img/iglogo.svg\" alt=\"ImageGlass logo\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\n### CSS\n```scss\n#board { width: 500px; height: 500px; }\n#wrapper { width: 100%; height: 100%; }\n#boardContent { display: inline-flex; }\n#boardContent * {\n  -webkit-user-drag: none;\n  user-select: none;\n}\n```\n\n### JavaScript\n```ts\n// import library\nimport { Board } from '@d2phap/happla';\n\n// get HTML elements\nconst elBoard = document.getElementById('board');\nconst elBoardContent = document.getElementById('boardContent');\n\n// declare the board\nconst board = new Board(elBoard, elBoardContent, {\n  // your configs here\n});\n\n// enable functions of the board\nboard.enable();\n```\n\n## 🧱 Config options\n```ts\n// To be updated\n```\n\n\n## 🏹 Methods\n```ts\n// To be updated\n```\n\n\n## 💖 Support my open source work\n\u003ca href=\"https://www.patreon.com/d2phap\" target=\"_blank\" title=\"Become a patron\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Patreon-@d2phap%20-e85b46.svg?maxAge=3600\" height=\"30\" alt=\"Buy me a beer?\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.paypal.me/d2phap\" target=\"_blank\" title=\"Buy me a beer?\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/PayPal-Donate%20$10%20-0070ba.svg?maxAge=3600\" height=\"30\" alt=\"Buy me a beer?\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/sponsors/d2phap\" target=\"_blank\" title=\"Become a sponsor\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Github-@d2phap-24292e.svg?maxAge=3600\" height=\"30\" alt=\"Become a sponsor\"\u003e\n\u003c/a\u003e\n\n\n### Cryptocurrency donation:\n\n```bash\n# Ethereum\n0xc19be8972809b6b989f3e4ba16595712ba8e0de4\n\n# Bitcoin\n1PcCezBmM3ahTzfBBi5KVWnnd3bCHbas8Z\n```\n\nThanks for your gratitude and finance help!\n\n\n\n## ⚖ License\nSee https://github.com/d2phap/happla/blob/main/LICENSE\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fd2phap%2Fhappla.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fd2phap%2Fhappla?ref=badge_large)\n\n\n## 💪 Other open source projects\n- `ImageGlass` - A lightweight, versatile image viewer: https://imageglass.org\n- `Fluent Reveal Effect Js` (Fluent Design System): https://github.com/d2phap/fluent-reveal-effect\n- `Vue File selector` (Fluent Design System): https://github.com/d2phap/vue-file-selector\n- `FileWatcherEx` - A wrapper of C# FileSystemWatcher for Windows: https://github.com/d2phap/FileWatcherEx\n","funding_links":["https://github.com/sponsors/d2phap","https://patreon.com/d2phap","https://donorbox.org/imageglass","https://www.paypal.me/d2phap","https://www.patreon.com/d2phap"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd2phap%2Fhapplajs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd2phap%2Fhapplajs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd2phap%2Fhapplajs/lists"}