jenkins-bot has submitted this change and it was merged.
Change subject: Move the section alignment code to a jquery plugin
......................................................................
Move the section alignment code to a jquery plugin
...and to a different file.
Change-Id: Ia42da2dde3ff9006e86dcc14794facd51218caa2
---
M Resources.php
A modules/translation/ext.cx.translation.aligner.js
M modules/translation/ext.cx.translation.js
3 files changed, 75 insertions(+), 56 deletions(-)
Approvals:
KartikMistry: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Resources.php b/Resources.php
index 66b14fe..33ddd83 100644
--- a/Resources.php
+++ b/Resources.php
@@ -114,7 +114,10 @@
) + $resourcePaths;
$wgResourceModules['ext.cx.translation'] = array(
- 'scripts' => 'translation/ext.cx.translation.js',
+ 'scripts' => array(
+ 'translation/ext.cx.translation.js',
+ 'translation/ext.cx.translation.aligner.js',
+ ),
'dependencies' => array(
'ext.cx.translation.progress',
'jquery.uls.data',
diff --git a/modules/translation/ext.cx.translation.aligner.js
b/modules/translation/ext.cx.translation.aligner.js
new file mode 100644
index 0000000..91833c7
--- /dev/null
+++ b/modules/translation/ext.cx.translation.aligner.js
@@ -0,0 +1,66 @@
+/**
+ * ContentTranslation - Section alignment plugin
+ *
+ * @file
+ * @ingroup Extensions
+ * @copyright See AUTHORS.txt
+ * @license GPL-2.0+
+ */
+( function ( $, mw ) {
+ 'use strict';
+
+ /**
+ * Keep the height of the source and translation sections equal
+ * so that they will appear top-aligned.
+ */
+ $.fn.keepAlignment = function () {
+ var $section,
+ $sourceSection,
+ sectionHeight,
+ sourceSectionHeight,
+ steps = 0;
+
+ $section = $( this );
+
+ if ( $section.prop( 'tagName' ) === 'TABLE' ) {
+ // 'min-height' is undefined for table elements
+ return true;
+ }
+
+ $sourceSection = $( '#' + $section.data( 'source' ) );
+
+ if ( $section.prop( 'tagName' ) === 'FIGURE' ) {
+ $sourceSection = $sourceSection.find( 'figcaption' );
+ $section = $section.find( 'figcaption' );
+ }
+
+ $sourceSection.css( 'min-height', '' );
+ sourceSectionHeight = $sourceSection.height();
+ sectionHeight = $section.height();
+
+ if ( sourceSectionHeight < sectionHeight ) {
+ $sourceSection.css( 'min-height', sectionHeight );
+ sourceSectionHeight = $sourceSection.height();
+ sectionHeight = $section.height();
+
+ // Fun stuff - setting a calculated min-height will not
guarantee
+ // equal height for all kinds of section pairs.
+ // Experiments shows a few pixels difference.
+ // Here we do it by 10px steps till we reach equal
height.
+ while ( sectionHeight !== sourceSectionHeight ) {
+ sectionHeight = sectionHeight + 10;
+ $sourceSection.css( 'min-height', sectionHeight
);
+ $section.css( 'min-height', sectionHeight );
+ sectionHeight = $section.height();
+ sourceSectionHeight = $sourceSection.height();
+
+ if ( steps++ === 10 ) {
+ mw.track( 'Alignment attempt is not
succeeding. Aborting.' );
+ break;
+ }
+ }
+ } else if ( sourceSectionHeight > sectionHeight ) {
+ $section.css( 'min-height', sourceSectionHeight );
+ }
+ };
+}( jQuery, mediaWiki ) );
diff --git a/modules/translation/ext.cx.translation.js
b/modules/translation/ext.cx.translation.js
index 107e580..4b87288 100644
--- a/modules/translation/ext.cx.translation.js
+++ b/modules/translation/ext.cx.translation.js
@@ -115,7 +115,11 @@
$( targetSectionId ).replaceWith( $placeholder );
} );
- mw.hook( 'mw.cx.translation.change' ).add( keepAlignment );
+ mw.hook( 'mw.cx.translation.change' ).add( function ( $section
) {
+ if ( $section ) {
+ $section.keepAlignment();
+ }
+ } );
// Highlight corresponding links in source and translation
columns
this.$container.on( 'mouseenter mouseleave', 'a', function () {
@@ -347,60 +351,6 @@
position: $sourceSection.css( 'position' )
} )
.html( mw.msg( 'cx-translation-add-translation' ) );
- }
-
- /**
- * Keep the height of the source and translation sections equal
- * so that they will appear top-aligned.
- */
- function keepAlignment( $section ) {
- var $sourceSection, sectionHeight, sourceSectionHeight, steps =
0;
-
- if ( !$section ) {
- return;
- }
-
- if ( $section.prop( 'tagName' ) === 'TABLE' ) {
- // 'min-height' is undefined for table elements
- return true;
- }
-
- $sourceSection = $( '#' + $section.data( 'source' ) );
-
- if ( $section.prop( 'tagName' ) === 'FIGURE' ) {
- $sourceSection = $sourceSection.find( 'figcaption' );
- $section = $section.find( 'figcaption' );
- }
-
- $sourceSection.css( 'min-height', '' );
- sourceSectionHeight = $sourceSection.height();
- sectionHeight = $section.height();
-
- if ( sourceSectionHeight < sectionHeight ) {
- $sourceSection.css( 'min-height', sectionHeight );
- sourceSectionHeight = $sourceSection.height();
- sectionHeight = $section.height();
-
- // Fun stuff - setting a calculated min-height will not
guarantee
- // equal height for all kinds of section pairs.
- // Experiments shows a few pixels difference.
- // Here we do it by 10px steps till we reach equal
height.
- while ( sectionHeight !== sourceSectionHeight ) {
- sectionHeight = sectionHeight + 10;
- $sourceSection.css( 'min-height', sectionHeight
);
- $section.css( 'min-height', sectionHeight );
- sectionHeight = $section.height();
- sourceSectionHeight = $sourceSection.height();
-
- if ( steps++ === 10 ) {
- mw.track( 'Alignment attempt is not
succeeding. Aborting.' );
- break;
- }
- }
- } else if ( sourceSectionHeight > sectionHeight ) {
- $section.css( 'min-height', sourceSectionHeight );
- }
-
}
$.fn.cxTranslation = function ( options ) {
--
To view, visit https://gerrit.wikimedia.org/r/148049
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ia42da2dde3ff9006e86dcc14794facd51218caa2
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
Gerrit-Reviewer: KartikMistry <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
