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/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",
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
|
@ -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*/
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue