Autocomplete fixes

- use translation MAP
- move translation to top level in order to be used inside rhodecode.js
- re-use user and groups data in changesets page

rhodecode/public/css/style.css

@@ -2821,10 +2821,10 b' table.code-browser .submodule-dir {'
 }
 
 .mentions-container{
-	width: 100% !important;
+	width: 90% !important;
 }
 .mentions-container .yui-ac-content{
-	width: 90% !important;
+	width: 100% !important;
 }
 
 .ac {

rhodecode/public/js/rhodecode.js

@@ -44,6 +44,24 b' String.prototype.format = function() {'
 
 }();
 
+String.prototype.strip = function(char) {
+	if(char === undefined){
+	    char = '\\s';
+	}
+	return this.replace(new RegExp('^'+char+'+|'+char+'+$','g'), '');
+}
+String.prototype.lstrip = function(char) {
+	if(char === undefined){
+	    char = '\\s';
+	}
+	return this.replace(new RegExp('^'+char+'+'),'');
+}
+String.prototype.rstrip = function(char) {
+	if(char === undefined){
+	    char = '\\s';
+	}
+	return this.replace(new RegExp(''+char+'+$'),'');
+}
 
 /**
  * SmartColorGenerator
@@ -447,7 +465,7 b' var injectInlineForm = function(tr){'
 		  
 		  ajaxPOST(submit_url, postData, success);
 	  });
-	  
+	  // callbacks
 	  tooltip_activate();
 };
 
@@ -819,7 +837,7 b' var deleteNotification = function(url, n'
 
 /** MEMBERS AUTOCOMPLETE WIDGET **/
 
