mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
search hints progress
This commit is contained in:
Luke Pulverenti
parent
ba13b0837d
commit
5005e0d448
9 changed files with 287 additions and 40 deletions
|
|
@ -1,41 +1,205 @@
|
|||
(function ($, document, window) {
|
||||
(function ($, document, window, clearTimeout, setTimeout) {
|
||||
|
||||
var searchHintTimeout;
|
||||
|
||||
function createSearchHintsElement() {
|
||||
function clearSearchHintTimeout() {
|
||||
|
||||
$(document.body).append('<div id="searchHints" class="searchHints"><div class="searchHintsContent">Coming soon<div><div>').off("mousedown.hidesearchhints").on("mousedown.hidesearchhints", function (e) {
|
||||
if (searchHintTimeout) {
|
||||
|
||||
clearTimeout(searchHintTimeout);
|
||||
searchHintTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
function createSearchHintsElement(page) {
|
||||
|
||||
$(document.body).off("mousedown.hidesearchhints").on("mousedown.hidesearchhints", function (e) {
|
||||
|
||||
var elem = $(e.target);
|
||||
|
||||
if (!elem.is('#searchHints,#txtSearch,#btnSearch') && !elem.parents('#searchHints,#txtSearch,#btnSearch').length) {
|
||||
|
||||
$('#searchHints').remove();
|
||||
|
||||
$(document.body).off("mousedown.hidesearchhints");
|
||||
hideFlyout(page);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var txtElem = $('#txtSearch');
|
||||
var pos = txtElem.offset();
|
||||
|
||||
var hints = $('#searchHints')[0];
|
||||
|
||||
hints.style.top = txtElem[0].offsetHeight + pos.top + 1 + "px";
|
||||
hints.style.left = pos.left + "px";
|
||||
|
||||
return $('#searchHints', page).show();
|
||||
}
|
||||
|
||||
function renderSearchHints(searchTerm) {
|
||||
function hideFlyout(page) {
|
||||
$('#searchHints', page).hide();
|
||||
|
||||
var hints = $('#searchHints');
|
||||
$(document.body).off("mousedown.hidesearchhints");
|
||||
}
|
||||
|
||||
function showFlyout(page) {
|
||||
|
||||
var hints = $('#searchHints:visible');
|
||||
|
||||
if (!hints.length) {
|
||||
|
||||
hints = createSearchHintsElement();
|
||||
createSearchHintsElement(page);
|
||||
}
|
||||
}
|
||||
|
||||
function updateFlyout(page, searchTerm) {
|
||||
|
||||
if (!searchTerm) {
|
||||
|
||||
clearSearchHintTimeout();
|
||||
hideFlyout(page);
|
||||
return;
|
||||
}
|
||||
|
||||
clearSearchHintTimeout();
|
||||
|
||||
searchHintTimeout = setTimeout(function () {
|
||||
|
||||
requestSearchHints(page, searchTerm);
|
||||
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function requestSearchHints(page, searchTerm) {
|
||||
|
||||
var currentTimeout = searchHintTimeout;
|
||||
|
||||
$.getJSON(ApiClient.getUrl("Search/Hints", { userId: Dashboard.getCurrentUserId(), searchTerm: searchTerm, limit: 10 })).done(function (result) {
|
||||
|
||||
if (currentTimeout != searchHintTimeout) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!result.TotalRecordCount) {
|
||||
hideFlyout(page);
|
||||
return;
|
||||
}
|
||||
|
||||
renderSearchHintResult(page, result.SearchHints);
|
||||
});
|
||||
}
|
||||
|
||||
function preg_quote(str, delimiter) {
|
||||
// http://kevin.vanzonneveld.net
|
||||
// + original by: booeyOH
|
||||
// + improved by: Ates Goral (http://magnetiq.com)
|
||||
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
||||
// + bugfixed by: Onno Marsman
|
||||
// + improved by: Brett Zamir (http://brett-zamir.me)
|
||||
// * example 1: preg_quote("$40");
|
||||
// * returns 1: '\$40'
|
||||
// * example 2: preg_quote("*RRRING* Hello?");
|
||||
// * returns 2: '\*RRRING\* Hello\?'
|
||||
// * example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
|
||||
// * returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
|
||||
return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
|
||||
}
|
||||
|
||||
function getHintDisplayName(data, term) {
|
||||
|
||||
var regexp = new RegExp("(" + preg_quote(term) + ")", 'gi');
|
||||
|
||||
return data.replace(regexp, "<b>$1</b>");
|
||||
}
|
||||
|
||||
function getSearchHintHtml(hint) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<a class="searchHint" href="' + LibraryBrowser.getHref(hint) + '">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
if (hint.PrimaryImageTag) {
|
||||
|
||||
hint.ImageTags = { Primary: hint.PrimaryImageTag };
|
||||
imgUrl = LibraryBrowser.getImageUrl(hint, "Primary", 0, { maxwidth: 150, maxheight: 150 });
|
||||
|
||||
}
|
||||
else if (hint.MediaType == "Game") {
|
||||
|
||||
imgUrl = "css/images/items/searchhints/game.png";
|
||||
|
||||
}
|
||||
else if (hint.Type == "Episode" || hint.Type == "Season" || hint.Type == "Series") {
|
||||
|
||||
imgUrl = "css/images/items/searchhints/tv.png";
|
||||
|
||||
}
|
||||
else if (hint.Type == "Audio" || hint.Type == "MusicAlbum" || hint.Type == "Artist") {
|
||||
|
||||
imgUrl = "css/images/items/searchhints/music.png";
|
||||
|
||||
}
|
||||
else if (hint.Type == "Person") {
|
||||
|
||||
imgUrl = "css/images/items/searchhints/person.png";
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
imgUrl = "css/images/items/searchhints/film.png";
|
||||
}
|
||||
|
||||
html += '<img class="searchHintImage" src="' + imgUrl + '" />';
|
||||
|
||||
html += '<div class="searchHintContent"><div class="searchHintContentInner">';
|
||||
|
||||
html += '<div class="searchHintName">' + getHintDisplayName(hint.Name, hint.MatchedTerm) + '</div>';
|
||||
|
||||
if (hint.Type == "Audio") {
|
||||
|
||||
html += '<div class="searchHintSecondaryText">' + [hint.AlbumArtist, hint.Album].join(" - ") + '</div>';
|
||||
|
||||
}
|
||||
else if (hint.Type == "MusicAlbum") {
|
||||
|
||||
html += '<div class="searchHintSecondaryText">' + hint.AlbumArtist + '</div>';
|
||||
|
||||
}
|
||||
else {
|
||||
html += '<div class="searchHintSecondaryText">' + (hint.DisplayMediaType || hint.Type) + '</div>';
|
||||
}
|
||||
|
||||
var text;
|
||||
|
||||
if (hint.EpisodeCount) {
|
||||
|
||||
text = hint.EpisodeCount == 1 ? "1 Episode" : hint.EpisodeCount + " Episodes";
|
||||
|
||||
html += '<div class="searchHintSecondaryText">' + text + '</div>';
|
||||
}
|
||||
|
||||
else if (hint.SongCount) {
|
||||
|
||||
text = hint.SongCount == 1 ? "1 Song" : hint.SongCount + " Songs";
|
||||
|
||||
html += '<div class="searchHintSecondaryText">' + text + '</div>';
|
||||
}
|
||||
|
||||
else if (hint.RunTimeTicks) {
|
||||
html += '<div class="searchHintSecondaryText">' + DashboardPage.getDisplayText(hint.RunTimeTicks) + '</div>';
|
||||
}
|
||||
|
||||
html += '</div></div>';
|
||||
|
||||
|
||||
html += '</a>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderSearchHintResult(page, hints) {
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = hints.length; i < length; i++) {
|
||||
html += getSearchHintHtml(hints[i]);
|
||||
}
|
||||
|
||||
$('#searchHints', page).html(html);
|
||||
}
|
||||
|
||||
function search() {
|
||||
|
||||
var self = this;
|
||||
|
|
@ -50,14 +214,17 @@
|
|||
html += '<img src="css/images/searchbutton.png" />';
|
||||
html += '</button>';
|
||||
|
||||
html += '</form></div>';
|
||||
html += '</form>';
|
||||
|
||||
html += '<div id="searchHints" class="searchHints" style="display:none;"><div class="searchHintsContent"></div></div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
self.onSearchRendered = function (parentElem) {
|
||||
|
||||
|
||||
$('#searchForm', parentElem).on("submit", function () {
|
||||
|
||||
Dashboard.alert('Coming soon.');
|
||||
|
|
@ -65,16 +232,19 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
$('#txtSearch', parentElem).on("keypress", function () {
|
||||
$('#txtSearch', parentElem).on("keyup", function (e) {
|
||||
|
||||
renderSearchHints(this.value);
|
||||
var value = this.value;
|
||||
|
||||
showFlyout(parentElem);
|
||||
updateFlyout(parentElem, value);
|
||||
|
||||
}).on("focus", function () {
|
||||
|
||||
var value = this.value;
|
||||
|
||||
|
||||
if (value) {
|
||||
renderSearchHints(value);
|
||||
showFlyout(parentElem, value);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -84,4 +254,4 @@
|
|||
|
||||
window.Search = new search();
|
||||
|
||||
})(jQuery, document, window);
|
||||
})(jQuery, document, window, clearTimeout, setTimeout);
|
||||
Loading…
Add table
Add a link
Reference in a new issue