New buttons to enter some special characters

This allows entering tab which is not normally possible within browser
(issue #115).

docs/changes.rst

@@ -16,6 +16,7 @@ Relased on ? 2012.
 * Better support for Android resources.
 * Support for generating SSH key from web interface.
 * More visible data exports.
+* Buttons to enter some special characters.
 
 weblate 1.2
 -----------

weblate/html/translate.html

@@ -70,6 +70,10 @@
 {{ form.target }}
 <br />
 {{ form.fuzzy }}<label for="id_fuzzy">{% trans "Fuzzy" context "Message is fuzzy" %}</label>
+<span class="specialchars">{% trans "Special characters:" %}
+<a class="specialchar" title="{% trans "Insert tab character" %}">→</a>
+<a class="specialchar" title="{% trans "Insert new line" %}">↵</a>
+</span>
 </td></tr>
 {% with unit.active_checks as checks %}
 {% if checks %}

weblate/media/css/style.css

@@ -86,10 +86,23 @@ td.suggestions table {
     width: 20px;
     height: 20px;
 }
-td.toolbar a {
+.toolbar a {
     height: 20px;
     font-size: 10px;
     font-weight: normal;
+    vertical-align: top;
+}
+.specialchars a {
+    height: 20px;
+    font-size: 12px;
+    font-weight: normal;
+    vertical-align: top;
+}
+.specialchars a span {
+    padding: 2px 4px !important;
+}
+.specialchars {
+    margin-left: 5em;
 }
 .helptext {
     font-size: smaller;

weblate/media/js/loader.js

+jQuery.fn.extend({
+insertAtCaret: function(myValue){
+  return this.each(function(i) {
+    if (document.selection) {
+      //For browsers like Internet Explorer
+      this.focus();
+      sel = document.selection.createRange();
+      sel.text = myValue;
+      this.focus();
+    }
+    else if (this.selectionStart || this.selectionStart == '0') {
+      //For browsers like Firefox and Webkit based
+      var startPos = this.selectionStart;
+      var endPos = this.selectionEnd;
+      var scrollTop = this.scrollTop;
+      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
+      this.focus();
+      this.selectionStart = startPos + myValue.length;
+      this.selectionEnd = startPos + myValue.length;
+      this.scrollTop = scrollTop;
+    } else {
+      this.value += myValue;
+      this.focus();
+    }
+  })
+}
+});
+
+
+
 function text_change(e) {
     $('#id_fuzzy').attr('checked', false);
 }
@@ -191,6 +221,17 @@ $(function() {
         });
         return false;
     });
+    $('.specialchar').button().click(function() {
+        var text = $(this).text();
+        if (text == '\\t') {
+            text = '\t';
+        } else if (text == '→') {
+            text = '\t';
+        } else if (text == '↵') {
+            text = '\r';
+        }
+        $('#id_target').insertAtCaret(text);
+    });
     if (typeof(target_language) != 'undefined') {
         load_translate_apis();
     }

weblate/trans/templatetags/translations.py

@@ -54,7 +54,7 @@ def fmt_whitespace(value):
     # Highlight tabs
     value = value.replace(
         '\t',
-        u'<span class="hlspace space-tab" title="%s">⇢</span>' % _('Tab character')
+        u'<span class="hlspace space-tab" title="%s">→</span>' % _('Tab character')
     )
     return value