mirror of
https://github.com/phpbb/phpbb.git
synced 2025-05-12 10:35:20 +02:00
[ticket/13713] Use our filter function for zurb tribute
PHPBB3-13713
This commit is contained in:
Marc Alexander
parent
ae1f556b74
commit
7a86977d01
@ -469,113 +469,26 @@ function getCaretPosition(txtarea) {
|
|||||||
return matchedNames;
|
return matchedNames;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return whether item is matched by query
|
||||||
|
*
|
||||||
|
* @param {string} query Search query string
|
||||||
|
* @param {MentionsData} item Mentions data item
|
||||||
|
* @param {string }searchKey Key to use for matching items
|
||||||
|
* @return {boolean} True if items is matched, false otherwise
|
||||||
|
*/
|
||||||
function isItemMatched(query, item, searchKey) {
|
function isItemMatched(query, item, searchKey) {
|
||||||
return String(item[searchKey]).toLowerCase().indexOf(query.toLowerCase()) === 0;
|
return String(item[searchKey]).toLowerCase().indexOf(query.toLowerCase()) === 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* atwho.js remoteFilter callback filter function
|
* Filter items by search query
|
||||||
* @param {string} query Query string
|
*
|
||||||
* @param {function} callback Callback function for filtered items
|
* @param {string} query Search query string
|
||||||
|
* @param {Object.<number, MentionsData>} items List of {@link MentionsData} items
|
||||||
|
* @return {Object.<number, MentionsData>} List of {@link MentionsData} items filtered with query and by searchKey
|
||||||
*/
|
*/
|
||||||
function remoteFilter(query, callback) {
|
function itemFilter(query, items) {
|
||||||
/*
|
|
||||||
* Do not make a new request until the previous one for the same query is returned
|
|
||||||
* This fixes duplicate server queries e.g. when arrow keys are pressed
|
|
||||||
*/
|
|
||||||
if (queryInProgress === query) {
|
|
||||||
setTimeout(function() {
|
|
||||||
remoteFilter(query, callback);
|
|
||||||
}, 1000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let cachedKeyword = getCachedKeyword(query),
|
|
||||||
cachedNamesForQuery = (cachedKeyword !== null) ? cachedNames[cachedKeyword] : null;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Use cached values when we can:
|
|
||||||
* 1) There are some names in the cache relevant for the query
|
|
||||||
* (cache for the query with the same first characters contains some data)
|
|
||||||
* 2) We have enough names to display OR
|
|
||||||
* all relevant names have been fetched from the server
|
|
||||||
*/
|
|
||||||
if (cachedNamesForQuery &&
|
|
||||||
(getMatchedNames(query, cachedNamesForQuery, cachedSearchKey).length >= mentionNamesLimit ||
|
|
||||||
cachedAll[cachedKeyword])) {
|
|
||||||
callback(cachedNamesForQuery);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
queryInProgress = query;
|
|
||||||
|
|
||||||
let params = {keyword: query, topic_id: mentionTopicId, _referer: location.href};
|
|
||||||
$.getJSON(mentionURL, params, function(data) {
|
|
||||||
cachedNames[query] = data.names;
|
|
||||||
cachedAll[query] = data.all;
|
|
||||||
callback(data.names);
|
|
||||||
}).always(function() {
|
|
||||||
queryInProgress = null;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isEnabled = function() {
|
|
||||||
return $mentionDataContainer.length;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handle = function(textarea) {
|
|
||||||
tribute = new Tribute({
|
|
||||||
trigger: '@',
|
|
||||||
allowSpaces: true,
|
|
||||||
containerClass: 'mention-container',
|
|
||||||
selectClass: 'cur',
|
|
||||||
itemClass: 'mention-item',
|
|
||||||
menuItemTemplate: function (data) {
|
|
||||||
const itemData = data.original;
|
|
||||||
let avatar = (itemData.avatar.img) ? "<span class='mention-media-avatar'>" + itemData.avatar.img + "</span>" : defaultAvatar(itemData.avatar.type),
|
|
||||||
rank = (itemData.rank) ? "<span class='mention-rank'>" + itemData.rank + "</span>" : '';
|
|
||||||
return "<span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + itemData.name + rank + "</span>";
|
|
||||||
},
|
|
||||||
selectTemplate: function (item) {
|
|
||||||
return '[mention=' + item.original.type + ':' + item.original.id + ']' + item.original.name + '[/mention]';
|
|
||||||
},
|
|
||||||
menuItemLimit: mentionNamesLimit,
|
|
||||||
values: function (text, cb) {
|
|
||||||
remoteFilter(text, users => cb(users));
|
|
||||||
},
|
|
||||||
noMatchTemplate: function (t) {
|
|
||||||
console.log('No match:');
|
|
||||||
console.log(t);
|
|
||||||
},
|
|
||||||
lookup: function (element, mentionText) {
|
|
||||||
return element.hasOwnProperty('name') ? element.name : '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
tribute.attach($(textarea));
|
|
||||||
|
|
||||||
/*
|
|
||||||
var tribute = new Tribute({
|
|
||||||
values: [
|
|
||||||
{ key: "Phil Heartman", value: "pheartman" },
|
|
||||||
{ key: "Gordon Ramsey", value: "gramsey" }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
$(textarea).atwho({
|
|
||||||
at: "@",
|
|
||||||
acceptSpaceBar: true,
|
|
||||||
displayTpl: function(data) {
|
|
||||||
let avatar = (data.avatar.img) ? "<span class='mention-media-avatar'>" + data.avatar.img + "</span>" : defaultAvatar(data.avatar.type),
|
|
||||||
rank = (data.rank) ? "<span class='mention-rank'>" + data.rank + "</span>" : '';
|
|
||||||
return "<li class='mention-item'><span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + data.name + rank + "</span></li>";
|
|
||||||
},
|
|
||||||
insertTpl: "[mention=${type}:${id}]${name}[/mention]",
|
|
||||||
limit: mentionNamesLimit,
|
|
||||||
callbacks: {
|
|
||||||
remoteFilter: remoteFilter,
|
|
||||||
sorter: function(query, items, searchKey) {
|
|
||||||
let i;
|
let i;
|
||||||
let len;
|
let len;
|
||||||
let highestPriorities = {u: 1, g: 1};
|
let highestPriorities = {u: 1, g: 1};
|
||||||
@ -584,7 +497,7 @@ function getCaretPosition(txtarea) {
|
|||||||
let _results = [];
|
let _results = [];
|
||||||
|
|
||||||
// Reduce the items array to the relevant ones
|
// Reduce the items array to the relevant ones
|
||||||
items = getMatchedNames(query, items, searchKey);
|
items = getMatchedNames(query, items, 'name');
|
||||||
|
|
||||||
// Group names by their types and calculate priorities
|
// Group names by their types and calculate priorities
|
||||||
for (i = 0, len = items.length; i < len; i++) {
|
for (i = 0, len = items.length; i < len; i++) {
|
||||||
@ -647,9 +560,85 @@ function getCaretPosition(txtarea) {
|
|||||||
|
|
||||||
return _results;
|
return _results;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* atwho.js remoteFilter callback filter function
|
||||||
|
* @param {string} query Query string
|
||||||
|
* @param {function} callback Callback function for filtered items
|
||||||
|
*/
|
||||||
|
function remoteFilter(query, callback) {
|
||||||
|
/*
|
||||||
|
* Do not make a new request until the previous one for the same query is returned
|
||||||
|
* This fixes duplicate server queries e.g. when arrow keys are pressed
|
||||||
|
*/
|
||||||
|
if (queryInProgress === query) {
|
||||||
|
setTimeout(function() {
|
||||||
|
remoteFilter(query, callback);
|
||||||
|
}, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let cachedKeyword = getCachedKeyword(query),
|
||||||
|
cachedNamesForQuery = (cachedKeyword !== null) ? cachedNames[cachedKeyword] : null;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Use cached values when we can:
|
||||||
|
* 1) There are some names in the cache relevant for the query
|
||||||
|
* (cache for the query with the same first characters contains some data)
|
||||||
|
* 2) We have enough names to display OR
|
||||||
|
* all relevant names have been fetched from the server
|
||||||
|
*/
|
||||||
|
if (cachedNamesForQuery &&
|
||||||
|
(getMatchedNames(query, cachedNamesForQuery, cachedSearchKey).length >= mentionNamesLimit ||
|
||||||
|
cachedAll[cachedKeyword])) {
|
||||||
|
callback(cachedNamesForQuery);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
queryInProgress = query;
|
||||||
|
|
||||||
|
let params = {keyword: query, topic_id: mentionTopicId, _referer: location.href};
|
||||||
|
$.getJSON(mentionURL, params, function(data) {
|
||||||
|
cachedNames[query] = data.names;
|
||||||
|
cachedAll[query] = data.all;
|
||||||
|
callback(data.names);
|
||||||
|
}).always(function() {
|
||||||
|
queryInProgress = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isEnabled = function() {
|
||||||
|
return $mentionDataContainer.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.handle = function(textarea) {
|
||||||
|
tribute = new Tribute({
|
||||||
|
trigger: '@',
|
||||||
|
allowSpaces: true,
|
||||||
|
containerClass: 'mention-container',
|
||||||
|
selectClass: 'cur',
|
||||||
|
itemClass: 'mention-item',
|
||||||
|
menuItemTemplate: function (data) {
|
||||||
|
const itemData = data;
|
||||||
|
let avatar = (itemData.avatar.img) ? "<span class='mention-media-avatar'>" + itemData.avatar.img + "</span>" : defaultAvatar(itemData.avatar.type),
|
||||||
|
rank = (itemData.rank) ? "<span class='mention-rank'>" + itemData.rank + "</span>" : '';
|
||||||
|
return "<span class='mention-media'>" + avatar + "</span><span class='mention-name'>" + itemData.name + rank + "</span>";
|
||||||
|
},
|
||||||
|
selectTemplate: function (item) {
|
||||||
|
return '[mention=' + item.type + ':' + item.id + ']' + item.name + '[/mention]';
|
||||||
|
},
|
||||||
|
menuItemLimit: mentionNamesLimit,
|
||||||
|
values: function (text, cb) {
|
||||||
|
remoteFilter(text, users => cb(users));
|
||||||
|
},
|
||||||
|
lookup: function (element) {
|
||||||
|
return element.hasOwnProperty('name') ? element.name : '';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
*/
|
|
||||||
|
tribute.search.filter = itemFilter;
|
||||||
|
|
||||||
|
tribute.attach($(textarea));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
phpbb.mentions = new Mentions();
|
phpbb.mentions = new Mentions();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user