CSP-compliant fork of https://www.npmjs.com/package/@kazvmoe-infra/pinch-zoom-element
a94fb753a1
At min scale we can now disable panning (but still get pinch actions). In that case the pan will be passed down. Once the pan is turned into a pinch, it will no longer be passed down, and a pointercancel will be triggered on the parent. |
||
|---|---|---|
| dist | ||
| lib | ||
| .gitignore | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| rollup.config.js | ||
| tsconfig.json | ||
| tslint.json | ||
A web component for pinch zooming DOM elements.
Usage
npm install --save-dev pinch-zoom-element
<pinch-zoom>
<h1>Hello!</h1>
</pinch-zoom>
Now the above can be pinch-zoomed!
API
<pinch-zoom class="my-pinch-zoom">
<h1>Hello!</h1>
</pinch-zoom>
<script>
const pinchZoom = document.querySelector('.my-pinch-zoom');
</script>
Properties
pinchZoom.x; // x offset
pinchZoom.y; // y offset
pinchZoom.scale; // scale
Methods
Set the transform. All values are optional.
pinchZoom.setTransform({
scale: 1,
x: 0,
y: 0,
// Fire a 'change' event if values are different to current values
allowChangeEvent: false,
});
Scale in/out of a particular point.
pinchZoom.scaleTo(scale, {
// Transform origin. Can be a number, or string percent, eg "50%"
originX: 0,
originY: 0,
// Should the transform origin be relative to the container, or content?
relativeTo: 'content',
// Fire a 'change' event if values are different to current values
allowChangeEvent: false,
});
Demo
Simple image pinch-zoom. Although you can put any element in <pinch-zoom>.
Files
lib/index.ts- Original TypeScript.dist/pinch-zoom.mjs- JS module. Default exportsPinchZoom.dist/pinch-zoom.js- Plain JS. ExposesPinchZoomon the global.dist/pinch-zoom-min.js- Minified plain JS. 2.3k gzipped.