Merging in ryanramage's multiple triggerChar support

podio#8
sporttu · Jan 3, 2013 · a1c1295 · a1c1295
1 parent 803c9fd
commit a1c1295
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -92,18 +92,20 @@ <h2>Configuration</h2>
 <table>
   <tr>
     <td><b>onDataRequest</b></td>
-    <td><tt>function(mode, query, callback)</tt></td>
+    <td><tt>function(mode, query, callback, triggerChar)</tt></td>
     <td class="definition">
       This function is a callback function which is used to provide data for the autocomplete. When a search starts
-      this function is called with following arguments: 'search', the query (what's been typed), and a callback function which needs to be called inside onDataRequest with a data collection to be searched on as a first argument.
+      this function is called with following arguments: 'search', the query (what's been typed), and a callback function which needs to be called inside onDataRequest with a data collection to be searched on as a first argument.<br>
+      'triggerChar' which is the character that started this data request, so you can take different actions on a '@' or '#'.
     </td>
   </tr>
   <tr>
     <td><b>triggerChar</b></td>
     <td><tt>@</tt></td>
     <td class="definition">
       Trigger character which triggers the mentions search, when the character has been typed into the
-      mentions input field.
+      mentions input field. You can specify more than one trigger char by providing an array. <br>
+      eg triggerChar : ['@', '#']
     </td>
   </tr>
   <tr>
@@ -200,11 +202,11 @@ <h2>Query data structure</h2>
 <h2>Markup format</h2>
 <p>When mentions are being added to the input, a marked-up version of the value is generated, to allow the mentions to be extracted, parsed and stored later. </p>
 <pre>
-  This is a message for @[name](type:id)
+  This is a message for @[name](type:id) #[tag](type:id)
 </pre>
 <p>Like:</p>
 <pre>
-  This is a message for @[Kenneth Auchenberg](contact:1)
+  This is a message for @[Kenneth Auchenberg](contact:1) #[Issue 22](tag:22)
 </pre>
 
 

diff --git a/jquery.mentionsInput.js b/jquery.mentionsInput.js
@@ -18,6 +18,7 @@
     minChars      : 2,
     showAvatars   : true,
     elastic       : true,
+    display       : 'name',
     onCaret       : false,
     classes       : {
       autoCompleteItemActive : "active"
@@ -29,7 +30,7 @@
       autocompleteListItemAvatar : _.template('<img  src="<%= avatar %>" />'),
       autocompleteListItemIcon   : _.template('<div class="icon <%= icon %>"></div>'),
       mentionsOverlay            : _.template('<div class="mentions"><div></div></div>'),
-      mentionItemSyntax          : _.template('@[<%= value %>](<%= type %>:<%= id %>)'),
+      mentionItemSyntax          : _.template('<%= triggerChar %>[<%= value %>](<%= type %>:<%= id %>)'),
       mentionItemHighlight       : _.template('<strong><span><%= value %></span></strong>')
     }
   };
@@ -152,9 +153,12 @@
     function addMention(mention) {
 
       var currentMessage = getInputBoxValue();
+
+      //! TODO: Remove reliance on .data() - https://github.com/podio/jquery-mentions-input/pull/7/#issuecomment-3649964
+      var currentTriggerChar = elmInputBox.data('triggerChar');
 
       // Using a regex to figure out positions
-      var regex = new RegExp("\\" + settings.triggerChar + currentDataQuery, "gi");
+      var regex = new RegExp("\\" + currentTriggerChar + currentDataQuery, "gi");
       regex.exec(currentMessage);
 
       var startCaretPosition = regex.lastIndex - currentDataQuery.length - 1;
@@ -164,7 +168,9 @@
       var end = currentMessage.substr(currentCaretPosition, currentMessage.length);
       var startEndIndex = (start + mention.value).length + 1;
 
-      mentionsCollection.push(mention);
+      mentionsCollection.push(
+        _.extend({}, mention, {trigger : currentTriggerChar})
+      );
 
       // Cleaning before inserting the value, otherwise auto-complete would be triggered with "old" inputbuffer
       resetBuffer();
@@ -217,7 +223,7 @@
 
       return false;
     }
-
+    
     function onInputBoxClick(e) {
       resetBuffer();
     }
@@ -226,18 +232,28 @@
       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();
 
-      var triggerCharIndex = _.lastIndexOf(inputBuffer, settings.triggerChar);
-      if (triggerCharIndex > -1) {
-        currentDataQuery = inputBuffer.slice(triggerCharIndex + 1).join('');
-        currentDataQuery = utils.rtrim(currentDataQuery);
 
-        _.defer(_.bind(doSearch, this, currentDataQuery));
+      if (_.isArray(settings.triggerChar)) {
+        _.each(settings.triggerChar, function (triggerChar) {
+          checkTriggerChar(inputBuffer, triggerChar);
+        });
+      } else {
+        checkTriggerChar(inputBuffer, settings.triggerChar);
       }
+
     }
 
     function onInputBoxKeyPress(e) {
@@ -342,7 +358,7 @@
 
         var elmListItem = $(settings.templates.autocompleteListItem({
           'id'      : utils.htmlEncode(item.id),
-          'display' : utils.htmlEncode(item.name),
+          'display' : utils.htmlEncode([settings.display]),
           'type'    : utils.htmlEncode(item.type),
           'content' : utils.highlightTerm(utils.htmlEncode((item.display ? item.display : item.name)), query)
         })).attr('data-uid', itemUid);
@@ -369,17 +385,19 @@
       elmDropDownList.show();
     }
 
-    function doSearch(query) {
+    function doSearch(query, triggerChar) {
       if (query && query.length && query.length >= settings.minChars) {
         settings.onDataRequest.call(this, 'search', query, function (responseData) {
           populateDropdown(query, responseData);
-        });
+          elmInputBox.data('triggerChar', triggerChar);
+        }, triggerChar);
       }
     }
 
     function positionAutocomplete(elmAutocompleteList, elmInputBox) {
       var position = textareaSelectionPosition(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);
@@ -434,9 +452,9 @@
   $.fn.mentionsInput = function (method, settings) {
 
     var outerArguments = arguments;
-
+    
     if (typeof method === 'object' || !method) {
-      settings = method;
+      settings = $.extend(true, {}, defaultSettings, method);
     }
 
     return this.each(function () {