From d93093486a0f6972f5696cb0ade5750c39a35760 Mon Sep 17 00:00:00 2001 From: Ivan Virabyan Date: Tue, 23 Jun 2015 18:02:22 +0300 Subject: [PATCH] Fixed issue with unselecting mention. Closes #35 --- jquery.mentions.coffee | 14 ++--- jquery.mentions.js | 137 ++++++++++++++++++++--------------------- 2 files changed, 72 insertions(+), 79 deletions(-) diff --git a/jquery.mentions.coffee b/jquery.mentions.coffee index 22d74a6..9540089 100644 --- a/jquery.mentions.coffee +++ b/jquery.mentions.coffee @@ -46,15 +46,12 @@ $.widget( "ui.areacomplete", $.ui.autocomplete, after = value.substring(@end) newval = ui.item.value value = before + newval + after - if @overriden.select - ui.item.pos = @start - ui.value = value - if @overriden.select(event, ui) == false - return false - @_value(value) - @element.change() Selection.set(@element, before.length + newval.length) + + if @overriden.select + ui.item.pos = @start + @overriden.select(event, ui) return false focusCallback: -> @@ -284,8 +281,9 @@ class MentionsInput extends MentionsBase return a.pos - b.pos _onSelect: (event, ui) => + @_updateMentions() @_addMention(name: ui.item.value, pos: ui.item.pos, uid: ui.item.uid) - @value = ui.value + @_updateValue() _updateValue: => value = @input.val() diff --git a/jquery.mentions.js b/jquery.mentions.js index 1588f85..beb8346 100644 --- a/jquery.mentions.js +++ b/jquery.mentions.js @@ -1,4 +1,4 @@ -// Generated by CoffeeScript 1.7.1 +// Generated by CoffeeScript 1.4.0 (function() { var MentionsBase, MentionsContenteditable, MentionsInput, Selection, entityMap, escapeHtml, namespace, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, @@ -62,16 +62,12 @@ after = value.substring(this.end); newval = ui.item.value; value = before + newval + after; + this._value(value); + Selection.set(this.element, before.length + newval.length); if (this.overriden.select) { ui.item.pos = this.start; - ui.value = value; - if (this.overriden.select(event, ui) === false) { - return false; - } + this.overriden.select(event, ui); } - this._value(value); - this.element.change(); - Selection.set(this.element, before.length + newval.length); return false; }, focusCallback: function() { @@ -165,6 +161,7 @@ }); MentionsBase = (function() { + MentionsBase.prototype.marker = '\uFEFF'; function MentionsBase(input, options) { @@ -197,15 +194,23 @@ mimicProperties = ['backgroundColor', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'borderTopWidth', 'borderLeftWidth', 'borderBottomWidth', 'borderRightWidth', 'fontSize', 'fontStyle', 'fontFamily', 'fontWeight', 'lineHeight', 'height', 'boxSizing']; function MentionsInput(input, options) { - var container; + var container, + _this = this; this.input = input; this._updateHScroll = __bind(this._updateHScroll, this); + this._updateVScroll = __bind(this._updateVScroll, this); + this._updateValue = __bind(this._updateValue, this); + this._onSelect = __bind(this._onSelect, this); + this._addMention = __bind(this._addMention, this); + this._updateMentions = __bind(this._updateMentions, this); + this._update = __bind(this._update, this); + this.settings = { delay: 0, trigger: '@', @@ -223,15 +228,11 @@ this.hidden = this._createHidden(); this.highlighter = this._createHighlighter(); this.highlighterContent = $('div', this.highlighter); - this.input.focus((function(_this) { - return function() { - return _this.highlighter.addClass('focus'); - }; - })(this)).blur((function(_this) { - return function() { - return _this.highlighter.removeClass('focus'); - }; - })(this)); + this.input.focus(function() { + return _this.highlighter.addClass('focus'); + }).blur(function() { + return _this.highlighter.removeClass('focus'); + }); this.autocomplete = this.input[this.options.widget]({ matcher: this._getMatcher(), select: this._onSelect, @@ -245,32 +246,25 @@ } MentionsInput.prototype._initEvents = function() { - var tagName; + var tagName, + _this = this; this.input.on("input." + namespace + " change." + namespace, this._update); tagName = this.input.prop("tagName"); if (tagName === "INPUT") { - this.input.on("focus." + namespace, (function(_this) { - return function() { - return _this.interval = setInterval(_this._updateHScroll, 10); - }; - })(this)); - return this.input.on("blur." + namespace, (function(_this) { - return function() { - setTimeout(_this._updateHScroll, 10); - return clearInterval(_this.interval); - }; - })(this)); + this.input.on("focus." + namespace, function() { + return _this.interval = setInterval(_this._updateHScroll, 10); + }); + return this.input.on("blur." + namespace, function() { + setTimeout(_this._updateHScroll, 10); + return clearInterval(_this.interval); + }); } else if (tagName === "TEXTAREA") { - this.input.on("scroll." + namespace, ((function(_this) { - return function() { - return setTimeout(_this._updateVScroll, 10); - }; - })(this))); - return this.input.on("resize." + namespace, ((function(_this) { - return function() { - return setTimeout(_this._updateVScroll, 10); - }; - })(this))); + this.input.on("scroll." + namespace, (function() { + return setTimeout(_this._updateVScroll, 10); + })); + return this.input.on("resize." + namespace, (function() { + return setTimeout(_this._updateVScroll, 10); + })); } }; @@ -331,25 +325,24 @@ }; MentionsInput.prototype._updateMentions = function() { - var change, cursor, diff, i, mention, piece, update_pos, value, _i, _j, _len, _len1, _ref; + var change, cursor, diff, i, mention, piece, update_pos, value, _i, _j, _len, _len1, _ref, + _this = this; value = this.input.val(); diff = diffChars(this.value, value); - update_pos = (function(_this) { - return function(cursor, delta) { - var mention, _i, _len, _ref, _results; - _ref = _this.mentions; - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - mention = _ref[_i]; - if (mention.pos >= cursor) { - _results.push(mention.pos += delta); - } else { - _results.push(void 0); - } + update_pos = function(cursor, delta) { + var mention, _i, _len, _ref, _results; + _ref = _this.mentions; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + mention = _ref[_i]; + if (mention.pos >= cursor) { + _results.push(mention.pos += delta); + } else { + _results.push(void 0); } - return _results; - }; - })(this); + } + return _results; + }; cursor = 0; for (_i = 0, _len = diff.length; _i < _len; _i++) { change = diff[_i]; @@ -381,12 +374,13 @@ }; MentionsInput.prototype._onSelect = function(event, ui) { + this._updateMentions(); this._addMention({ name: ui.item.value, pos: ui.item.pos, uid: ui.item.uid }); - return this.value = ui.value; + return this._updateValue(); }; MentionsInput.prototype._updateValue = function() { @@ -487,7 +481,9 @@ function MentionsContenteditable(input, options) { this.input = input; this._onSelect = __bind(this._onSelect, this); + this._addMention = __bind(this._addMention, this); + this.settings = { delay: 0, trigger: '@', @@ -535,24 +531,22 @@ }; MentionsContenteditable.prototype._initEvents = function() { - return this.input.find(this.selector).each((function(_this) { - return function(i, el) { - return _this._watch(el); - }; - })(this)); + var _this = this; + return this.input.find(this.selector).each(function(i, el) { + return _this._watch(el); + }); }; MentionsContenteditable.prototype._setValue = function(value) { - var mentionRE; + var mentionRE, + _this = this; mentionRE = /@\[([^\]]+)\]\(([^ \)]+)\)/g; - value = value.replace(mentionRE, (function(_this) { - return function(match, value, uid) { - return mentionTpl({ - value: value, - uid: uid - }) + _this.marker; - }; - })(this)); + value = value.replace(mentionRE, function(match, value, uid) { + return mentionTpl({ + value: value, + uid: uid + }) + _this.marker; + }); return this.input.html(value); }; @@ -786,6 +780,7 @@ function clonePath(path) { return { newPos: path.newPos, components: path.components.slice(0) }; }; + $.fn[namespace] = function() { var args, options, returnValue; options = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];