Tpt has uploaded a new change for review.
https://gerrit.wikimedia.org/r/92319
Change subject: Reimplement toogleLayout feature
......................................................................
Reimplement toogleLayout feature
Change-Id: I43139216217fc791b71878fb34a1a45e66fd3955
---
M modules/jquery/jquery.prpZoom.js
M modules/page/ext.proofreadpage.page.css
M modules/page/ext.proofreadpage.page.edit.js
3 files changed, 101 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ProofreadPage
refs/changes/19/92319/1
diff --git a/modules/jquery/jquery.prpZoom.js b/modules/jquery/jquery.prpZoom.js
index a596734..c01b71a 100644
--- a/modules/jquery/jquery.prpZoom.js
+++ b/modules/jquery/jquery.prpZoom.js
@@ -24,8 +24,8 @@
$.widget( 'mw.prpZoom', {
options: {
- zoomStep: 3,
- moveStep: 3,
+ zoomStep: 4,
+ moveStep: 4,
animationDuration: 200
},
@@ -144,8 +144,22 @@
},
destroy: function() {
- this.reset();
- this.draggable( 'destroy' );
+ this.element
+ .draggable( 'destroy' )
+ .css( {
+ position: 'static',
+ top: '',
+ left: '',
+ width: '',
+ height: ''
+ } )
+ .parent().css( {
+ position: 'static',
+ overflow: '',
+ height: '',
+ cursor: ''
+ } );
+
$.Widget.prototype.destroy.call( this );
}
} );
diff --git a/modules/page/ext.proofreadpage.page.css
b/modules/page/ext.proofreadpage.page.css
index a3795da..8512e62 100644
--- a/modules/page/ext.proofreadpage.page.css
+++ b/modules/page/ext.proofreadpage.page.css
@@ -1,6 +1,7 @@
.prp-page-container {
width: 100%;
}
+
.prp-page-content {
float: left;
width: 50%;
diff --git a/modules/page/ext.proofreadpage.page.edit.js
b/modules/page/ext.proofreadpage.page.edit.js
index 1bfeea1..57b5fdf 100644
--- a/modules/page/ext.proofreadpage.page.edit.js
+++ b/modules/page/ext.proofreadpage.page.edit.js
@@ -2,14 +2,71 @@
'use strict';
/**
+ * Is the layout vertical (ie is the scan image on top of the edit area)
+ * @type {boolean}
+ */
+ var isLayoutVertical = false;
+
+ /**
+ * The scan image
+ * @type {jQuery}
+ */
+ var $zoomImage;
+
+ /**
* Show or hide header and footer areas
*
- * @param string speed of the toogle. May be 'fast', 'slow' or undefined
+ * @param speed string speed of the toogle. May be 'fast', 'slow' or
undefined
*/
function toggleHeaders( speed ) {
$( '.prp-page-edit-header' ).toggle( speed );
$( '.prp-page-edit-body label' ).toggle( speed );
$( '.prp-page-edit-footer' ).toggle( speed );
+ }
+
+ /**
+ * Put the scan image on top or on the left of the edit area
+ */
+ function toogleLayout() {
+ if( $zoomImage.data( 'prpZoom' ) ) {
+ $zoomImage.prpZoom( 'destroy' );
+ }
+
+ var $container = $zoomImage.parent();
+
+ if( isLayoutVertical ) {
+ $container.appendTo( '#editform .prp-page-container' );
+
+ $container.css( {
+ width: ''
+ } );
+ $( '#editform .prp-page-content').css( {
+ width: ''
+ } );
+
+ $zoomImage.prpZoom();
+
+ isLayoutVertical = false;
+
+ } else {
+ $container.insertBefore( '#editform' );
+
+ $container.css( {
+ width: '100%',
+ overflow: 'auto',
+ height: $( window ).height() / 3 + 'px'
+ } );
+ $( '#editform .prp-page-content' ).css( {
+ width: '100%'
+ } );
+
+ $zoomImage.prpZoom();
+ $container.css( {
+ height: $( window ).height() / 3 + 'px'
+ } );
+
+ isLayoutVertical = true;
+ }
}
/**
@@ -19,7 +76,9 @@
if( !mw.user.options.get( 'proofreadpage-showheaders' ) ) {
toggleHeaders();
}
- //TODO: scan on top of the edit system
+ if( mw.user.options.get( 'proofreadpage-horizontal-layout' ) ) {
+ toogleLayout();
+ }
}
/**
@@ -48,7 +107,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'zoomIn' );
+
$zoomImage.prpZoom( 'zoomIn' );
}
}
},
@@ -59,7 +118,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'zoomOut' );
+
$zoomImage.prpZoom( 'zoomOut' );
}
}
},
@@ -70,7 +129,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'reset' );
+
$zoomImage.prpZoom( 'reset' );
}
}
},
@@ -81,7 +140,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'moveUp' );
+
$zoomImage.prpZoom( 'moveUp' );
}
}
},
@@ -92,7 +151,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'moveDown' );
+
$zoomImage.prpZoom( 'moveDown' );
}
}
},
@@ -103,7 +162,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'moveLeft' );
+
$zoomImage.prpZoom( 'moveLeft' );
}
}
},
@@ -114,7 +173,7 @@
action: {
type: 'callback',
execute: function() {
- $( '#editform
.prp-page-image img' ).prpZoom( 'moveRight' );
+
$zoomImage.prpZoom( 'moveRight' );
}
}
}
@@ -141,7 +200,7 @@
action: {
type: 'callback',
execute: function() {
- //TODO
+ toogleLayout();
}
}
}
@@ -200,27 +259,34 @@
}
/**
+ * Init global variables of the script
+ */
+ function initEnvironment() {
+ if( $zoomImage === undefined ) {
+ $zoomImage = $( '#editform .prp-page-image img' );
+ }
+ }
+
+ /**
* Init the zoom system
*/
function initZoom() {
- var $image = $( '#editform .prp-page-image img' );
- if( $image.length === 0 ) {
- return;
- }
mw.loader.using( 'jquery.prpZoom', function() {
- $image.prpZoom();
+ $zoomImage.prpZoom();
} );
}
$( document ).ready( function() {
- setupPreferences();
+ initEnvironment();
setupWikiEditor();
+ setupPreferences();
setupPageQuality();
addButtons();
} );
//zoom should be init after the page is rendered
$( window ).load( function() {
+ initEnvironment();
initZoom();
} );
--
To view, visit https://gerrit.wikimedia.org/r/92319
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I43139216217fc791b71878fb34a1a45e66fd3955
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
