Santhosh has uploaded a new change for review.
https://gerrit.wikimedia.org/r/55570
Change subject: (Bug 46311) Allow translation in page view
......................................................................
(Bug 46311) Allow translation in page view
* For translation editor, add a beforeSave callback for translation editor
For pagemode translation there is a requirement to highlight translation
when saveing started and removing when done
Change-Id: I98c6012dd71765971c5a45a6cbb4e044f756ecc6
---
M Resources.php
A resources/css/ext.translate.pagemode.css
M resources/js/ext.translate.editor.js
M resources/js/ext.translate.messagetable.js
A resources/js/ext.translate.pagemode.js
5 files changed, 227 insertions(+), 24 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Translate
refs/changes/70/55570/1
diff --git a/Resources.php b/Resources.php
index 1380aa3..fbaf2d3 100644
--- a/Resources.php
+++ b/Resources.php
@@ -32,10 +32,12 @@
'resources/js/ext.translate.editor.js',
'resources/js/ext.translate.editor.helpers.js',
'resources/js/ext.translate.proofread.js',
+ 'resources/js/ext.translate.pagemode.js',
),
'styles' => array(
'resources/css/ext.translate.editor.css',
'resources/css/ext.translate.proofread.css',
+ 'resources/css/ext.translate.pagemode.css',
),
'dependencies' => array(
'ext.translate.base',
diff --git a/resources/css/ext.translate.pagemode.css
b/resources/css/ext.translate.pagemode.css
new file mode 100644
index 0000000..8d72124
--- /dev/null
+++ b/resources/css/ext.translate.pagemode.css
@@ -0,0 +1,109 @@
+.ext-translate-container .tux-messagelist .tux-message-pagemode {
+ height: auto;
+ min-height: 50px;
+ padding: 40px 0;
+ margin: 0 auto;
+ vertical-align: middle;
+ border-bottom: 1px solid #f0f0f0;
+ border-left: 1px solid #DDDDDD;
+ border-right: 1px solid #DDDDDD;
+ max-width: 900px;
+ background: #FFFFFF;
+}
+
+.ext-translate-container .tux-messagelist .tux-message-pagemode:hover {
+ background: #FCFCFC;
+}
+
+.ext-translate-container .tux-messagelist .tux-message-pagemode:first-child {
+ margin-top: 10px;
+ padding-top: 60px;
+ border-top: 1px solid #DDDDDD;
+}
+
+.ext-translate-container .tux-messagelist .tux-message-pagemode:last-child {
+ margin-bottom: 10px;
+ padding-bottom: 60px;
+ border-bottom: 1px solid #DDDDDD;
+}
+
+.tux-message-pagemode.open .tux-pagemode-status,
+.tux-message-pagemode.open .tux-pagemode-source,
+.tux-message-pagemode.open .tux-pagemode-translation,
+.tux-message-pagemode.open .tux-pagemode-action-block {
+ display: none;
+}
+
+.tux-messagelist .tux-message-pagemode .tux-pagemode-source {
+ color: #555;
+ font-size: 16px;
+ line-height: 1.5em;
+ padding-right: 25px;
+ padding-left: 25px;
+}
+
+.tux-messagelist .tux-message-pagemode .tux-pagemode-translation {
+ color: #252525;
+ font-size: 16px;
+ line-height: 1.5em;
+ padding-left: 20px;
+}
+
+.tux-pagemode-action-block {
+ top: -5px;
+ right: -5px;
+}
+
+.tux-pagemode-status {
+ top: -10px;
+}
+
+.tux-pagemode-status.fuzzy {
+ /* @embed */
+ background: url(../images/outdated.png) left center no-repeat;
+ background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/outdated.svg);
+ background-image: -moz-linear-gradient(transparent, transparent),
url(../images/outdated.svg);
+ background-image: linear-gradient(transparent, transparent),
url(../images/outdated.svg);
+ height: 40px;
+}
+
+.tux-pagemode-status.untranslated {
+ /* @embed */
+ background: url(../images/translate.png) left center no-repeat;
+ background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/translate.svg);
+ background-image: -moz-linear-gradient(transparent, transparent),
url(../images/translate.svg);
+ background-image: linear-gradient(transparent, transparent),
url(../images/translate.svg);
+ height: 40px;
+}
+
+.tux-pagemode-action {
+ /* @embed */
+ background: url(../images/check-sprite.png) right top no-repeat;
+ background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/check-sprite.svg);
+ background-image: -moz-linear-gradient(transparent, transparent),
url(../images/check-sprite.svg);
+ background-image: linear-gradient(transparent, transparent),
url(../images/check-sprite.svg);
+ height: 31px;
+ cursor: pointer;
+}
+
+.tux-pagemode-action:hover {
+ background-position: right -31px;
+}
+
+.tux-pagemode-edit {
+ /* @embed */
+ background-image: url(../images/edit-mark.png);
+ background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/edit-mark.svg);
+ background-image: -moz-linear-gradient(transparent, transparent),
url(../images/edit-mark.svg);
+ background-image: linear-gradient(transparent, transparent),
url(../images/edit-mark.svg);
+ background-repeat: no-repeat;
+ background-position: right center;
+ height: 40px;
+ cursor: pointer;
+ visibility: hidden;
+}
+
+.tux-message-pagemode:hover .tux-pagemode-edit {
+ visibility: visible;
+}
+
diff --git a/resources/js/ext.translate.editor.js
b/resources/js/ext.translate.editor.js
index 276bc48..d88b06a 100644
--- a/resources/js/ext.translate.editor.js
+++ b/resources/js/ext.translate.editor.js
@@ -120,6 +120,11 @@
translateEditor.saving = true;
+ // beforeSave callback
+ if ( translateEditor.options.beforeSave ) {
+ translateEditor.options.beforeSave(
translation );
+ }
+
// For responsiveness and efficiency,
// immediately move to the next message.
translateEditor.next();
diff --git a/resources/js/ext.translate.messagetable.js
b/resources/js/ext.translate.messagetable.js
index 7deed81..96c6c64 100644
--- a/resources/js/ext.translate.messagetable.js
+++ b/resources/js/ext.translate.messagetable.js
@@ -243,34 +243,14 @@
},
addPageModeMessage: function ( message ) {
- var $message, targetLanguage, targetLanguageDir,
sourceLanguage, sourceLanguageDir;
-
- sourceLanguage = this.$container.data( 'sourcelangcode'
);
- sourceLanguageDir = $.uls.data.getDir( sourceLanguage );
- targetLanguage = this.$container.data( 'targetlangcode'
);
- targetLanguageDir = $.uls.data.getDir( targetLanguage );
+ var $message;
$message = $( '<div>' )
- .addClass( 'row tux-message-proofread' )
- .data( 'message', message )
- .append(
- $( '<div>' )
- .addClass( 'six columns
tux-proofread-source' )
- .attr( {
- lang: sourceLanguage,
- dir: sourceLanguageDir
- } )
- .html(
mw.translate.formatMessageGently( message.definition, message.key ) ),
- $( '<div>' )
- .addClass( 'six columns
tux-proofread-translation' )
- .attr( {
- lang: targetLanguage,
- dir: targetLanguageDir
- } )
- .html(
mw.translate.formatMessageGently( message.translation || '', message.key ) )
- );
+ .addClass( 'row tux-message
tux-message-pagemode' )
+ .data( 'message', message );
this.$container.append( $message );
+ $message.pagemode();
},
/**
@@ -705,3 +685,4 @@
return value.replace( /[\-\[\]{}()*+?.,\\\^$\|#\s]/g, '\\$&' );
}
}( jQuery, mediaWiki ) );
+
diff --git a/resources/js/ext.translate.pagemode.js
b/resources/js/ext.translate.pagemode.js
new file mode 100644
index 0000000..9e892df
--- /dev/null
+++ b/resources/js/ext.translate.pagemode.js
@@ -0,0 +1,106 @@
+( function ( $, mw ) {
+ 'use strict';
+
+ function PageMode( element ) {
+ this.$message = $( element );
+ this.$container = $( '.tux-messagelist' );
+ this.message = this.$message.data( 'message' );
+ this.init();
+ this.listen();
+ }
+
+ PageMode.prototype = {
+
+ /**
+ * Initialize the plugin
+ */
+ init: function () {
+ var pagemode = this;
+
+ this.render();
+
+ pagemode.$message.translateeditor( {
+ message: pagemode.message,
+ beforeSave: function ( translation ) {
+ pagemode.$message.find(
'.tux-pagemode-translation' )
+ .text( translation )
+ .addClass( 'highlight' );
+ },
+ onSave: function ( translation ) {
+ pagemode.$message.find(
'.tux-pagemode-translation' )
+ .removeClass( 'highlight' )
+ .text( translation );
+ pagemode.message.translation =
translation;
+ }
+ } );
+
+ },
+
+ render: function () {
+ var $message, targetLanguage, targetLanguageDir,
sourceLanguage, sourceLanguageDir,
+ messageTable = this;
+
+ sourceLanguage = this.$container.data( 'sourcelangcode'
);
+ sourceLanguageDir = $.uls.data.getDir( sourceLanguage );
+ targetLanguage = this.$container.data( 'targetlangcode'
);
+ targetLanguageDir = $.uls.data.getDir( targetLanguage );
+
+ this.$message.append(
+ $( '<div>' )
+ .addClass( 'one column
tux-pagemode-status ' + this.message.properties.status ),
+ $( '<div>' )
+ .addClass( 'five columns
tux-pagemode-source' )
+ .attr( {
+ lang: sourceLanguage,
+ dir: sourceLanguageDir
+ } )
+ .html(
mw.translate.formatMessageGently( this.message.definition, this.message.key ) ),
+ $( '<div>' )
+ .addClass( 'five columns
tux-pagemode-translation' )
+ .attr( {
+ lang: targetLanguage,
+ dir: targetLanguageDir
+ } )
+ .html(
mw.translate.formatMessageGently( this.message.translation || '',
this.message.key ) ),
+ $( '<div>' )
+ .attr( 'title', mw.msg(
'tux-pagemode-edit-tooltip' ) )
+ .addClass( 'tux-pagemode-edit' )
+ )
+
+ .addClass( this.message.properties.status );
+ },
+
+ /**
+ * Attach event listeners
+ */
+ listen: function () {
+ var pagemode = this;
+
+ this.$message.find( '.tux-pagemode-edit' ).on( 'click',
function () {
+ pagemode.$message.data( 'translateeditor'
).show();
+ return false;
+ } );
+ }
+ };
+
+ /*
+ * pagemode PLUGIN DEFINITION
+ */
+ $.fn.pagemode = function ( options ) {
+ return this.each( function () {
+ var $this = $( this ),
+ data = $this.data( 'pagemode' );
+
+ if ( !data ) {
+ $this.data( 'pagemode',
+ ( data = new PageMode( this, options ) )
+ );
+ }
+
+ } );
+ };
+
+ $.fn.pagemode.Constructor = PageMode;
+
+}( jQuery, mediaWiki ) );
+
--
To view, visit https://gerrit.wikimedia.org/r/55570
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I98c6012dd71765971c5a45a6cbb4e044f756ecc6
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Translate
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
