mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migration of searchfields, searchresults and searchpage to ES6 modules
This commit is contained in:
parent
fd853a180a
commit
89fcda5f05
4 changed files with 109 additions and 83 deletions
|
@ -126,6 +126,8 @@
|
|||
"src/components/playmenu.js",
|
||||
"src/components/sanatizefilename.js",
|
||||
"src/components/scrollManager.js",
|
||||
"src/components/search/searchfields.js",
|
||||
"src/components/search/searchresults.js",
|
||||
"src/components/settingshelper.js",
|
||||
"src/components/subtitlesettings/subtitlesettings.js",
|
||||
"src/components/subtitlesettings/subtitleappearancehelper.js",
|
||||
|
@ -137,6 +139,7 @@
|
|||
"src/controllers/dashboard/logs.js",
|
||||
"src/controllers/user/subtitles.js",
|
||||
"src/controllers/dashboard/plugins/repositories.js",
|
||||
"src/controllers/searchpage.js",
|
||||
"src/elements/emby-tabs/emby-tabs.js",
|
||||
"src/elements/emby-scroller/emby-scroller.js",
|
||||
"src/elements/emby-radio/emby-radio.js",
|
||||
|
|
|
@ -1,10 +1,20 @@
|
|||
define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPicker', 'emby-input', 'flexStyles', 'material-icons', 'css!./searchfields'], function (layoutManager, globalize, require, events, browser, AlphaPicker) {
|
||||
'use strict';
|
||||
import layoutManager from 'layoutManager';
|
||||
import globalize from 'globalize';
|
||||
import require from 'require';
|
||||
import events from 'events';
|
||||
import browser from 'browser';
|
||||
import AlphaPicker from 'alphaPicker';
|
||||
import 'emby-input';
|
||||
import 'flexStyles';
|
||||
import 'material-icons';
|
||||
import 'css!./searchfields';
|
||||
|
||||
/* eslint-disable indent*/
|
||||
|
||||
function onSearchTimeout() {
|
||||
|
||||
var instance = this;
|
||||
var value = instance.nextSearchValue;
|
||||
const instance = this;
|
||||
let value = instance.nextSearchValue;
|
||||
|
||||
value = (value || '').trim();
|
||||
events.trigger(instance, 'search', [value]);
|
||||
|
@ -22,14 +32,14 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
|
|||
|
||||
function onAlphaValueClicked(e) {
|
||||
|
||||
var value = e.detail.value;
|
||||
var searchFieldsInstance = this;
|
||||
const value = e.detail.value;
|
||||
const searchFieldsInstance = this;
|
||||
|
||||
var txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch');
|
||||
const txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch');
|
||||
|
||||
if (value === 'backspace') {
|
||||
|
||||
var val = txtSearch.value;
|
||||
const val = txtSearch.value;
|
||||
txtSearch.value = val.length ? val.substring(0, val.length - 1) : '';
|
||||
|
||||
} else {
|
||||
|
@ -53,8 +63,8 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
|
|||
|
||||
function onSearchInput(e) {
|
||||
|
||||
var value = e.target.value;
|
||||
var searchFieldsInstance = this;
|
||||
const value = e.target.value;
|
||||
const searchFieldsInstance = this;
|
||||
triggerSearch(searchFieldsInstance, value);
|
||||
}
|
||||
|
||||
|
@ -62,7 +72,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
|
|||
|
||||
require(['text!./searchfields.template.html'], function (template) {
|
||||
|
||||
var html = globalize.translateDocument(template, 'core');
|
||||
let html = globalize.translateDocument(template, 'core');
|
||||
|
||||
if (browser.tizen || browser.orsay) {
|
||||
html = html.replace('<input ', '<input readonly ');
|
||||
|
@ -72,10 +82,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
|
|||
|
||||
elem.classList.add('searchFields');
|
||||
|
||||
var txtSearch = elem.querySelector('.searchfields-txtSearch');
|
||||
const txtSearch = elem.querySelector('.searchfields-txtSearch');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
var alphaPickerElement = elem.querySelector('.alphaPicker');
|
||||
const alphaPickerElement = elem.querySelector('.alphaPicker');
|
||||
|
||||
elem.querySelector('.alphaPicker').classList.remove('hide');
|
||||
initAlphaPicker(alphaPickerElement, instance);
|
||||
|
@ -87,38 +97,39 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
|
|||
});
|
||||
}
|
||||
|
||||
function SearchFields(options) {
|
||||
class SearchFields {
|
||||
constructor(options) {
|
||||
|
||||
this.options = options;
|
||||
embed(options.element, this, options);
|
||||
}
|
||||
|
||||
SearchFields.prototype.focus = function () {
|
||||
focus() {
|
||||
|
||||
this.options.element.querySelector('.searchfields-txtSearch').focus();
|
||||
};
|
||||
}
|
||||
destroy() {
|
||||
|
||||
SearchFields.prototype.destroy = function () {
|
||||
|
||||
var options = this.options;
|
||||
const options = this.options;
|
||||
if (options) {
|
||||
options.element.classList.remove('searchFields');
|
||||
}
|
||||
this.options = null;
|
||||
|
||||
var alphaPicker = this.alphaPicker;
|
||||
const alphaPicker = this.alphaPicker;
|
||||
if (alphaPicker) {
|
||||
alphaPicker.destroy();
|
||||
}
|
||||
this.alphaPicker = null;
|
||||
|
||||
var searchTimeout = this.searchTimeout;
|
||||
const searchTimeout = this.searchTimeout;
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
this.searchTimeout = null;
|
||||
this.nextSearchValue = null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return SearchFields;
|
||||
});
|
||||
export default SearchFields;
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
|
|
@ -1,9 +1,19 @@
|
|||
define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', 'cardBuilder', 'appRouter', 'emby-scroller', 'emby-itemscontainer', 'emby-button'], function (layoutManager, globalize, require, events, connectionManager, cardBuilder, appRouter) {
|
||||
'use strict';
|
||||
import layoutManager from 'layoutManager';
|
||||
import globalize from 'globalize';
|
||||
import require from 'require';
|
||||
import events from 'events';
|
||||
import connectionManager from 'connectionManager';
|
||||
import cardBuilder from 'cardBuilder';
|
||||
import appRouter from 'appRouter';
|
||||
import 'emby-scroller';
|
||||
import 'emby-itemscontainer';
|
||||
import 'emby-button';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
function loadSuggestions(instance, context, apiClient) {
|
||||
|
||||
var options = {
|
||||
const options = {
|
||||
|
||||
SortBy: 'IsFavoriteOrLiked,Random',
|
||||
IncludeItemTypes: 'Movie,Series,MusicArtist',
|
||||
|
@ -21,18 +31,18 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
result.Items = [];
|
||||
}
|
||||
|
||||
var html = result.Items.map(function (i) {
|
||||
const html = result.Items.map(function (i) {
|
||||
|
||||
var href = appRouter.getRouteUrl(i);
|
||||
const href = appRouter.getRouteUrl(i);
|
||||
|
||||
var itemHtml = '<div><a is="emby-linkbutton" class="button-link" style="display:inline-block;padding:.5em 1em;" href="' + href + '">';
|
||||
let itemHtml = '<div><a is="emby-linkbutton" class="button-link" style="display:inline-block;padding:.5em 1em;" href="' + href + '">';
|
||||
itemHtml += i.Name;
|
||||
itemHtml += '</a></div>';
|
||||
return itemHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
var searchSuggestions = context.querySelector('.searchSuggestions');
|
||||
const searchSuggestions = context.querySelector('.searchSuggestions');
|
||||
searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html;
|
||||
|
||||
if (result.Items.length) {
|
||||
|
@ -49,9 +59,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
});
|
||||
}
|
||||
|
||||
var allowSearch = true;
|
||||
let allowSearch = true;
|
||||
|
||||
var queryIncludeItemTypes = query.IncludeItemTypes;
|
||||
const queryIncludeItemTypes = query.IncludeItemTypes;
|
||||
|
||||
if (instance.options.collectionType === 'tvshows') {
|
||||
if (query.IncludeArtists) {
|
||||
|
@ -127,7 +137,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
query.EnableTotalRecordCount = false;
|
||||
query.ImageTypeLimit = 1;
|
||||
|
||||
var methodName = 'getItems';
|
||||
let methodName = 'getItems';
|
||||
|
||||
if (!query.IncludeMedia) {
|
||||
if (query.IncludePeople) {
|
||||
|
@ -566,9 +576,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
|
||||
section = context.querySelector(section);
|
||||
|
||||
var items = result.Items || result.SearchHints;
|
||||
const items = result.Items || result.SearchHints;
|
||||
|
||||
var itemsContainer = section.querySelector('.itemsContainer');
|
||||
const itemsContainer = section.querySelector('.itemsContainer');
|
||||
|
||||
cardBuilder.buildCards(items, Object.assign({
|
||||
|
||||
|
@ -588,7 +598,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
}
|
||||
|
||||
function replaceAll(originalString, strReplace, strWith) {
|
||||
var reg = new RegExp(strReplace, 'ig');
|
||||
const reg = new RegExp(strReplace, 'ig');
|
||||
return originalString.replace(reg, strWith);
|
||||
}
|
||||
|
||||
|
@ -601,7 +611,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
|
||||
}
|
||||
|
||||
var html = globalize.translateDocument(template, 'core');
|
||||
const html = globalize.translateDocument(template, 'core');
|
||||
|
||||
elem.innerHTML = html;
|
||||
|
||||
|
@ -610,28 +620,29 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
|
|||
});
|
||||
}
|
||||
|
||||
function SearchResults(options) {
|
||||
class SearchResults {
|
||||
constructor(options) {
|
||||
|
||||
this.options = options;
|
||||
embed(options.element, this, options);
|
||||
}
|
||||
search(value) {
|
||||
|
||||
SearchResults.prototype.search = function (value) {
|
||||
|
||||
var apiClient = connectionManager.getApiClient(this.options.serverId);
|
||||
const apiClient = connectionManager.getApiClient(this.options.serverId);
|
||||
|
||||
search(this, apiClient, this.options.element, value);
|
||||
};
|
||||
}
|
||||
destroy() {
|
||||
|
||||
SearchResults.prototype.destroy = function () {
|
||||
|
||||
var options = this.options;
|
||||
const options = this.options;
|
||||
if (options) {
|
||||
options.element.classList.remove('searchFields');
|
||||
}
|
||||
this.options = null;
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return SearchResults;
|
||||
});
|
||||
export default SearchResults;
|
||||
|
||||
/*eslint-enable indent*/
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
define(['focusManager', 'searchFields', 'searchResults', 'events'], function (focusManager, SearchFields, SearchResults, events) {
|
||||
'use strict';
|
||||
import focusManager from 'focusManager';
|
||||
import SearchFields from 'searchFields';
|
||||
import SearchResults from 'searchResults';
|
||||
import events from 'events';
|
||||
|
||||
return function (view, params) {
|
||||
export default function (view, params) {
|
||||
function onSearch(e, value) {
|
||||
self.searchResults.search(value);
|
||||
}
|
||||
|
||||
var self = this;
|
||||
const self = this;
|
||||
view.addEventListener('viewshow', function () {
|
||||
if (!self.searchFields) {
|
||||
self.searchFields = new SearchFields({
|
||||
|
@ -32,5 +34,4 @@ define(['focusManager', 'searchFields', 'searchResults', 'events'], function (fo
|
|||
self.searchResults = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue