Page MenuHomePhabricator
Paste P17059

ProofreadPage possible implementation of VE + WikiEditor zooming
ActivePublic

Authored by Soda on Aug 22 2021, 4:13 PM.
Tags
None
Referenced Files
F34615756: raw-paste-data.txt
Aug 22 2021, 4:13 PM
Subscribers
None
commit 7c03e3267959ce4c16b5fa3fd3b416a8a78bb2cd
Author: Sohom <sohom.datta@learner.manipal.edu>
Date: Sun Aug 22 21:37:55 2021 +0530
Implementation of zooming for VE + WikiEditor with any config
Incredibly bad and weird implementation of VE + WikiEditor
Change-Id: I7e8a4031275f5900569566d13aad96e70e23c52b
diff --git a/modules/page/ext.proofreadpage.page.edit.js b/modules/page/ext.proofreadpage.page.edit.js
index 935808d2..6c6b8376 100644
--- a/modules/page/ext.proofreadpage.page.edit.js
+++ b/modules/page/ext.proofreadpage.page.edit.js
@@ -34,6 +34,8 @@
*/
$img,
+ $imgContHorizontal,
+
/**
* image height
*
@@ -82,7 +84,7 @@
* Ensure that the zoom system is properly initialized
*
*/
- function ensureImageZoomInitialization() {
+ function ensureImageZoomInitialization( id ) {
var url1 = $img[ 0 ].getAttribute( 'src' );
var srcSet = $img[ 0 ].getAttribute( 'srcset' ).split( ' ' );
var url2 = srcSet[ 0 ];
@@ -94,7 +96,7 @@
$img.hide();
viewer = OpenSeadragon( {
- id: 'prp-page-image-openseadragon',
+ id: id,
zoomInButton: 'prp-page-zoomIn',
zoomOutButton: 'prp-page-zoomOut',
homeButton: 'prp-page-zoomReset',
@@ -177,8 +179,11 @@
viewer = null;
}
- if ( !isLayoutHorizontal ) {
- $imgCont.appendTo( $editForm.find( '.prp-page-container' ) );
+ if ( !isLayoutHorizontal ) {
+ $imgCont.css( 'display', 'block' );
+ if ( $imgContHorizontal ) {
+ $imgContHorizontal.css( 'display', 'none' );
+ }
// Switch CSS widths and heights back to the default side-by-size layout.
$imgCont.css( {
@@ -189,17 +194,28 @@
width: ''
} );
$.when( mw.loader.using( 'ext.wikiEditor' ), $.ready ).then( function () {
- ensureImageZoomInitialization();
+ ensureImageZoomInitialization( 'prp-page-image-openseadragon' );
} );
// eslint-disable-next-line no-jquery/no-global-selector
$( '#wpTextbox1' ).css( { height: '' } );
} else {
- $imgCont.insertBefore( $editForm );
+ if ( !$imgContHorizontal ) {
+ $imgContHorizontal = $imgCont
+ .clone()
+ .addClass( 'prp-page-image-horizontal' )
+ .removeClass( 'prp-page-image' )
+ .attr('id', 'prp-page-image-openseadragon-horizontal');
+ $imgContHorizontal.insertBefore( $editForm );
+ } else {
+ $imgContHorizontal.css('display', 'block');
+ }
+
+ $imgCont.css('display', 'none');
// Set the width and height of the image and form.
- $imgCont.css( {
+ $imgContHorizontal.css( {
width: '100%',
overflow: 'auto',
height: $( window ).height() / 2.7 + 'px'
@@ -210,9 +226,9 @@
// Set the image and the edit box to the same height (of 1/3 of the window each).
newHeight = $( window ).height() / 3 + 'px';
- $imgCont.css( { height: newHeight } );
+ $imgContHorizontal.css( { height: newHeight } );
$.when( mw.loader.using( 'ext.wikiEditor' ), $.ready ).then( function () {
- ensureImageZoomInitialization();
+ ensureImageZoomInitialization( 'prp-page-image-openseadragon-horizontal' );
} );
// eslint-disable-next-line no-jquery/no-global-selector
$( '#wpTextbox1' ).css( { height: newHeight } );
diff --git a/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js b/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js
index fae144bc..50cc60d1 100644
--- a/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js
+++ b/modules/ve/pageTarget/ve.init.mw.ProofreadPagePageTarget.js
@@ -19,10 +19,8 @@ var OpenSeadragon = require( 'ext.proofreadpage.openseadragon' );
*/
ve.init.mw.ProofreadPagePageTarget = function VeInitMwProofreadPagePageTarget() {
var zoomIn, zoomReset, zoomOut, $contentText, $pageContainer;
-
// Parent method
ve.init.mw.ProofreadPagePageTarget.super.apply( this, arguments );
-
this.$element.addClass( 've-init-mw-proofreadPagePageTarget' );
if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) {
@@ -37,11 +35,11 @@ ve.init.mw.ProofreadPagePageTarget = function VeInitMwProofreadPagePageTarget()
// eslint-disable-next-line no-jquery/no-global-selector
this.$imgCont = $( '.prp-page-image' );
+ this.$imgCont.css( 'display', 'initial' );
this.$imgCont.before( this.$imageZoomDiv );
this.$img = this.$imgCont.find( 'img' );
-
this.$imgCont.height( this.$imgCont.height() );
this.$imgCont.width( this.$imgCont.width() );

Event Timeline

Soda changed the title of this paste from untitled to ProofreadPage possible implementation of VE + WikiEditor zooming.