jquery.mentionsInput.js

/*
 * Mentions Input
 * Version 1.0.2
 * Written by: Kenneth Auchenberg (Podio)
 *
 * Using underscore.js
 *
 * License: MIT License - http://www.opensource.org/licenses/mit-license.php
 */

(function ($, _, undefined) {

    // Settings
    var KEY = { BACKSPACE: 8, TAB: 9, RETURN: 13, ESC: 27, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, COMMA: 188, SPACE: 32, HOME: 36, END: 35 }; // Keys "enum"
    var defaultSettings = {
        triggerChar: '@',
        onDataRequest: $.noop,
        minChars: 2,
        showAvatars: true,
        elastic: true,
        display: 'name',
        parseValue: function (item, triggerChar) { return item.value; },
        onCaret: true,
        enableHighlight: true,
        classes: {
            autoCompleteItemActive: "active"
        },
        templates: {
            //Element to wrap the textarea, and soon to be created div + hidden inputs
            wrapper: _.template('<div class="mentions-input-box"></div>'),

            // Autocomplete elements
            autocompleteList: _.template('<div class="mentions-autocomplete-list"></div>'),
            autocompleteListItem: _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %></li>'),
            autocompleteListItemAvatar: _.template('<img  src="<%= avatar %>" />'),
            autocompleteListItemIcon: _.template('<div class="icon <%= icon %>"></div>'),

            // <div> layered under the <textarea>
            mentionsOverlay: _.template('<div class="mentions"><div></div></div>'),

            // Syntax for .mentionsInput('val') which will probably be sent to the server
            mentionItemSyntax: _.template('<%= triggerChar %>[<%= value %>](<%= type %>:<%= id %>)'),

            // Structure for highlighting the text in the
            mentionItemHighlight: _.template('<strong class="<%= type %> mention-highlight" data-id="<%= id %>" data-name="<%= name %>" data-avatar="<%= avatar %>"><span><%= value %></span></strong>'),
            mentionItemNoHighlight: _.template('<strong class="<%= type %>" data-id="<%= id %>" data-name="<%= name %>" data-avatar="<%= avatar %>"><span><%= value %></span></strong>')
        }
    };

    var utils = {
        htmlEncode: function (str) {
            return _.escape(str);
        },
        highlightTerm: function (value, term) {
            if (!term && !term.length) {
                return value;
            }
            return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
        },
        setCaratPosition: function (domNode, caretPos) {
            if (domNode.createTextRange) {
                var range = domNode.createTextRange();
                range.move('character', caretPos);
                range.select();
            } else {
                if (domNode.selectionStart) {
                    domNode.focus();
                    domNode.setSelectionRange(caretPos, caretPos);
                } else {
                    domNode.focus();
                }
            }
        },
        getCaratPosition: function (domNode) {
            if (domNode.selectionStart) {
                return domNode.selectionStart;
            }
            else if (domNode.ownerDocument.selection) {
                var range = domNode.ownerDocument.selection.createRange();
                if (!range) return 0;
                var textrange = domNode.createTextRange();
                var textrange2 = textrange.duplicate();

                textrange.moveToBookmark(range.getBookmark());
                textrange2.setEndPoint('EndToStart', textrange);
                return textrange2.text.length;
            }
        },
        getCaratOffset: function ($el) {
            // This is taken straight from live (as of Sep 2012) GitHub code. The
            // technique is known around the web. Just google it. Github's is quite
            // succint though. NOTE: relies on selectionEnd, which as far as IE is concerned,
            // it'll only work on 9+. Good news is nothing will happen if the browser
            // doesn't support it.
            var a, b, c, d, e, f, g, h, i, j, k;
            if (!(i = $el[0])) return;
            if (!$(i).is("textarea")) return;
            if (i.selectionEnd == null) return;
            g = {
                position: "absolute",
                overflow: "auto",
                whiteSpace: "pre-wrap",
                wordWrap: "break-word",
                boxSizing: "content-box",
                top: 0,
                left: -9999
            }, h = ["boxSizing", "fontFamily", "fontSize", "fontStyle", "fontVariant", "fontWeight", "height", "letterSpacing", "lineHeight", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "textDecoration", "textIndent", "textTransform", "width", "word-spacing"];
            for (j = 0, k = h.length; j < k; j++) e = h[j], g[e] = $(i).css(e);
            return c = document.createElement("div"), $(c).css(g), $(i).after(c), b = document.createTextNode(i.value.substring(0, i.selectionEnd)), a = document.createTextNode(i.value.substring(i.selectionEnd)), d = document.createElement("span"), d.innerHTML = "&nbsp;", c.appendChild(b), c.appendChild(d), c.appendChild(a), c.scrollTop = i.scrollTop, f = $(d).position(), $(c).remove(), f
        },

        rtrim: function (string) {
            return string.replace(/\s+$/, "");
        }
    };

    var MentionsInput = function (settings) {

        var mentionsCollection = [];
        var autocompleteItemCollection = {};
        var inputBuffer = [];
        var currentDataQuery = ''; //https://github.com/podio/jquery-mentions-input/pull/44
        var domInput, elmInputBox, elmInputWrapper, elmAutocompleteList, elmWrapperBox,
            elmMentionsOverlay, elmActiveAutoCompleteItem, currentTriggerChar;

        settings = $.extend(true, {}, defaultSettings, settings);

        function initTextarea() {
            elmInputBox = $(domInput);

            if (elmInputBox.attr('data-mentions-input') == 'true') {
                return;
            }

            elmInputWrapper = elmInputBox.parent();
            elmWrapperBox = $(settings.templates.wrapper());
            elmInputBox.wrapAll(elmWrapperBox);
            elmWrapperBox = elmInputWrapper.find('> div');

            elmInputBox.attr('data-mentions-input', 'true');
            elmInputBox.bind('keydown', onInputBoxKeyDown);
            elmInputBox.bind('keypress', onInputBoxKeyPress);
            elmInputBox.bind('input', onInputBoxInput);
            elmInputBox.bind('click', onInputBoxClick);
            elmInputBox.bind('blur', onInputBoxBlur);

            // Elastic textareas, internal setting for the Dispora guys
            if (settings.elastic) {
                elmInputBox.elastic();
            }

        }

        function initAutocomplete() {
            elmAutocompleteList = $(settings.templates.autocompleteList());
            elmAutocompleteList.appendTo(elmWrapperBox);
            elmAutocompleteList.delegate('li', 'mousedown', onAutoCompleteItemClick);
        }

        function initMentionsOverlay() {
            elmMentionsOverlay = $(settings.templates.mentionsOverlay());
            elmMentionsOverlay.prependTo(elmWrapperBox);
        }

        function updateValues() {
            var syntaxMessage = getInputBoxValue();

            _.each(mentionsCollection, function (mention) {
                var textSyntax = settings.templates.mentionItemSyntax(_.extend({}, mention, { value: utils.htmlEncode(mention.value) }));
                syntaxMessage = syntaxMessage.replace(mention.value, textSyntax);
            });

            var mentionText = utils.htmlEncode(syntaxMessage);

            _.each(mentionsCollection, function (mention) {
                var formattedMention = _.extend({}, mention, { value: utils.htmlEncode(mention.value) });
                var textSyntax = settings.templates.mentionItemSyntax(formattedMention);

                var textHighlight =
                    settings.enableHighlight
                        ? settings.templates.mentionItemHighlight(formattedMention)
                        : settings.templates.mentionItemNoHighlight(formattedMention);

                mentionText = mentionText.replace(textSyntax, textHighlight);
            });

            mentionText = mentionText.replace(/\n/g, '<br />');
            mentionText = mentionText.replace(/ {2}/g, '&nbsp; ');

            elmInputBox.data('messageText', syntaxMessage);
            elmInputBox.trigger('updated');
            elmMentionsOverlay.find('div').html(mentionText);
        }

        function resetBuffer() {
            inputBuffer = [];
        }

        function updateMentionsCollection() {
            var inputText = getInputBoxValue();

            mentionsCollection = _.reject(mentionsCollection, function (mention, index) {
                return !mention.value || inputText.indexOf(mention.value) == -1;
            });
            mentionsCollection = _.compact(mentionsCollection);
        }

        function addMention(mention) {

            var currentMessage = getInputBoxValue();

            var currentCaratPosition = utils.getCaratPosition(elmInputBox[0]);
            var startMentionPosition = currentMessage.substr(0, currentCaratPosition).lastIndexOf(currentTriggerChar);
            var endMentionPosition = startMentionPosition + currentDataQuery.length;

            var start = currentMessage.substr(0, startMentionPosition);
            var end = currentMessage.substr(endMentionPosition + 1, currentMessage.length);
            var startEndIndex = (start + mention.value).length + 1;

            mentionsCollection.push(
              _.extend({}, mention, { triggerChar: currentTriggerChar })
            );

            // Cleaning before inserting the value, otherwise auto-complete would be triggered with "old" inputbuffer
            resetBuffer();
            currentDataQuery = '';
            hideAutoComplete();

            // Mentions & syntax message
            var updatedMessageText = start + mention.value + ' ' + end;
            elmInputBox.val(updatedMessageText);
            elmInputBox.trigger('mention');
            updateValues();

            // Set correct focus and selection
            elmInputBox.focus();
            utils.setCaratPosition(elmInputBox[0], startEndIndex);
        }

        function getInputBoxValue() {
            return $.trim(elmInputBox.val());
        }

        function onAutoCompleteItemClick(e) {
            var elmTarget = $(this);
            var mention = autocompleteItemCollection[elmTarget.attr('data-uid')];

            addMention(mention);

            return false;
        }

        function onInputBoxClick(e) {
            resetBuffer();
        }

        function onInputBoxBlur(e) {
            hideAutoComplete();
        }

        function checkTriggerChar(inputBuffer, triggerChar) {
            var triggerCharIndex = _.lastIndexOf(inputBuffer, triggerChar);
            if (triggerCharIndex > -1) {
                currentDataQuery = inputBuffer.slice(triggerCharIndex + 1).join('');
                _.defer(_.bind(doSearch, this, currentDataQuery, triggerChar));
            }
        }

        function onInputBoxInput(e) {
            updateValues();
            updateMentionsCollection();
            hideAutoComplete();


            if (_.isArray(settings.triggerChar)) {
                _.each(settings.triggerChar, function (triggerChar) {
                    checkTriggerChar(inputBuffer, triggerChar);
                });
            } else {
                checkTriggerChar(inputBuffer, settings.triggerChar);
            }

        }

        function onInputBoxKeyPress(e) {
            if (e.keyCode !== KEY.BACKSPACE) {
                var typedValue = String.fromCharCode(e.which || e.keyCode);
                inputBuffer.push(typedValue);
            }
        }

        function onInputBoxKeyDown(e) {

            // This also matches HOME/END on OSX which is CMD+LEFT, CMD+RIGHT
            if (e.keyCode == KEY.LEFT || e.keyCode == KEY.RIGHT || e.keyCode == KEY.HOME || e.keyCode == KEY.END) {
                // Defer execution to ensure carat pos has changed after HOME/END keys
                _.defer(resetBuffer);

                // IE9 doesn't fire the oninput event when backspace or delete is pressed. This causes the highlighting
                // to stay on the screen whenever backspace is pressed after a highlighed word. This is simply a hack
                // to force updateValues() to fire when backspace/delete is pressed in IE9.
                if (navigator.userAgent.indexOf("MSIE 9") > -1) {
                    _.defer(updateValues);
                }

                return;
            }

            if (e.keyCode == KEY.BACKSPACE) {
                inputBuffer = inputBuffer.slice(0, -1 + inputBuffer.length); // Can't use splice, not available in IE
                return;
            }

            if (!elmAutocompleteList.is(':visible')) {
                return true;
            }

            switch (e.keyCode) {
                case KEY.UP:
                case KEY.DOWN:
                    var elmCurrentAutoCompleteItem = null;
                    if (e.keyCode == KEY.DOWN) {
                        if (elmActiveAutoCompleteItem && elmActiveAutoCompleteItem.length) {
                            elmCurrentAutoCompleteItem = elmActiveAutoCompleteItem.next();
                        } else {
                            elmCurrentAutoCompleteItem = elmAutocompleteList.find('li').first();
                        }
                    } else {
                        elmCurrentAutoCompleteItem = $(elmActiveAutoCompleteItem).prev();
                    }

                    if (elmCurrentAutoCompleteItem.length) {
                        selectAutoCompleteItem(elmCurrentAutoCompleteItem);
                    }

                    return false;

                case KEY.RETURN:
                case KEY.TAB:
                    if (elmActiveAutoCompleteItem && elmActiveAutoCompleteItem.length) {
                        elmActiveAutoCompleteItem.trigger('mousedown');
                        return false;
                    }

                    break;
            }

            return true;
        }

        function hideAutoComplete() {
            elmActiveAutoCompleteItem = null;
            elmAutocompleteList.empty().hide();
        }

        function selectAutoCompleteItem(elmItem) {
            elmItem.addClass(settings.classes.autoCompleteItemActive);
            elmItem.siblings().removeClass(settings.classes.autoCompleteItemActive);

            elmActiveAutoCompleteItem = elmItem;
        }

        function populateDropdown(query, results) {
            elmAutocompleteList.show();

            // Filter items that has already been mentioned
            var mentionValues = _.pluck(mentionsCollection, 'value');
            results = _.reject(results, function (item) {
                return _.include(mentionValues, item.name);
            });

            if (!results.length) {
                hideAutoComplete();
                return;
            }

            elmAutocompleteList.empty();
            var elmDropDownList = $("<ul>").appendTo(elmAutocompleteList).hide();

            _.each(results, function (item, index) {
                var itemUid = _.uniqueId('mention_');

                autocompleteItemCollection[itemUid] = _.extend({}, item, { value: settings.parseValue(item, currentTriggerChar) });

                var elmListItem = $(settings.templates.autocompleteListItem({
                    'id': utils.htmlEncode(item.id),
                    'display': utils.htmlEncode(item[settings.display]),
                    'type': utils.htmlEncode(item.type),
                    'content': utils.highlightTerm(utils.htmlEncode((item.name)), query)
                })).attr('data-uid', itemUid);

                if (index === 0) {
                    selectAutoCompleteItem(elmListItem);
                }

                if (settings.showAvatars) {
                    var elmIcon;

                    if (item.avatar) {
                        elmIcon = $(settings.templates.autocompleteListItemAvatar({ avatar: item.avatar }));
                    } else {
                        elmIcon = $(settings.templates.autocompleteListItemIcon({ icon: item.icon }));
                    }
                    elmIcon.prependTo(elmListItem);
                }
                elmListItem = elmListItem.appendTo(elmDropDownList);
            });

            elmAutocompleteList.show();
            if (settings.onCaret) positionAutocomplete(elmAutocompleteList, elmInputBox);
            elmDropDownList.show();
        }

        function doSearch(query, triggerChar) {
            if (query && query.length && query.length >= settings.minChars) {

                var callback = function callback(responseData) {
                    populateDropdown(query, responseData);
                    currentTriggerChar = triggerChar;
                }

                settings.onDataRequest.call(this, 'search', query, triggerChar, callback);

            }
        }

        function positionAutocomplete(elmAutocompleteList, elmInputBox) {
            var position = utils.getCaratOffset(elmInputBox),
                lineHeight = parseInt(elmInputBox.css('line-height'), 10) || 18;

            elmAutocompleteList.css('width', '15em'); // Sort of a guess
            elmAutocompleteList.css('left', position.left);
            elmAutocompleteList.css('top', lineHeight + position.top);
        }

        function resetInput() {
            elmInputBox.val('');
            mentionsCollection = [];
            updateValues();
        }

        // Public methods
        return {
            init: function (domTarget) {

                domInput = domTarget;

                initTextarea();
                initAutocomplete();
                initMentionsOverlay();
                resetInput();

                if (settings.prefillMention) {
                    addMention(settings.prefillMention);
                }

            },

            val: function () {
                var value = mentionsCollection.length ? elmInputBox.data('messageText') : getInputBoxValue();
                return value;
            },

            reset: function () {
                resetInput();
            },

            getMentions: function () {
                return mentionsCollection;
            }
        };
    };

    $.fn.mentionsInput = function (method, settings) {

        var outerArguments = arguments;

        // Just call the method on the first instance we find
        if (typeof method === 'object' || !method) {
            settings = $.extend(true, {}, defaultSettings, method);
        }
        else if (typeof method === 'string' && this.length > 0) {

            var instance = $.data(this[0], 'mentionsInput');
            
            if (instance) {
                if (_.isFunction(instance[method])) {
                    return instance[method].apply(this, Array.prototype.slice.call(outerArguments, 1));
                }
                else {
                    $.error('Method ' + method + ' does not exist');
                }
            }
        }

        // Else, initialise each plugin
        return this.each(function () {

            var instance = $.data(this, 'mentionsInput') || $.data(this, 'mentionsInput', new MentionsInput(settings));

            /*if (_.isFunction(instance[method])) {
                return instance[method].apply(this, Array.prototype.slice.call(outerArguments, 1));

            } else*/

            if (typeof method === 'object' || !method) {
                return instance.init.call(this, this);
            } 

        });
    };

})(jQuery, _);