|
| 1 | +/** |
| 2 | + * Copyright (C) 2011 Hakim El Hattab, http://hakim.se |
| 3 | + * |
| 4 | + * Permission is hereby granted, free of charge, to any person obtaining a copy |
| 5 | + * of this software and associated documentation files (the "Software"), to deal |
| 6 | + * in the Software without restriction, including without limitation the rights |
| 7 | + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 8 | + * copies of the Software, and to permit persons to whom the Software is |
| 9 | + * furnished to do so, subject to the following conditions: |
| 10 | + * |
| 11 | + * The above copyright notice and this permission notice shall be included in |
| 12 | + * all copies or substantial portions of the Software. |
| 13 | + * |
| 14 | + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 15 | + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 16 | + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 17 | + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 18 | + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 19 | + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 20 | + * THE SOFTWARE. |
| 21 | + * |
| 22 | + * zoom.js enables an easy API for magnifying the DOM on |
| 23 | + * any given location. It also supports zooming in on a |
| 24 | + * specific element, much like double tapping does in |
| 25 | + * Mobile Safari. |
| 26 | + * |
| 27 | + * Currently just a proof of concept so expect bugs. Lots |
| 28 | + * of bugs. |
| 29 | + * |
| 30 | + * @author Hakim El Hattab | http://hakim.se |
| 31 | + */ |
| 32 | +var zoom = (function(){ |
| 33 | + |
| 34 | + // The current zoom level (scale) |
| 35 | + var level = 1, |
| 36 | + mouseX = 0, |
| 37 | + mouseY = 0, |
| 38 | + panEngageTimeout = -1, |
| 39 | + panUpdateInterval = -1; |
| 40 | + |
| 41 | + // The easing that will be applied when we zoom in/out |
| 42 | + document.body.style.WebkitTransition = '-webkit-transform 0.8s ease'; |
| 43 | + document.body.style.MozTransition = '-moz-transform 0.8s ease'; |
| 44 | + document.body.style.msTransition = '-ms-transform 0.8s ease'; |
| 45 | + document.body.style.OTransition = '-o-transform 0.8s ease'; |
| 46 | + document.body.style.transition = 'transform 0.8s ease'; |
| 47 | + |
| 48 | + // Zoom out if the user hits escape |
| 49 | + document.addEventListener( 'keyup', function( event ) { |
| 50 | + if( level !== 1 && event.keyCode === 27 ) { |
| 51 | + zoom.out(); |
| 52 | + } |
| 53 | + } ); |
| 54 | + |
| 55 | + // Monitor mouse movement for panning |
| 56 | + document.addEventListener( 'mousemove', function( event ) { |
| 57 | + if( level !== 1 ) { |
| 58 | + mouseX = event.clientX; |
| 59 | + mouseY = event.clientY; |
| 60 | + } |
| 61 | + } ); |
| 62 | + |
| 63 | + function prefix( property, value ) { |
| 64 | + document.body.style[ 'Webkit' + property ] = value; |
| 65 | + document.body.style[ 'Moz' + property ] = value; |
| 66 | + document.body.style[ 'ms' + property ] = value; |
| 67 | + document.body.style[ 'O' + property ] = value; |
| 68 | + document.body.style[ property ] = value; |
| 69 | + } |
| 70 | + |
| 71 | + function pan() { |
| 72 | + var range = 0.15, |
| 73 | + rangeX = window.innerWidth * range, |
| 74 | + rangeY = window.innerHeight * range; |
| 75 | + |
| 76 | + // Up |
| 77 | + if( mouseY < rangeY ) { |
| 78 | + window.scroll( window.scrollX, window.scrollY - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) ); |
| 79 | + } |
| 80 | + // Down |
| 81 | + else if( mouseY > window.innerHeight - rangeY ) { |
| 82 | + window.scroll( window.scrollX, window.scrollY + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) ); |
| 83 | + } |
| 84 | + |
| 85 | + // Left |
| 86 | + if( mouseX < rangeX ) { |
| 87 | + window.scroll( window.scrollX - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), window.scrollY ); |
| 88 | + } |
| 89 | + // Rirght |
| 90 | + else if( mouseX > window.innerWidth - rangeX ) { |
| 91 | + window.scroll( window.scrollX + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), window.scrollY ); |
| 92 | + } |
| 93 | + } |
| 94 | + |
| 95 | + function position( element ) { |
| 96 | + var p = { x: 0, y: 0 }; |
| 97 | + |
| 98 | + do { |
| 99 | + p.x += element.offsetLeft; |
| 100 | + p.y += element.offsetTop; |
| 101 | + } |
| 102 | + while ( element = element.offsetParent ) |
| 103 | + |
| 104 | + return p; |
| 105 | + } |
| 106 | + |
| 107 | + return { |
| 108 | + in: function( options ) { |
| 109 | + if( level !== 1 ) { |
| 110 | + zoom.out(); |
| 111 | + } |
| 112 | + else { |
| 113 | + options.x = options.x || 0; |
| 114 | + options.y = options.y || 0; |
| 115 | + |
| 116 | + // If an element is set, that takes precedence |
| 117 | + if( !!options.element ) { |
| 118 | + var padding = 20; |
| 119 | + |
| 120 | + options.width = options.element.getBoundingClientRect().width + ( padding * 2 ); |
| 121 | + options.height = options.element.getBoundingClientRect().height + ( padding * 2 ); |
| 122 | + options.x = options.element.getBoundingClientRect().left - padding; |
| 123 | + options.y = options.element.getBoundingClientRect().top - padding; |
| 124 | + } |
| 125 | + |
| 126 | + // If width/height values are set, calculate scale from those |
| 127 | + if( options.width !== undefined && options.height !== undefined ) { |
| 128 | + options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 ); |
| 129 | + } |
| 130 | + |
| 131 | + if( options.scale > 1 ) { |
| 132 | + options.x *= options.scale; |
| 133 | + options.y *= options.scale; |
| 134 | + |
| 135 | + prefix( 'TransformOrigin', window.scrollX + 'px ' + window.scrollY + 'px' ); |
| 136 | + prefix( 'Transform', 'translate('+ -options.x +'px, '+ -options.y +'px) scale('+ options.scale +')' ); |
| 137 | + |
| 138 | + level = options.scale; |
| 139 | + |
| 140 | + panEngageTimeout = setTimeout( function() { |
| 141 | + panUpdateInterval = setInterval( pan, 1000 / 60 ); |
| 142 | + }, 800 ); |
| 143 | + } |
| 144 | + } |
| 145 | + }, |
| 146 | + |
| 147 | + out: function() { |
| 148 | + clearTimeout( panEngageTimeout ); |
| 149 | + clearInterval( panUpdateInterval ); |
| 150 | + |
| 151 | + prefix( 'TransformOrigin', window.scrollX + 'px ' + window.scrollY + 'px' ); |
| 152 | + prefix( 'Transform', '' ); |
| 153 | + |
| 154 | + level = 1; |
| 155 | + }, |
| 156 | + |
| 157 | + zoomLevel: function() { |
| 158 | + return level; |
| 159 | + } |
| 160 | + } |
| 161 | + |
| 162 | +})(); |
| 163 | + |
0 commit comments