From 489ec276026656141ef8c948fe70e2fca1b1b2dd Mon Sep 17 00:00:00 2001 From: "Timothy J. Warren" Date: Fri, 8 Oct 2021 12:15:34 -0400 Subject: [PATCH] Refactor media search rendering to be less redundant --- frontEndSrc/css/src/general.css | 8 +++ frontEndSrc/js/anime.js | 4 +- frontEndSrc/js/manga.js | 4 +- frontEndSrc/js/template-helpers.js | 80 ++++++++++++++++-------------- 4 files changed, 54 insertions(+), 42 deletions(-) diff --git a/frontEndSrc/css/src/general.css b/frontEndSrc/css/src/general.css index 29efb1f5..9d00cff3 100644 --- a/frontEndSrc/css/src/general.css +++ b/frontEndSrc/css/src/general.css @@ -628,6 +628,14 @@ picture.cover { background-size: contain; background-repeat: no-repeat; } +/* There are two .name elements, just darken them both in this case! */ +.media.search.disabled .name { + background-color: #000; + background-color: rgba(0, 0, 0, 0.75); + background-size: cover; + background-size: contain; + background-repeat: no-repeat; +} .media.search > .row { z-index: 6; diff --git a/frontEndSrc/js/anime.js b/frontEndSrc/js/anime.js index 77ec194b..f82a496a 100644 --- a/frontEndSrc/js/anime.js +++ b/frontEndSrc/js/anime.js @@ -1,5 +1,5 @@ import _ from './anime-client.js' -import { renderAnimeSearchResults } from './template-helpers.js' +import { renderSearchResults } from './template-helpers.js' const search = (query) => { // Show the loader @@ -13,7 +13,7 @@ const search = (query) => { _.hide('.cssload-loader'); // Show the results - _.$('#series-list')[ 0 ].innerHTML = renderAnimeSearchResults(searchResults); + _.$('#series-list')[ 0 ].innerHTML = renderSearchResults('anime', searchResults); }); }; diff --git a/frontEndSrc/js/manga.js b/frontEndSrc/js/manga.js index 21992d26..d07907bb 100644 --- a/frontEndSrc/js/manga.js +++ b/frontEndSrc/js/manga.js @@ -1,12 +1,12 @@ import _ from './anime-client.js' -import { renderMangaSearchResults } from './template-helpers.js' +import { renderSearchResults } from './template-helpers.js' const search = (query) => { _.show('.cssload-loader'); return _.get(_.url('/manga/search'), { query }, (searchResults, status) => { searchResults = JSON.parse(searchResults); _.hide('.cssload-loader'); - _.$('#series-list')[ 0 ].innerHTML = renderMangaSearchResults(searchResults); + _.$('#series-list')[ 0 ].innerHTML = renderSearchResults('manga', searchResults); }); }; diff --git a/frontEndSrc/js/template-helpers.js b/frontEndSrc/js/template-helpers.js index 33bdeb5c..55c33aa8 100644 --- a/frontEndSrc/js/template-helpers.js +++ b/frontEndSrc/js/template-helpers.js @@ -7,52 +7,55 @@ _.on('main', 'change', '.big-check', (e) => { document.getElementById(`mal_${id}`).checked = true; }); -export function renderAnimeSearchResults (data) { - return data.map(item => { - const titles = item.titles.join('
'); +/** + * On search results with an existing library entry, this shows that fact, with an edit link for the existing + * library entry + * + * @param {'anime'|'manga'} type + * @param {Object} item + * @returns {String} + */ +function renderEditLink (type, item) { + if (item.libraryEntry === null) { + return ''; + } - return ` - - `; - }).join(''); + return ` +
+ [ Already in List ] +
+
+ + Edit + +
+
 
+ ` } -export function renderMangaSearchResults (data) { +/** + * Show the search results for a media item + * + * @param {'anime'|'manga'} type + * @param {Object} data + * @returns {String} + */ +export function renderSearchResults (type, data) { return data.map(item => { const titles = item.titles.join('
'); + const disabled = item.libraryEntry !== null ? 'disabled' : ''; + const editLink = renderEditLink(type, item); + return ` -