{"id":15661960,"url":"https://github.com/sagold/js-viewpane","last_synced_at":"2025-05-05T22:53:24.957Z","repository":{"id":58236508,"uuid":"43450846","full_name":"sagold/js-viewpane","owner":"sagold","description":"simple, feelgood, pan and zoomable image or HTML container","archived":false,"fork":false,"pushed_at":"2020-05-21T12:29:06.000Z","size":22241,"stargazers_count":20,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T22:52:58.835Z","etag":null,"topics":["3d","html","image","pan","pinch","pinch-to-zoom","zoom"],"latest_commit_sha":null,"homepage":"http://sagold.github.io/js-viewpane/","language":"JavaScript","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/sagold.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-30T18:24:07.000Z","updated_at":"2024-11-05T02:27:05.000Z","dependencies_parsed_at":"2022-08-31T09:22:58.417Z","dependency_job_id":null,"html_url":"https://github.com/sagold/js-viewpane","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Fjs-viewpane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Fjs-viewpane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Fjs-viewpane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sagold%2Fjs-viewpane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sagold","download_url":"https://codeload.github.com/sagold/js-viewpane/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252590532,"owners_count":21772935,"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":["3d","html","image","pan","pinch","pinch-to-zoom","zoom"],"created_at":"2024-10-03T13:29:41.476Z","updated_at":"2025-05-05T22:53:24.932Z","avatar_url":"https://github.com/sagold.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Viewpane\n\n\u003e simple, feelgood, pan and zoomable image or HTML container\n\n\nViewpane enables an image or any HTML Container to be pan- and zoomable within a given parent container. In some way\nthis is a subset of iScroll or comparable script, but it offers a smoother scrolling experience and a more natural\n(iOS) rubberband. Additional, _viewpane_ toys with being in 3D space, enabling perspective experiments with css or js.\n\n\n`npm install js-viewpane --save`\n\n`bower install viewpane`\n\n\nYou can checkout the [demos page](http://sagold.github.io/js-viewpane/) to get an impression what it does.\n\n\n## usage\n\n```css\n\n    #camera {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;    \n    }\n\n    #viewpane {\n        position: absolute;\n        transform-style: preserve-3d\n    }\n```\n\n\n```html\n\n    \u003cdiv id=\"camera\"\u003e\n        \u003cdiv id=\"viewpane\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n```\n\n\n```javascript\n\n    var viewpane = new Viewpane(\"camera\", \"viewpane\", options);\n\n```\n\n\n### options\n\n```javascript\n    {\n        // friction used on animation to stop user input. Values [0, 1[\n        friction: 0.91,             \n        // type of valid positions. May also be \"fitBothDimensions\"\n        // Also `Viewpane.FOCUS_TYPE.BOTH` or `Viewpane.FOCUS_TYPE.LARGEST`\n        typeOfFocus: \"fitLargestDimension\",     \n        // The area to focus camera (bound, rubberband)\n        // Default: viewpane-element dimensions\n        focus: {x: 2048, y: 1024},\n        // perspective of camera. Values [0, Infinity[. Default 1000  \n        perspective: 1000,      \n        // perspective origin. Values [0, 1]. Default (0.5, 0.5)    \n        origin: {x: 0.5, y: 0.5},\n        // enable rubberband on z-axis. Default true\n        rubberZ: true\n    }\n```\n\n### events\n\nEvent names are also accessible view `Viewpane.EVENT_*`\n\n```javascript\n    \n    var viewpane = new Viewpane(\"camera\", \"viewpane\", options);\n\n    viewpane.addObserver(\"onClick\", function (event, clickOrigin) {\n        // viewpane has been clicked\n    });\n\n    viewpane.addObserver(\"onRender\", function (position) {\n        // viewpane has updated visually\n    });\n\n    viewpane.addObserver(\"onUpdate\", function (position) {\n        // viewpane has updated calculations\n    });\n\n    viewpane.addObserver(\"onInputStart\", function () {\n        // user input starts\n    });\n\n    viewpane.addObserver(\"onInputStop\", function () {\n        // user input has ended\n    });\n\n    viewpane.addObserver(\"onEnd\", function () {\n        // all animations and input has stopped\n    });\n\n```\n\n\n## api\n\n### `viewpane`\n\nmethod                              | description\n------------------------------------|--------------------------------------------------------------------\nactivate()                          | activate userinteraction (default)\ndeactivate()                        | deactivate user interaction\nfit()                               | centers the contents (position, scale) to the viewport\naddObserver(eventName, callback)    | add an event listener (@see events)\nrepaint()                           | redraws viewpane\naddEntity(Viewpane.Entity)          | adds another entity which is translated by the viewpane (camera)\n\n\n\n## requirements\n\n- [support of 3d transforms](http://caniuse.com/#feat=transforms3d)\n\n\n## exported utilities\n\nfor details see the corresponding sourcefiles.\n\n```javascript\n    // viewpane entity (renderable)\n    Viewpane.Entity\n    // animation loop\n    Viewpane.Loop\n    // vector class\n    Viewpane.Vector\n    // types of viewpane bounds\n    Viewpane.FOCUS_TYPE\n```\n\n\n## performance\n\n- ensure images are a multiple of 2 (i.e. use 2048x1024, but NOT 2048x1025). Especially on iOS\n\n\n## known bugs\n\n- sometimes zoomIn does not trigger rubberband animation\n\n- Browserbugs\n\n    - iOS 9.0.x, `transform-style: preserve-3d` flickering 3d layers\n\n        - Currently there is no css workaround\n            [@see Stackoverflow](http://stackoverflow.com/questions/32639639/ios-9-mobile-safari-has-a-blinking-bug-with-transform-scale3d-and-translate3d). The attribute `overflow: hidden` does not work with the `transform-style: preserve3d` options.\n\n        - for the _viewpane_, the only workaround is to use js entities instead of css. See the \n            [demos page](http://sagold.github.io/js-viewpane/) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagold%2Fjs-viewpane","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsagold%2Fjs-viewpane","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsagold%2Fjs-viewpane/lists"}