Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@wizzn/vue-pinch-zoom
Advanced tools
Vue library for images scaling and dragging with touch screen gestures.
Readme
Vue library for images scaling and dragging with touch screen gestures.
Install the npm package.
npm i @wizzn/vue-pinch-zoom
Import module:
import PinchZoom from '@wizzn/vue-pinch-zoom';
Vue.component('pinch-zoom', PinchZoom);
Put an image inside the <pinch-zoom> container, its content will be scaled with a pinch zoom.
<pinch-zoom>
<img src="..." />
</pinch-zoom>
name | type | default | description |
---|---|---|---|
transitionDuration | number | 200 | Defines the speed of the animation of positioning and transforming. |
limitZoom | number, "original image size" | "original image size" | Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size. |
minScale | number | 0 | Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan |
autoZoomOut | boolean | false | Automatic restoration of the original size of an image after its zooming in by two fingers. |
doubleTap | boolean | true | Zooming in and zooming out of an image, depending on its current condition, with double tap. |
disabled | boolean | false | Disable zoom. |
disablePan | boolean | false | Turn off panning with one finger. |
overflow | "hidden", "visible" | "hidden" | hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box. |
disableZoomControl | "disable", "never", "auto" | "auto" | Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices. |
zoomControlScale | number | 1 | Zoom factor when using zoom controls. |
backgroundColor | string | "rgba(0,0,0,0.85)" | The background color of the container. |
limitPan | boolean | false | Stop panning when the edge of the image reaches the edge of the screen. |
listeners | "auto", "mouse and touch" | "mouse and touch" | By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen. |
wheel | boolean | true | Scale with the mouse wheel. |
wheelZoomFactor | number | 0.2 | Zoom factor when zoomed in with the mouse wheel. |
autoHeight | boolean | false | Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the <img> tag. When setting the property value to true , a subscription to the window resize listener will be created. |
draggableImage | boolean | true | Sets the attribute draggable to the <img> tag. |
name | description |
---|---|
toggleZoom() | Image zooming in and out, depending on its current state. |
destroy() | Unsubscribe from mouse events and touches, as well as remove added styles from the DOM tree. |
FAQs
Vue library for images scaling and dragging with touch screen gestures.
The npm package @wizzn/vue-pinch-zoom receives a total of 6 weekly downloads. As such, @wizzn/vue-pinch-zoom popularity was classified as not popular.
We found that @wizzn/vue-pinch-zoom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).