( function () { 'use strict'; /** * Page mode plugin * * Prepare the page mode UI with all the required actions * for a translation unit (message). * This is mainly used with the messagetable plugin in page mode, * but it is independent of messagetable. * Example usage: * * $( 'div.pagemode' ).pagemode( { * message: messageObject, // Mandatory message object * sourcelangcode: 'en', // Mandatory source language code * targetlangcode: 'hi' // Mandatory target language code * } ); * * @param {Element} element * @param {Object} options * @param {Object} options.message * @param {string} options.sourcelangcode Language code. * @param {string} options.targetlangcode Language code. */ function PageMode( element, options ) { this.$message = $( element ); this.options = options; this.message = this.options.message; this.init(); this.listen(); } PageMode.prototype = { /** * Initialize the plugin */ init: function () { var pagemode = this; this.message.proofreadable = false; this.render(); pagemode.$message.translateeditor( { message: pagemode.message, beforeSave: function ( translation ) { pagemode.$message.find( '.tux-pagemode-translation' ) .html( mw.translate.formatMessageGently( translation || '', pagemode.message.key ) ) .addClass( 'highlight' ); }, onSave: function ( translation ) { pagemode.$message.find( '.tux-pagemode-translation' ) .removeClass( 'highlight' ); pagemode.message.translation = translation; pagemode.$message.find( '.tux-pagemode-status' ) .removeClass( 'translated fuzzy proofread untranslated' ) .addClass( pagemode.message.properties.status ); } } ); }, render: function () { var targetLangAttrib, targetLangDir, sourceLangDir = $.uls.data.getDir( this.options.sourcelangcode ); if ( this.options.targetlangcode === mw.config.get( 'wgTranslateDocumentationLanguageCode' ) ) { targetLangAttrib = mw.config.get( 'wgContentLanguage' ); } else { targetLangAttrib = this.options.targetlangcode; } targetLangDir = $.uls.data.getDir( targetLangAttrib ); this.$message.append( $( '