Skip to content

Commit 107120f

Browse files
committed
padding support, credits to @LyuGGang
1 parent 8870d08 commit 107120f

2 files changed

Lines changed: 22 additions & 7 deletions

File tree

README.md

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,29 @@ Enables a minimal JS API for zooming in on specific points or DOM elements.
1010

1111
#### Zoom in on an element:
1212

13+
```javascript
14+
zoom.to({
15+
element: document.querySelector( 'img' )
16+
});
17+
```
18+
19+
Additional options:
20+
1321
```
1422
zoom.to({
1523
element: document.querySelector( 'img' ),
16-
callback: function() {
17-
// done zooming
18-
}
24+
25+
// Amount of empty space around zoomed element
26+
padding: 20,
27+
28+
// Function to call once zooming completes
29+
callback: function() { /* ... */ }
1930
});
2031
```
2132

2233
#### Zoom in on a point:
2334

24-
```
35+
```javascript
2536
zoom.to({
2637
x: 100,
2738
y: 200,
@@ -30,7 +41,7 @@ Enables a minimal JS API for zooming in on specific points or DOM elements.
3041
});
3142
```
3243

33-
```
44+
```javascript
3445
zoom.to({
3546
x: 100,
3647
y: 200,
@@ -39,7 +50,7 @@ Enables a minimal JS API for zooming in on specific points or DOM elements.
3950
```
4051

4152
#### Reset
42-
```
53+
```javascript
4354
zoom.out();
4455
```
4556

js/zoom.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ var zoom = (function(){
175175
*
176176
* (optional)
177177
* - callback: call back when zooming in ends
178+
* - padding: spacing around the zoomed in element
178179
*/
179180
to: function( options ) {
180181

@@ -190,7 +191,7 @@ var zoom = (function(){
190191
// If an element is set, that takes precedence
191192
if( !!options.element ) {
192193
// Space around the zoomed in element to leave on screen
193-
var padding = 20;
194+
var padding = typeof options.padding === 'number' ? options.padding : 20;
194195
var bounds = options.element.getBoundingClientRect();
195196

196197
options.x = bounds.left - padding;
@@ -208,6 +209,9 @@ var zoom = (function(){
208209
options.x *= options.scale;
209210
options.y *= options.scale;
210211

212+
options.x = Math.max( options.x, 0 );
213+
options.y = Math.max( options.y, 0 );
214+
211215
magnify( options, options.scale );
212216

213217
if( options.pan !== false ) {

0 commit comments

Comments
 (0)