Changeset - a5b32cea5c03
Parent rev.
Child rev.
[Not reviewed]
default
0 1 0
Thomas De Schampheleire - 10 years ago 2015-06-30 17:53:40
thomas.de.schampheleire@gmail.com
autocomplete: introduce function to set up basic autocomplete functionality

To set up an autocomplete instance, there is quite some boilerplate that is
with minimal differences between instances. Move this to a helper function
to reduce duplication, while still allowing each specific case to tweak
behavior.
1 file changed with 30 insertions and 57 deletions:
kallithea/public/js/base.js
30
57
0 comments (0 inline, 0 general)
kallithea/public/js/base.js
➞
Show inline comments
 
@@ -1218,62 +1218,56 @@ var autocompleteFormatter = function (oR
 
        if (nnameMatchIndex > -1) {
 
            displaynname = "(" + autocompleteHighlightMatch(nname, query, nnameMatchIndex) + ")";
 
        } else {
 
            displaynname = nname ? "(" + nname + ")" : "";
 
        }
 

			




	
	
	
		
 
        return autocompleteGravatar(displayfname + " " + displaylname + " " + displaynname, oResultData.gravatar_lnk, oResultData.gravatar_size);

			




	
	
	
		
 
    } else {

			




	
	
	
		
 
        return '';

			




	
	
	
		
 
    }

			




	
	
	
		
 
};

			




	
	
	
		
 

			




	
	
	
		
 
// Generate a basic autocomplete instance that can be tweaked further by the caller

			




	
	
	
		
 
var autocompleteCreate = function (inputElement, container, matchFunc) {

			




	
	
	
		
 
    var datasource = new YAHOO.util.FunctionDataSource(matchFunc);

			




	
	
	
		
 

			




	
	
	
		
 
    var autocomplete = new YAHOO.widget.AutoComplete(inputElement, container, datasource);

			




	
	
	
		
 
    autocomplete.useShadow = false;

			




	
	
	
		
 
    autocomplete.resultTypeList = false;

			




	
	
	
		
 
    autocomplete.animVert = false;

			




	
	
	
		
 
    autocomplete.animHoriz = false;

			




	
	
	
		
 
    autocomplete.animSpeed = 0.1;

			




	
	
	
		
 
    autocomplete.formatResult = autocompleteFormatter;

			




	
	
	
		
 

			




	
	
	
		
 
    return autocomplete;

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
var _MembersAutoComplete = function (divid, cont, users_list, groups_list) {

			




	
	
	
		
 

			




	
	
	
		
 
    var matchUsers = function (sQuery) {

			




	
	
	
		
 
        return autocompleteMatchUsers(sQuery, users_list);

			




	
	
	
		
 
    }

			




	
	
	
		
 
    var matchGroups = function (sQuery) {

			




	
	
	
		
 
        return autocompleteMatchGroups(sQuery, groups_list);

			




	
	
	
		
 
    }

			




	
	
	
		
 
    var matchAll = function (sQuery) {

			




	
	
	
		
 
        var u = matchUsers(sQuery);

			




	
	
	
		
 
        var g = matchGroups(sQuery);

			




	
	
	
		
 
        return u.concat(g);

			




	
	
	
		
 
    };

			




	
	
	
		
 

			




	
	
	
		
 
    // DataScheme for members

			




	
	
	
		
 
    var memberDS = new YAHOO.util.FunctionDataSource(matchAll);

			




	
	
	
		
 

			




	
	
	
		
 
    // DataScheme for owner

			




	
	
	
		
 
    var ownerDS = new YAHOO.util.FunctionDataSource(matchUsers);

			




	
	
	
		
 
    var membersAC = autocompleteCreate(divid, cont, matchAll);

			




	
	
	
		
 

			




	
	
	
		
 
    // Instantiate AutoComplete for perms

			




	
	
	
		
 
    var membersAC = new YAHOO.widget.AutoComplete(divid, cont, memberDS);

			




	
	
	
		
 
    membersAC.useShadow = false;

			




	
	
	
		
 
    membersAC.resultTypeList = false;

			




	
	
	
		
 
    membersAC.animVert = false;

			




	
	
	
		
 
    membersAC.animHoriz = false;

			




	
	
	
		
 
    membersAC.animSpeed = 0.1;

			




	
	
	
		
 

			




	
	
	
		
 
    // Instantiate AutoComplete for owner

			




	
	
	
		
 
    var ownerAC = new YAHOO.widget.AutoComplete("user", "owner_container", ownerDS);

			




	
	
	
		
 
    ownerAC.useShadow = false;

			




	
	
	
		
 
    ownerAC.resultTypeList = false;

			




	
	
	
		
 
    ownerAC.animVert = false;

			




	
	
	
		
 
    ownerAC.animHoriz = false;

			




	
	
	
		
 
    ownerAC.animSpeed = 0.1;

			




	
	
	
		
 

			




	
	
	
		
 
    membersAC.formatResult = autocompleteFormatter;

			




	
	
	
		
 
    ownerAC.formatResult = autocompleteFormatter;

			




	
	
	
		
 
    var ownerAC = autocompleteCreate("user", "owner_container", matchUsers);

			




	
	
	
		
 

			




	
	
	
		
 
    // Handler for selection of an entry

			




	
	
	
		
 
    var itemSelectHandler = function (sType, aArgs) {

			




	
	
	
		
 
        var nextId = divid.split('perm_new_member_name_')[1];

			




	
	
	
		
 
        var myAC = aArgs[0]; // reference back to the AC instance

			




	
	
	
		
 
        var elLI = aArgs[1]; // reference to the selected LI element

			




	
	
	
		
 
        var oData = aArgs[2]; // object literal of selected item's result data

			




	
	
	
		
 
        //fill the autocomplete with value

			




	
	
	
		
 
        if (oData.nname != undefined) {

			




	
	
	
		
 
            //users

			




	
	
	
		
 
            myAC.getInputEl().value = oData.nname;

			




	
	
	
		
 
            $('#perm_new_member_type_'+nextId).val('user');

			




	
	
		
 
@@ -1291,70 +1285,60 @@ var _MembersAutoComplete = function (div

			




	
	
	
		
 

			




	
	
	
		
 
var MentionsAutoComplete = function (divid, cont, users_list) {

			




	
	
	
		
 

			




	
	
	
		
 
    var matchUsers = function (sQuery) {

			




	
	
	
		
 
            var org_sQuery = sQuery;

			




	
	
	
		
 
            if(this.mentionQuery == null){

			




	
	
	
		
 
                return []

			




	
	
	
		
 
            }

			




	
	
	
		
 
            sQuery = this.mentionQuery;

			




	
	
	
		
 
            return autocompleteMatchUsers(sQuery, users_list);

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    // DataScheme for owner

			




	
	
	
		
 
    var ownerDS = new YAHOO.util.FunctionDataSource(matchUsers);

			




	
	
	
		
 

			




	
	
	
		
 
    // Instantiate AutoComplete for mentions

			




	
	
	
		
 
    var ownerAC = new YAHOO.widget.AutoComplete(divid, cont, ownerDS);

			




	
	
	
		
 
    ownerAC.useShadow = false;

			




	
	
	
		
 
    ownerAC.resultTypeList = false;

			




	
	
	
		
 
    ownerAC.suppressInputUpdate = true;

			




	
	
	
		
 
    ownerAC.animVert = false;

			




	
	
	
		
 
    ownerAC.animHoriz = false;

			




	
	
	
		
 
    ownerAC.animSpeed = 0.1;

			




	
	
	
		
 

			




	
	
	
		
 
    // Custom formatter to highlight the matching letters

			




	
	
	
		
 
    ownerAC.formatResult = function (oResultData, sQuery, sResultMatch) {

			




	
	
	
		
 
    var mentionsAC = autocompleteCreate(divid, cont, matchUsers);

			




	
	
	
		
 
    mentionsAC.suppressInputUpdate = true;

			




	
	
	
		
 
    // Overwrite formatResult to take into account mentionQuery

			




	
	
	
		
 
    mentionsAC.formatResult = function (oResultData, sQuery, sResultMatch) {

			




	
	
	
		
 
        var org_sQuery = sQuery;

			




	
	
	
		
 
        if (this.dataSource.mentionQuery != null) {

			




	
	
	
		
 
            sQuery = this.dataSource.mentionQuery;

			




	
	
	
		
 
        }

			




	
	
	
		
 
        return autocompleteFormatter(oResultData, sQuery, sResultMatch);

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    // Handler for selection of an entry

			




	
	
	
		
 
    if(ownerAC.itemSelectEvent){

			




	
	
	
		
 
        ownerAC.itemSelectEvent.subscribe(function (sType, aArgs) {

			




	
	
	
		
 
    if(mentionsAC.itemSelectEvent){

			




	
	
	
		
 
        mentionsAC.itemSelectEvent.subscribe(function (sType, aArgs) {

			




	
	
	
		
 
            var myAC = aArgs[0]; // reference back to the AC instance

			




	
	
	
		
 
            var elLI = aArgs[1]; // reference to the selected LI element

			




	
	
	
		
 
            var oData = aArgs[2]; // object literal of selected item's result data

			




	
	
	
		
 
            //Replace the mention name with replaced

			




	
	
	
		
 
            var re = new RegExp();

			




	
	
	
		
 
            var org = myAC.getInputEl().value;

			




	
	
	
		
 
            var chunks = myAC.dataSource.chunks

			




	
	
	
		
 
            // replace middle chunk(the search term) with actuall  match

			




	
	
	
		
 
            chunks[1] = chunks[1].replace('@'+myAC.dataSource.mentionQuery,

			




	
	
	
		
 
                                          '@'+oData.nname+' ');

			




	
	
	
		
 
            myAC.getInputEl().value = chunks.join('')

			




	
	
	
		
 
            myAC.getInputEl().focus(); // Y U NO WORK !?

			




	
	
	
		
 
        });

			




	
	
	
		
 
    }

			




	
	
	
		
 

			




	
	
	
		
 
    // in this keybuffer we will gather current value of search !

			




	
	
	
		
 
    // since we need to get this just when someone does `@` then we do the

			




	
	
	
		
 
    // search

			




	
	
	
		
 
    ownerAC.dataSource.chunks = [];

			




	
	
	
		
 
    ownerAC.dataSource.mentionQuery = null;

			




	
	
	
		
 
    mentionsAC.dataSource.chunks = [];

			




	
	
	
		
 
    mentionsAC.dataSource.mentionQuery = null;

			




	
	
	
		
 

			




	
	
	
		
 
    ownerAC.get_mention = function(msg, max_pos) {

			




	
	
	
		
 
    mentionsAC.get_mention = function(msg, max_pos) {

			




	
	
	
		
 
        var org = msg;

			




	
	
	
		
 
        // Must match utils2.py MENTIONS_REGEX.

			




	
	
	
		
 
        // Only matching on string up to cursor, so it must end with $

			




	
	
	
		
 
        var re = new RegExp('(?:^|[^a-zA-Z0-9])@([a-zA-Z0-9][-_.a-zA-Z0-9]*[a-zA-Z0-9])$')

			




	
	
	
		
 
        var chunks  = [];

			




	
	
	
		
 

			




	
	
	
		
 
        // cut first chunk until current pos

			




	
	
	
		
 
        var to_max = msg.substr(0, max_pos);

			




	
	
	
		
 
        var at_pos = Math.max(0,to_max.lastIndexOf('@')-1);

			




	
	
	
		
 
        var msg2 = to_max.substr(at_pos);

			




	
	
	
		
 

			




	
	
	
		
 
        chunks.push(org.substr(0,at_pos))// prefix chunk

			




	
	
		
 
@@ -1367,32 +1351,32 @@ var MentionsAutoComplete = function (div

			




	
	
	
		
 
        if(re.test(msg2)){

			




	
	
	
		
 
            var unam = re.exec(msg2)[1];

			




	
	
	
		
 
            return [unam, chunks];

			




	
	
	
		
 
        }

			




	
	
	
		
 
        return [null, null];

			




	
	
	
		
 
    };

			




	
	
	
		
 

			




	
	
	
		
 
    var $divid = $('#'+divid);

			




	
	
	
		
 
    $divid.keyup(function(e){

			




	
	
	
		
 
            var currentMessage = $divid.val();

			




	
	
	
		
 
            var currentCaretPosition = $divid[0].selectionStart;

			




	
	
	
		
 

			




	
	
	
		
 
            var unam = ownerAC.get_mention(currentMessage, currentCaretPosition);

			




	
	
	
		
 
            var unam = mentionsAC.get_mention(currentMessage, currentCaretPosition);

			




	
	
	
		
 
            var curr_search = null;

			




	
	
	
		
 
            if(unam[0]){

			




	
	
	
		
 
                curr_search = unam[0];

			




	
	
	
		
 
            }

			




	
	
	
		
 

			




	
	
	
		
 
            ownerAC.dataSource.chunks = unam[1];

			




	
	
	
		
 
            ownerAC.dataSource.mentionQuery = curr_search;

			




	
	
	
		
 
            mentionsAC.dataSource.chunks = unam[1];

			




	
	
	
		
 
            mentionsAC.dataSource.mentionQuery = curr_search;

			




	
	
	
		
 
        });

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
var addReviewMember = function(id,fname,lname,nname,gravatar_link,gravatar_size){

			




	
	
	
		
 
    var displayname = "{0} {1}".format(fname, lname);

			




	
	
	
		
 
    var gravatarelm = gravatar(gravatar_link, gravatar_size, "");

			




	
	
	
		
 
    // WARNING: the HTML below is duplicate with

			




	
	
	
		
 
    // kallithea/templates/pullrequests/pullrequest_show.html

			




	
	
	
		
 
    // If you change something here it should be reflected in the template too.

			




	
	
	
		
 
    var element = (

			




	
	
	
		
 
        '     <li id="reviewer_{2}">\n'+

			




	
	
	
		
 
        '       <div class="reviewers_member">\n'+

			




	
	
		
 
@@ -1424,37 +1408,26 @@ var removeReviewMember = function(review

			




	
	
	
		
 
    $li.find('div div').css("text-decoration", "line-through");

			




	
	
	
		
 
    $li.find('input').attr('name', 'review_members_removed');

			




	
	
	
		
 
    $li.find('.reviewer_member_remove').replaceWith('&nbsp;(remove not saved)');

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
/* activate auto completion of users as PR reviewers */

			




	
	
	
		
 
var PullRequestAutoComplete = function (divid, cont, users_list) {

			




	
	
	
		
 

			




	
	
	
		
 
    var matchUsers = function (sQuery) {

			




	
	
	
		
 
        return autocompleteMatchUsers(sQuery, users_list);

			




	
	
	
		
 
    };

			




	
	
	
		
 

			




	
	
	
		
 
    // DataScheme for owner

			




	
	
	
		
 
    var ownerDS = new YAHOO.util.FunctionDataSource(matchUsers);

			




	
	
	
		
 

			




	
	
	
		
 
    // Instantiate AutoComplete for mentions

			




	
	
	
		
 
    var reviewerAC = new YAHOO.widget.AutoComplete(divid, cont, ownerDS);

			




	
	
	
		
 
    reviewerAC.useShadow = false;

			




	
	
	
		
 
    reviewerAC.resultTypeList = false;

			




	
	
	
		
 
    var reviewerAC = autocompleteCreate(divid, cont, matchUsers);

			




	
	
	
		
 
    reviewerAC.suppressInputUpdate = true;

			




	
	
	
		
 
    reviewerAC.animVert = false;

			




	
	
	
		
 
    reviewerAC.animHoriz = false;

			




	
	
	
		
 
    reviewerAC.animSpeed = 0.1;

			




	
	
	
		
 

			




	
	
	
		
 
    reviewerAC.formatResult = autocompleteFormatter;

			




	
	
	
		
 

			




	
	
	
		
 
    // Handler for selection of an entry

			




	
	
	
		
 
    if(reviewerAC.itemSelectEvent){

			




	
	
	
		
 
        reviewerAC.itemSelectEvent.subscribe(function (sType, aArgs) {

			




	
	
	
		
 
            var myAC = aArgs[0]; // reference back to the AC instance

			




	
	
	
		
 
            var elLI = aArgs[1]; // reference to the selected LI element

			




	
	
	
		
 
            var oData = aArgs[2]; // object literal of selected item's result data

			




	
	
	
		
 
    

			




	
	
	
		
 
            addReviewMember(oData.id, oData.fname, oData.lname, oData.nname,

			




	
	
	
		
 
                            oData.gravatar_lnk, oData.gravatar_size);

			




	
	
	
		
 
            $('#user').val('');

			




	
	
	
		
 
        });

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2025 by various authors & licensed under GPLv3.