tagliatelle

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

tag-alias.js (4593B)

      1 let aliasGroups = window.initialAliasGroups || [];
      2 
      3 function renderAliasGroups() {
      4     const container = document.getElementById('alias-groups');
      5     container.innerHTML = '';
      6 
      7     aliasGroups.forEach((group, gi) => {
      8         if (!group.aliases) group.aliases = [];
      9 
     10         const row = document.createElement('div');
     11         row.className = 'alias-row';
     12         row.dataset.group = gi;
     13 
     14         // Category input
     15         const catInput = document.createElement('input');
     16         catInput.type = 'text';
     17         catInput.className = 'alias-input alias-input--category';
     18         catInput.value = group.category;
     19         catInput.placeholder = 'category';
     20         catInput.addEventListener('change', e => { aliasGroups[gi].category = e.target.value; });
     21         row.appendChild(catInput);
     22 
     23         // Arrow separator
     24         const arrow = document.createElement('span');
     25         arrow.className = 'alias-separator';
     26         arrow.textContent = '→';
     27         row.appendChild(arrow);
     28 
     29         // Alias value inputs
     30         const valuesWrapper = document.createElement('span');
     31         valuesWrapper.id = `aliases-${gi}`;
     32         valuesWrapper.style.cssText = 'display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center;';
     33         row.appendChild(valuesWrapper);
     34         renderAliasValues(gi, valuesWrapper);
     35 
     36         // + Value button
     37         const addBtn = document.createElement('button');
     38         addBtn.type = 'button';
     39         addBtn.className = 'alias-btn';
     40         addBtn.textContent = '+ Value';
     41         addBtn.addEventListener('click', () => addAlias(gi));
     42         row.appendChild(addBtn);
     43 
     44         // Remove group button
     45         const removeBtn = document.createElement('button');
     46         removeBtn.type = 'button';
     47         removeBtn.className = 'alias-btn alias-btn--remove';
     48         removeBtn.textContent = '✕ Group';
     49         removeBtn.addEventListener('click', () => removeAliasGroup(gi));
     50         row.appendChild(removeBtn);
     51 
     52         container.appendChild(row);
     53     });
     54 }
     55 
     56 function renderAliasValues(gi, wrapper) {
     57     if (!wrapper) wrapper = document.getElementById(`aliases-${gi}`);
     58     wrapper.innerHTML = '';
     59 
     60     aliasGroups[gi].aliases.forEach((alias, ai) => {
     61         if (ai > 0) {
     62             const comma = document.createElement('span');
     63             comma.className = 'alias-separator';
     64             comma.textContent = ',';
     65             wrapper.appendChild(comma);
     66         }
     67 
     68         const input = document.createElement('input');
     69         input.type = 'text';
     70         input.className = 'alias-input alias-input--value';
     71         input.value = alias;
     72         input.placeholder = 'value';
     73         input.addEventListener('change', e => updateAlias(gi, ai, e.target.value));
     74 
     75         // Double-click to remove a single value
     76         input.title = 'Double-click to remove';
     77         input.addEventListener('dblclick', () => removeAlias(gi, ai));
     78 
     79         wrapper.appendChild(input);
     80     });
     81 }
     82 
     83 function addAliasGroup() {
     84     aliasGroups.push({ category: '', aliases: ['', ''] });
     85     renderAliasGroups();
     86 }
     87 
     88 function removeAliasGroup(gi) {
     89     if (confirm('Remove this alias group?')) {
     90         aliasGroups.splice(gi, 1);
     91         renderAliasGroups();
     92     }
     93 }
     94 
     95 function updateCategory(gi, value) {
     96     aliasGroups[gi].category = value;
     97 }
     98 
     99 function addAlias(gi) {
    100     aliasGroups[gi].aliases.push('');
    101     renderAliasValues(gi);
    102 }
    103 
    104 function removeAlias(gi, ai) {
    105     aliasGroups[gi].aliases.splice(ai, 1);
    106     renderAliasValues(gi);
    107 }
    108 
    109 function updateAlias(gi, ai, value) {
    110     aliasGroups[gi].aliases[ai] = value;
    111 }
    112 
    113 // submit form
    114 document.getElementById('aliases-form').addEventListener('submit', function () {
    115     const cleanedGroups = aliasGroups
    116         .filter(g => g.category && g.aliases && g.aliases.length > 0)
    117         .map(g => ({
    118             category: g.category.trim(),
    119             aliases: g.aliases.filter(a => a && a.trim()).map(a => a.trim())
    120         }))
    121         .filter(g => g.aliases.length >= 2);
    122 
    123     this.querySelectorAll('input[data-generated]').forEach(el => el.remove());
    124 
    125     cleanedGroups.forEach((group, gi) => {
    126         appendHidden(this, `aliases[${gi}][category]`, group.category);
    127         group.aliases.forEach((alias, ai) => {
    128             appendHidden(this, `aliases[${gi}][aliases][${ai}]`, alias);
    129         });
    130     });
    131 });
    132 
    133 function appendHidden(form, name, value) {
    134     const input = document.createElement('input');
    135     input.type = 'hidden';
    136     input.name = name;
    137     input.value = value;
    138     input.dataset.generated = '1';
    139     form.appendChild(input);
    140 }
    141 
    142 // initialise
    143 document.addEventListener('DOMContentLoaded', renderAliasGroups);