diff --git a/skins/elastic/templates/includes/layout.html b/skins/elastic/templates/includes/layout.html
index 2482ea1d9..c50b9e46d 100644
--- a/skins/elastic/templates/includes/layout.html
+++ b/skins/elastic/templates/includes/layout.html
@@ -1,6 +1,8 @@
+
+
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 35184eafc..6d786f82c 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -210,6 +210,9 @@ function rcube_elastic_ui()
}).change();
});
+ // Add HTML/Plain tabs (switch) on top of textarea with TinyMCE editor
+ $('textarea[data-html-editor]').each(function() { html_editor_init(this); });
+
$('#dragmessage-menu,#dragcontact-menu').each(function() {
rcmail.gui_object('dragmenu', this.id);
});
@@ -2140,6 +2143,75 @@ function rcube_elastic_ui()
);
};
+ /**
+ * HTML editor textarea wrapper with nice looking tabs-like switch
+ */
+ function html_editor_init(obj)
+ {
+ // Here we support two structures
+ // 1.
+ // 2.
| | |
+ //
| | |
+
+ var sw, is_table = false,
+ editor = $(obj),
+ parent = editor.parent(),
+ mode = function() {
+ if (is_table) {
+ return sw.is(':checked') ? 'html' : 'plain';
+ }
+
+ return sw.val();
+ },
+ tabs = $('
')
+ .append($('- ')
+ .append($('')
+ .text(rcmail.gettext('htmltoggle'))))
+ .append($('
- ')
+ .append($('')
+ .text(rcmail.gettext('plaintoggle'))));
+
+ if (parent.is('td')) {
+ sw = $('input[type="checkbox"]', parent.parent().next());
+ is_table = true;
+ }
+ else {
+ sw = $('[name="editorSelector"]', obj.form);
+ }
+
+ // sanity check
+ if (sw.length != 1) {
+ return;
+ }
+
+ parent.addClass('html-editor');
+ editor.before(tabs);
+
+ $('a', tabs).attr('tabindex', editor.attr('tabindex'))
+ .on('click', function(e) {
+ var id = editor.attr('id'), is_html = $(this).is('.mode-html');
+
+ e.preventDefault();
+ if (rcmail.command('toggle-editor', {id: id, html: is_html}, '', e.originalEvent)) {
+ $(this).tab('show');
+
+ if (is_table) {
+ console.log(sw[0]);
+ sw.prop('checked', is_html);
+ }
+ }
+ })
+ .filter('.mode-' + mode()).tab('show');
+
+ if (is_table) {
+ // Hide unwanted table cells
+ sw.parent().parent().hide();
+ parent.prev().hide();
+ // Modify the textarea cell to use 100% width
+ parent.addClass('col-sm-12');
+ }
+ };
+
/**
* Wrapper for rcmail.open_window to intercept window opening
* and display a dialog with an iframe instead of a real window.