-var MembersAutoComplete = function (users_list, groups_list, group_lbl, members_lbl) {
+var MembersAutoComplete = function (users_list, groups_list) {
     var myUsers = users_list;
     var myGroups = groups_list;
 
@@ -834,9 +852,11 b' var MembersAutoComplete = function (user'
             // Match against each name of each contact
             for (; i < l; i++) {
                 contact = myUsers[i];
-                if ((contact.fname.toLowerCase().indexOf(query) > -1) || (contact.lname.toLowerCase().indexOf(query) > -1) || (contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
-                    matches[matches.length] = contact;
-                }
+                if (((contact.fname+"").toLowerCase().indexOf(query) > -1) || 
+                   	 ((contact.lname+"").toLowerCase().indexOf(query) > -1) || 
+                   	 ((contact.nname) && ((contact.nname).toLowerCase().indexOf(query) > -1))) {
+                       matches[matches.length] = contact;
+                   }
             }
             return matches;
         };
@@ -912,21 +932,22 b' var MembersAutoComplete = function (user'
                 var grname = oResultData.grname;
                 var grmembers = oResultData.grmembers;
                 var grnameMatchIndex = grname.toLowerCase().indexOf(query);
-                var grprefix = "{0}: ".format(group_lbl);
+                var grprefix = "{0}: ".format(_TM['Group']);
                 var grsuffix = " (" + grmembers + "  )";
-                var grsuffix = " ({0}  {1})".format(grmembers, members_lbl);
+                var grsuffix = " ({0}  {1})".format(grmembers, _TM['members']);
 
                 if (grnameMatchIndex > -1) {
                     return _gravatar(grprefix + highlightMatch(grname, query, grnameMatchIndex) + grsuffix,null,true);
                 }
 			    return _gravatar(grprefix + oResultData.grname + grsuffix, null,true);
             // Users
-            } else if (oResultData.fname != undefined) {
-                var fname = oResultData.fname,
-                    lname = oResultData.lname,
-                    nname = oResultData.nname || "",
-                    // Guard against null value
-                    fnameMatchIndex = fname.toLowerCase().indexOf(query),
+            } else if (oResultData.nname != undefined) {
+                var fname = oResultData.fname || "";
+                var lname = oResultData.lname || "";
+                var nname = oResultData.nname;
+                
+                // Guard against null value
+                var fnameMatchIndex = fname.toLowerCase().indexOf(query),
                     lnameMatchIndex = lname.toLowerCase().indexOf(query),
                     nnameMatchIndex = nname.toLowerCase().indexOf(query),
                     displayfname, displaylname, displaynname;
@@ -988,7 +1009,7 b' var MembersAutoComplete = function (user'
 }
 
 
-var MentionsAutoComplete = function (divid, cont, users_list, groups_list, group_lbl, members_lbl) {
+var MentionsAutoComplete = function (divid, cont, users_list, groups_list) {
     var myUsers = users_list;
     var myGroups = groups_list;
 
@@ -1008,7 +1029,9 b' var MentionsAutoComplete = function (div'
             // Match against each name of each contact
             for (; i < l; i++) {
                 contact = myUsers[i];
-                if ((contact.fname.toLowerCase().indexOf(query) > -1) || (contact.lname.toLowerCase().indexOf(query) > -1) || (contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
+                if (((contact.fname+"").toLowerCase().indexOf(query) > -1) || 
+                	 ((contact.lname+"").toLowerCase().indexOf(query) > -1) || 
+                	 ((contact.nname) && ((contact.nname).toLowerCase().indexOf(query) > -1))) {
                     matches[matches.length] = contact;
                 }
             }
@@ -1023,6 +1046,7 b' var MentionsAutoComplete = function (div'
 
     // DataScheme for owner
     var ownerDS = new YAHOO.util.FunctionDataSource(matchUsers);
+
     ownerDS.responseSchema = {
         fields: ["id", "fname", "lname", "nname", "gravatar_lnk"]
     };
@@ -1056,12 +1080,13 b' var MentionsAutoComplete = function (div'
             	tmpl = '<div class="ac-container-wrap"><img class="perm-gravatar-ac" src="{0}"/>{1}</div>'
             	return tmpl.format(em,res)
             }
-            if (oResultData.fname != undefined) {
-                var fname = oResultData.fname,
-                    lname = oResultData.lname,
-                    nname = oResultData.nname || "",
-                    // Guard against null value
-                    fnameMatchIndex = fname.toLowerCase().indexOf(query),
+            if (oResultData.nname != undefined) {
+                var fname = oResultData.fname || "";
+                var lname = oResultData.lname || "";
+                var nname = oResultData.nname;
+                
+                // Guard against null value
+                var fnameMatchIndex = fname.toLowerCase().indexOf(query),
                     lnameMatchIndex = lname.toLowerCase().indexOf(query),
                     nnameMatchIndex = nname.toLowerCase().indexOf(query),
                     displayfname, displaylname, displaynname;
@@ -1138,7 +1163,7 b' var MentionsAutoComplete = function (div'
 		chunks.push(org.substr(max_pos)) // postfix chunk
 
 		// clean up msg2 for filtering and regex match
-		var msg2 = msg2.replace(' ','').replace('\n','');
+		var msg2 = msg2.lstrip(' ').lstrip('\n');
 
 		if(re.test(msg2)){
 			var unam = re.exec(msg2)[1];
@@ -1170,8 +1195,6 b' var MentionsAutoComplete = function (div'
 }
 
 
-
-
 /**
  * QUICK REPO MENU
  */

rhodecode/templates/admin/repos/repo_edit_perms.html

@@ -117,12 +117,7 b' YUE.onDOMReady(function () {'
         YUD.setStyle('add_perm', 'opacity', '0.6');
         YUD.setStyle('add_perm', 'cursor', 'default');
     });
-    MembersAutoComplete(
-    		  ${c.users_array|n},
-    		  ${c.users_groups_array|n},
-    		  "${_('Group')}",
-    		  "${_('members')}"
-    		);
+    MembersAutoComplete(${c.users_array|n}, ${c.users_groups_array|n});
 });
 
 </script>

rhodecode/templates/admin/repos_groups/repos_group_edit_perms.html

@@ -106,12 +106,7 b' YUE.onDOMReady(function () {'
         YUD.setStyle('add_perm', 'opacity', '0.6');
         YUD.setStyle('add_perm', 'cursor', 'default');
     });
-    MembersAutoComplete(
-            ${c.users_array|n},
-            ${c.users_groups_array|n},
-            "${_('Group')}",
-            "${_('members')}"
-          );
+    MembersAutoComplete(${c.users_array|n}, ${c.users_groups_array|n});
 });
 
 </script>

