commit ce6e5f5dccc6d1cc0c7f4c7bc9b73a36be8aeaca
parent 899f76e4746abd65eddee26e1c31fc55c07d730b
Author: breadcat <breadcat@users.noreply.github.com>
Date: Tue, 11 Nov 2025 22:56:30 +0000
Move alias JS to external file
Diffstat:
| A | static/tag-alias.js | | | 121 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | templates/settings.html | | | 132 | +++---------------------------------------------------------------------------- |
2 files changed, 125 insertions(+), 128 deletions(-)
diff --git a/static/tag-alias.js b/static/tag-alias.js
@@ -0,0 +1,121 @@
+// Initialize from the global variable passed from the template
+let aliasGroups = window.initialAliasGroups || [];
+
+function renderAliasGroups() {
+ const container = document.getElementById('alias-groups');
+ container.innerHTML = '';
+
+ aliasGroups.forEach((group, groupIndex) => {
+ const groupDiv = document.createElement('div');
+ groupDiv.style.cssText = 'border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 4px; background-color: #f8f9fa;';
+
+ groupDiv.innerHTML = `
+ <div style="margin-bottom: 10px;">
+ <label style="display: block; font-weight: bold; margin-bottom: 5px;">Category:</label>
+ <input type="text"
+ value="${escapeHtml(group.category)}"
+ onchange="updateCategory(${groupIndex}, this.value)"
+ style="width: 200px; padding: 6px; font-size: 14px;"
+ placeholder="e.g., colour">
+ </div>
+
+ <div style="margin-bottom: 10px;">
+ <label style="display: block; font-weight: bold; margin-bottom: 5px;">Aliased Values:</label>
+ <div id="aliases-${groupIndex}"></div>
+ <button onclick="addAlias(${groupIndex})" type="button" style="background-color: #17a2b8; color: white; padding: 4px 12px; border: none; border-radius: 3px; font-size: 13px; cursor: pointer; margin-top: 5px;">
+ + Add Value
+ </button>
+ </div>
+
+ <button onclick="removeAliasGroup(${groupIndex})" type="button" style="background-color: #dc3545; color: white; padding: 6px 12px; border: none; border-radius: 3px; font-size: 13px; cursor: pointer;">
+ Remove Group
+ </button>
+ `;
+
+ container.appendChild(groupDiv);
+ renderAliases(groupIndex);
+ });
+}
+
+function renderAliases(groupIndex) {
+ const container = document.getElementById(`aliases-${groupIndex}`);
+ container.innerHTML = '';
+
+ const group = aliasGroups[groupIndex];
+ if (!group.aliases) {
+ group.aliases = [];
+ }
+
+ group.aliases.forEach((alias, aliasIndex) => {
+ const aliasDiv = document.createElement('div');
+ aliasDiv.style.cssText = 'display: flex; gap: 10px; margin-bottom: 5px; align-items: center;';
+
+ aliasDiv.innerHTML = `
+ <input type="text"
+ value="${escapeHtml(alias)}"
+ onchange="updateAlias(${groupIndex}, ${aliasIndex}, this.value)"
+ style="flex: 1; padding: 6px; font-size: 14px;"
+ placeholder="e.g., blue">
+ <button onclick="removeAlias(${groupIndex}, ${aliasIndex})" type="button" style="background-color: #dc3545; color: white; padding: 4px 8px; border: none; border-radius: 3px; font-size: 12px; cursor: pointer;">
+ Remove
+ </button>
+ `;
+
+ container.appendChild(aliasDiv);
+ });
+}
+
+function addAliasGroup() {
+ aliasGroups.push({
+ category: '',
+ aliases: ['', '']
+ });
+ renderAliasGroups();
+}
+
+function removeAliasGroup(groupIndex) {
+ if (confirm('Remove this alias group?')) {
+ aliasGroups.splice(groupIndex, 1);
+ renderAliasGroups();
+ }
+}
+
+function updateCategory(groupIndex, value) {
+ aliasGroups[groupIndex].category = value;
+}
+
+function addAlias(groupIndex) {
+ aliasGroups[groupIndex].aliases.push('');
+ renderAliases(groupIndex);
+}
+
+function removeAlias(groupIndex, aliasIndex) {
+ aliasGroups[groupIndex].aliases.splice(aliasIndex, 1);
+ renderAliases(groupIndex);
+}
+
+function updateAlias(groupIndex, aliasIndex, value) {
+ aliasGroups[groupIndex].aliases[aliasIndex] = value;
+}
+
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+document.getElementById('aliases-form').addEventListener('submit', function(e) {
+ // Filter out empty groups and aliases
+ const cleanedGroups = aliasGroups
+ .filter(group => group.category && group.aliases && group.aliases.length > 0)
+ .map(group => ({
+ category: group.category.trim(),
+ aliases: group.aliases.filter(a => a && a.trim()).map(a => a.trim())
+ }))
+ .filter(group => group.aliases.length >= 2); // Need at least 2 values to be an alias
+
+ document.getElementById('aliases_json').value = JSON.stringify(cleanedGroups);
+});
+
+// Initial render
+renderAliasGroups();
diff --git a/templates/settings.html b/templates/settings.html
@@ -71,17 +71,17 @@
<h2>Tag Aliases</h2>
<p style="color: #666; margin-bottom: 20px;">
- Define tag aliases so that multiple tag values are treated as equivalent when searching or filtering.
+ Define tag aliases so that multiple tag values are treated as equivalent when searching or filtering.
For example, if you alias "colour/blue" with "colour/navy", searching for either will show files tagged with both.
</p>
<div id="aliases-section" style="max-width: 800px;">
<div id="alias-groups"></div>
-
+
<button onclick="addAliasGroup()" style="background-color: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; margin-top: 10px;">
+ Add Alias Group
</button>
-
+
<form method="post" id="aliases-form" style="margin-top: 20px;">
<input type="hidden" name="action" value="save_aliases">
<input type="hidden" name="aliases_json" id="aliases_json">
@@ -91,131 +91,7 @@
</form>
</div>
-<script>
-let aliasGroups = {{.Data.Config.TagAliases}};
-if (!aliasGroups) {
- aliasGroups = [];
-}
-
-function renderAliasGroups() {
- const container = document.getElementById('alias-groups');
- container.innerHTML = '';
-
- aliasGroups.forEach((group, groupIndex) => {
- const groupDiv = document.createElement('div');
- groupDiv.style.cssText = 'border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 4px; background-color: #f8f9fa;';
-
- groupDiv.innerHTML = `
- <div style="margin-bottom: 10px;">
- <label style="display: block; font-weight: bold; margin-bottom: 5px;">Category:</label>
- <input type="text"
- value="${escapeHtml(group.category)}"
- onchange="updateCategory(${groupIndex}, this.value)"
- style="width: 200px; padding: 6px; font-size: 14px;"
- placeholder="e.g., colour">
- </div>
-
- <div style="margin-bottom: 10px;">
- <label style="display: block; font-weight: bold; margin-bottom: 5px;">Aliased Values:</label>
- <div id="aliases-${groupIndex}"></div>
- <button onclick="addAlias(${groupIndex})" type="button" style="background-color: #17a2b8; color: white; padding: 4px 12px; border: none; border-radius: 3px; font-size: 13px; cursor: pointer; margin-top: 5px;">
- + Add Value
- </button>
- </div>
-
- <button onclick="removeAliasGroup(${groupIndex})" type="button" style="background-color: #dc3545; color: white; padding: 6px 12px; border: none; border-radius: 3px; font-size: 13px; cursor: pointer;">
- Remove Group
- </button>
- `;
-
- container.appendChild(groupDiv);
- renderAliases(groupIndex);
- });
-}
-
-function renderAliases(groupIndex) {
- const container = document.getElementById(`aliases-${groupIndex}`);
- container.innerHTML = '';
-
- const group = aliasGroups[groupIndex];
- if (!group.aliases) {
- group.aliases = [];
- }
-
- group.aliases.forEach((alias, aliasIndex) => {
- const aliasDiv = document.createElement('div');
- aliasDiv.style.cssText = 'display: flex; gap: 10px; margin-bottom: 5px; align-items: center;';
-
- aliasDiv.innerHTML = `
- <input type="text"
- value="${escapeHtml(alias)}"
- onchange="updateAlias(${groupIndex}, ${aliasIndex}, this.value)"
- style="flex: 1; padding: 6px; font-size: 14px;"
- placeholder="e.g., blue">
- <button onclick="removeAlias(${groupIndex}, ${aliasIndex})" type="button" style="background-color: #dc3545; color: white; padding: 4px 8px; border: none; border-radius: 3px; font-size: 12px; cursor: pointer;">
- Remove
- </button>
- `;
-
- container.appendChild(aliasDiv);
- });
-}
-
-function addAliasGroup() {
- aliasGroups.push({
- category: '',
- aliases: ['', '']
- });
- renderAliasGroups();
-}
-
-function removeAliasGroup(groupIndex) {
- if (confirm('Remove this alias group?')) {
- aliasGroups.splice(groupIndex, 1);
- renderAliasGroups();
- }
-}
-
-function updateCategory(groupIndex, value) {
- aliasGroups[groupIndex].category = value;
-}
-
-function addAlias(groupIndex) {
- aliasGroups[groupIndex].aliases.push('');
- renderAliases(groupIndex);
-}
-
-function removeAlias(groupIndex, aliasIndex) {
- aliasGroups[groupIndex].aliases.splice(aliasIndex, 1);
- renderAliases(groupIndex);
-}
-
-function updateAlias(groupIndex, aliasIndex, value) {
- aliasGroups[groupIndex].aliases[aliasIndex] = value;
-}
-
-function escapeHtml(text) {
- const div = document.createElement('div');
- div.textContent = text;
- return div.innerHTML;
-}
-
-document.getElementById('aliases-form').addEventListener('submit', function(e) {
- // Filter out empty groups and aliases
- const cleanedGroups = aliasGroups
- .filter(group => group.category && group.aliases && group.aliases.length > 0)
- .map(group => ({
- category: group.category.trim(),
- aliases: group.aliases.filter(a => a && a.trim()).map(a => a.trim())
- }))
- .filter(group => group.aliases.length >= 2); // Need at least 2 values to be an alias
-
- document.getElementById('aliases_json').value = JSON.stringify(cleanedGroups);
-});
-
-// Initial render
-renderAliasGroups();
-</script>
+<script>window.initialAliasGroups = {{.Data.Config.TagAliases}};</script><script src="/static/tag-alias.js" defer></script>
<div style="margin-top: 40px; padding: 20px; background-color: #f8f9fa; border-radius: 5px;">
<h3>Current Configuration:</h3>
