![Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility](https://cdn.sanity.io/images/cgdhsj6q/production/97774ea8c88cc8f4bed2766c31994ebc38116948-1664x1366.png?w=400&fit=max&auto=format)
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Add mobile friendly panning and zooming to any HTML DOM element.
npm install --save dompanzoom
import domPanZoom from 'dompanzoom';
<script src="https://cdn.jsdelivr.net/npm/dompanzoom@v0.0.5/dist/domPanZoom.min.js"></script>
You need two HTML DOM elements. The panZoom element within a wrapper element:
<div id="my-wrapper">
<div id="my-container">
<p>You can add any HTML here<p>
</div>
</div>
Then create a new instance of domPanZoom:
new domPanZoom({
// The ID of the wrapper element (required)
wrapperElementID: 'my-wrapper',
// The ID of the container element (required)
panZoomElementID: 'my-container'
});
You can pass the following options into domPanZoom:
Option | Default | |
---|---|---|
center | true | Start with a centered position. This option overrides initalPanX and initialPanY |
bounds | cover | Set this option to 'contain' or 'cover' to limit the boundries of the panZoomElement to the wrapperElement. This works similar to the CSS property background-size: contain / cover. Setting this option might effect the option minZoom |
minZoom | 0.1 | Minimum zoom, 0.5 would be half the original size |
maxZoom | 10 | Maximum zoom, 2 would be double the original size |
panStep | 10 | How many percent to pan by default with the panning methods panLeft, panRight, panUp and panDown |
zoomStep | 50 | How many percent to zoom by default with the methods zoomIn and zoomOut |
zoomWheelSpeed | 1 | The speed in which to zoom when using the mouse wheel |
initialZoom | 1 | Initial zoom level |
initialPanX | 0 | Initial horizontal pan in percent |
initialPanY | 0 | Initial vertical pan in percent |
transitionSpeed | 400 | Transition speed in milliseconds, higher values are slower |
new domPanZoom({
wrapperElementID: 'my-wrapper',
panZoomElementID: 'my-container',
bounds: false,
minZoom: 1
});
You can use the following methods:
Getters | |
---|---|
.getPan() | Returns an object with X and Y values of current pan position. You can pass true to get the actual pixel values, e.g. .getPan(true) |
.getPanX() | Returns the current horizontal position. You can pass true to get the actual pixel values, e.g. .getPanX(true) |
.getPanY() | Returns the current vertical position. You can pass true to get the actual pixel values, e.g. .getPanY(true) |
.getZoom() | Returns the current zoom level |
Setters | |
---|---|
.panLeft() .panRight() .panUp() .panDown() | Pan a specific direction. You can pass a number to pan a specific amount (in percent). Pass true as first or second argument to pan instantly, e.g. .panLeft(50) , .panRight(true) , .panUp(30, true) |
.panTo(x, y) | Pan to a specific position. The x and y values are in percent, so .panTo(50, 50) will pan to the center. Pass true as third argument to pan instantly, e.g. .panTo(50, 50, true) |
.center() | Pan to centered position. Pass true to center instantly, e.g. .center(true) |
.zoomIn() .zoomOut() | Zoom in and out. You can pass a number to zoom a specific amount (in percent). Pass true as first or second argument to zoom instantly, .zoomIn(20) , .zoomIn(true) , .zoomIn(50, true) |
.zoomTo(2) | Zoom to a specific zoom level. Pass true as a second argument to zoom instantly, e.g. .zoomTo(2, true) |
var myDomPanZoom = new domPanZoom({
wrapperElementID: 'my-wrapper',
panZoomElementID: 'my-container'
});
myDomPanZoom.panTo(20, 80);
Event | |
---|---|
onInit | Triggered once domPanZoom is initialized |
onChange | Triggered while panning or zooming |
onZoom | Triggered while zooming |
onPan | Triggered while panning |
var myDomPanZoom = new domPanZoom({
wrapperElementID: 'my-wrapper',
panZoomElementID: 'my-container',
onZoom: function () {
console.log(this.getZoom());
}
});
This library is heavily inspired by https://github.com/anvaka/panzoom.
FAQs
Add mobile friendly panning and zooming to any DOM element.
The npm package dompanzoom receives a total of 1 weekly downloads. As such, dompanzoom popularity was classified as not popular.
We found that dompanzoom 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.