Skip to content

Commit d84935e

Browse files
hakimelhakimel
committed
work towards IE9 support (not there yet)
1 parent 077e4e7 commit d84935e

3 files changed

Lines changed: 45 additions & 29 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Enables a minimal JS API for zooming in on specific points or DOM elements.
44

5-
*Note that this is only a proof of concept so don't use it for anything important.*
5+
*Note that this is only a proof of concept so don't use it for anything important. Does not work in IE, yet.*
66

77
[Try out the demo](http://lab.hakim.se/zoom-js/).
88

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ <h2>I gotta piss</h2>
8282
<script>
8383
document.querySelector( '#main' ).addEventListener( 'click', function( event ) {
8484
event.preventDefault();
85-
zoom.in( { element: event.target } );
85+
zoom.magnify({ element: event.target });
8686
} );
8787
</script>
8888

‎js/zoom.js‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,19 @@ var zoom = (function(){
6666
panUpdateInterval = -1;
6767

6868
// Check for transform support so that we can fallback otherwise
69-
var supportsTransforms = document.body.style.WebkitTransform !== undefined ||
70-
document.body.style.MozTransform !== undefined ||
71-
document.body.style.msTransform !== undefined ||
69+
var supportsTransforms = document.body.style.transform !== undefined ||
7270
document.body.style.OTransform !== undefined ||
73-
document.body.style.transform !== undefined;
71+
document.body.style.msTransform !== undefined ||
72+
document.body.style.MozTransform !== undefined ||
73+
document.body.style.WebkitTransform !== undefined;
7474

7575
if( supportsTransforms ) {
7676
// The easing that will be applied when we zoom in/out
77-
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
78-
document.body.style.MozTransition = '-moz-transform 0.8s ease';
79-
document.body.style.msTransition = '-ms-transform 0.8s ease';
80-
document.body.style.OTransition = '-o-transform 0.8s ease';
8177
document.body.style.transition = 'transform 0.8s ease';
78+
document.body.style.OTransition = '-o-transform 0.8s ease';
79+
document.body.style.msTransition = '-ms-transform 0.8s ease';
80+
document.body.style.MozTransition = '-moz-transform 0.8s ease';
81+
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
8282
}
8383

8484
// Zoom out if the user hits escape
@@ -107,21 +107,22 @@ var zoom = (function(){
107107
* @param {Number} scale
108108
*/
109109
function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
110+
110111
if( supportsTransforms ) {
111112
var origin = pageOffsetX +'px '+ pageOffsetY +'px',
112-
transform = 'translate( '+ -elementOffsetX +'px, '+ -elementOffsetY +'px ) scale( '+ scale +' )';
113+
transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
113114

114-
document.body.style.WebkitTransformOrigin = origin;
115-
document.body.style.MozTransformOrigin = origin;
116-
document.body.style.msTransformOrigin = origin;
117-
document.body.style.OTransformOrigin = origin;
118115
document.body.style.transformOrigin = origin;
116+
document.body.style.OTransformOrigin = origin;
117+
document.body.style.msTransformOrigin = origin;
118+
document.body.style.MozTransformOrigin = origin;
119+
document.body.style.WebkitTransformOrigin = origin;
119120

120-
document.body.style.WebkitTransform = transform;
121-
document.body.style.MozTransform = transform;
122-
document.body.style.msTransform = transform;
123-
document.body.style.OTransform = transform;
124121
document.body.style.transform = transform;
122+
document.body.style.OTransform = transform;
123+
document.body.style.msTransform = transform;
124+
document.body.style.MozTransform = transform;
125+
document.body.style.WebkitTransform = transform;
125126
}
126127
else {
127128
// Reset all values
@@ -154,24 +155,32 @@ var zoom = (function(){
154155
function pan() {
155156
var range = 0.12,
156157
rangeX = window.innerWidth * range,
157-
rangeY = window.innerHeight * range;
158+
rangeY = window.innerHeight * range,
159+
scrollOffset = getScrollOffset();
158160

159161
// Up
160162
if( mouseY < rangeY ) {
161-
window.scroll( window.scrollX, window.scrollY - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
163+
window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
162164
}
163165
// Down
164166
else if( mouseY > window.innerHeight - rangeY ) {
165-
window.scroll( window.scrollX, window.scrollY + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
167+
window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
166168
}
167169

168170
// Left
169171
if( mouseX < rangeX ) {
170-
window.scroll( window.scrollX - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), window.scrollY );
172+
window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
171173
}
172174
// Rirght
173175
else if( mouseX > window.innerWidth - rangeX ) {
174-
window.scroll( window.scrollX + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), window.scrollY );
176+
window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
177+
}
178+
}
179+
180+
function getScrollOffset() {
181+
return {
182+
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
183+
y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
175184
}
176185
}
177186

@@ -186,7 +195,7 @@ var zoom = (function(){
186195
* - width/height: the portion of the screen to zoom in on
187196
* - scale: can be used instead of width/height explicitly set scale
188197
*/
189-
in: function( options ) {
198+
'in': function( options ) {
190199
// Due to an implementation limitation we can't zoom in
191200
// to another element without zooming our first
192201
if( level !== 1 ) {
@@ -216,7 +225,9 @@ var zoom = (function(){
216225
options.x *= options.scale;
217226
options.y *= options.scale;
218227

219-
magnify( window.scrollX, window.scrollY, options.x, options.y, options.scale );
228+
var scrollOffset = getScrollOffset();
229+
230+
magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
220231

221232
// Wait with engaging panning as it may conflict with the
222233
// zoom transition
@@ -230,16 +241,21 @@ var zoom = (function(){
230241
/**
231242
* Resets the document zoom state to its default.
232243
*/
233-
out: function() {
244+
'out': function() {
234245
clearTimeout( panEngageTimeout );
235246
clearInterval( panUpdateInterval );
236247

237-
magnify( window.scrollX, window.scrollY, 0, 0, 1 );
248+
var scrollOffset = getScrollOffset();
249+
250+
magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
238251

239252
level = 1;
240253
},
254+
255+
// Alias for 'in'
256+
'magnify': function( options ) { this['in']( options ) },
241257

242-
zoomLevel: function() {
258+
'zoomLevel': function() {
243259
return level;
244260
}
245261
}

0 commit comments

Comments
 (0)