aboutsummaryrefslogtreecommitdiffstats
path: root/doc/phpdoc/js/jquery.panzoom.js
diff options
context:
space:
mode:
Diffstat (limited to 'doc/phpdoc/js/jquery.panzoom.js')
-rw-r--r--doc/phpdoc/js/jquery.panzoom.js467
1 files changed, 467 insertions, 0 deletions
diff --git a/doc/phpdoc/js/jquery.panzoom.js b/doc/phpdoc/js/jquery.panzoom.js
new file mode 100644
index 0000000..33569c5
--- /dev/null
+++ b/doc/phpdoc/js/jquery.panzoom.js
@@ -0,0 +1,467 @@
+/*
+ * jQuery PanZoom Plugin
+ * Pan and zoom an image within a parent div.
+ *
+ * version: 0.9.0
+ * @requires jQuery v1.4.2 or later (earlier probably work, but untested so far)
+ *
+ * Copyright (c) 2011 Ben Lumley
+ * Examples and documentation at: https://github.com/benlumley/jQuery-PanZoom
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+*/
+
+(function( $ ){
+
+ $.fn.panZoom = function(method) {
+
+ if ( methods[method] ) {
+ return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+ } else if ( typeof method === 'object' || ! method ) {
+ return methods.init.apply( this, arguments );
+ } else {
+ $.error( 'Method ' + method + ' does not exist' );
+ }
+
+ };
+
+ $.fn.panZoom.defaults = {
+ zoomIn : false,
+ zoomOut : false,
+ panUp : false,
+ panDown : false,
+ panLeft : false,
+ panRight : false,
+ fit : false,
+ out_x1 : false,
+ out_y1 : false,
+ out_x2 : false,
+ out_y2 : false,
+ min_width : 20,
+ min_height : 20,
+ zoom_step : 3,
+ pan_step : 3,
+ debug : false,
+ directedit : false,
+ aspect : true,
+ factor : 1,
+ animate : true,
+ animate_duration : 200,
+ animate_easing : 'linear',
+ double_click : true,
+ mousewheel : true,
+ mousewheel_delta : 1,
+ draggable : true,
+ clickandhold : true
+ };
+
+ var settings = {}
+
+ var methods = {
+ 'init': function (options) {
+ $.extend(settings, $.fn.panZoom.defaults, options);
+ setupCSS.apply(this);
+ setupData.apply(this);
+ setupBindings.apply(this);
+ methods.readPosition.apply(this);
+ },
+
+ 'destroy': function () {
+ $(window).unbind('.panZoom');
+ this.removeData('panZoom');
+ },
+
+ 'loadImage': function () {
+ var data = this.data('panZoom');
+ loadTargetDimensions.apply(this);
+ methods.updatePosition.apply(this);
+ if (data.last_image != null && data.last_image != this.attr('src')) {
+ methods.fit.apply(this);
+ }
+ data.last_image = this.attr('src');
+ data.loaded = true;
+ },
+
+ 'readPosition': function () {
+ var data = this.data('panZoom');
+ if (settings.out_x1) { data.position.x1 = settings.out_x1.val()*settings.factor }
+ if (settings.out_y1) { data.position.y1 = settings.out_y1.val()*settings.factor }
+ if (settings.out_x2) { data.position.x2 = settings.out_x2.val()*settings.factor }
+ if (settings.out_y2) { data.position.y2 = settings.out_y2.val()*settings.factor }
+ methods.updatePosition.apply(this);
+ },
+
+ 'updatePosition': function() {
+ validatePosition.apply(this);
+ writePosition.apply(this);
+ applyPosition.apply(this);
+ },
+
+ 'fit': function () {
+ var data = this.data('panZoom');
+ data.position.x1 = 0;
+ data.position.y1 = 0;
+ data.position.x2 = data.viewport_dimensions.x;
+ data.position.y2 = data.viewport_dimensions.y;
+ methods.updatePosition.apply(this);
+ },
+
+ 'zoomIn': function (steps) {
+ var data = this.data('panZoom');
+ if (typeof(steps) == 'undefined') {
+ var steps = getStepDimensions.apply(this);
+ }
+ console.debug(data.position);
+ console.debug(data.viewport_dimensions);
+ data.position.x1 = data.position.x1*1 - steps.zoom.x;
+ data.position.x2 = data.position.x2*1 + steps.zoom.x;
+ data.position.y1 = data.position.y1*1 - steps.zoom.y;
+ data.position.y2 = data.position.y2*1 + steps.zoom.y;
+ methods.updatePosition.apply(this);
+ },
+
+ 'zoomOut': function (steps) {
+ var data = this.data('panZoom');
+ if (typeof(steps) == 'undefined') {
+ var steps = getStepDimensions.apply(this);
+ }
+ data.position.x1 = data.position.x1*1 + steps.zoom.x;
+ data.position.x2 = data.position.x2*1 - steps.zoom.x;
+ data.position.y1 = data.position.y1*1 + steps.zoom.y;
+ data.position.y2 = data.position.y2*1 - steps.zoom.y;
+ methods.updatePosition.apply(this);
+ },
+
+ 'panUp': function () {
+ var data = this.data('panZoom');
+ var steps = getStepDimensions.apply(this);
+ data.position.y1 -= steps.pan.y;
+ data.position.y2 -= steps.pan.y;
+ methods.updatePosition.apply(this);
+ },
+
+ 'panDown': function () {
+ var data = this.data('panZoom');
+ var steps = getStepDimensions.apply(this);
+ data.position.y1 = data.position.y1*1 + steps.pan.y;
+ data.position.y2 = data.position.y2*1 + steps.pan.y;
+ methods.updatePosition.apply(this);
+ },
+
+ 'panLeft': function () {
+ var data = this.data('panZoom');
+ var steps = getStepDimensions.apply(this);
+ data.position.x1 -= steps.pan.x;
+ data.position.x2 -= steps.pan.x;
+ methods.updatePosition.apply(this);
+ },
+
+ 'panRight': function () {
+ var data = this.data('panZoom');
+ var steps = getStepDimensions.apply(this);
+ data.position.x1 = data.position.x1*1 + steps.pan.x;
+ data.position.x2 = data.position.x2*1 + steps.pan.x;
+ methods.updatePosition.apply(this);
+ },
+
+ 'mouseWheel': function (delta) {
+ // first calculate how much to zoom in/out
+ var steps = getStepDimensions.apply(this);
+ steps.zoom.x = steps.zoom.x * (Math.abs(delta) / settings.mousewheel_delta);
+ steps.zoom.y = steps.zoom.y * (Math.abs(delta) / settings.mousewheel_delta);
+
+ // then do it
+ if (delta > 0) {
+ methods.zoomIn.apply(this, [steps]);
+ } else if (delta < 0) {
+ methods.zoomOut.apply(this, [steps]);
+ }
+ },
+
+ 'dragComplete': function() {
+ var data = this.data('panZoom');
+ data.position.x1 = this.position().left;
+ data.position.y1 = this.position().top;
+ data.position.x2 = this.position().left*1 + this.width();
+ data.position.y2 = this.position().top*1 + this.height();
+ methods.updatePosition.apply(this);
+ },
+
+ 'mouseDown': function (action) {
+ methods[action].apply(this);
+
+ if (settings.clickandhold) {
+ var data = this.data('panZoom');
+ methods.mouseUp.apply(this);
+ data.mousedown_interval = window.setInterval(function (that, action) {
+ that.panZoom(action);
+ }, settings.animate_duration, this, action);
+ }
+ },
+
+ 'mouseUp': function() {
+ var data = this.data('panZoom');
+ window.clearInterval(data.mousedown_interval);
+ }
+
+ }
+
+ function setupBindings() {
+
+ eventData = { target: this }
+
+ // bind up controls
+ if (settings.zoomIn) {
+ settings.zoomIn.bind('mousedown.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseDown', 'zoomIn');
+ }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseUp');
+ });
+ }
+
+ if (settings.zoomOut) {
+ settings.zoomOut.bind('mousedown.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseDown', 'zoomOut');
+ }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseUp');
+ });
+ }
+
+ if (settings.panUp) {
+ settings.panUp.bind('mousedown.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseDown', 'panUp');
+ }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseUp');
+ });
+ }
+
+ if (settings.panDown) {
+ settings.panDown.bind('mousedown.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseDown', 'panDown');
+ }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseUp');
+ });
+ }
+
+ if (settings.panLeft) {
+ settings.panLeft.bind('mousedown.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseDown', 'panLeft');
+ }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseUp');
+ });
+ }
+
+ if (settings.panRight) {
+ settings.panRight.bind('mousedown.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseDown', 'panRight');
+ }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) {
+ event.preventDefault(); event.data.target.panZoom('mouseUp');
+ });
+ }
+
+ if (settings.fit) { settings.fit.bind('click.panZoom', eventData, function(event) { event.preventDefault(); event.data.target.panZoom('fit'); } ); }
+
+ // double click
+ if (settings.double_click) {
+ this.bind('dblclick.panZoom', eventData, function(event, delta) { event.data.target.panZoom('zoomIn') } );
+ }
+
+ // mousewheel
+ if (settings.mousewheel && typeof(this.mousewheel) == 'function') {
+ this.parent().mousewheel(function(event, delta) { event.preventDefault(); $(this).find('img').panZoom('mouseWheel', delta) } );
+ } else if (settings.mousewheel) {
+ alert('Mousewheel requires mousewheel from jQuery tools - please include jQuery tools or disable mousewheel to remove this warning.')
+ }
+
+ // direct form input
+ if (settings.directedit) {
+ $(settings.out_x1).add(settings.out_y1).add(settings.out_x2).add(settings.out_y2).bind('change.panZoom blur.panZoom', eventData, function(event) { event.data.target.panZoom('readPosition') } );
+ }
+
+ if (settings.draggable && typeof(this.draggable) == 'function') {
+ this.draggable({
+ stop: function () { $(this).panZoom('dragComplete'); }
+ });
+ } else if (settings.draggable) {
+ alert('Draggable requires jQuery UI - please include jQuery UI or disable draggable to remove this warning.')
+ }
+
+ // image load
+ $(this).bind('load.panZoom', eventData, function (event) { event.data.target.panZoom('loadImage') })
+
+ }
+
+ function setupData() {
+ this.data('panZoom', {
+ target_element: this,
+ target_dimensions: { x: null, y: null },
+ viewport_element: this.parent(),
+ viewport_dimensions: { x: this.parent().width(), y: this.parent().height() },
+ position: { x1: null, y1: null, x2: null, y2: null },
+ last_image: null,
+ loaded: false,
+ mousewheel_delta: 0,
+ mousedown_interval: false
+ });
+ if (settings.debug) {
+ console.log(this.data('panZoom'));
+ }
+ }
+
+ function setupCSS() {
+ if (this.parent().css('position') == 'static') {
+ this.parent().css('position', 'relative');
+ }
+ this.css({
+ 'position': 'absolute',
+ 'top': 0,
+ 'left': 0
+ });
+ if (settings.draggable) {
+ this.css({
+ 'cursor': 'move'
+ });
+ }
+ }
+
+ function validatePosition() {
+ var data = this.data('panZoom');
+ // if dimensions are too small...
+ if ( data.position.x2 - data.position.x1 < settings.min_width/settings.factor || data.position.y2 - data.position.y1 < settings.min_height/settings.factor ) {
+ // and second co-ords are zero (IE: no dims set), fit image
+ if (data.position.x2 == 0 || data.position.y2 == 0) {
+ methods.fit.apply(this);
+ }
+ // otherwise, backout a bit
+ else {
+ if (data.position.x2 - data.position.x1 < settings.min_width/settings.factor) {
+ data.position.x2 = data.position.x1*1+settings.min_width/settings.factor;
+ }
+ if (data.position.y2 - data.position.y1 < settings.min_height/settings.factor) {
+ data.position.y2 = data.position.y1*1+settings.min_height/settings.factor;
+ }
+ }
+ }
+
+ if (settings.aspect) {
+ target = data.target_dimensions.ratio;
+ current = getCurrentAspectRatio.apply(this)
+ if (current > target) {
+ new_width = getHeight.apply(this) * target;
+ diff = getWidth.apply(this) - new_width;
+ data.position.x1 = data.position.x1*1 + (diff/2);
+ data.position.x2 = data.position.x2*1 - (diff/2);
+ } else if (current < target) {
+ new_height = getWidth.apply(this) / target;
+ diff = getHeight.apply(this) - new_height;
+ data.position.y1 = data.position.y1*1 + (diff/2);
+ data.position.y2 = data.position.y2*1 - (diff/2);
+ }
+ }
+
+
+ }
+
+ function applyPosition() {
+ var data = this.data('panZoom');
+
+ width = getWidth.apply(this);
+ height = getHeight.apply(this);
+ left_offset = getLeftOffset.apply(this);
+ top_offset = getTopOffset.apply(this);
+
+ properties = {
+ 'top': Math.round(top_offset),
+ 'left': Math.round(left_offset),
+ 'width': Math.round(width),
+ 'height': Math.round(height)
+ }
+
+ if (data.loaded && settings.animate) {
+ applyAnimate.apply(this, [ properties ]);
+ } else {
+ applyCSS.apply(this, [ properties ]);
+ }
+
+ if (settings.debug) {
+ console.log('--');
+ console.log('width:' + width);
+ console.log('height:' + height);
+ console.log('left:' + left_offset);
+ console.log('top:' + top_offset);
+ }
+ }
+
+ function applyCSS() {
+ this.css( properties );
+ }
+
+ function applyAnimate() {
+ this.stop().animate( properties , settings.animate_duration, settings.animate_easing);
+ }
+
+ function getWidth() {
+ var data = this.data('panZoom');
+ width = (data.position.x2 - data.position.x1);
+ return width;
+ }
+
+ function getLeftOffset() {
+ var data = this.data('panZoom');
+ return data.position.x1;
+ }
+
+ function getHeight() {
+ var data = this.data('panZoom');
+ height = (data.position.y2 - data.position.y1);
+ return height;
+ }
+
+ function getTopOffset() {
+ var data = this.data('panZoom');
+ top_offset = data.position.y1;
+ return top_offset;
+ }
+
+ function getCurrentAspectRatio() {
+ return (getWidth.apply(this) / getHeight.apply(this));
+ }
+
+ function writePosition() {
+ var data = this.data('panZoom');
+ if (settings.out_x1) { settings.out_x1.val(Math.round(data.position.x1 / settings.factor)) }
+ if (settings.out_y1) { settings.out_y1.val(Math.round(data.position.y1 / settings.factor)) }
+ if (settings.out_x2) { settings.out_x2.val(Math.round(data.position.x2 / settings.factor)) }
+ if (settings.out_y2) { settings.out_y2.val(Math.round(data.position.y2 / settings.factor)) }
+ }
+
+ function getStepDimensions() {
+ var data = this.data('panZoom');
+ ret = {
+ zoom: {
+ x: (settings.zoom_step/100 * data.viewport_dimensions.x),
+ y: (settings.zoom_step/100 * data.viewport_dimensions.y)
+ },
+ pan: {
+ x: (settings.pan_step/100 * data.viewport_dimensions.x),
+ y: (settings.pan_step/100 * data.viewport_dimensions.y)
+ }
+ }
+ return ret;
+ }
+
+ function loadTargetDimensions() {
+ var data = this.data('panZoom');
+ var img = document.createElement('img');
+ img.src = this.attr('src');
+ img.id = "jqpz-temp";
+ $('body').append(img);
+ data.target_dimensions.x = $('#jqpz-temp').width();
+ data.target_dimensions.y = $('#jqpz-temp').height();
+ $('#jqpz-temp').remove();
+ data.target_dimensions.ratio = data.target_dimensions.x / data.target_dimensions.y;
+ }
+
+})( jQuery ); \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 14:02:37 +0000