Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjusting the docs to show the multiple trigger chars #8

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Adjusting the docs to show the multiple trigger chars #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions assets/examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
$(function () {

$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:7, name:'[email protected]', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:8, name:'Pete Awesome Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:9, name:'Kenneth Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
];
triggerChar : ['@', '#'],
onDataRequest:function (mode, query, callback, triggerChar) {
var data = [];

if (triggerChar == '@') {
data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:7, name:'[email protected]', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:8, name:'Pete Awesome Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:9, name:'Kenneth Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
];
}
else {
data = [
{ id:'12121', name:'Pasta', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'tag' },
{ id:'231223', name:'Pizza', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'tag' },
{ id:'72', name:'Potates', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'tag' },
];
}

data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

Expand Down
11 changes: 7 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,18 +85,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.
'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.
eg triggerChar : ['@', '#']
</td>
</tr>
<tr>
Expand Down Expand Up @@ -192,14 +194,15 @@ <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>



<h2>Browser support</h2>
<p>jquery.mentionsInput has been tested in Firefox 6+, Chrome 15+, and Internet Explorer 8+. </p>
<p>Please let us know if you see anythin weired. And no, we will no make it work for older browsers. Period. </p>
Expand Down
37 changes: 24 additions & 13 deletions jquery.mentionsInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,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>')
}
};
Expand Down Expand Up @@ -104,14 +104,14 @@
var syntaxMessage = getInputBoxValue();

_.each(mentionsCollection, function (mention) {
var textSyntax = settings.templates.mentionItemSyntax({ value : mention.value, type : 'contact', id : mention.id });
var textSyntax = settings.templates.mentionItemSyntax({ value : mention.value, type : mention.type, id : mention.id, triggerChar: mention.trigger });
syntaxMessage = syntaxMessage.replace(mention.value, textSyntax);
});

var mentionText = utils.htmlEncode(syntaxMessage);

_.each(mentionsCollection, function (mention) {
var textSyntax = settings.templates.mentionItemSyntax({ value : utils.htmlEncode(mention.value), type : 'contact', id : mention.id });
var textSyntax = settings.templates.mentionItemSyntax({ value : utils.htmlEncode(mention.value), type : mention.type, id : mention.id, triggerChar: mention.trigger });
var textHighlight = settings.templates.mentionItemHighlight({ value : utils.htmlEncode(mention.value) });

mentionText = mentionText.replace(textSyntax, textHighlight);
Expand Down Expand Up @@ -139,9 +139,10 @@

function addMention(value, id, type) {
var currentMessage = getInputBoxValue();
var currentTriggerChar = $(this).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;
Expand All @@ -156,7 +157,8 @@
mentionsCollection.push({
id : id,
type : type,
value : value
value : value,
trigger : currentTriggerChar
});

// Cleaning before inserting the value, otherwise auto-complete would be triggered with "old" inputbuffer
Expand Down Expand Up @@ -189,17 +191,26 @@
resetBuffer();
}

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('');
if (_.isArray(settings.triggerChar)) {
_.each(settings.triggerChar, function (triggerChar) {
checkTriggerChar(inputBuffer, triggerChar);
});
} else {
checkTriggerChar(inputBuffer, settings.triggerChar);
}

_.defer(_.bind(doSearch, this, currentDataQuery));
}
}

function onInputBoxKeyPress(e) {
Expand Down Expand Up @@ -312,11 +323,12 @@
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);
});
$(this).data('triggerChar', triggerChar);
}, triggerChar);
}
}

Expand All @@ -334,7 +346,6 @@
if (!_.isFunction(callback)) {
return;
}

var value = mentionsCollection.length ? elmInputBox.data('messageText') : getInputBoxValue();
callback.call(this, value);
},
Expand Down