Merge e3e5829 into 17f8c45

pootle/apps/pootle_app/assets.py

@@ -57,6 +57,7 @@
 js_editor = Bundle(
     'js/vendor/jquery/jquery.history.js',
     'js/vendor/jquery/jquery.textarea-expander.js',
+    'js/vendor/jquery/jquery.textcomplete.js',
     'js/vendor/diff_match_patch.js',
     'js/vendor/jquery/jquery.caret.js',
     'js/vendor/jquery/jquery.highlightRegex.js',
@@ -95,5 +96,6 @@
 
 css_editor = Bundle(
     'css/editor.css',
+    'css/jquery.textcomplete.css',
     filters='cssmin', output='css/editor.min.%(version)s.css')
 register('css_editor', css_editor)

pootle/static/css/editor.css

@@ -660,6 +660,11 @@ td.translate-full textarea.translation
     min-height: 2.7em; 
 }
 
+.translate-translation .textcomplete-wrapper
+{
+    width: 100%;
+    display: block !important;
+}
 
 /* TM and suggestions */
 
@@ -1338,6 +1343,17 @@ a.editor-specialchar:hover
     color: #840;
 }
 
+.highlight-escape,
+.placeable
+{
+    /* Switch the next two lines to “unicode-bidi: isolate” once it is widely
+     * supported and let the browser determine the direction, instead of
+     * assuming that all placeables are left-to-right string.
+     */
+    direction: ltr;
+    unicode-bidi: embed;
+}
+
 .placeable:hover,
 .highlight-escape:hover,
 #js-selected-placeable

pootle/static/css/jquery.textcomplete.css

@@ -0,0 +1,33 @@
+/* Sample */
+
+.dropdown-menu {
+    border: 1px solid #ddd;
+    background-color: white;
+}
+
+.dropdown-menu li {
+    border-top: 1px solid #ddd;
+    padding: 2px 5px;
+}
+
+.dropdown-menu li:first-child {
+    border-top: none;
+}
+
+.dropdown-menu li:hover,
+.dropdown-menu .active {
+    background-color: rgb(110, 183, 219);
+}
+
+
+/* SHOULD not modify */
+
+.dropdown-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropdown-menu a:hover {
+    cursor: pointer;
+}

pootle/static/js/README

@@ -204,6 +204,16 @@ Directory contents
 
         http://blogs.sitepointstatic.com/examples/tech/textarea-expander/jquery.textarea-expander.js
 
+      - jquery.textcomplete.js
+        Autocomplete for Textarea.
+
+        Using version 0.1.3.
+
+        Introduces autocompleting power to textareas, like a GitHub comment
+        form has.
+
+        https://github.com/yuku-t/jquery-textcomplete
+
       - jquery.tipsy.js :
         Facebook-style tooltips for jQuery.
 

pootle/static/js/editor.js

@@ -484,6 +484,8 @@
 
     PTL.editor.hlSearch();
 
+    PTL.editor.setupAutocomplete();
+
     if (PTL.editor.settings.tmUrl != '') {
       PTL.editor.getTMUnits();
     }
@@ -570,6 +572,41 @@
     $(sel.join(", ")).highlightRegex(hlRegex);
   },
 
+  setupAutocomplete: function () {
+    var searchFunc = function (term, callback) {
+      var $placeables = $("div.original .js-placeable");
+
+      var matching = $.map($placeables, function (placeable) {
+        var text = $(placeable).text(),
+            html = $(placeable).html();
+        if (term.length !== 0 && text.indexOf(term) === 0) {
+          // We return html not text here as the return value will used to
+          // populate the drop down menu unescaped.
+          return html;
+        } else {
+          return null;
+        }
+      });
+
+      callback(matching);
+    };
+
+    var replaceFunc = function (value) {
+      // Unescape the HTML text we returned above for insertion into the
+      // textarea.
+      var text = $('<div/>').html(value).text();
+      return text;
+    };
+
+    $("textarea.translation").textcomplete([
+      {
+        match: /(\S*)$/,
+        search: searchFunc,
+        replace: replaceFunc,
+        index: 1,
+      }
+    ]);
+  },
 
   /* Copies text into the focused textarea */
   copyText: function (e) {