mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Migration of searchfields, searchresults and searchpage to ES6 modules

Browse source
This commit is contained in:
Cameron 2020-07-16 10:28:08 +01:00
parent fd853a180a
commit 89fcda5f05
4 changed files with 109 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -126,6 +126,8 @@
"src/components/playmenu.js", "src/components/playmenu.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/components/search/searchfields.js",
"src/components/search/searchresults.js",
"src/components/settingshelper.js", "src/components/settingshelper.js",
"src/components/subtitlesettings/subtitlesettings.js", "src/components/subtitlesettings/subtitlesettings.js",
"src/components/subtitlesettings/subtitleappearancehelper.js", "src/components/subtitlesettings/subtitleappearancehelper.js",
@ -137,6 +139,7 @@
"src/controllers/dashboard/logs.js", "src/controllers/dashboard/logs.js",
"src/controllers/user/subtitles.js", "src/controllers/user/subtitles.js",
"src/controllers/dashboard/plugins/repositories.js", "src/controllers/dashboard/plugins/repositories.js",
"src/controllers/searchpage.js",
"src/elements/emby-tabs/emby-tabs.js", "src/elements/emby-tabs/emby-tabs.js",
"src/elements/emby-scroller/emby-scroller.js", "src/elements/emby-scroller/emby-scroller.js",
"src/elements/emby-radio/emby-radio.js", "src/elements/emby-radio/emby-radio.js",

61
src/components/search/searchfields.js
View file

@ -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) { import layoutManager from 'layoutManager';
'use strict'; 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() { function onSearchTimeout() {
var instance = this; const instance = this;
var value = instance.nextSearchValue; let value = instance.nextSearchValue;
value = (value || '').trim(); value = (value || '').trim();
events.trigger(instance, 'search', [value]); events.trigger(instance, 'search', [value]);
@ -22,14 +32,14 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
function onAlphaValueClicked(e) { function onAlphaValueClicked(e) {
var value = e.detail.value; const value = e.detail.value;
var searchFieldsInstance = this; const searchFieldsInstance = this;
var txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch'); const txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch');
if (value === 'backspace') { if (value === 'backspace') {
var val = txtSearch.value; const val = txtSearch.value;
txtSearch.value = val.length ? val.substring(0, val.length - 1) : ''; txtSearch.value = val.length ? val.substring(0, val.length - 1) : '';
} else { } else {
@ -53,8 +63,8 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
function onSearchInput(e) { function onSearchInput(e) {
var value = e.target.value; const value = e.target.value;
var searchFieldsInstance = this; const searchFieldsInstance = this;
triggerSearch(searchFieldsInstance, value); triggerSearch(searchFieldsInstance, value);
} }
@ -62,7 +72,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
require(['text!./searchfields.template.html'], function (template) { require(['text!./searchfields.template.html'], function (template) {
var html = globalize.translateDocument(template, 'core'); let html = globalize.translateDocument(template, 'core');
if (browser.tizen || browser.orsay) { if (browser.tizen || browser.orsay) {
html = html.replace('<input ', '<input readonly '); html = html.replace('<input ', '<input readonly ');
@ -72,10 +82,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
elem.classList.add('searchFields'); elem.classList.add('searchFields');
var txtSearch = elem.querySelector('.searchfields-txtSearch'); const txtSearch = elem.querySelector('.searchfields-txtSearch');
if (layoutManager.tv) { if (layoutManager.tv) {
var alphaPickerElement = elem.querySelector('.alphaPicker'); const alphaPickerElement = elem.querySelector('.alphaPicker');
elem.querySelector('.alphaPicker').classList.remove('hide'); elem.querySelector('.alphaPicker').classList.remove('hide');
initAlphaPicker(alphaPickerElement, instance); initAlphaPicker(alphaPickerElement, instance);
@ -87,38 +97,39 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
}); });
} }
function SearchFields(options) { class SearchFields {
constructor(options) {
this.options = options; this.options = options;
embed(options.element, this, options); embed(options.element, this, options);
} }
focus() {
SearchFields.prototype.focus = function () {
this.options.element.querySelector('.searchfields-txtSearch').focus(); this.options.element.querySelector('.searchfields-txtSearch').focus();
}; }
destroy() {
SearchFields.prototype.destroy = function () { const options = this.options;
var options = this.options;
if (options) { if (options) {
options.element.classList.remove('searchFields'); options.element.classList.remove('searchFields');
} }
this.options = null; this.options = null;
var alphaPicker = this.alphaPicker; const alphaPicker = this.alphaPicker;
if (alphaPicker) { if (alphaPicker) {
alphaPicker.destroy(); alphaPicker.destroy();
} }
this.alphaPicker = null; this.alphaPicker = null;
var searchTimeout = this.searchTimeout; const searchTimeout = this.searchTimeout;
if (searchTimeout) { if (searchTimeout) {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
} }
this.searchTimeout = null; this.searchTimeout = null;
this.nextSearchValue = null; this.nextSearchValue = null;
}; }
}
return SearchFields; export default SearchFields;
});
/* eslint-enable indent */

61
src/components/search/searchresults.js
View file

@ -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) { import layoutManager from 'layoutManager';
'use strict'; 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) { function loadSuggestions(instance, context, apiClient) {
var options = { const options = {
SortBy: 'IsFavoriteOrLiked,Random', SortBy: 'IsFavoriteOrLiked,Random',
IncludeItemTypes: 'Movie,Series,MusicArtist', IncludeItemTypes: 'Movie,Series,MusicArtist',
@ -21,18 +31,18 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
result.Items = []; 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 += i.Name;
itemHtml += '</a></div>'; itemHtml += '</a></div>';
return itemHtml; return itemHtml;
}).join(''); }).join('');
var searchSuggestions = context.querySelector('.searchSuggestions'); const searchSuggestions = context.querySelector('.searchSuggestions');
searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html; searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html;
if (result.Items.length) { 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 (instance.options.collectionType === 'tvshows') {
if (query.IncludeArtists) { if (query.IncludeArtists) {
@ -127,7 +137,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
query.EnableTotalRecordCount = false; query.EnableTotalRecordCount = false;
query.ImageTypeLimit = 1; query.ImageTypeLimit = 1;
var methodName = 'getItems'; let methodName = 'getItems';
if (!query.IncludeMedia) { if (!query.IncludeMedia) {
if (query.IncludePeople) { if (query.IncludePeople) {
@ -566,9 +576,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
section = context.querySelector(section); 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({ cardBuilder.buildCards(items, Object.assign({
@ -588,7 +598,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
} }
function replaceAll(originalString, strReplace, strWith) { function replaceAll(originalString, strReplace, strWith) {
var reg = new RegExp(strReplace, 'ig'); const reg = new RegExp(strReplace, 'ig');
return originalString.replace(reg, strWith); return originalString.replace(reg, strWith);
} }
@ -601,7 +611,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
} }
var html = globalize.translateDocument(template, 'core'); const html = globalize.translateDocument(template, 'core');
elem.innerHTML = html; elem.innerHTML = html;
@ -610,28 +620,29 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
}); });
} }
function SearchResults(options) { class SearchResults {
constructor(options) {
this.options = options; this.options = options;
embed(options.element, this, options); embed(options.element, this, options);
} }
search(value) {
SearchResults.prototype.search = function (value) { const apiClient = connectionManager.getApiClient(this.options.serverId);
var apiClient = connectionManager.getApiClient(this.options.serverId);
search(this, apiClient, this.options.element, value); search(this, apiClient, this.options.element, value);
}; }
destroy() {
SearchResults.prototype.destroy = function () { const options = this.options;
var options = this.options;
if (options) { if (options) {
options.element.classList.remove('searchFields'); options.element.classList.remove('searchFields');
} }
this.options = null; this.options = null;
}; }
}
return SearchResults; export default SearchResults;
});
/*eslint-enable indent*/

67
src/controllers/searchpage.js
View file

@ -1,36 +1,37 @@
define(['focusManager', 'searchFields', 'searchResults', 'events'], function (focusManager, SearchFields, SearchResults, events) { import focusManager from 'focusManager';
'use strict'; 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) { function onSearch(e, value) {
self.searchResults.search(value); self.searchResults.search(value);
}
const self = this;
view.addEventListener('viewshow', function () {
if (!self.searchFields) {
self.searchFields = new SearchFields({
element: view.querySelector('.searchFields')
});
self.searchResults = new SearchResults({
element: view.querySelector('.searchResults'),
serverId: params.serverId || ApiClient.serverId(),
parentId: params.parentId,
collectionType: params.collectionType
});
events.on(self.searchFields, 'search', onSearch);
}
});
view.addEventListener('viewdestroy', function () {
if (self.searchFields) {
self.searchFields.destroy();
self.searchFields = null;
} }
var self = this; if (self.searchResults) {
view.addEventListener('viewshow', function () { self.searchResults.destroy();
if (!self.searchFields) { self.searchResults = null;
self.searchFields = new SearchFields({ }
element: view.querySelector('.searchFields') });
}); }
self.searchResults = new SearchResults({
element: view.querySelector('.searchResults'),
serverId: params.serverId || ApiClient.serverId(),
parentId: params.parentId,
collectionType: params.collectionType
});
events.on(self.searchFields, 'search', onSearch);
}
});
view.addEventListener('viewdestroy', function () {
if (self.searchFields) {
self.searchFields.destroy();
self.searchFields = null;
}
if (self.searchResults) {
self.searchResults.destroy();
self.searchResults = null;
}
});
};
});