‰PNG  FM / js
/data/sites/web/unidosporsectorespt/htdocs/public/www/js/
/data/sites/web/unidosporsectorespt/htdocs/public/www/js
NameSizeModeActions
tinymce/-0755rm
turn/-0755rm
easyzoom.js78480644editdlrm
jquery.min.1.7.js940220644editdlrm
jquery.mThumbnailScroller.js648590644editdlrm
jquery.panzoom.js369150644editdlrm
magazine.js77860644editdlrm
modernizr.2.5.3.min.js85480644editdlrm
mousewheel.js13960644editdlrm
slider.js265110644editdlrm
turn.js740590644editdlrm
Edit: /data/sites/web/unidosporsectorespt/htdocs/public/www/js/jquery.panzoom.js (36915B)
/** * @license jquery.panzoom.js v2.0.5 * Updated: Thu Jul 03 2014 * Add pan and zoom functionality to any element * Copyright (c) 2014 timmy willison * Released under the MIT license * https://github.com/timmywil/jquery.panzoom/blob/master/MIT-License.txt */ (function(global, factory) { // AMD if (typeof define === 'function' && define.amd) { define([ 'jquery' ], function(jQuery) { return factory(global, jQuery); }); // CommonJS/Browserify } else if (typeof exports === 'object') { factory(global, require('jquery')); // Global } else { factory(global, global.jQuery); } }(typeof window !== 'undefined' ? window : this, function(window, $) { 'use strict'; // Common properties to lift for touch or pointer events var list = 'over out down up move enter leave cancel'.split(' '); var hook = $.extend({}, $.event.mouseHooks); var events = {}; // Support pointer events in IE11+ if available if ( window.PointerEvent ) { $.each(list, function( i, name ) { // Add event name to events property and add fixHook $.event.fixHooks[ (events[name] = 'pointer' + name) ] = hook; }); } else { var mouseProps = hook.props; // Add touch properties for the touch hook hook.props = mouseProps.concat(['touches', 'changedTouches', 'targetTouches', 'altKey', 'ctrlKey', 'metaKey', 'shiftKey']); /** * Support: Android * Android sets pageX/Y to 0 for any touch event * Attach first touch's pageX/pageY and clientX/clientY if not set correctly */ hook.filter = function( event, originalEvent ) { var touch; var i = mouseProps.length; if ( !originalEvent.pageX && originalEvent.touches && (touch = originalEvent.touches[0]) ) { // Copy over all mouse properties while(i--) { event[mouseProps[i]] = touch[mouseProps[i]]; } } return event; }; $.each(list, function( i, name ) { // No equivalent touch events for over and out if (i < 2) { events[ name ] = 'mouse' + name; } else { var touch = 'touch' + (name === 'down' ? 'start' : name === 'up' ? 'end' : name); // Add fixHook $.event.fixHooks[ touch ] = hook; // Add event names to events property events[ name ] = touch + ' mouse' + name; } }); } $.pointertouch = events; var document = window.document; var datakey = '__pz__'; var slice = Array.prototype.slice; var pointerEvents = !!window.PointerEvent; var supportsInputEvent = (function() { var input = document.createElement('input'); input.setAttribute('oninput', 'return'); return typeof input.oninput === 'function'; })(); // Regex var rupper = /([A-Z])/g; var rsvg = /^https:[\w\.\/]+svg$/; var rinline = /^inline/; var floating = '(\\-?[\\d\\.e]+)'; var commaSpace = '\\,?\\s*'; var rmatrix = new RegExp( '^matrix\\(' + floating + commaSpace + floating + commaSpace + floating + commaSpace + floating + commaSpace + floating + commaSpace + floating + '\\)$' ); /** * Utility for determing transform matrix equality * Checks backwards to test translation first * @param {Array} first * @param {Array} second */ function matrixEquals(first, second) { var i = first.length; while(--i) { if (+first[i] !== +second[i]) { return false; } } return true; } /** * Creates the options object for reset functions * @param {Boolean|Object} opts See reset methods * @returns {Object} Returns the newly-created options object */ function createResetOptions(opts) { var options = { range: true, animate: true }; if (typeof opts === 'boolean') { options.animate = opts; } else { $.extend(options, opts); } return options; } /** * Represent a transformation matrix with a 3x3 matrix for calculations * Matrix functions adapted from Louis Remi's jQuery.transform (https://github.com/louisremi/jquery.transform.js) * @param {Array|Number} a An array of six values representing a 2d transformation matrix */ function Matrix(a, b, c, d, e, f, g, h, i) { if ($.type(a) === 'array') { this.elements = [ +a[0], +a[2], +a[4], +a[1], +a[3], +a[5], 0, 0, 1 ]; } else { this.elements = [ a, b, c, d, e, f, g || 0, h || 0, i || 1 ]; } } Matrix.prototype = { /** * Multiply a 3x3 matrix by a similar matrix or a vector * @param {Matrix|Vector} matrix * @return {Matrix|Vector} Returns a vector if multiplying by a vector */ x: function(matrix) { var isVector = matrix instanceof Vector; var a = this.elements, b = matrix.elements; if (isVector && b.length === 3) { // b is actually a vector return new Vector( a[0] * b[0] + a[1] * b[1] + a[2] * b[2], a[3] * b[0] + a[4] * b[1] + a[5] * b[2], a[6] * b[0] + a[7] * b[1] + a[8] * b[2] ); } else if (b.length === a.length) { // b is a 3x3 matrix return new Matrix( a[0] * b[0] + a[1] * b[3] + a[2] * b[6], a[0] * b[1] + a[1] * b[4] + a[2] * b[7], a[0] * b[2] + a[1] * b[5] + a[2] * b[8], a[3] * b[0] + a[4] * b[3] + a[5] * b[6], a[3] * b[1] + a[4] * b[4] + a[5] * b[7], a[3] * b[2] + a[4] * b[5] + a[5] * b[8], a[6] * b[0] + a[7] * b[3] + a[8] * b[6], a[6] * b[1] + a[7] * b[4] + a[8] * b[7], a[6] * b[2] + a[7] * b[5] + a[8] * b[8] ); } return false; // fail }, /** * Generates an inverse of the current matrix * @returns {Matrix} */ inverse: function() { var d = 1 / this.determinant(), a = this.elements; return new Matrix( d * ( a[8] * a[4] - a[7] * a[5]), d * (-(a[8] * a[1] - a[7] * a[2])), d * ( a[5] * a[1] - a[4] * a[2]), d * (-(a[8] * a[3] - a[6] * a[5])), d * ( a[8] * a[0] - a[6] * a[2]), d * (-(a[5] * a[0] - a[3] * a[2])), d * ( a[7] * a[3] - a[6] * a[4]), d * (-(a[7] * a[0] - a[6] * a[1])), d * ( a[4] * a[0] - a[3] * a[1]) ); }, /** * Calculates the determinant of the current matrix * @returns {Number} */ determinant: function() { var a = this.elements; return a[0] * (a[8] * a[4] - a[7] * a[5]) - a[3] * (a[8] * a[1] - a[7] * a[2]) + a[6] * (a[5] * a[1] - a[4] * a[2]); } }; /** * Create a vector containing three values */ function Vector(x, y, z) { this.elements = [ x, y, z ]; } /** * Get the element at zero-indexed index i * @param {Number} i */ Vector.prototype.e = Matrix.prototype.e = function(i) { return this.elements[ i ]; }; /** * Create a Panzoom object for a given element * @constructor * @param {Element} elem - Element to use pan and zoom * @param {Object} [options] - An object literal containing options to override default options * (See Panzoom.defaults for ones not listed below) * @param {jQuery} [options.$zoomIn] - zoom in buttons/links collection (you can also bind these yourself * e.g. $button.on('click', function(e) { e.preventDefault(); $elem.panzoom('zoomIn'); });) * @param {jQuery} [options.$zoomOut] - zoom out buttons/links collection on which to bind zoomOut * @param {jQuery} [options.$zoomRange] - zoom in/out with this range control * @param {jQuery} [options.$reset] - Reset buttons/links collection on which to bind the reset method * @param {Function} [options.on[Start|Change|Zoom|Pan|End|Reset] - Optional callbacks for panzoom events */ function Panzoom(elem, options) { // Allow instantiation without `new` keyword if (!(this instanceof Panzoom)) { return new Panzoom(elem, options); } // Sanity checks if (elem.nodeType !== 1) { $.error('Panzoom called on non-Element node'); } if (!$.contains(document, elem)) { $.error('Panzoom element must be attached to the document'); } // Don't remake var d = $.data(elem, datakey); if (d) { return d; } // Extend default with given object literal // Each instance gets its own options this.options = options = $.extend({}, Panzoom.defaults, options); this.elem = elem; var $elem = this.$elem = $(elem); this.$set = options.$set && options.$set.length ? options.$set : $elem; this.$doc = $(elem.ownerDocument || document); this.$parent = $elem.parent(); // This is SVG if the namespace is SVG // However, while elements are SVG, we want to treat those like other elements this.isSVG = rsvg.test(elem.namespaceURI) && elem.nodeName.toLowerCase() !== 'svg'; this.panning = false; // Save the original transform value // Save the prefixed transform style key // Set the starting transform this._buildTransform(); // Build the appropriately-prefixed transform style property name // De-camelcase this._transform = !this.isSVG && $.cssProps.transform.replace(rupper, '-$1').toLowerCase(); // Build the transition value this._buildTransition(); // Build containment dimensions this.resetDimensions(); // Add zoom and reset buttons to `this` var $empty = $(); var self = this; $.each([ '$zoomIn', '$zoomOut', '$zoomRange', '$reset' ], function(i, name) { self[ name ] = options[ name ] || $empty; }); this.enable(); // Save the instance $.data(elem, datakey, this); } // Attach regex for possible use (immutable) Panzoom.rmatrix = rmatrix; // Container for event names Panzoom.events = $.pointertouch; Panzoom.defaults = { // Should always be non-empty // Used to bind jQuery events without collisions // A guid is not added here as different instantiations/versions of panzoom // on the same element is not supported, so don't do it. eventNamespace: '.panzoom', // Whether or not to transition the scale transition: true, // Default cursor style for the element cursor: 'move', // There may be some use cases for zooming without panning or vice versa disablePan: false, disableZoom: false, // The increment at which to zoom // adds/subtracts to the scale each time zoomIn/Out is called increment: 0.3, minScale: 0.4, maxScale: 5, // The default step for the range input // Precendence: default < HTML attribute < option setting rangeStep: 0.05, // Animation duration (ms) duration: 200, // CSS easing used for scale transition easing: 'ease-in-out', // Indicate that the element should be contained within it's parent when panning // Note: this does not affect zooming outside of the parent // Set this value to 'invert' to only allow panning outside of the parent element (basically the opposite of the normal use of contain) // 'invert' is useful for a large panzoom element where you don't want to show anything behind it contain: false }; Panzoom.prototype = { constructor: Panzoom, /** * @returns {Panzoom} Returns the instance */ instance: function() { return this; }, /** * Enable or re-enable the panzoom instance */ enable: function() { // Unbind first this._initStyle(); this._bind(); this.disabled = false; }, /** * Disable panzoom */ disable: function() { this.disabled = true; this._resetStyle(); this._unbind(); }, /** * @returns {Boolean} Returns whether the current panzoom instance is disabled */ isDisabled: function() { return this.disabled; }, /** * Destroy the panzoom instance */ destroy: function() { this.disable(); $.removeData(this.elem, datakey); }, /** * Builds the restricing dimensions from the containment element * Also used with focal points * Call this method whenever the dimensions of the element or parent are changed */ resetDimensions: function() { // Reset container properties var $parent = this.$parent; this.container = { width: $parent.innerWidth(), height: $parent.innerHeight() }; var po = $parent.offset(); var elem = this.elem; var $elem = this.$elem; var dims; if (this.isSVG) { dims = elem.getBoundingClientRect(); dims = { left: dims.left - po.left, top: dims.top - po.top, width: dims.width, height: dims.height, margin: { left: 0, top: 0 } }; } else { dims = { left: $.css(elem, 'left', true) || 0, top: $.css(elem, 'top', true) || 0, width: $elem.innerWidth(), height: $elem.innerHeight(), margin: { top: $.css(elem, 'marginTop', true) || 0, left: $.css(elem, 'marginLeft', true) || 0 } }; } dims.widthBorder = ($.css(elem, 'borderLeftWidth', true) + $.css(elem, 'borderRightWidth', true)) || 0; dims.heightBorder = ($.css(elem, 'borderTopWidth', true) + $.css(elem, 'borderBottomWidth', true)) || 0; this.dimensions = dims; }, /** * Return the element to it's original transform matrix * @param {Boolean} [options] If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to setMatrix. * @param {Boolean} [options.silent] Silence the reset event */ reset: function(options) { options = createResetOptions(options); // Reset the transform to its original value var matrix = this.setMatrix(this._origTransform, options); if (!options.silent) { this._trigger('reset', matrix); } }, /** * Only resets zoom level * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to zoom() */ resetZoom: function(options) { options = createResetOptions(options); var origMatrix = this.getMatrix(this._origTransform); options.dValue = origMatrix[ 3 ]; this.zoom(origMatrix[0], options); }, /** * Only reset panning * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to pan() */ resetPan: function(options) { var origMatrix = this.getMatrix(this._origTransform); this.pan(origMatrix[4], origMatrix[5], createResetOptions(options)); }, /** * Sets a transform on the $set * @param {String} transform */ setTransform: function(transform) { var method = this.isSVG ? 'attr' : 'style'; var $set = this.$set; var i = $set.length; while(i--) { $[method]($set[i], 'transform', transform); } }, /** * Retrieving the transform is different for SVG * (unless a style transform is already present) * Uses the $set collection for retrieving the transform * @param {String} [transform] Pass in an transform value (like 'scale(1.1)') * to have it formatted into matrix format for use by Panzoom * @returns {String} Returns the current transform value of the element */ getTransform: function(transform) { var $set = this.$set; var transformElem = $set[0]; if (transform) { this.setTransform(transform); } else { // Retrieve the transform transform = $[this.isSVG ? 'attr' : 'style'](transformElem, 'transform'); } // Convert any transforms set by the user to matrix format // by setting to computed if (transform !== 'none' && !rmatrix.test(transform)) { // Get computed and set for next time this.setTransform(transform = $.css(transformElem, 'transform')); } return transform || 'none'; }, /** * Retrieve the current transform matrix for $elem (or turn a transform into it's array values) * @param {String} [transform] matrix-formatted transform value * @returns {Array} Returns the current transform matrix split up into it's parts, or a default matrix */ getMatrix: function(transform) { var matrix = rmatrix.exec(transform || this.getTransform()); if (matrix) { matrix.shift(); } return matrix || [ 1, 0, 0, 1, 0, 0 ]; }, /** * Given a matrix object, quickly set the current matrix of the element * @param {Array|String} matrix * @param {Boolean} [animate] Whether to animate the transform change * @param {Object} [options] * @param {Boolean|String} [options.animate] Whether to animate the transform change, or 'skip' indicating that it is unnecessary to set * @param {Boolean} [options.contain] Override the global contain option * @param {Boolean} [options.range] If true, $zoomRange's value will be updated. * @param {Boolean} [options.silent] If true, the change event will not be triggered * @returns {Array} Returns the newly-set matrix */ setMatrix: function(matrix, options) { if (this.disabled) { return; } if (!options) { options = {}; } // Convert to array if (typeof matrix === 'string') { matrix = this.getMatrix(matrix); } var dims, container, marginW, marginH, diffW, diffH, left, top, width, height; var scale = +matrix[0]; var $parent = this.$parent; var contain = typeof options.contain !== 'undefined' ? options.contain : this.options.contain; // Apply containment if (contain) { dims = this._checkDims(); container = this.container; width = dims.width + dims.widthBorder; height = dims.height + dims.heightBorder; // Use absolute value of scale here as negative scale doesn't mean even smaller marginW = ((width * Math.abs(scale)) - container.width) / 2; marginH = ((height * Math.abs(scale)) - container.height) / 2; left = dims.left + dims.margin.left; top = dims.top + dims.margin.top; if (contain === 'invert') { diffW = width > container.width ? width - container.width : 0; diffH = height > container.height ? height - container.height : 0; marginW += (container.width - width) / 2; marginH += (container.height - height) / 2; matrix[4] = Math.max(Math.min(matrix[4], marginW - left), -marginW - left - diffW); matrix[5] = Math.max(Math.min(matrix[5], marginH - top), -marginH - top - diffH + dims.heightBorder); } else { // marginW += dims.widthBorder / 2; marginH += dims.heightBorder / 2; diffW = container.width > width ? container.width - width : 0; diffH = container.height > height ? container.height - height : 0; // If the element is not naturally centered, assume full margin right if ($parent.css('textAlign') !== 'center' || !rinline.test($.css(this.elem, 'display'))) { marginW = marginH = 0; } else { diffW = 0; } matrix[4] = Math.min( Math.max(matrix[4], marginW - left), -marginW - left + diffW ); matrix[5] = Math.min( Math.max(matrix[5], marginH - top), -marginH - top + diffH ); } } if (options.animate !== 'skip') { // Set transition this.transition(!options.animate); } // Update range if (options.range) { this.$zoomRange.val(scale); } // Set the matrix on this.$set this.setTransform('matrix(' + matrix.join(',') + ')'); if (!options.silent) { this._trigger('change', matrix); } return matrix; }, /** * @returns {Boolean} Returns whether the panzoom element is currently being dragged */ isPanning: function() { return this.panning; }, /** * Apply the current transition to the element, if allowed * @param {Boolean} [off] Indicates that the transition should be turned off */ transition: function(off) { if (!this._transition) { return; } var transition = off || !this.options.transition ? 'none' : this._transition; var $set = this.$set; var i = $set.length; while(i--) { // Avoid reflows when zooming if ($.style($set[i], 'transition') !== transition) { $.style($set[i], 'transition', transition); } } }, /** * Pan the element to the specified translation X and Y * Note: this is not the same as setting jQuery#offset() or jQuery#position() * @param {Number} x * @param {Number} y * @param {Object} [options] These options are passed along to setMatrix * @param {Array} [options.matrix] The matrix being manipulated (if already known so it doesn't have to be retrieved again) * @param {Boolean} [options.silent] Silence the pan event. Note that this will also silence the setMatrix change event. * @param {Boolean} [options.relative] Make the x and y values relative to the existing matrix */ pan: function(x, y, options) { if (this.options.disablePan) { return; } if (!options) { options = {}; } var matrix = options.matrix; if (!matrix) { matrix = this.getMatrix(); } // Cast existing matrix values to numbers if (options.relative) { x += +matrix[4]; y += +matrix[5]; } matrix[4] = x; matrix[5] = y; this.setMatrix(matrix, options); if (!options.silent) { this._trigger('pan', matrix[4], matrix[5]); } }, /** * Zoom in/out the element using the scale properties of a transform matrix * @param {Number|Boolean} [scale] The scale to which to zoom or a boolean indicating to transition a zoom out * @param {Object} [opts] All global options can be overwritten by this options object. For example, override the default increment. * @param {Boolean} [opts.noSetRange] Specify that the method should not set the $zoomRange value (as is the case when $zoomRange is calling zoom on change) * @param {jQuery.Event|Object} [opts.focal] A focal point on the panzoom element on which to zoom. * If an object, set the clientX and clientY properties to the position relative to the parent * @param {Boolean} [opts.animate] Whether to animate the zoom (defaults to true if scale is not a number, false otherwise) * @param {Boolean} [opts.silent] Silence the zoom event * @param {Array} [opts.matrix] Optionally pass the current matrix so it doesn't need to be retrieved * @param {Number} [opts.dValue] Think of a transform matrix as four values a, b, c, d * where a/d are the horizontal/vertical scale values and b/c are the skew values * (5 and 6 of matrix array are the tx/ty transform values). * Normally, the scale is set to both the a and d values of the matrix. * This option allows you to specify a different d value for the zoom. * For instance, to flip vertically, you could set -1 as the dValue. */ zoom: function(scale, opts) { // Shuffle arguments if (typeof scale === 'object') { opts = scale; scale = null; } else if (!opts) { opts = {}; } var options = $.extend({}, this.options, opts); // Check if disabled if (options.disableZoom) { return; } var animate = false; var matrix = options.matrix || this.getMatrix(); // Calculate zoom based on increment if (typeof scale !== 'number') { scale = +matrix[0] + (options.increment * (scale ? -1 : 1)); animate = true; } // Constrain scale if (scale > options.maxScale) { scale = options.maxScale; } else if (scale < options.minScale) { scale = options.minScale; } // Calculate focal point based on scale var focal = options.focal; if (focal && !options.disablePan) { // Adapted from code by Florian Günther // https://github.com/florianguenther/zui53 var dims = this._checkDims(); var clientX = focal.clientX; var clientY = focal.clientY; // Adjust the focal point for default transform-origin => 50% 50% if (!this.isSVG) { clientX -= (dims.width + dims.widthBorder) / 2; clientY -= (dims.height + dims.heightBorder) / 2; } var clientV = new Vector(clientX, clientY, 1); var surfaceM = new Matrix(matrix); // Supply an offset manually if necessary var o = this.parentOffset || this.$parent.offset(); var offsetM = new Matrix(1, 0, o.left - this.$doc.scrollLeft(), 0, 1, o.top - this.$doc.scrollTop()); var surfaceV = surfaceM.inverse().x(offsetM.inverse().x(clientV)); var scaleBy = scale / matrix[0]; surfaceM = surfaceM.x(new Matrix([ scaleBy, 0, 0, scaleBy, 0, 0 ])); clientV = offsetM.x(surfaceM.x(surfaceV)); matrix[4] = +matrix[4] + (clientX - clientV.e(0)); matrix[5] = +matrix[5] + (clientY - clientV.e(1)); } // Set the scale matrix[0] = scale; matrix[3] = typeof options.dValue === 'number' ? options.dValue : scale; // Calling zoom may still pan the element this.setMatrix(matrix, { animate: typeof options.animate === 'boolean' ? options.animate : animate, // Set the zoomRange value range: !options.noSetRange }); // Trigger zoom event if (!options.silent) { this._trigger('zoom', matrix[0], options); } }, /** * Get/set option on an existing instance * @returns {Array|undefined} If getting, returns an array of all values * on each instance for a given key. If setting, continue chaining by returning undefined. */ option: function(key, value) { var options; if (!key) { // Avoids returning direct reference return $.extend({}, this.options); } if (typeof key === 'string') { if (arguments.length === 1) { return this.options[ key ] !== undefined ? this.options[ key ] : null; } options = {}; options[ key ] = value; } else { options = key; } this._setOptions(options); }, /** * Internally sets options * @param {Object} options - An object literal of options to set */ _setOptions: function(options) { $.each(options, $.proxy(function(key, value) { switch(key) { case 'disablePan': this._resetStyle(); /* falls through */ case '$zoomIn': case '$zoomOut': case '$zoomRange': case '$reset': case 'disableZoom': case 'onStart': case 'onChange': case 'onZoom': case 'onPan': case 'onEnd': case 'onReset': case 'eventNamespace': this._unbind(); } this.options[ key ] = value; switch(key) { case 'disablePan': this._initStyle(); /* falls through */ case '$zoomIn': case '$zoomOut': case '$zoomRange': case '$reset': // Set these on the instance this[ key ] = value; /* falls through */ case 'disableZoom': case 'onStart': case 'onChange': case 'onZoom': case 'onPan': case 'onEnd': case 'onReset': case 'eventNamespace': this._bind(); break; case 'cursor': $.style(this.elem, 'cursor', value); break; case 'minScale': this.$zoomRange.attr('min', value); break; case 'maxScale': this.$zoomRange.attr('max', value); break; case 'rangeStep': this.$zoomRange.attr('step', value); break; case 'startTransform': this._buildTransform(); break; case 'duration': case 'easing': this._buildTransition(); /* falls through */ case 'transition': this.transition(); break; case '$set': if (value instanceof $ && value.length) { this.$set = value; // Reset styles this._initStyle(); this._buildTransform(); } } }, this)); }, /** * Initialize base styles for the element and its parent */ _initStyle: function() { var styles = { // Promote the element to it's own compositor layer 'backface-visibility': 'hidden', // Set to defaults for the namespace 'transform-origin': this.isSVG ? '0 0' : '50% 50%' }; // Set elem styles if (!this.options.disablePan) { styles.cursor = this.options.cursor; } this.$set.css(styles); // Set parent to relative if set to static var $parent = this.$parent; // No need to add styles to the body if ($parent.length && !$.nodeName($parent[0], 'body')) { styles = { overflow: 'hidden' }; if ($parent.css('position') === 'static') { styles.position = 'relative'; } $parent.css(styles); } }, /** * Undo any styles attached in this plugin */ _resetStyle: function() { this.$elem.css({ 'cursor': '', 'transition': '' }); this.$parent.css({ 'overflow': '', 'position': '' }); }, /** * Binds all necessary events */ _bind: function() { var self = this; var options = this.options; var ns = options.eventNamespace; var str_start = pointerEvents ? 'pointerdown' + ns : ('touchstart' + ns + ' mousedown' + ns); var str_click = pointerEvents ? 'pointerup' + ns : ('touchend' + ns + ' click' + ns); var events = {}; var $reset = this.$reset; var $zoomRange = this.$zoomRange; // Bind panzoom events from options $.each([ 'Start', 'Change', 'Zoom', 'Pan', 'End', 'Reset' ], function() { var m = options[ 'on' + this ]; if ($.isFunction(m)) { events[ 'panzoom' + this.toLowerCase() + ns ] = m; } }); // Bind $elem drag and click/touchdown events // Bind touchstart if either panning or zooming is enabled if (!options.disablePan || !options.disableZoom) { events[ str_start ] = function(e) { var touches; if (e.type === 'touchstart' ? // Touch (touches = e.touches) && ((touches.length === 1 && !options.disablePan) || touches.length === 2) : // Mouse/Pointer: Ignore right click !options.disablePan && e.which === 1) { e.preventDefault(); e.stopPropagation(); self._startMove(e, touches); } }; } this.$elem.on(events); // Bind reset if ($reset.length) { $reset.on(str_click, function(e) { e.preventDefault(); self.reset(); }); } // Set default attributes for the range input if ($zoomRange.length) { $zoomRange.attr({ // Only set the range step if explicit or // set the default if there is no attribute present step: options.rangeStep === Panzoom.defaults.rangeStep && $zoomRange.attr('step') || options.rangeStep, min: options.minScale, max: options.maxScale }).prop({ value: this.getMatrix()[0] }); } // No bindings if zooming is disabled if (options.disableZoom) { return; } var $zoomIn = this.$zoomIn; var $zoomOut = this.$zoomOut; // Bind zoom in/out // Don't bind one without the other if ($zoomIn.length && $zoomOut.length) { // preventDefault cancels future mouse events on touch events $zoomIn.on(str_click, function(e) { e.preventDefault(); self.zoom(); }); $zoomOut.on(str_click, function(e) { e.preventDefault(); self.zoom(true); }); } if ($zoomRange.length) { events = {}; // Cannot prevent default action here, just use pointerdown/mousedown events[ (pointerEvents ? 'pointerdown' : 'mousedown') + ns ] = function() { self.transition(true); }; // Zoom on input events if available and change events // See https://github.com/timmywil/jquery.panzoom/issues/90 events[ (supportsInputEvent ? 'input' : 'change') + ns ] = function() { self.zoom(+this.value, { noSetRange: true }); }; $zoomRange.on(events); } }, /** * Unbind all events */ _unbind: function() { this.$elem .add(this.$zoomIn) .add(this.$zoomOut) .add(this.$reset) .off(this.options.eventNamespace); }, /** * Builds the original transform value */ _buildTransform: function() { // Save the original transform // Retrieving this also adds the correct prefixed style name // to jQuery's internal $.cssProps return this._origTransform = this.getTransform(this.options.startTransform); }, /** * Set transition property for later use when zooming * If SVG, create necessary animations elements for translations and scaling */ _buildTransition: function() { if (this._transform) { var options = this.options; this._transition = this._transform + ' ' + options.duration + 'ms ' + options.easing; } }, /** * Checks dimensions to make sure they don't need to be re-calculated */ _checkDims: function() { var dims = this.dimensions; // Rebuild if width or height is still 0 if (!dims.width || !dims.height) { this.resetDimensions(); } return this.dimensions; }, /** * Calculates the distance between two touch points * Remember pythagorean? * @param {Array} touches * @returns {Number} Returns the distance */ _getDistance: function(touches) { var touch1 = touches[0]; var touch2 = touches[1]; return Math.sqrt(Math.pow(Math.abs(touch2.clientX - touch1.clientX), 2) + Math.pow(Math.abs(touch2.clientY - touch1.clientY), 2)); }, /** * Constructs an approximated point in the middle of two touch points * @returns {Object} Returns an object containing pageX and pageY */ _getMiddle: function(touches) { var touch1 = touches[0]; var touch2 = touches[1]; return { clientX: ((touch2.clientX - touch1.clientX) / 2) + touch1.clientX, clientY: ((touch2.clientY - touch1.clientY) / 2) + touch1.clientY }; }, /** * Trigger a panzoom event on our element * The event is passed the Panzoom instance * @param {String|jQuery.Event} event * @param {Mixed} arg1[, arg2, arg3, ...] Arguments to append to the trigger */ _trigger: function (event) { if (typeof event === 'string') { event = 'panzoom' + event; } this.$elem.triggerHandler(event, [this].concat(slice.call(arguments, 1))); }, /** * Starts the pan * This is bound to mouse/touchmove on the element * @param {jQuery.Event} event An event with pageX, pageY, and possibly the touches list * @param {TouchList} [touches] The touches list if present */ _startMove: function(event, touches) { var move, moveEvent, endEvent, startDistance, startScale, startMiddle, startPageX, startPageY; var self = this; var options = this.options; var ns = options.eventNamespace; var matrix = this.getMatrix(); var original = matrix.slice(0); var origPageX = +original[4]; var origPageY = +original[5]; var panOptions = { matrix: matrix, animate: 'skip' }; // Use proper events if (pointerEvents) { moveEvent = 'pointermove'; endEvent = 'pointerup'; } else if (event.type === 'touchstart') { moveEvent = 'touchmove'; endEvent = 'touchend'; } else { moveEvent = 'mousemove'; endEvent = 'mouseup'; } // Add namespace moveEvent += ns; endEvent += ns; // Remove any transitions happening this.transition(true); // Indicate that we are currently panning this.panning = true; // Trigger start event this._trigger('start', event, touches); if (touches && touches.length === 2) { startDistance = this._getDistance(touches); startScale = +matrix[0]; startMiddle = this._getMiddle(touches); move = function(e) { e.preventDefault(); // Calculate move on middle point var middle = self._getMiddle(touches = e.touches); var diff = self._getDistance(touches) - startDistance; // Set zoom self.zoom(diff * (options.increment / 100) + startScale, { focal: middle, matrix: matrix, animate: false }); // Set pan self.pan( +matrix[4] + middle.clientX - startMiddle.clientX, +matrix[5] + middle.clientY - startMiddle.clientY, panOptions ); startMiddle = middle; }; } else { startPageX = event.pageX; startPageY = event.pageY; /** * Mousemove/touchmove function to pan the element * @param {Object} e Event object */ move = function(e) { e.preventDefault(); self.pan( origPageX + e.pageX - startPageX, origPageY + e.pageY - startPageY, panOptions ); }; } // Bind the handlers $(document) .off(ns) .on(moveEvent, move) .on(endEvent, function(e) { e.preventDefault(); // Unbind all document events $(this).off(ns); self.panning = false; // Trigger our end event // Simply set the type to "panzoomend" to pass through all end properties // jQuery's `not` is used here to compare Array equality e.type = 'panzoomend'; self._trigger(e, matrix, !matrixEquals(matrix, original)); }); } }; // Add Panzoom as a static property $.Panzoom = Panzoom; /** * Extend jQuery * @param {Object|String} options - The name of a method to call on the prototype * or an object literal of options * @returns {jQuery|Mixed} jQuery instance for regular chaining or the return value(s) of a panzoom method call */ $.fn.panzoom = function(options) { var instance, args, m, ret; // Call methods widget-style if (typeof options === 'string') { ret = []; args = slice.call(arguments, 1); this.each(function() { instance = $.data(this, datakey); if (!instance) { ret.push(undefined); // Ignore methods beginning with `_` } else if (options.charAt(0) !== '_' && typeof (m = instance[ options ]) === 'function' && // If nothing is returned, do not add to return values (m = m.apply(instance, args)) !== undefined) { ret.push(m); } }); // Return an array of values for the jQuery instances // Or the value itself if there is only one // Or keep chaining return ret.length ? (ret.length === 1 ? ret[0] : ret) : this; } return this.each(function() { new Panzoom(this, options); }); }; return Panzoom; }));