|
1 | 1 | (function ($) { |
2 | 2 | $(document).ready(function () { |
| 3 | + |
3 | 4 | /** |
4 | | - * Wrap ALT fields in a container if not already done. |
| 5 | + * 1) Wrap ALT fields in a container if not already done. |
5 | 6 | */ |
6 | 7 | function wrapAltTextFields() { |
7 | 8 | $("input[name$='[alt]']").each(function () { |
|
13 | 14 | } |
14 | 15 |
|
15 | 16 | /** |
16 | | - * Generate alt text for each item that was flagged in Backdrop.settings.openaiAlt. |
17 | | - * (We only add items with empty alt in the PHP code, so we won't overwrite existing alt.) |
| 17 | + * 2) For each entry in Backdrop.settings.openaiAlt, generate alt text if needed. |
| 18 | + * We only add items in the PHP if alt == '', so each item is auto-generated once. |
18 | 19 | */ |
19 | 20 | function triggerAutoGenerationForAll() { |
20 | 21 | if (Backdrop.settings.openaiAlt) { |
21 | 22 | $.each(Backdrop.settings.openaiAlt, function (key, item) { |
22 | | - // item = { fid, field_name, delta, target_id, ... } |
| 23 | + // item is { fid, field_name, delta, target_id } for each image |
23 | 24 | if (item.fid && item.field_name !== undefined && item.delta !== undefined) { |
24 | | - generateAltText(item.fid, item.field_name, item.delta); |
| 25 | + generateAltText(item.fid, item.field_name, item.delta, key); |
25 | 26 | } |
26 | 27 | }); |
27 | 28 | } |
28 | 29 | } |
29 | 30 |
|
30 | 31 | /** |
31 | | - * Helper: Actually call the endpoint, then place alt text in the correct input. |
| 32 | + * 3) Helper: Fire an AJAX request to get alt text, then store it in the correct <input>. |
| 33 | + * After success, remove that item from openaiAlt so it’s not re-run. |
32 | 34 | */ |
33 | | - function generateAltText(fid, fieldName, delta) { |
| 35 | + function generateAltText(fid, fieldName, delta, key) { |
34 | 36 | $.ajax({ |
35 | 37 | url: Backdrop.settings.basePath + "openai-alt/generate-alt-text", |
36 | 38 | type: "POST", |
37 | 39 | data: { fid: fid, field_name: fieldName, delta: delta }, |
38 | 40 | success: function (response) { |
39 | 41 | if (response.status === "success" && response.alt_text) { |
40 | | - // 1) Insert the result into the <input> for this field/delta. |
41 | 42 | var selector = "input[name='" + fieldName + "[und][" + delta + "][alt]']"; |
42 | | - $(selector).val(response.alt_text).trigger("change"); |
| 43 | + $(selector).val(response.alt_text).trigger('change'); |
43 | 44 |
|
44 | | - // 2) Remove this item from openaiAlt so it won't auto-regenerate again. |
45 | | - var key = fieldName + ":" + delta; |
46 | | - if (Backdrop.settings.openaiAlt && Backdrop.settings.openaiAlt[key]) { |
| 45 | + // Remove from openaiAlt so we don’t re-run |
| 46 | + if (Backdrop.settings.openaiAlt[key]) { |
47 | 47 | delete Backdrop.settings.openaiAlt[key]; |
48 | 48 | } |
49 | 49 | } |
| 50 | + }, |
| 51 | + error: function (xhr, status, error) { |
| 52 | + console.error("❌ AJAX request failed:", status, error); |
50 | 53 | } |
51 | 54 | }); |
52 | 55 | } |
53 | 56 |
|
54 | 57 | /** |
55 | | - * After any AJAX that includes "file/ajax" (i.e. new image added), |
56 | | - * wait a moment, then try generating alt text for newly added items. |
| 58 | + * 4) On AJAX complete, if a new image was added, the form might reattach auto-generate. |
| 59 | + * So we re-run triggerAutoGenerationForAll to catch newly empty alt fields only. |
57 | 60 | */ |
58 | 61 | $(document).ajaxComplete(function (event, xhr, settings) { |
| 62 | + // If a file was uploaded |
59 | 63 | if (settings.url.includes("file/ajax")) { |
60 | 64 | setTimeout(triggerAutoGenerationForAll, 500); |
61 | 65 | } |
62 | 66 | }); |
63 | 67 |
|
64 | 68 | /** |
65 | | - * Optional: If you remove an image, you might want to remove |
66 | | - * that item from openaiAlt. Only do so if you have data attributes |
67 | | - * for the remove button. Otherwise, leaving them won't matter |
68 | | - * because we only run alt generation for items with an empty alt |
69 | | - * (and that item is gone entirely anyway). |
| 69 | + * 5) Optionally, handle remove button if you want to clear openaiAlt for that item. |
| 70 | + * You can do so if your remove button includes data-field-name, data-delta, etc. |
70 | 71 | */ |
71 | 72 | $(document).on("click", ".file-remove-button", function () { |
72 | | - // For a multi-value field, you might parse the delta from $(this).data('delta'). |
73 | | - // For now, we can just do: |
74 | | - // Backdrop.settings.openaiAlt = null; |
75 | | - // But that nixes *all* items. So be careful. |
| 73 | + // If you have data attributes, parse them, then remove from openaiAlt if you wish. |
| 74 | + // For now, do nothing or the simplest approach might be: |
| 75 | + // Backdrop.settings.openaiAlt = {}; |
| 76 | + // But that would remove all items, so be careful. |
76 | 77 | }); |
77 | 78 |
|
78 | | - // On page load, wrap all existing ALT fields, then generate for any that need it. |
| 79 | + // **Run initial setup** |
79 | 80 | wrapAltTextFields(); |
80 | 81 | triggerAutoGenerationForAll(); |
81 | 82 | }); |
|
0 commit comments