Skip to content

Commit

Permalink
[102] Significant performance improvements on the Templates page
Browse files Browse the repository at this point in the history 
- Add loader to Templates page
- Use improved "add field" buttons with static onclick callbacks rather than unique JS-assigned functions
- Initialize style dropdowns in HTML, not JQuery
- Initialize translation dropdowns in HTML and globally rather than per-object
- Initialize filter dropdowns globally in the HTML template rather than per-object
- Only initialize the extra data tabs when the template is expanded (this is a significant performance improvement)
- Make all async API calls at the same time, rather than sequentially
- Remove headers from translation dropdowns
  • Loading branch information
@CollinHeist
CollinHeist committed Nov 25, 2024
1 parent e55516f commit 35af9e0
Show file tree
Hide file tree
Showing 6 changed files with 335 additions and 213 deletions.
56 changes: 41 additions & 15 deletions app/templates/cardTemplates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
<template id="filter-template">
<div class="ui three fields">
<div class="ui field">
<div data-value="filter-arguments" class="ui clearable selection dropdown">
<div class="ui clearable selection dropdown" data-value="filter-arguments">
<input name="argument" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Select Argument</div>
<div class="menu"><!-- Added asynchronously --></div>
</div>
</div>
<div class="ui field">
<div data-value="filter-operators" class="ui clearable selection dropdown">
<div class="ui clearable selection dropdown" data-value="filter-operators">
<input name="operation" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Select Operation</div>
Expand All @@ -40,26 +40,29 @@
<template id="extra-template">
<div class="field">
<label>{label}</label>
<input type="text">
<input oninput="updateColorBubble(this);" onchange="updateLinkedFields(this);" type="text">
<p class="help">{tooltip}</p>
</div>
</template>

<template id="translation-template">
<span class="ui text">
Translate
<div data-value="language_code" class="ui inline scrolling clearable dropdown">
<div class="ui inline scrolling clearable dropdown" data-value="language_code">
<input name="language_code" type="hidden">
<div class="text">{language}</div>
<div class="default text">Language</div>
<i class="dropdown icon"></i>
<div class="menu"><!-- Added asynchronously --></div>
</div>
titles into
<div data-value="data_key" class="ui inline user-additions search clearable dropdown">
<div class="ui inline user-additions search clearable dropdown" data-value="data_key">
<input name="data_key" type="hidden">
<div class="text"></div>
<div class="default text">Key</div>
<i class="dropdown icon"></i>
<div class="menu"><!-- Added asynchronously --></div>
<div class="menu">
<div class="item" data-value="preferred_title" data-text="the title text">Title Text</div>
<div class="item" data-value="kanji" data-text="kanji">Kanji</div>
</div>
</div>
</span>
<br>
Expand All @@ -69,7 +72,7 @@
<div class="ui styled fluid accordion">
<div class="title">
<i class="dropdown icon"></i>
TEMPLATE NAME
Name
</div>
<div class="content">
<div class="ui stackable grid">
Expand Down Expand Up @@ -115,7 +118,7 @@ <h3 class="ui header">Unwatched Content</h3>

<h4 class="ui horizontal middle aligned divider header">Filters</h4>

<div>
<div data-label="filters">
<div class="ui floating visible info small message">
<span class="ui text">Filters restrict when a Template is active for a Series or Episode.</span>
<ul class="list">
Expand All @@ -126,7 +129,7 @@ <h4 class="ui horizontal middle aligned divider header">Filters</h4>
</ul>
</div>
<div data-value="conditions"></div>
<div data-add-field="condition" class="ui circular mini icon add-field button">
<div data-add-field="condition" class="ui circular mini icon add-field button" onclick="addBlankFilter(this);">
<i class="plus square outline icon"></i>
Add Condition
</div>
Expand Down Expand Up @@ -163,7 +166,18 @@ <h4 class="ui horizontal middle aligned divider header">Card Settings</h4>
<span class="default text">Server Default</span>
<input name="watched_style" type="hidden">
<i class="dropdown icon"></i>
<div class="menu"><!-- Added asynchronously --></div>
<div class="menu">
<div class="header">Art</div>
<div class="item" data-value="art">Art</div>
<div class="item" data-value="art blur">Blurred Art</div>
<div class="item" data-value="art grayscale">Grayscale Art</div>
<div class="item" data-value="art blur grayscale">Blurred Grayscale Art</div>
<div class="header">Unique</div>
<div class="item" data-value="unique">Unique</div>
<div class="item" data-value="blur unique">Blurred Unique</div>
<div class="item" data-value="grayscale unique">Grayscale Uniue</div>
<div class="item" data-value="blur grayscale unique">Blurred Grayscale Uniue</div>
</div>
</div>
</div>

Expand All @@ -173,7 +187,18 @@ <h4 class="ui horizontal middle aligned divider header">Card Settings</h4>
<span class="default text">Server Default</span>
<input name="unwatched_style" type="hidden">
<i class="dropdown icon"></i>
<div class="menu"><!-- Added asynchronously --></div>
<div class="menu">
<div class="header">Art</div>
<div class="item" data-value="art">Art</div>
<div class="item" data-value="art blur">Blurred Art</div>
<div class="item" data-value="art grayscale">Grayscale Art</div>
<div class="item" data-value="art blur grayscale">Blurred Grayscale Art</div>
<div class="header">Unique</div>
<div class="item" data-value="unique">Unique</div>
<div class="item" data-value="blur unique">Blurred Unique</div>
<div class="item" data-value="grayscale unique">Grayscale Uniue</div>
<div class="item" data-value="blur grayscale unique">Blurred Grayscale Uniue</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -206,7 +231,7 @@ <h4 class="ui horizontal middle aligned divider header">Season and Episode Text<
<label>Title</label>
</div>
</div>
<div data-value="add-title" class="ui circular mini icon add-field button">
<div data-value="add-title" class="ui circular mini icon add-field button" onclick="addBlankTitle(this);">
<i class="plus square outline icon"></i>
Add Title
</div>
Expand Down Expand Up @@ -279,7 +304,7 @@ <h4 class="ui horizontal middle aligned divider header">Translations and Extras<
<div data-value="translations" class="ui segment">
<!-- Added asynchrously -->
</div>
<div data-add-field="translation" class="ui circular mini icon add-field button">
<div data-add-field="translation" class="ui circular mini icon add-field button" onclick="addBlankTranslation(this);">
<i class="plus square outline icon"></i>
Add Translation
</div>
Expand Down Expand Up @@ -331,6 +356,7 @@ <h1 class="ui header">Templates</h1>
</button>

<!-- Templates -->
<div class="ui active centered inline blue elastic loader" id="loader"></div>
<div id="templates"><!-- Elements added asynchronously --></div>

<div class="ui compact floating info message">
Expand Down
2 changes: 1 addition & 1 deletion app/templates/js/.types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@
/**
* @typedef {Object} Translation
* @property {string} language_code
* @property {string} data_key
* @property {string} language
*/

/**
Expand Down
Loading

0 comments on commit 35af9e0

Please sign in to comment.