jenkins-bot has submitted this change and it was merged.
Change subject: Alignment and editor positioning corrections for multipart
templates
......................................................................
Alignment and editor positioning corrections for multipart templates
When source template has fragments and some hidden(or height 0)
the alignment calculation and positioning of editor were going wrong.
Example articles: Tasmanian Devil (en->he), Samuel L. Jackson (en->*)
Change-Id: Iabea86f7ce30f136eae37dd7a3c32e1e1ba5f0bb
---
M modules/tools/ext.cx.tools.template.editor.js
M modules/tools/ext.cx.tools.template.js
M modules/translation/ext.cx.translation.aligner.js
M modules/ui/styles/mw.cx.ui.TranslationView.less
4 files changed, 111 insertions(+), 57 deletions(-)
Approvals:
Nikerabbit: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/tools/ext.cx.tools.template.editor.js
b/modules/tools/ext.cx.tools.template.editor.js
index 9eed7d2..01bcb98 100644
--- a/modules/tools/ext.cx.tools.template.editor.js
+++ b/modules/tools/ext.cx.tools.template.editor.js
@@ -40,21 +40,13 @@
* Initialize the template editor
*/
TemplateEditor.prototype.init = function () {
- var sourceId, self = this;
+ var self = this;
this.$sourceTemplateContainer = this.buildSourceFormContainer();
this.$targetTemplateContainer = this.buildTargetFormContainer();
- if ( this.targetTemplate.options.inline ) {
- this.targetTemplate.$parentSection =
this.targetTemplate.$template.parents( '[data-source]' );
- sourceId = this.targetTemplate.$parentSection.data(
'source' );
- this.sourceTemplate.$parentSection = $(
document.getElementById( sourceId ) );
- this.sourceTemplate.$parentSection.after(
this.$sourceTemplateContainer );
- this.targetTemplate.$parentSection.after(
this.$targetTemplateContainer );
- } else {
- this.sourceTemplate.$template.after(
this.$sourceTemplateContainer );
- this.targetTemplate.$template.after(
this.$targetTemplateContainer );
- }
+ this.sourceTemplate.getEditorContainer().after(
this.$sourceTemplateContainer );
+ this.targetTemplate.getEditorContainer().after(
this.$targetTemplateContainer );
this.sourceTemplate.init().then( function () {
self.buildSourceTemplateForm();
@@ -497,14 +489,8 @@
* Show the editor.
*/
TemplateEditor.prototype.show = function () {
-
- if ( this.targetTemplate.options.inline ) {
- this.targetTemplate.$parentSection.hide();
- this.sourceTemplate.$parentSection.hide();
- } else {
- this.targetTemplate.$template.hide();
- this.sourceTemplate.$template.hide();
- }
+ this.targetTemplate.hide();
+ this.sourceTemplate.hide();
this.$sourceTemplateContainer.show();
this.$targetTemplateContainer.show();
@@ -527,13 +513,8 @@
this.$sourceTemplateContainer.hide();
this.$targetTemplateContainer.hide();
- if ( this.targetTemplate.options.inline ) {
- this.targetTemplate.$parentSection.show();
- this.sourceTemplate.$parentSection.show();
- } else {
- this.targetTemplate.$template.show();
- this.sourceTemplate.$template.show();
- }
+ this.targetTemplate.show();
+ this.sourceTemplate.show();
};
diff --git a/modules/tools/ext.cx.tools.template.js
b/modules/tools/ext.cx.tools.template.js
index 769aed2..eba5ae4 100644
--- a/modules/tools/ext.cx.tools.template.js
+++ b/modules/tools/ext.cx.tools.template.js
@@ -162,13 +162,18 @@
* @return {jQuery}
*/
Template.static.getTemplateDef = function ( $template ) {
- var $sourceTemplate = $( [] );
+ var aboutAttr,
+ $sourceTemplate = $( [] );
if ( !$template ) {
return $sourceTemplate;
}
- mw.cx.Template.static.getFragments( $template ).each( function
( index, fragment ) {
+ aboutAttr = $template.attr( 'about' ) ||
+ mw.cx.getSourceSection( $template.data( 'source' )
).attr( 'about' );
+
+ // Template definition is usually at source template at source
column
+ $( '[about="' + aboutAttr + '"]' ).each( function ( index,
fragment ) {
var $fragment = $( fragment );
if (
@@ -203,34 +208,77 @@
};
/**
- * Get all DOM fragments for the given template
+ * Get all associated DOM fragments for the given template
*
- * @param {jQuery} $template
* @return {jQuery} Template fragments
*/
- Template.static.getFragments = function ( $template ) {
+ Template.prototype.getFragments = function () {
var aboutAttr;
- aboutAttr = $template.attr( 'about' ) ||
- mw.cx.getSourceSection( $template.data( 'source' )
).attr( 'about' );
- return $( '[about="' + aboutAttr + '"]' );
+ aboutAttr = this.$template.attr( 'about' ) ||
+ mw.cx.getSourceSection( this.$template.data( 'source' )
).attr( 'about' );
+
+ return this.$template
+ .parents( '.cx-column__content' )
+ .find( '[about="' + aboutAttr + '"]' );
};
/**
- * Get total height of the template
- *
- * @return {integer} Calculated total height of the template
+ * Show this template. If it has fragments, show them too.
*/
- Template.prototype.getHeight = function () {
- var total = 0,
- $fragments;
+ Template.prototype.show = function () {
+ if ( this.options.inline ) {
+ this.$parentSection = this.$parentSection ||
+ this.$template.parents(
mw.cx.getSectionSelector() );
+ this.$parentSection.show();
+ } else {
+ this.$template.show();
+ this.getFragments( this.$template ).show();
+ }
+ };
- $fragments = mw.cx.Template.static.getFragments( this.$template
);
- $fragments.each( function () {
- total += $( this ).height();
- } );
+ /**
+ * Hide this template. If it has fragments, hide them too.
+ */
+ Template.prototype.hide = function () {
+ if ( this.options.inline ) {
+ this.$parentSection = this.$parentSection ||
+ this.$template.parents(
mw.cx.getSectionSelector() );
+ this.$parentSection.hide();
+ } else {
+ this.$template.hide();
+ this.getFragments( this.$template ).hide();
+ }
+ };
- return total;
+ /**
+ * Get the container to which the editor to append
+ *
+ * @return {jQuery}
+ */
+ Template.prototype.getEditorContainer = function () {
+ var $fragments, $container;
+
+ $container = this.$template;
+
+ if ( this.options.inline ) {
+ this.$parentSection = this.$parentSection ||
+ this.$template.parents(
mw.cx.getSectionSelector() );
+ $container = this.$parentSection;
+ } else {
+ $fragments = this.getFragments();
+ $fragments.each( function ( index, fragment ) {
+ var $fragment = $( fragment );
+
+ // Find a fragment with visible height
+ if ( $fragment.height() > 0 ) {
+ $container = $fragment;
+ return false;
+ }
+ } );
+ }
+
+ return $container;
};
/**
diff --git a/modules/translation/ext.cx.translation.aligner.js
b/modules/translation/ext.cx.translation.aligner.js
index 0f45c10..a60a5d5 100644
--- a/modules/translation/ext.cx.translation.aligner.js
+++ b/modules/translation/ext.cx.translation.aligner.js
@@ -114,6 +114,40 @@
return parseInt( $element.height(), 10 );
}
+ function getDisplayStyles( $element ) {
+ var aboutAttr, $source;
+
+ // If the source section is template, it can have fragments.
+ if ( $element.is( '[typeof*="mw:Transclusion"]' ) &&
+ $element.attr( 'data-mw' )
+ ) {
+ aboutAttr = $element.attr( 'about' );
+ $element.parents( '.cx-column__content' ).find(
'[about="' + aboutAttr + '"]' )
+ .each( function ( index, fragment ) {
+ var $fragment = $( fragment );
+ // Find a fragment with visible height
+ if ( $fragment.height() > 0 ) {
+ $source = $fragment;
+ return true;
+ }
+ } );
+ } else {
+ $source = $element;
+ }
+
+ return {
+ // Copy a bunch of position-related attribute values
+ width: $source.width() || '100%',
+ 'margin-top': $source.css( 'margin-top' ),
+ 'margin-bottom': $source.css( 'margin-bottom' ),
+ 'padding-top': $source.css( 'padding-top' ),
+ 'padding-bottom': $source.css( 'padding-bottom' ),
+ 'float': $source.css( 'float' ),
+ clear: $source.css( 'clear' ),
+ position: $source.css( 'position' )
+ };
+ }
+
function setHeight( $element, height ) {
if ( $element.prop( 'tagName' ) === 'FIGURE' ) {
$element.css( {
@@ -147,18 +181,7 @@
$source.css( 'min-height', '' );
if ( $target.is( '.placeholder' ) ) {
- $target.css( {
- // Copy a bunch of position-related attribute
values
- width: $source.width() || '100%',
- 'margin-top': $source.css( 'margin-top' ),
- 'margin-bottom': $source.css( 'margin-bottom' ),
- 'padding-top': $source.css( 'padding-top' ),
- 'padding-bottom': $source.css( 'padding-bottom'
),
- 'float': $source.css( 'float' ),
- clear: $source.css( 'clear' ),
- position: $source.css( 'position' )
- } );
-
+ $target.css( getDisplayStyles( $source ) );
setHeight( $target, getHeight( $source ) );
return;
}
diff --git a/modules/ui/styles/mw.cx.ui.TranslationView.less
b/modules/ui/styles/mw.cx.ui.TranslationView.less
index c0dc143..4abe0af 100644
--- a/modules/ui/styles/mw.cx.ui.TranslationView.less
+++ b/modules/ui/styles/mw.cx.ui.TranslationView.less
@@ -19,6 +19,8 @@
}
& > p,
+ & > table,
+ & > figure,
& > pre,
& > div,
& > ul {
--
To view, visit https://gerrit.wikimedia.org/r/323120
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iabea86f7ce30f136eae37dd7a3c32e1e1ba5f0bb
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
