tagliatelle

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

tag-alias.js (4541B)

      1 // Initialize from the global variable passed from the template
      2 let aliasGroups = window.initialAliasGroups || [];
      3 
      4 function renderAliasGroups() {
      5     const container = document.getElementById('alias-groups');
      6     container.innerHTML = '';
      7 
      8     aliasGroups.forEach((group, groupIndex) => {
      9         const groupDiv = document.createElement('div');
     10         groupDiv.style.cssText = 'border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 4px;';
     11 
     12         groupDiv.innerHTML = `
     13             <div style="margin-bottom: 10px;">
     14                 <label style="display: block; font-weight: bold; margin-bottom: 5px;">Category:</label>
     15                 <input type="text"
     16                        value="${escapeHtml(group.category)}"
     17                        onchange="updateCategory(${groupIndex}, this.value)"
     18                        style="width: 200px; padding: 6px; font-size: 14px;"
     19                        placeholder="e.g., colour">
     20             </div>
     21 
     22             <div style="margin-bottom: 10px;">
     23                 <label style="display: block; font-weight: bold; margin-bottom: 5px;">Aliased Values:</label>
     24                 <div id="aliases-${groupIndex}"></div>
     25                 <button onclick="addAlias(${groupIndex})" type="button" class="text-button">+ Add Value</button>
     26             </div>
     27 
     28             <button onclick="removeAliasGroup(${groupIndex})" type="button" class="text-button">Remove Group</button>
     29         `;
     30 
     31         container.appendChild(groupDiv);
     32         renderAliases(groupIndex);
     33     });
     34 }
     35 
     36 function renderAliases(groupIndex) {
     37     const container = document.getElementById(`aliases-${groupIndex}`);
     38     container.innerHTML = '';
     39 
     40     const group = aliasGroups[groupIndex];
     41     if (!group.aliases) {
     42         group.aliases = [];
     43     }
     44 
     45     group.aliases.forEach((alias, aliasIndex) => {
     46         const aliasDiv = document.createElement('div');
     47         aliasDiv.style.cssText = 'display: flex; gap: 10px; margin-bottom: 5px; align-items: center;';
     48 
     49         aliasDiv.innerHTML = `
     50             <input type="text"
     51                    value="${escapeHtml(alias)}"
     52                    onchange="updateAlias(${groupIndex}, ${aliasIndex}, this.value)"
     53                    style="flex: 1; padding: 6px; font-size: 14px;"
     54                    placeholder="e.g., blue">
     55             <button onclick="removeAlias(${groupIndex}, ${aliasIndex})" type="button" class="text-button">Remove</button>
     56         `;
     57 
     58         container.appendChild(aliasDiv);
     59     });
     60 }
     61 
     62 function addAliasGroup() {
     63     aliasGroups.push({
     64         category: '',
     65         aliases: ['', '']
     66     });
     67     renderAliasGroups();
     68 }
     69 
     70 function removeAliasGroup(groupIndex) {
     71     if (confirm('Remove this alias group?')) {
     72         aliasGroups.splice(groupIndex, 1);
     73         renderAliasGroups();
     74     }
     75 }
     76 
     77 function updateCategory(groupIndex, value) {
     78     aliasGroups[groupIndex].category = value;
     79 }
     80 
     81 function addAlias(groupIndex) {
     82     aliasGroups[groupIndex].aliases.push('');
     83     renderAliases(groupIndex);
     84 }
     85 
     86 function removeAlias(groupIndex, aliasIndex) {
     87     aliasGroups[groupIndex].aliases.splice(aliasIndex, 1);
     88     renderAliases(groupIndex);
     89 }
     90 
     91 function updateAlias(groupIndex, aliasIndex, value) {
     92     aliasGroups[groupIndex].aliases[aliasIndex] = value;
     93 }
     94 
     95 document.getElementById('aliases-form').addEventListener('submit', function(e) {
     96     // Filter out incomplete groups (need a category and at least 2 aliases)
     97     const cleanedGroups = aliasGroups
     98         .filter(group => group.category && group.aliases && group.aliases.length > 0)
     99         .map(group => ({
    100             category: group.category.trim(),
    101             aliases: group.aliases.filter(a => a && a.trim()).map(a => a.trim())
    102         }))
    103         .filter(group => group.aliases.length >= 2);
    104 
    105     // Remove any previously-injected hidden fields from a prior submit
    106     this.querySelectorAll('input[data-generated]').forEach(el => el.remove());
    107 
    108     // Append one hidden field per value — no JSON
    109     cleanedGroups.forEach((group, gi) => {
    110         appendHidden(this, `aliases[${gi}][category]`, group.category);
    111         group.aliases.forEach((alias, ai) => {
    112             appendHidden(this, `aliases[${gi}][aliases][${ai}]`, alias);
    113         });
    114     });
    115 });
    116 
    117 function appendHidden(form, name, value) {
    118     const input = document.createElement('input');
    119     input.type = 'hidden';
    120     input.name = name;
    121     input.value = value;
    122     input.dataset.generated = '1';
    123     form.appendChild(input);
    124 }
    125 
    126 // Initial render
    127 document.addEventListener('DOMContentLoaded', function() {
    128     renderAliasGroups();
    129 });