Last active
October 24, 2019 07:49
-
-
Save dresdain/9d1ffe9db99debd99e90a1a63b92470c to your computer and use it in GitHub Desktop.
Revisions
-
dresdain revised this gist
Oct 24, 2019 . No changes.There are no files selected for viewing
-
Aug 30, 2019 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,467 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Old panzoom</title> <link rel="stylesheet" href="https://stackedit.io/style.css" /> </head> <body class="stackedit"> <div class="stackedit__html"><h1 id="jquery-panzoom">jQuery Panzoom</h1> <p><a href="https://travis-ci.org/timmywil/jquery.panzoom"><img src="https://travis-ci.org/timmywil/jquery.panzoom.png?branch=master" alt="Build Status"></a></p> <p>Panzoom is a progressive plugin to create panning and zooming functionality for an element.<br> Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be <em>anything</em>: an image, a video, an iframe, a canvas, text, WHATEVER.</p> <p>jquery.panzoom.min.js (12.5kb/4.6kb gzip), included in this repo, is compressed with <a href="https://github.com/mishoo/UglifyJS">uglifyjs</a>.</p> <p>For common support questions, see <a href="https://github.com/timmywil/jquery.panzoom#faq">the FAQ</a> at the bottom.</p> <h2 id="dependencies">Dependencies</h2> <p>jquery.panzoom prefers jQuery 3.0.0+, but works with jQuery 1.9.0+ and jQuery 2.0.0+. jquery.panzoom supports IE9+.</p> <h2 id="mobile-support">Mobile support</h2> <p>Panzoom includes support for touch gestures and even supports <strong>pinch gestures</strong> for zooming.<br> It is perfectly suited for both mobile and desktop browsers.<br> You’ll be amazed at how well this performs on your mobile device.</p> <p>iOS and Android are supported.</p> <p><strong>Pointer (IE 10+)</strong>, <strong>touch</strong>, and <strong>mouse</strong> events are supported.</p> <h2 id="svg-support">SVG support</h2> <p>Panzoom supports panning and zooming SVG elements directly, in browsers that support SVG.</p> <p>In IE9-11 and Edge 13-14+, CSS animations/transitions do not work on SVG elements, at least for the transform style. They do work in other browsers.</p> <p>One could implement transitions manually in those browsers by overriding the <code>setTransform()</code> method and integrating a tweening library for javascript animations (such as <a href="http://www.createjs.com/#!/TweenJS">tween.js</a>).</p> <p><strong>Compatibility note:</strong> <em>There is a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=530985">known issue with Firefox</a> and using the <code>focal</code> option. Firefox does not correctly maintain the dimensions of SVG parent elements, which throws off offsets. If using the <code>focal</code> option with SVG, the workaround is to set the correct offset on the Panzoom instance manually using <code>Panzoom.prototype.parentOffset</code> (<a href="http://jsfiddle.net/timmywil/Vu8nA/">example</a>).</em></p> <h2 id="loading-panzoom">Loading Panzoom</h2> <p>Panzoom can be included with your scripts at the end of the body,<br> but Panzoom supports AMD for javascript module love.</p> <p>With script tags:</p> <pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/js/plugins/jquery.panzoom.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>With AMD loader in an anonymous module:</p> <pre class=" language-js"><code class="prism language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">"jquery"</span><span class="token punctuation">,</span> <span class="token string">"plugins/jquery.panzoom"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> $ <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".panzoom-elements"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <h2 id="initialization">Initialization</h2> <pre class=" language-js"><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".panzoom-elements"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Pass options</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"a.panzoom-elements"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token punctuation">{</span> minScale<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> $zoomRange<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input[type='range']"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <h2 id="options">Options</h2> <p>All options can be overridden by passing an object literal like any other plugin,<br><br> or with the <code>"option"</code> method.<br></p> <p>Check out the demos of the <a href="http://timmywil.github.io/jquery.panzoom/demo/#contain">contain</a> and <a href="http://timmywil.github.io/jquery.panzoom/demo/#inverted-contain">inverted containment</a> options.</p> <pre class=" language-js"><code class="prism language-js">Panzoom<span class="token punctuation">.</span>defaults <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// Should always be non-empty</span> <span class="token comment">// Used to bind jQuery events without collisions</span> <span class="token comment">// A guid is not added here as different instantiations/versions of Panzoom</span> <span class="token comment">// on the same element is not supported.</span> eventNamespace<span class="token punctuation">:</span> <span class="token string">".panzoom"</span><span class="token punctuation">,</span> <span class="token comment">// Whether or not to transition the scale</span> transition<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Default cursor style for the element</span> cursor<span class="token punctuation">:</span> <span class="token string">"move"</span><span class="token punctuation">,</span> <span class="token comment">// There may be some use cases for zooming without panning or vice versa</span> <span class="token comment">// NOTE: disablePan also disables focal point zooming</span> disablePan<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> disableZoom<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Pan only on the X or Y axes</span> disableXAxis<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> disableYAxis<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Set whether you'd like to pan on left (1), middle (2), or right click (3)</span> which<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// The increment at which to zoom</span> <span class="token comment">// Should be a number greater than 0</span> increment<span class="token punctuation">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span> <span class="token comment">// When no scale is passed, this option tells</span> <span class="token comment">// the `zoom` method to increment</span> <span class="token comment">// the scale *linearly* based on the increment option.</span> <span class="token comment">// This often ends up looking like very little happened at larger zoom levels.</span> <span class="token comment">// The default is to multiply/divide the scale based on the increment.</span> linearZoom<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Pan only when the scale is greater than minScale</span> panOnlyWhenZoomed<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// min and max zoom scales</span> minScale<span class="token punctuation">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span> maxScale<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// The default step for the range input</span> <span class="token comment">// Precendence: default < HTML attribute < option setting</span> rangeStep<span class="token punctuation">:</span> <span class="token number">0.05</span><span class="token punctuation">,</span> <span class="token comment">// Animation duration (ms)</span> duration<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token comment">// CSS easing used for scale transition</span> easing<span class="token punctuation">:</span> <span class="token string">"ease-in-out"</span><span class="token punctuation">,</span> <span class="token comment">// Indicate that the element should be contained within its parent when panning</span> <span class="token comment">// Note: this does not affect zooming outside of the parent</span> <span class="token comment">// Set this value to 'invert' to only allow panning outside of the parent element (the opposite of the normal use of contain)</span> <span class="token comment">// 'invert' is useful for a large Panzoom element where you don't want to show anything behind it</span> contain<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Transform value to which to always reset (string)</span> <span class="token comment">// Defaults to the original transform on the element when Panzoom is initialized</span> startTransform<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span> <span class="token comment">// This optional jQuery collection can be set to specify all of the elements</span> <span class="token comment">// on which the transform should always be set.</span> <span class="token comment">// It should have at least one element.</span> <span class="token comment">// This is mainly used for delegating the pan and zoom transform settings</span> <span class="token comment">// to another element or multiple elements.</span> <span class="token comment">// The default is the Panzoom element wrapped in jQuery</span> <span class="token comment">// See the [demo](http://timmywil.github.io/jquery.panzoom/demo/#set) for an example.</span> <span class="token comment">// Note: only one Panzoom element will still handle events for a Panzoom instance.</span> <span class="token comment">// Use multiple Panzoom instances for that use case.</span> $<span class="token keyword">set</span><span class="token punctuation">:</span> $elem<span class="token punctuation">,</span> <span class="token comment">// Zoom buttons/links collection (you can also bind these yourself - e.g. `$button.on("click", function( e ) { e.preventDefault(); $elem.panzoom("zoom"); });` )</span> $zoomIn<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> $zoomOut<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Range input on which to bind zooming functionality</span> $zoomRange<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Reset buttons/links collection on which to bind the reset method</span> $reset<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// For convenience, these options will be bound to Panzoom events</span> <span class="token comment">// These can all be bound normally on the Panzoom element</span> <span class="token comment">// e.g. `$elem.on("panzoomend", function( e, panzoom ) { console.log( panzoom.getMatrix() ); });`</span> onStart<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span> onChange<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span> onZoom<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span> onPan<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span> onEnd<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span> onReset<span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <h2 id="methods">Methods</h2> <p>Methods can be called in the same way as a widget from the jQuery UI widget factory. Pass a method name when calling <code>panzoom()</code>. Strings are interpreted as method names.</p> <h3 id="option"><code>option()</code></h3> <pre class=" language-js"><code class="prism language-js"><span class="token comment">// One at a time</span> <span class="token comment">// Sets the scale increment option</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">,</span> <span class="token string">"increment"</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Several options at once</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> increment<span class="token punctuation">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span> minScale<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span> maxScale<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> duration<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span> $reset<span class="token punctuation">:</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"a.reset-panzoom, button.reset-panzoom"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Any option can be changed. See the defaults above for a list.</p> <h3 id="reset-options-"><code>reset( [options] )</code></h3> <p><strong>Arguments</strong></p> <ol> <li><code>options</code> <em>{Object|Boolean}</em>: If a boolean is passed, animate the reset (default: true). If an options object is passed, pass that along to setMatrix.</li> <li><code>options.silent</code> <em>{Boolean}</em>: Silence the reset event (as well as the change event as the same options are passed to setMatrix)</li> </ol> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"reset"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"reset"</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"reset"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> animate<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> contain<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Reset the transform matrix to its original value. All panning and zooming is reset.</p> <h3 id="resetzoom-options-"><code>resetZoom( [options] )</code></h3> <p><strong>Arguments</strong></p> <ol> <li><code>options</code> <em>{Object|Boolean}</em>: If a boolean is passed, animate the reset (default: true). If an options object is passed, pass that along to zoom.</li> </ol> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetZoom"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetZoom"</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetZoom"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> animate<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> silent<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Reset the scale to its original value (resets both scale values in the matrix to their original values).</p> <h3 id="resetpan-options-"><code>resetPan( [options] )</code></h3> <p><strong>Arguments</strong></p> <ol> <li><code>options</code> <em>{Object|Boolean}</em>: If a boolean is passed, animate the reset (default: true). If an options object is passed, pass that along to pan.</li> </ol> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetPan"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetPan"</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetPan"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> animate<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> silent<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Reset the pan to its original value.</p> <h3 id="pan-x-y-options-"><code>pan( x, y[, options] )</code></h3> <p><strong>Arguments</strong></p> <ol> <li> <p><code>x</code> <em>{Number}</em>: The translation X value to set</p> </li> <li> <p><code>y</code> <em>{Number}</em>: The translation Y value to set</p> </li> <li> <p><code>options</code> <em>{Object}</em>: These options are also passed along to <a href="#setmatrix-matrix-options-">setMatrix</a>.</p> </li> <li> <p><code>options.matrix</code> <em>{Array}</em>: The matrix being manipulated (If this is not passed, the matrix will be calculated on every call to pan, which could be a performance bottleneck if this is bound to a move event)</p> </li> <li> <p><code>options.silent</code> <em>{Boolean}</em>: Silence the pan event. Note that this will also silence the setMatrix change event.</p> </li> <li> <p><code>options.relative</code> <em>{Boolean}</em>: Make the x and y values relative to the existing matrix.<br><br> e.g. <code>$elem.panzoom("pan", 10, -10, { relative: true });</code><br><br> <code>// => Moves the element 10 pixels right and 10 pixels up from its current position</code></p> </li> </ol> <h3 id="zoom-scale-opts-"><code>zoom( [scale[, opts]] )</code></h3> <p><strong>Arguments</strong></p> <ol> <li> <p><code>scale</code> <em>{Number|Boolean}</em>: The exact scale to which to zoom or a boolean indicating to transition a zoom out</p> </li> <li> <p><code>opts</code> <em>{Object}</em>: All global options can be overwritten by this options object. For example, override the default increment.</p> </li> <li> <p><code>opts.noSetRange</code> <em>{Boolean}</em>: Specify that the method should not set the $zoomRange value (as is the case when $zoomRange is calling zoom on change)</p> </li> <li> <p><code>opts.animate</code> <em>{Boolean}</em>: Whether to animate the zoom (defaults to true if scale is not a number, false otherwise)</p> </li> <li> <p><code>opts.focal</code> <em>{jQuery.Event|Object}</em>: Specify a focal point under which to freeze the zooming element.<br><br> Should either be a jQuery event or an object containing clientX/clientY to specify the point’s position relative to the parent.<br><br> For an example of focal point zooming, use the mousewheel or pinch to zoom on the <a href="http://timmywil.github.io/jquery.panzoom/demo/#focal">demo</a>.</p> </li> <li> <p><code>opts.silent</code> <em>{Boolean}</em>: Silence the zoom event</p> </li> <li> <p><code>opts.dValue</code> <em>{Number}</em>: Think of a transform matrix as four values a, b, c, d<br><br> where a/d are the horizontal/vertical scale values and b/c are the skew values<br><br> (5 and 6 of matrix array are the tx/ty transform values).<br><br> Normally, the scale is set to both the a and d values of the matrix.<br><br> This option allows you to specify a different d value for the zoom.<br><br> For instance, to flip vertically, you could set -1 as the dValue.</p> </li> </ol> <pre class=" language-js"><code class="prism language-js"><span class="token comment">// Transition a zoom in based on the scale increment, min and max values</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"zoom"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Transition a zoom out</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"zoom"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Set the scale immediately without a transition</span> <span class="token comment">// and silence the zoom event</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"zoom"</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> silent<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Transition a zoom in based on the scale increment, min and max values, and animation duration and easing. This method handles both zooming in and zooming out.<br><br> If the method is passed a number, <code>zoom()</code> will immediately set that scale without transitioning. This is mostly useful for the range input and pinch gestures.<br><br> If the method is passed a boolean, true will indicate to perform a zoom-out based on the increment specified in options. If false (or omitted), a zoom-in will be performed.</p> <h3 id="resetdimensions"><code>resetDimensions()</code></h3> <pre class=" language-js"><code class="prism language-js"><span class="token comment">// Indicate to Panzoom that the dimensions of the parent and/or the element have changed.</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"resetDimensions"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Panzoom caches the dimensions of the Panzoom element and its parent to cater to quick move events.<br> Whenever these dimensions change, it is necessary to call <code>resetDimensions()</code>.<br> However, as of version 3.1.0, this is no longer required.</p> <h3 id="disable"><code>disable()</code></h3> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"disable"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Quickly disable Panzoom on the element.</p> <h3 id="enable"><code>enable()</code></h3> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"enable"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Re-enable Panzoom on the element (re-binds all events).</p> <h3 id="isdisabled"><code>isDisabled()</code></h3> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"isDisabled"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => true</span> </code></pre> <p>Returns a boolean indicating whether the current Panzoom instance is disabled.</p> <h3 id="ispanning"><code>isPanning()</code></h3> <p>Returns a boolean indicating whether the element is currently panning.</p> <h3 id="destroy"><code>destroy()</code></h3> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"destroy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <h3 id="instance"><code>instance()</code></h3> <pre class=" language-js"><code class="prism language-js"><span class="token keyword">var</span> panzoom <span class="token operator">=</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"instance"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Retrieves the Panzoom instance(s) from the set. If there are multiple elements in the set, you will get an array of instances. If there is only one, you will get that instance of Panzoom.</p> <p>Unbinds all events and removes all data, including the Panzoom instance on the element.</p> <h2 id="internal">Internal</h2> <p>These methods are <em>basically</em> private, but could be useful under certain circumstances.</p> <h3 id="gettransform"><code>getTransform()</code></h3> <p>Returns the string transform value used by Panzoom for the element.</p> <p><strong>Note</strong>: The transform attribute is used for SVG. Otherwise, the appropriately prefixed transform style property is used.</p> <h3 id="settransform"><code>setTransform()</code></h3> <p>Set a string transform value on the Panzoom element (or the $set if using the $set option).</p> <p><strong>Note</strong>: The transform attribute is used for SVG. Otherwise, the appropriately prefixed transform style property is used.</p> <h3 id="getmatrix-transform-"><code>getMatrix( [transform] )</code></h3> <p>Retrieve an array of values for the specified transform or for the current transform on the Panzoom element.</p> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"getMatrix"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => [1, 0, 0, 1, 0, 0]</span> </code></pre> <h3 id="setmatrix-matrix-options-"><code>setMatrix( matrix[, options] )</code></h3> <p><strong>Arguments</strong></p> <ol> <li> <p><code>matrix</code> <em>{Array}</em>: Matrix to set</p> </li> <li> <p><code>options</code> <em>{Object}</em></p> </li> <li> <p><code>options.animate</code> <em>{Boolean}</em>: If true, a transition will be set to animate the transform change</p> </li> <li> <p><code>options.contain</code> <em>{Boolean}</em>: Override the global contain option</p> </li> <li> <p><code>options.range</code> <em>{Boolean}</em>: If true, $zoomRange’s value will be updated.</p> </li> <li> <p><code>options.silent</code> <em>{Boolean}</em>: If true, the change event will not be triggered</p> </li> </ol> <pre class=" language-js"><code class="prism language-js"><span class="token comment">// Flip the element upside down</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"setMatrix"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Sets the transform matrix of the Panzoom element. It accepts the matrix as an array.</p> <p><em>Note</em>: <code>setMatrix()</code> does not chain. It returns the newly-set matrix as an <em>Array</em>.</p> <h3 id="transition-off-"><code>transition( [off] )</code></h3> <pre class=" language-js"><code class="prism language-js">$elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"transition"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Turn off transition</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"transition"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Note: this is different than...</span> $elem<span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">,</span> <span class="token string">"transition"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ... which sets the `transition` option, indicating whether transitioning is allowed at all.</span> <span class="token comment">// If the transition option is false, `$elem.panzoom("transition")` will only ever set transition to "none".</span> </code></pre> <p>Applies the transition to the element. If <code>off</code> is true, it removes the transition.</p> <h2 id="static-properties">Static properties</h2> <p>Static properties are there for convenience, but are <strong>subject to change in future versions</strong>.</p> <h3 id="panzoom.rmatrix"><code>Panzoom.rmatrix</code></h3> <p>Type: <em>RegExp</em></p> <p>This is a copy of the regex used by Panzoom to parse tranformation matrices.</p> <h2 id="events">Events</h2> <h3 id="panzoomstart"><code>"panzoomstart"</code></h3> <p><strong>Arguments Received</strong></p> <ol> <li><code>e</code> <em>(jQuery.Event)</em>: jQuery event object</li> <li><code>panzoom</code> <em>(Panzoom)</em>: The Panzoom instance</li> <li><code>event</code> <em>(jQuery.Event)</em>: The starting mousedown or touchstart event</li> <li><code>touches</code> <em>(TouchList)</em>: The touches list if present</li> </ol> <p>Fired when the user starts a move or pinch zoom gesture on mobile.</p> <h3 id="panzoomchange"><code>"panzoomchange"</code></h3> <p><strong>Arguments Received</strong></p> <ol> <li><code>e</code> <em>(jQuery.Event)</em>: jQuery event object</li> <li><code>panzoom</code> <em>(Panzoom)</em>: The Panzoom instance</li> <li><code>transform</code> <em>(Array)</em>: The transform matrix set during the change as an array of values</li> </ol> <p>Fired whenever the matrix is changed by <code>setMatrix()</code> (whether internally or externally).</p> <p><em>Try not to put to much in this event as it could slow down dragging.</em></p> <p><strong>Note</strong>: This event can be silenced when setMatrix is called directly.</p> <h3 id="panzoomzoom"><code>"panzoomzoom"</code></h3> <p><strong>Arguments Received</strong></p> <ol> <li><code>e</code> <em>(jQuery.Event)</em>: jQuery event object</li> <li><code>panzoom</code> <em>(Panzoom)</em>: The Panzoom instance</li> <li><code>scale</code> <em>(Number)</em>: The zoom scale set by the plugin</li> <li><code>opts</code> <em>(Object)</em>: Same options passed to zoom</li> </ol> <p>Fired whenever the zoom is changed by this plugin.</p> <p><strong>Note</strong>: This event can be silenced when zoom is called directly.</p> <h3 id="panzoompan"><code>"panzoompan"</code></h3> <p><strong>Arguments Received</strong></p> <ol> <li><code>e</code> <em>(jQuery.Event)</em>: jQuery event object</li> <li><code>panzoom</code> <em>(Panzoom)</em>: The Panzoom instance</li> <li><code>x</code> <em>(Number)</em>: The resulting translateX value set on the matrix (accounting for the relative option)</li> <li><code>y</code> <em>(Number)</em>: The resulting translateY value set on the matrix</li> </ol> <p>Fired whenever the pan is changed by this plugin.</p> <p><em>Try not to put to much in this event as it could slow down dragging.</em></p> <h3 id="panzoomend"><code>"panzoomend"</code></h3> <p><strong>Arguments Received</strong></p> <ol> <li><code>e</code> <em>(jQuery.Event)</em>: jQuery event object</li> <li><code>panzoom</code> <em>(Panzoom)</em>: The Panzoom instance</li> <li><code>matrix</code> <em>(Array)</em>: The final transform matrix</li> <li><code>changed</code> <em>(Boolean)</em>: Whether the matrix changed during the Panzoom event</li> </ol> <p>This event is fired when the user finishes a move or finishes a pinch zoom gesture on mobile. All properties from the original click or touch event that ended the Panzoom transaction are passed through, including the event target (<code>e.target</code>).</p> <p><em>Note</em>: When binding to this event, you can tell the difference between a click (or tap) and a move by checking <code>changed</code>:</p> <pre class=" language-js"><code class="prism language-js">$panzoom<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'panzoomend'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> panzoom<span class="token punctuation">,</span> matrix<span class="token punctuation">,</span> changed<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>changed<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// deal with drags or touch moves</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// deal with clicks or taps</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <h3 id="panzoomreset"><code>"panzoomreset"</code></h3> <p><strong>Arguments Received</strong></p> <ol> <li><code>e</code> <em>(jQuery.Event)</em>: jQuery event object</li> <li><code>panzoom</code> <em>(Panzoom)</em>: The Panzoom instance</li> <li><code>matrix</code> <em>(Array)</em>: The original matrix</li> </ol> <p>Fired whenever reset is called.</p> <h2 id="testing">Testing</h2> <p>Tests can be run by opening <a href="http://timmywil.github.io/jquery.panzoom/test/">test/index.html</a> in a browser or by using <a href="http://gruntjs.com/"><code>grunt</code></a> and <a href="http://phantomjs.org/">phantomjs</a>.</p> <p>Tests are written with <a href="https://mochajs.org/">mocha</a> and <a href="http://chaijs.com/api/bdd/">chai for bdd-style assertions</a>.</p> <p>See <a href="https://github.com/timmywil/jquery.panzoom/blob/master/CONTRIBUTING.md">CONTRIBUTING.md</a> for more info.</p> <h2 id="faq">FAQ</h2> <p>1. How do I make it so that I never see the background behind the Panzoom element? <a href="http://codepen.io/timmywil/pen/qjvBF">example</a></p> <ul> <li>This can be done with the <code>contain</code> option. Set <code>contain</code> to <code>"invert"</code> or <code>"automatic"</code> and make sure the Panzoom element is the same size or larger than its parent.</li> </ul> <pre class=" language-js"><code class="prism language-js"> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.panzoom-elements'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token punctuation">{</span> contain<span class="token punctuation">:</span> <span class="token string">'invert'</span><span class="token punctuation">,</span> minScale<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>2. How do I make links work if they’re within a Panzoom element? <a href="http://codepen.io/timmywil/pen/bFiqy">example</a></p> <ul> <li>Event propagation is stopped for <code>mousedown</code> and <code>touchstart</code> events in order to allow for Panzoom elements within Panzoom elements. To fix the links, bind an event handler that prevents the event from reaching the Panzoom handler:</li> </ul> <pre class=" language-js"><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.panzoom a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mousedown touchstart'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">stopImmediatePropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>3. What is <code>transform-origin</code> and why is it added to the panzoom element?</p> <ul> <li>The <code>transform-origin</code> is the origin from which transforms are applied. Panzoom ensures the defaults are set to what it expects to calculate focal points and containment.</li> <li>HTML elements default to ‘50% 50%’.</li> <li>SVG elements default to ‘0 0’.</li> </ul> <p>4. How do I prevent zooming beyond the image’s original size?</p> <ul> <li>The <code>maxScale</code> option can be set using the image’s <code>naturalWidth</code> divided by the <code>clientWidth</code>:</li> </ul> <pre class=" language-js"><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#large-image'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">panzoom</span><span class="token punctuation">(</span><span class="token punctuation">{</span> maxScale<span class="token punctuation">:</span> elem<span class="token punctuation">.</span>naturalWidth <span class="token operator">/</span> elem<span class="token punctuation">.</span>clientWidth <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>5. I am using Panzoom with an <code><object></code> tag. It zooms but does not pan. <a href="http://codepen.io/timmywil/pen/qNpykA">example</a></p> <p>Object elements can eat up events, making it so they never reach Panzoom. To fix this, disable pointer events on the object tag and call Panzoom using a wrapper.</p> </div> </body> </html>