rhodecode/templates/base/root.html

@@ -36,6 +36,18 b''
 
         ## JAVASCRIPT ##
         <%def name="js()">
+            <script type="text/javascript">
+            //JS translations map
+            var TRANSLATION_MAP = {
+                'add another comment':'${_("add another comment")}',
+                'Stop following this repository':"${_('Stop following this repository')}",
+                'Start following this repository':"${_('Start following this repository')}",
+                'Group':"${_('Group')}",
+                'members':"${_('members')}"
+
+            };
+            var _TM = TRANSLATION_MAP;
+            </script>
             <script type="text/javascript" src="${h.url('/js/yui.2.9.js')}"></script>
             <!--[if lt IE 9]>
                <script language="javascript" type="text/javascript" src="${h.url('/js/excanvas.min.js')}"></script>
@@ -48,20 +60,13 b''
             <script type="text/javascript">
             var follow_base_url  = "${h.url('toggle_following')}";
 
-            //JS translations map
-            var TRANSLATION_MAP = {
-            	'add another comment':'${_("add another comment")}',
-                'Stop following this repository':"${_('Stop following this repository')}",
-                'Start following this repository':"${_('Start following this repository')}",
-            };
-
             var onSuccessFollow = function(target){
                 var f = YUD.get(target.id);
                 var f_cnt = YUD.get('current_followers_count');
 
                 if(f.getAttribute('class')=='follow'){
                     f.setAttribute('class','following');
-                    f.setAttribute('title',TRANSLATION_MAP['Stop following this repository']);
+                    f.setAttribute('title',_TM['Stop following this repository']);
 
                     if(f_cnt){
                         var cnt = Number(f_cnt.innerHTML)+1;
@@ -70,7 +75,7 b''
                 }
                 else{
                     f.setAttribute('class','follow');
-                    f.setAttribute('title',TRANSLATION_MAP['Start following this repository']);
+                    f.setAttribute('title',_TM['Start following this repository']);
                     if(f_cnt){
                         var cnt = Number(f_cnt.innerHTML)+1;
                         f_cnt.innerHTML = cnt;

rhodecode/templates/changeset/changeset.html

@@ -116,7 +116,10 b''
 	    </div>
 
     </div>
-
+    <script>
+    var _USERS_AC_DATA = ${c.users_array|n};
+    var _GROUPS_AC_DATA = ${c.users_groups_array|n};
+    </script>
     ## diff block
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block(c.changes)}

rhodecode/templates/changeset/changeset_comment_block.html

@@ -1,2 +1,4 b''
+## this is a dummy html file for partial rendering on server and sending
+## generated output via ajax after comment submit
 <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
 ${comment.comment_block(c.co)}

rhodecode/templates/changeset/changeset_file_comment.html

@@ -30,7 +30,7 b''
 
 <%def name="comment_inline_form(changeset)">
 <div id='comment-inline-form-template' style="display:none">
-  <div class="comment-inline-form">
+  <div class="comment-inline-form ac">
   %if c.rhodecode_user.username != 'default':
     <div class="overlay"><div class="overlay-text">${_('Submitting...')}</div></div>
       ${h.form(h.url('changeset_comment', repo_name=c.repo_name, revision=changeset.raw_id),class_='inline-form')}
@@ -41,7 +41,7 b''
           	_('Use @username inside this text to send notification to this RhodeCode user')))|n}
           </div>
             <div class="mentions-container" id="mentions_container_{1}"></div>
-            <textarea id="text_{1}" name="text" class="yui-ac-input"></textarea>   
+            <textarea id="text_{1}" name="text" class="yui-ac-input"></textarea>
       </div>
       <div class="comment-button">
       <input type="hidden" name="f_path" value="{0}">
@@ -115,15 +115,7 b''
 </div>
 <script>
 YUE.onDOMReady(function () {
-
-   MentionsAutoComplete(
-   'text',
-   'mentions_container',
-   ${c.users_array|n},
-   ${c.users_groups_array|n},
-   "${_('Group')}",
-   "${_('members')}"
-   ); 
+   MentionsAutoComplete('text', 'mentions_container', _USERS_AC_DATA, _GROUPS_AC_DATA);
 });
 </script>
 </%def>