Tpt has uploaded a new change for review.
https://gerrit.wikimedia.org/r/90710
Change subject: Replace jquery.panZoom by a lighter zoom widget
......................................................................
Replace jquery.panZoom by a lighter zoom widget
Change-Id: Ief9cf4bdab04a2f5c44510615dfd6e7481a65f06
---
M ProofreadPage.php
D modules/jquery/jquery.panZoom.js
A modules/jquery/jquery.prpZoom.js
M modules/page/ext.proofreadpage.page.css
M modules/page/ext.proofreadpage.page.edit.js
5 files changed, 177 insertions(+), 521 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ProofreadPage
refs/changes/10/90710/1
diff --git a/ProofreadPage.php b/ProofreadPage.php
index cc1c187..7b579b1 100644
--- a/ProofreadPage.php
+++ b/ProofreadPage.php
@@ -103,9 +103,9 @@
'remoteExtPath' => 'ProofreadPage/modules'
);
$wgResourceModules += array(
- 'jquery.panZoom' => $prpResourceTemplate + array(
- 'scripts' => 'jquery/jquery.panZoom.js',
- 'dependencies' => array( 'jquery.ui.draggable' )
+ 'jquery.prpZoom' => $prpResourceTemplate + array(
+ 'scripts' => 'jquery/jquery.prpZoom.js',
+ 'dependencies' => array( 'jquery.ui.widget',
'jquery.ui.draggable' )
),
'ext.proofreadpage.base' => $prpResourceTemplate + array(
'styles' => 'ext.proofreadpage.base.css',
@@ -113,12 +113,12 @@
'ext.proofreadpage.page' => $prpResourceTemplate + array(
'styles' => 'page/ext.proofreadpage.page.css',
'scripts' => 'page/ext.proofreadpage.page.js',
- 'dependencies' => array( 'ext.proofreadpage.base',
'jquery.panZoom' )
+ 'dependencies' => array( 'ext.proofreadpage.base' )
),
'ext.proofreadpage.page.edit' => $prpResourceTemplate + array(
'styles' => 'page/ext.proofreadpage.page.edit.css',
'scripts' => 'page/ext.proofreadpage.page.edit.js',
- 'dependencies' => array( 'ext.proofreadpage.page',
'mediawiki.user' ),
+ 'dependencies' => array( 'ext.proofreadpage.page',
'jquery.prpZoom', 'mediawiki.user' ),
'messages' => array(
'proofreadpage_quality0_category',
'proofreadpage_quality1_category',
diff --git a/modules/jquery/jquery.panZoom.js b/modules/jquery/jquery.panZoom.js
deleted file mode 100644
index 7e64786..0000000
--- a/modules/jquery/jquery.panZoom.js
+++ /dev/null
@@ -1,497 +0,0 @@
-/*
- * jQuery PanZoom Plugin
- * Pan and zoom an image within a parent div.
- *
- * version: 0.10.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( $ ) {
- 'use strict';
-
- $.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,
- destroy : false,
- out_x1 : false,
- out_y1 : false,
- out_x2 : false,
- out_y2 : false,
- min_width : 400,
- min_height : 600,
- 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 () {
- var data = this.data( 'panZoom' );
- data.bound_elements.unbind( '.panZoom' );
- if (settings.draggable && typeof( this.draggable) ==
'function') {
- this.draggable( 'destroy' );
- }
- 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 );
- },
-
- 'fitWidth': function() {
- var data = this.data( 'panZoom' );
- var parent = data.target_element.parent();
- data.position.x1 = 0;
- data.position.y1 = 0;
- data.position.x2 = parent.width();
- data.position.y2 = data.position.y2 *
(data.target_dimensions.y / data.target_dimensions.x);
- methods.updatePosition.apply( this );
-
- parent.height( data.position.y2 );
- },
-
- 'zoomIn': 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 );
- },
-
- '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();
- mrthods.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() {
-
- var eventData = { target: this }
- var data = this.data( 'panZoom' );
-
- // 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' );
- }).bind( 'click.panZoom', function ( event ) {
event.preventDefault() } );
- data.bound_elements =
data.bound_elements.add(settings.zoomIn);
- }
-
- 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' );
- }).bind('click.panZoom', function (event) {
event.preventDefault() } );
- data.bound_elements =
data.bound_elements.add(settings.zoomOut);
- }
-
- 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');
- }).bind('click.panZoom', function (event) {
event.preventDefault() } );
- data.bound_elements =
data.bound_elements.add(settings.panUp);
- }
-
- 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');
- }).bind('click.panZoom', function (event) {
event.preventDefault() } );
- data.bound_elements =
data.bound_elements.add(settings.panDown);
- }
-
- 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');
- }).bind('click.panZoom', function (event) {
event.preventDefault() } );
- data.bound_elements =
data.bound_elements.add(settings.panLeft);
- }
-
- 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');
- }).bind('click.panZoom', function (event) {
event.preventDefault() } );
- data.bound_elements =
data.bound_elements.add(settings.panRight);
- }
-
- if (settings.fit) {
- settings.fit.bind('click.panZoom', eventData,
function(event) { event.preventDefault(); event.data.target.panZoom('fit'); } );
- data.bound_elements =
data.bound_elements.add(settings.fit);
- }
-
- if (settings.destroy) {
- settings.destroy.bind('click.panZoom', eventData,
function(event) { event.preventDefault(); event.data.target.panZoom('destroy');
} );
- data.bound_elements =
data.bound_elements.add(settings.destroy);
- }
-
- // double click
- if (settings.double_click) {
- this.bind('dblclick.panZoom', eventData,
function(event) { event.data.target.panZoom('zoomIn') } );
- // no need to record in bound elements array - gets
done anyway when imageload is bound
- }
-
- // mousewheel
- if (settings.mousewheel && typeof(this.mousewheel) ==
'function') {
- this.parent().bind('mousewheel.panZoom',
function(event, delta) { event.preventDefault();
$(this).find('img').panZoom('mouseWheel', delta) } );
- data.bound_elements =
data.bound_elements.add(this.parent());
- } else if (settings.mousewheel) {
- // alert('Mousewheel requires jquery-mousewheel by Brandon
Aaron (https://github.com/brandonaaron/jquery-mousewheel) - please include it
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') } );
- data.bound_elements =
data.bound_elements.add($(settings.out_x1).add(settings.out_y1).add(settings.out_x2).add(settings.out_y2));
- }
-
- if (settings.draggable && typeof(this.draggable) == 'function')
{
- this.draggable({
- stop: function () {
$(this).panZoom('dragComplete'); }
- });
- } else if (settings.draggable) {
- console.log('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') })
- data.bound_elements = data.bound_elements.add(this);
-
- }
-
- 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,
- bound_elements: $()
- });
- if (settings.debug) {
- console.log(this.data('panZoom'));
- }
- }
-
- function setupCSS() {
- if (this.parent().css('position') == 'static') {
- this.parent().css('position', 'relative');
- }
- 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) {
- var target = data.target_dimensions.ratio;
- var current = getCurrentAspectRatio.apply(this)
- if (current > target) {
- var new_width = getHeight.apply(this) * target;
- var diff = getWidth.apply(this) - new_width;
- data.position.x2 = data.position.x2*1 - diff;
- } else if (current < target) {
- var new_height = getWidth.apply(this) / target;
- diff = getHeight.apply(this) - new_height;
- data.position.y2 = data.position.y2*1 - diff;
- }
- }
-
- }
-
- var properties = {};
-
- function applyPosition() {
- var data = this.data('panZoom');
-
- var width = getWidth.apply(this);
- var height = getHeight.apply(this);
- var left_offset = getLeftOffset.apply(this);
- var 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');
- var 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');
- var height = (data.position.y2 - data.position.y1);
- return height;
- }
-
- function getTopOffset() {
- var data = this.data('panZoom');
- var 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');
- var 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 );
diff --git a/modules/jquery/jquery.prpZoom.js b/modules/jquery/jquery.prpZoom.js
new file mode 100644
index 0000000..a596734
--- /dev/null
+++ b/modules/jquery/jquery.prpZoom.js
@@ -0,0 +1,153 @@
+/*
+ * jQuery PrpZoom Plugin
+ * Image zoom library
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ */
+
+( function( $ ) {
+ 'use strict';
+
+ $.widget( 'mw.prpZoom', {
+
+ options: {
+ zoomStep: 3,
+ moveStep: 3,
+ animationDuration: 200
+ },
+
+ default: {
+ width: 0,
+ height: 0
+ },
+
+ zoomStep: {
+ width: 0,
+ height: 0
+ },
+
+ moveStep: {
+ width: 0,
+ height: 0
+ },
+
+ _getPosition: function() {
+ var position = this.element.position();
+ position.width = this.element.width();
+ position.height = this.element.height();
+ return position;
+ },
+
+ _applyPosition: function( position ) {
+ this.element.animate( {
+ top: Math.round( position.top ),
+ left: Math.round( position.left ),
+ width: Math.round( position.width ),
+ height: Math.round( position.height )
+ }, this.options.animationDuration );
+ },
+
+ _create: function() {
+ //config params
+ this.default = {
+ width: this.element.width(),
+ height: this.element.height()
+ };
+ this.zoomStep = {
+ width: this.options.zoomStep *
this.default.width / 100,
+ height: this.options.zoomStep *
this.default.height / 100
+ };
+ this.moveStep = {
+ width: this.options.moveStep *
this.default.width / 100,
+ height: this.options.moveStep *
this.default.height / 100
+ };
+
+ //setup area
+ this.element.parent().css( {
+ position: 'relative',
+ overflow: 'auto',
+ height: this.default.height,
+ cursor: 'move'
+ } );
+
+ this.element.css( {
+ position: 'absolute'
+ } ).draggable( {
+ scroll: true
+ } );
+
+ this.reset();
+ },
+
+ reset: function() {
+ this._applyPosition( {
+ top: 0,
+ left: 0,
+ width: this.default.width,
+ height: this.default.height
+ } );
+ },
+
+ zoomIn: function() {
+ var position = this._getPosition();
+ position.left -= this.zoomStep.width;
+ position.top -= this.zoomStep.height;
+ position.width += 2 * this.zoomStep.width;
+ position.height += 2 * this.zoomStep.height;
+ this._applyPosition( position );
+ },
+
+ zoomOut: function() {
+ var position = this._getPosition();
+ position.left += this.zoomStep.width;
+ position.top += this.zoomStep.height;
+ position.width -= 2 * this.zoomStep.width;
+ position.height -= 2 * this.zoomStep.height;
+ this._applyPosition( position );
+ },
+
+ moveLeft: function () {
+ var position = this._getPosition();
+ position.left -= this.moveStep.width;
+ this._applyPosition( position );
+ },
+
+ moveRight: function () {
+ var position = this._getPosition();
+ position.left += this.moveStep.width;
+ this._applyPosition( position );
+ },
+
+ moveUp: function () {
+ var position = this._getPosition();
+ position.top -= this.moveStep.height;
+ this._applyPosition( position );
+ },
+
+ moveDown: function () {
+ var position = this._getPosition();
+ position.top += this.moveStep.height;
+ this._applyPosition( position );
+ },
+
+ destroy: function() {
+ this.reset();
+ this.draggable( 'destroy' );
+ $.Widget.prototype.destroy.call( this );
+ }
+ } );
+
+} ) ( jQuery );
\ No newline at end of file
diff --git a/modules/page/ext.proofreadpage.page.css
b/modules/page/ext.proofreadpage.page.css
index 8a7c86d..a3795da 100644
--- a/modules/page/ext.proofreadpage.page.css
+++ b/modules/page/ext.proofreadpage.page.css
@@ -9,8 +9,6 @@
.prp-page-image {
float: right;
width: 49%;
- position: relative;
- overflow: auto;
}
.prp-page-image img {
diff --git a/modules/page/ext.proofreadpage.page.edit.js
b/modules/page/ext.proofreadpage.page.edit.js
index db4d1d6..52d5b73 100644
--- a/modules/page/ext.proofreadpage.page.edit.js
+++ b/modules/page/ext.proofreadpage.page.edit.js
@@ -48,7 +48,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'zoomIn' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'zoomIn' );
}
}
},
@@ -59,7 +59,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'zoomOut' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'zoomOut' );
}
}
},
@@ -70,51 +70,51 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'fitWidth' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'reset' );
}
}
},
- 'pan-up': {
+ 'move-up': {
labelMsg:
'proofreadpage-button-pan-up-label',
type: 'button',
icon: iconPath +
'Button_pan_up.png',
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'panUp' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'moveUp' );
}
}
},
- 'pan-down': {
+ 'move-down': {
labelMsg:
'proofreadpage-button-pan-down-label',
type: 'button',
icon: iconPath +
'Button_pan_down.png',
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'panDown' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'moveDown' );
}
}
},
- 'pan-left': {
+ 'move-left': {
labelMsg:
'proofreadpage-button-pan-left-label',
type: 'button',
icon: iconPath +
'Button_pan_left.png',
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'panLeft' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'moveLeft' );
}
}
},
- 'pan-right': {
+ 'move-right': {
labelMsg:
'proofreadpage-button-pan-right-label',
type: 'button',
icon: iconPath +
'Button_pan_right.png',
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).panZoom( 'panRight' );
+ $( '#editform
.prp-page-image img' ).prpZoom( 'moveRight' );
}
}
}
@@ -189,22 +189,24 @@
* Init the zoom system
*/
function initZoom() {
- var $image = $( '.prp-page-image img' );
+ var $image = $( '#editform .prp-page-image img' );
if( $image.length === 0 ) {
return;
}
- mw.loader.using( 'jquery.panZoom', function() {
- $image.panZoom();
- $image.panZoom( 'loadImage' );
- $image.panZoom( 'fitWidth' );
+ mw.loader.using( 'jquery.prpZoom', function() {
+ $image.prpZoom();
} );
}
$( document ).ready( function() {
setupPreferences();
setupPageQuality();
- initZoom();
addButtons();
} );
+ //zoom should be init after the page is rendered
+ $( window ).load( function() {
+ initZoom();
+ } );
+
} ( mediaWiki, jQuery ) );
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/90710
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ief9cf4bdab04a2f5c44510615dfd6e7481a65f06
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ProofreadPage
Gerrit-Branch: pagePagesRefactoring
Gerrit-Owner: Tpt <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
