codiad/components/autocomplete/init.js

/*
 *  Copyright (c) Codiad & Kent Safranski (codiad.com), distributed
 *  as-is and without warranty under the MIT License. See
 *  [root]/license.txt for more. This information must remain intact.
 */

(function (global, $) {

    var EventEmitter = ace.require('ace/lib/event_emitter').EventEmitter;
    var Range = ace.require('ace/range').Range;


    var codiad = global.codiad;

    $(function () {
        codiad.autocomplete.init();
    });

    //////////////////////////////////////////////////////////////////
    //
    // Autocomplete Component for Codiad
    // ---------------------------------
    // Show a popup with word completion suggestions.
    //
    //////////////////////////////////////////////////////////////////
    
    codiad.autocomplete = {

        wordRegex: /[^a-zA-Z_0-9\$]+/,

        isVisible: false,

        standardGoLineDownExec: null,

        standardGoLineUpExec: null,
        
        _suggestionCache: null,

        standardGoToRightExec: null,

        standardGoToLeftExec: null,

        standardIndentExec: null,

        init: function () {
            var _this = this;
            
            this.$onDocumentChange = this.onDocumentChange.bind(this);
            this.$selectNextSuggestion = this.selectNextSuggestion.bind(this);
            this.$selectPreviousSuggestion = this.selectPreviousSuggestion.bind(this);
            this.$complete = this.complete.bind(this);
            this.$hide = this.hide.bind(this);
            
            /* Catch click on suggestion */
            $('#autocomplete li').live('click', function () {
                $('#autocomplete li.active-suggestion').removeClass('active-suggestion');
                $(this).addClass('active-suggestion');
                _this.complete();
            });

            /* In debug mode, run some tests here. */
            // this._testSimpleMatchScorer();
            // this._testFuzzyMatcher();
        },

        suggest: function () {
            var _this = this;

            var cursorPosition = this._getEditor().getCursorPosition();
            var foundSuggestions = this.updateSuggestions(cursorPosition);
            if (foundSuggestions) {
                this.addListenerToOnDocumentChange();

                // Show the completion popup.
                this.show();

                // handle click-out autoclosing.
                var fn = function ( event ) {
                	let keycodes = [ 9, 10, 13 ]
                	
                	/*if( ! keycodes.includes( event.keyCode ) ) {
                		return;
                	}*/
                    _this.hide();
                    $(window).off('click', fn);
                };
                $(window).on('click', fn);
            } else {
                this.clearSuggestionCache();
            }
        },

        /* Update the suggestions for the word at the given position. Return true if
         * some suitable suggestions could be found, false if not. */
        updateSuggestions: function (position) {
            var _this = this;

            var session = this._getEditSession();

            /* Extract the word being typed. Keep only the part of the word
             * which is before the given position. It is somehow the prefix of
             * the wanted full word. Make sure we only keep one word. */
            var token = session.getTokenAt(position.row, position.column);
            if (!token) {
                /* No word at the given position. */
                this.removeSuggestions();
                return false;
            }

            var prefix = token.value.substr(0, position.column - token.start);
            prefix = prefix.split(this.wordRegex).slice(-1)[0];
            if (prefix === '') {
                /* No word at the given position. */
                this.removeSuggestions();
                return false;
            }

            /* Build and order the suggestions themselves. */
            // TODO cache suggestions and augment them incrementally.
            var suggestionsAndDistance = this.getSuggestions(position);
            var suggestions = this.rankSuggestions(prefix, suggestionsAndDistance);
            if (suggestions.length < 1) {
                /* No suitable suggestions found. */
                this.removeSuggestions();
                return false;
            }

            /* Remove the existing suggestions and populate the popup with the
             * updated ones. */
            this.removeSuggestions();
            var popupContent = $('#autocomplete #suggestions');
            $.each(suggestions, function (index, suggestion) {
                /* First get rid of the suggestion suffix. */
                suggestion = suggestion.slice(0, -1);

                var indexes = _this.getMatchIndexes(prefix, suggestion);
                $.each(indexes.reverse(), function (index, matchIndex) {
                    suggestion = suggestion.substr(0, matchIndex) +
                    '<span class="matched">' +
                    suggestion.substr(matchIndex, 1) +
                    '</span>' +
                    suggestion.substr(matchIndex + 1);
                });
                popupContent.append('<li class="suggestion">' + suggestion + '</li>');
            });

            this.selectFirstSuggestion();

            return true;
        },

        show: function () {
            this.isVisible = true;

            var popup = $('#autocomplete');
            popup.css({
                'top': this._computeTopOffset(),
                'left': this._computeLeftOffset(),
                'font-family': $('.ace_editor').css('font-family'),
                'font-size': $('.ace_editor').css('font-size')
            });
            popup.slideToggle('fast', function(){
                $(this).css('overflow', '');
            });

            this.addKeyboardCommands();
        },

        hide: function () {
            this.isVisible = false;

            $('#autocomplete').hide();
            this.removeSuggestions();
            this.clearSuggestionCache();

            this.removeListenerToOnDocumentChange();
            this.removeKeyboardCommands();
        },

        /* Return a jQuery object containing the currently selected suggestion. */
        getSelectedSuggestion: function () {
            var selectedSuggestion = $('#autocomplete li.suggestion.active-suggestion');

            if (selectedSuggestion.length < 1) {
                alert(i18n('No suggestion selected. Might be a bug.'));
            } else if (selectedSuggestion.length > 1) {
                alert(i18n('More than one suggestions selected. Might be a bug.'));
            }

            return selectedSuggestion;
        },

        selectFirstSuggestion: function () {
            var firstChild = $('li.suggestion:first-child');
            firstChild.addClass('active-suggestion');
            this._ensureVisible(firstChild, $('#autocomplete'));
        },

        selectLastSuggestion: function () {
            var lastChild = $('li.suggestion:last-child');
            lastChild.addClass('active-suggestion');
            this._ensureVisible(lastChild, $('#autocomplete'));
        },

        selectNextSuggestion: function () {
            var selectedSuggestion = this.getSelectedSuggestion();
            selectedSuggestion.removeClass('active-suggestion');
            var nextSuggestion = selectedSuggestion.next();
            if (nextSuggestion.length > 0) {
                nextSuggestion.addClass('active-suggestion');
                this._ensureVisible(nextSuggestion, $('#autocomplete'));
            } else {
                /* The currently selected suggestion is the last one.
                 * Go back to first one. */
                this.selectFirstSuggestion();
            }
        },

        selectPreviousSuggestion: function () {
            var selectedSuggestion = this.getSelectedSuggestion();
            selectedSuggestion.removeClass('active-suggestion');
            var previousSuggestion = selectedSuggestion.prev();
            if (previousSuggestion.length > 0) {
                previousSuggestion.addClass('active-suggestion');
                this._ensureVisible(previousSuggestion, $('#autocomplete'));
            } else {
                /* The currently selected suggestion is the first one.
                 * Go back to last one. */
                this.selectLastSuggestion();
            }
        },

        addListenerToOnDocumentChange: function () {
            var session = this._getEditSession();
            session.addEventListener('change', this.$onDocumentChange);
        },

        removeListenerToOnDocumentChange: function () {
            var session = this._getEditSession();
            session.removeEventListener('change', this.$onDocumentChange);
        },

        onDocumentChange: function (e) {
        	
            if ( e.data === undefined || e.data === null || e.data.text.search(/^\s+$/) !== -1) {
                this.hide();
                return;
            }

            var position = null;
            if (e.data.action === 'insertText') {
            	
            	if( codiad.autosave.saving === false ) {
                	position = e.data.range.end;
            	} else {
					var start = new Date().getTime();
					for (var i = 0; i < 1e7; i++) {
						if ((new Date().getTime() - start) > 50){
							break;
						}
					}
					position = e.data.range.end;
            	}
            } else if (e.data.action === 'removeText') {
                position = e.data.range.start;
            } else {
                alert('Unkown document change action.');
            }

            var foundSuggestions = this.updateSuggestions(position);
            if (!foundSuggestions) {
                this.hide();
            }
        },

        addKeyboardCommands: function () {
            var _this = this;
            var commandManager = this._getEditor().commands;

            /* Save the standard commands that will be overwritten. */
            this.standardGoLineDownExec = commandManager.commands.golinedown.exec;
            this.standardGoLineUpExec = commandManager.commands.golineup.exec;

            this.standardGoToRightExec = commandManager.commands.gotoright.exec;
            this.standardGoToLeftExec = commandManager.commands.gotoleft.exec;
            this.standardIndentExec = commandManager.commands.indent.exec;

            /* Overwrite with the completion specific implementations. */
            commandManager.commands.golinedown.exec = this.$selectNextSuggestion;
            commandManager.commands.golineup.exec = this.$selectPreviousSuggestion;

            commandManager.commands.gotoright.exec = this.$complete;
            commandManager.commands.gotoleft.exec = this.$hide;
            commandManager.commands.indent.exec = this.$complete;

            commandManager.addCommand({
                name: 'hideautocomplete',
                bindKey: 'Esc',
                exec: function () {
                    _this.hide();
                }
            });

            commandManager.addCommand({
                name: 'autocomplete',
                bindKey: 'Return',
                exec: this.$complete
            });
        },

        removeKeyboardCommands: function () {
            var commandManager = this._getEditor().commands;

            /* Make sure the standard exec have been initialized. */
            if (this.standardGoLineDownExec !== null) {
                commandManager.commands.golinedown.exec = this.standardGoLineDownExec;
            }

            if (this.standardGoLineUpExec !== null) {
                commandManager.commands.golineup.exec = this.standardGoLineUpExec;
            }

            if (this.standardGoToRightExec !== null) {
                commandManager.commands.gotoright.exec = this.standardGoToRightExec;
            }

            if (this.standardGoToLeftExec !== null) {
                commandManager.commands.gotoleft.exec = this.standardGoToLeftExec;
            }

            if (this.standardIndentExec !== null) {
                commandManager.commands.indent.exec = this.standardIndentExec;
            }

            commandManager.removeCommand('hideautocomplete');
            commandManager.removeCommand('autocomplete');
        },

        /* Complete the word at the given position with the currently selected
         * suggestion. Only the part of the word before the position is
         * replaced. */
        complete: function (position) {
            var editor = this._getEditor();
            var session = this._getEditSession();

            var position = editor.getCursorPosition();

            /* Get the length of the word being typed. */
            var token = session.getTokenAt(position.row, position.column);
            if (!token) {
                /* No token at the given position. */
                this.clearSuggestionCache();
                this.hide();
                editor.focus();
            }

            var prefix = token.value.substr(0, position.column - token.start);
            var prefixLength = prefix.split(this.wordRegex).slice(-1)[0].length;

            var range = new Range(position.row,
                                position.column - prefixLength,
                                position.row,
                                position.column);

            var suggestion = this.getSelectedSuggestion().text();
            session.replace(range, suggestion);

            this.hide();
            editor.focus();
        },

        /* Remove the suggestions from the Dom. */
        removeSuggestions: function () {
            $('.suggestion').remove();
        },

        /* Get suggestions of completion for the current position in the
         * document. */
        getSuggestions: function (position) {
            
            /* If suggestions are cached,
             * return them directely */
            if (this._suggestionCache) {
                return this._suggestionCache;
            }
            
            var doc = this._getDocument();

            /* FIXME For now, make suggestions on the whole file content except
             * the current token. Might be a little bit smarter, e.g., remove
             * all the keywords associated with the current language. */

            /* Get all the text, put a marker at the cursor position. The
             * marker uses word character so that it won't be discarded by a
             * word split. */
            var markerString = '__autocomplete_marker__';
            var text = doc.getLines(0, position.row - 1).join("\n") + "\n";
            var currentLine = doc.getLine(position.row);
            text += currentLine.substr(0, position.column);
            text += markerString;
            if (position.column === currentLine.length) {
                // position is at end of line, add a break line.
                text += "\n";
            }
            text += currentLine.substr(position.column + 1);
            text += doc.getLines(position.row + 1, doc.getLength()).join("\n") + "\n";

            /* Split the text into words. */
            var suggestions = text.split(this.wordRegex);

            /* Get the index of the word at the cursor position. */
            var markerIndex = 0;
            var markedWord = '';
            $.each(suggestions, function (index, value) {
                if (value.search(markerString) !== -1) {
                    markerIndex = index;
                    markedWord = value;
                    return false;
                }
            });

            /* Build an object associating the suggestions with their distance
             * to the word at cursor position. To make sure that no suggestion
             * string overrides a built-in method of the suggestionsAndDistance
             * object, suffix all the suggestions with '-'. Afterward, make
             * sure of removing that suffix before using the stored
             * suggestions! */
            var suggestionsAndDistance = {};
            $.each(suggestions, function (index, suggestion) {
                var distance = Math.abs(index - markerIndex);
                if (!suggestionsAndDistance[suggestion + '-'] ||
                    distance < suggestionsAndDistance[suggestion]) {
                    suggestionsAndDistance[suggestion + '-'] = distance;
                }
            });

            /* Remove from the suggestions the word under the cursor. */
            delete suggestionsAndDistance[markedWord + '-'];

            /* Fill the cache */
            this._suggestionCache = suggestionsAndDistance;
            
            return suggestionsAndDistance;
        },
        
        /* Clear the suggestion cache */
        clearSuggestionCache: function () {
            this._suggestionCache = null;
        },

        /* Given an object associating suggestions and their distances to the
         * word under the cursor (the prefix), return a ranked array of
         * suggestions with the best match first. The suggestions are ranked
         * based on if they match the prefix fuzzily, how much they match the
         * given prefix in the computeSimpleMatchScore sense and  on their
         * distances to the prefix. */
        rankSuggestions: function (prefix, suggestionsAndDistance) {
            /* Initialize maxScore to one to ensure removing the non matching
             * suggestions (those with a zero score). */
            var maxScore = 1;
            var suggestionsAndMatchScore = {};
            for (var suggestion in suggestionsAndDistance) {
                if (Object.prototype.hasOwnProperty.call(suggestionsAndDistance, suggestion)) {
                    var score = this.computeSimpleMatchScore(prefix, suggestion);
                    if (score > maxScore) {
                        maxScore = score;
                    }
                    suggestionsAndMatchScore[suggestion] = score;
                }
            }

            /* Remove the suggestions that do not match the prefix fuzzily. */
            for (suggestion in suggestionsAndMatchScore) {
                if (Object.prototype.hasOwnProperty.call(suggestionsAndMatchScore, suggestion)) {
                    if (!this.isMatchingFuzzily(prefix, suggestion)) {
                        delete suggestionsAndMatchScore[suggestion];
                    }
                }
            }
            
            /* Now for each suggestion we have its matching score and its
             * distance to the word under the cursor. So compute its final
             * score as a combination of both. */
            var suggestionsAndFinalScore = {};
            for (suggestion in suggestionsAndMatchScore) {
                if (Object.prototype.hasOwnProperty.call(suggestionsAndMatchScore, suggestion)) {
                    //suggestionsAndFinalScore[suggestion] = suggestionsAndMatchScore[suggestion] -
                    //                        suggestionsAndDistance[suggestion];
                    suggestionsAndFinalScore[suggestion] = suggestionsAndMatchScore[suggestion] / suggestion.length;
                }
            }

            /* Make an array of suggestions and make sure to rank them in the
             * ascending scores order. */
            var suggestions = [];
            for (suggestion in suggestionsAndFinalScore) {
                if (Object.prototype.hasOwnProperty.call(suggestionsAndFinalScore, suggestion)) {
                    suggestions.push(suggestion);
                }
            }
            
            suggestions.sort(function (firstSuggestion, secondSuggestion) {
                return suggestionsAndFinalScore[secondSuggestion] - suggestionsAndFinalScore[firstSuggestion];
            });

            return suggestions;
        },

        /* Return the number of consecutive letters starting from the first
         * letter in suggestion that match prefix. For instance,
         * this.computeSimpleMatchScore(cod, codiad) will return 3. If
         * suggestion is shorter than prefix, return a score of zero. The score
         * is computed using a Vim-like smartcase behavior. */
        computeSimpleMatchScore: function (prefix, suggestion) {
            /* Use a Vim-like smartcase behavior. If prefix is all lowercase,
             * compute the match score case insensitive, if it is not, compute
             * the score case sensitive. */
            var localSuggestion = this._isLowerCase(prefix) ? suggestion.toLowerCase() : suggestion;

            if (localSuggestion.length < prefix.length) {
                return 0;
            } else if (localSuggestion === prefix) {
                return prefix.length;
            } else {
                var score = 0;
                for (var i = 0; i < prefix.length; ++i) {
                    if (localSuggestion[i] === prefix[i]) {
                        ++score;
                    } else {
                        break;
                    }
                }

                return score;
            }
        },

        /* Return true if suggestion fuzzily matches prefix. Because everybody
         * loves fuzzy matches.
         * For instance, this.isMatchingFuzzily(mlf, mylongfunctionname)
         * will return true. The score is computed using a Vim-like smartcase
         * behavior. */
        isMatchingFuzzily: function (prefix, suggestion) {
            /* Use a Vim-like smartcase behavior. If prefix is all lowercase,
             * compute the match score case insensitive, if it is not, compute
             * the score case sensitive. */
            var localSuggestion = this._isLowerCase(prefix) ? suggestion.toLowerCase() : suggestion;

            /* Escape the characters that have a special meaning for regex in
             * the prefix. */
            var localPrefix = prefix.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");

            var fuzzyRegex = '^.*?';
            for (var i = 0; i < localPrefix.length; ++i) {
                if (localPrefix[i] === '\\') {
                    fuzzyRegex += localPrefix[i];
                    ++i;
                }

                fuzzyRegex += localPrefix[i];
                fuzzyRegex += '.*?';
            }

            if (localSuggestion.search(fuzzyRegex) !== -1) {
                return true;
            } else {
                return false;
            }
        },

        getMatchIndexes: function (prefix, suggestion) {
            /* Use a Vim-like smartcase behavior. If prefix is all lowercase,
             * find the match indexes case insensitive, if it is not, find them
             * case sensitive. */
            var localSuggestion = this._isLowerCase(prefix) ? suggestion.toLowerCase() : suggestion;

            var matchIndexes = [];
            var startIndex = 0;
            for (var i = 0; i < prefix.length; ++i) {
                var index = localSuggestion.indexOf(prefix[i], startIndex);
                matchIndexes.push(index);
                startIndex = index + 1;
            }

            return matchIndexes;
        },

        _isLowerCase: function (str) {
            return (str.toLowerCase() === str);
        },

        _ensureVisible: function (el, parent) {
            var offset = 1;
            var paneMin = parent.scrollTop();
            var paneMax = paneMin + parent.innerHeight();
            var itemMin = el.position().top + paneMin - offset;
            var itemMax = itemMin + el.outerHeight() + 2*offset;
            if (itemMax > paneMax) {
                parent.stop().animate({
                    scrollTop: itemMax - parent.innerHeight()
                }, 100);
            } else if (itemMin < paneMin) {
                parent.stop().animate({
                    scrollTop: itemMin
                }, 100);
            }
        },

        _computeTopOffset: function () {
            /* FIXME How to handle multiple cursors? This seems to compute the
             * offset using the position of the last created cursor. */
            var cursor = $('.ace_cursor');
            if (cursor.length > 0) {
                var fontSize = codiad.editor.getActive().container.style.fontSize.replace('px', '');
                var interLine = 1.7;
                cursor = $(cursor[0]);
                var top = cursor.offset().top + fontSize * interLine;
                return top;
            }
        },

        _computeLeftOffset: function () {
            /* FIXME How to handle multiple cursors? This seems to compute the
             * offset using the position of the last created cursor. */
            var cursor = $('.ace_cursor');
            if (cursor.length > 0) {
                cursor = $(cursor[0]);
                var left = cursor.offset().left;
                return left;
            }
        },

        /* Set of helper methods to manipulate the editor. */
        _getEditor: function () {
            return codiad.editor.getActive();
        },

        _getEditSession: function () {
            return codiad.editor.getActive().getSession();
        },

        _getDocument: function () {
            return codiad.editor.getActive().getSession().getDocument();
        },

        /* Some unit tests. */
        //i don't need to translate this... this is just for testing things... 
        _testSimpleMatchScorer: function () {
            var prefix = 'myprefix';
            var suggestion = 'myprefixisshort';
            var score = this.computeSimpleMatchScore(prefix, suggestion);
            if (score !== 8) {
                alert('_testSimpleMatchScorer lowercase test failed.');
            }

            prefix = 'MYPREFIX';
            suggestion = 'MYPREFIXISSHORT';
            score = this.computeSimpleMatchScore(prefix, suggestion);
            if (score !== 8) {
                alert('_testSimpleMatchScorer uppercase test failed.');
            }

            prefix = 'myPrefix';
            suggestion = 'myprefixisshort';
            score = this.computeSimpleMatchScore(prefix, suggestion);
            if (score !== 2) {
                alert('_testSimpleMatchScorer mixed case vs. lowercase test failed.');
            }

            prefix = 'myPrefixIs';
            suggestion = 'myPrefixIsShort';
            score = this.computeSimpleMatchScore(prefix, suggestion);
            if (score !== 10) {
                alert('_testSimpleMatchScorer mixed case test failed.');
            }
        },

        _testFuzzyMatcher: function () {
            var isMatching = this.isMatchingFuzzily('mlf', 'mylongfunctionname');
            if (!isMatching) {
                alert('_testFuzzyMatcher mlf vs. mylongfunctionname failed.');
            }

            isMatching = this.isMatchingFuzzily('mLn', 'myLongFunctionName');
            if (!isMatching) {
                alert('_testFuzzyMatcher mLn vs. myLongFunctionName failed.');
            }
            isMatching = this.isMatchingFuzzily('mLFuny', 'myLongFunctionName');
            if (isMatching) {
                alert('_testFuzzyMatcher mLFuny. myLongFunctionName failed.');
            }
        }

    };

})(this, jQuery);