152 lines
4.7 KiB
JavaScript
152 lines
4.7 KiB
JavaScript
/*global jQuery, tinymce, tinyMCE, _, quicktags, tmEditor, WpmlTmEditorModel*/
|
|
|
|
var WPML_TM = WPML_TM || {};
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
WPML_TM.editorWysiwygFieldView = WPML_TM.editorJobFieldView.extend({
|
|
getTemplate: function () {
|
|
return 'templates/translation-editor/wysiwyg.html';
|
|
},
|
|
|
|
getOriginal: function () {
|
|
return this.$el.find('textarea.original_value').text();
|
|
},
|
|
|
|
getTranslation: function () {
|
|
var self = this;
|
|
var editor = tinymce.get(self.field.field_type);
|
|
if (editor && editor instanceof tinyMCE.Editor && !editor.isHidden()) {
|
|
return editor.getContent();
|
|
} else {
|
|
return self.getTextAreaElement().val();
|
|
}
|
|
},
|
|
|
|
setTranslation: function (value) {
|
|
var self = this;
|
|
|
|
var editor = tinymce.get(self.field.field_type);
|
|
var shouldToggle = editor && editor instanceof tinyMCE.Editor && !editor.isHidden();
|
|
|
|
if (shouldToggle) {
|
|
tinymce.execCommand('mceToggleEditor', false, self.field.field_type);
|
|
}
|
|
|
|
self.getTextAreaElement().val(value);
|
|
|
|
if (shouldToggle) {
|
|
tinymce.execCommand('mceToggleEditor', false, self.field.field_type);
|
|
}
|
|
|
|
this.updateUI();
|
|
},
|
|
|
|
setup: function () {
|
|
var self = this;
|
|
self.replacePlaceHolder('original');
|
|
self.replacePlaceHolder('translated');
|
|
|
|
self.$el.find('textarea.original_value').prop('readonly', true);
|
|
self.getTextAreaElement().on('input', _.bind(self.updateUI, self));
|
|
self.getTextAreaElement().on('input', function () {
|
|
tmEditor.model.trigger('translationUpdated', true);
|
|
});
|
|
|
|
if (!WpmlTmEditorModel.show_media_button) {
|
|
self.$el.find('.wp-media-buttons').hide();
|
|
}
|
|
|
|
_.delay(_.bind(self.waitForEditorAndThenInstallHooks, self, self.translationCompleteCheckbox.is( ':checked' )), 1000);
|
|
|
|
_.delay(_.bind(self.setInputStatus, self, 1000 ) );
|
|
|
|
},
|
|
|
|
getTextAreaElement: function () {
|
|
return this.$el.find('textarea#' + this.field.field_type);
|
|
},
|
|
|
|
waitForEditorAndThenInstallHooks: function (checked) {
|
|
var self = this;
|
|
var editor = tinymce.get(self.field.field_type);
|
|
if (editor && editor instanceof tinyMCE.Editor) {
|
|
editor.on('nodechange keyup', function (e) {
|
|
var lazyOnChange = _.debounce(_.bind(self.updateUI, self), 1000);
|
|
lazyOnChange(editor);
|
|
editor.save();
|
|
});
|
|
|
|
editor.on('change', function (e) {
|
|
tmEditor.model.trigger('translationUpdated', true);
|
|
});
|
|
_.delay(function () {
|
|
self.$el.find('.mce_editor_origin .mce-toolbar-grp').height(self.$el.find('.mce_editor .mce-toolbar-grp').height());
|
|
}, 1000);
|
|
self.setRtlAttributes(editor);
|
|
self.setOriginalBackgroundGray( editor );
|
|
|
|
if( checked ) {
|
|
self.translationCompleteCheckbox.prop('checked', true);
|
|
self.translationCompleteCheckbox.prop('disabled', false);
|
|
self.translationCompleteCheckbox.trigger('change');
|
|
}
|
|
} else {
|
|
_.delay(_.bind(self.waitForEditorAndThenInstallHooks, self), 1000);
|
|
}
|
|
},
|
|
|
|
replacePlaceHolder: function (type) {
|
|
var self = this;
|
|
var $placeholder = self.$el.find('#' + type + '_' + self.field.field_type + '_placeholder');
|
|
jQuery('#' + self.field.field_type + '_' + type + '_editor').detach().insertAfter($placeholder);
|
|
$placeholder.remove();
|
|
},
|
|
setRtlAttributes: function (editor) {
|
|
var self = this, dir, body, html;
|
|
|
|
dir = WpmlTmEditorModel.rtl_translation ? 'rtl' : 'ltr';
|
|
html = jQuery(editor.iframeElement).contents().find('html');
|
|
html.attr('dir', dir);
|
|
body = html.find('body');
|
|
if (body.length) {
|
|
body.attr('dir', dir);
|
|
}
|
|
self.getTextAreaElement().attr('dir', dir);
|
|
|
|
dir = WpmlTmEditorModel.rtl_original ? 'rtl' : 'ltr';
|
|
html = self.$el.find('.mce_editor_origin').find('iframe').contents().find('html');
|
|
html.attr('dir', dir);
|
|
body = html.find('body');
|
|
if (body.length) {
|
|
body.attr('dir', dir);
|
|
}
|
|
self.$el.find('textarea.original_value').attr('dir', dir);
|
|
},
|
|
setOriginalBackgroundGray: function ( editor ) {
|
|
var self = this,
|
|
html = self.$el.find( '.mce_editor_origin' ).find( 'iframe' ).contents().find( 'html' ),
|
|
body = html.find('body'),
|
|
sizer = self.$el.find( '.mce_editor_origin' ).find( '.mce-statusbar' ).find( '.mce-flow-layout' );
|
|
|
|
body.css( 'background-color', '#eee' );
|
|
sizer.css( 'background-color', '#eee' );
|
|
},
|
|
setTranslatedColor: function ( css ) {
|
|
var input = this.$el.find( '.translated_value' ),
|
|
html = input.find( 'iframe' ).contents().find( 'html' ),
|
|
body = html.find( 'body' ),
|
|
sizer = input.find( '.mce-statusbar' ).find( '.mce-flow-layout' ),
|
|
textArea = input.find( '.translated_value' );
|
|
|
|
body.css( 'background-color', css.background );
|
|
sizer.css( 'background-color', css.background );
|
|
textArea.css( 'background-color', css.background );
|
|
|
|
}
|
|
|
|
|
|
});
|
|
}());
|