Use window. prefix for array-of-objects JavaScript functions

Explicitly use window.addArrayObjectItem, window.removeArrayObjectItem, etc.
in the template to ensure the functions are accessible from inline event handlers.
Also add safety checks to prevent errors if functions aren't loaded yet.
This commit is contained in:
Chuck
2026-01-04 20:20:32 -05:00
parent 4d7274b938
commit 6da2059b8c

View File

@@ -97,7 +97,7 @@
id="{{ prop_field_id }}_file" id="{{ prop_field_id }}_file"
accept="{{ allowed_types|join(',') }}" accept="{{ allowed_types|join(',') }}"
style="display: none;" style="display: none;"
onchange="handleArrayObjectFileUpload(event, '{{ field_id }}', {{ item_index }}, '{{ prop_key }}', '{{ plugin_id_from_config }}')"> onchange="if (typeof window.handleArrayObjectFileUpload === 'function') { window.handleArrayObjectFileUpload(event, '{{ field_id }}', {{ item_index }}, '{{ prop_key }}', '{{ plugin_id_from_config }}'); } else { console.error('handleArrayObjectFileUpload not available'); }">
<button type="button" <button type="button"
onclick="document.getElementById('{{ prop_field_id }}_file').click()" onclick="document.getElementById('{{ prop_field_id }}_file').click()"
class="px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors"> class="px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors">
@@ -108,7 +108,7 @@
<div class="mt-2 flex items-center space-x-2" data-file-data='{{ prop_value|tojson|safe }}' data-prop-key="{{ prop_key }}"> <div class="mt-2 flex items-center space-x-2" data-file-data='{{ prop_value|tojson|safe }}' data-prop-key="{{ prop_key }}">
<img src="/{{ prop_value.get('path') }}" alt="Logo" class="w-16 h-16 object-cover rounded border"> <img src="/{{ prop_value.get('path') }}" alt="Logo" class="w-16 h-16 object-cover rounded border">
<button type="button" <button type="button"
onclick="removeArrayObjectFile('{{ field_id }}', {{ item_index }}, '{{ prop_key }}')" onclick="if (typeof window.removeArrayObjectFile === 'function') { window.removeArrayObjectFile('{{ field_id }}', {{ item_index }}, '{{ prop_key }}'); } else { console.error('removeArrayObjectFile not available'); }"
class="text-red-600 hover:text-red-800"> class="text-red-600 hover:text-red-800">
<i class="fas fa-trash"></i> Remove <i class="fas fa-trash"></i> Remove
</button> </button>
@@ -123,7 +123,7 @@
data-prop-key="{{ prop_key }}" data-prop-key="{{ prop_key }}"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
{% if prop_value %}checked{% endif %} {% if prop_value %}checked{% endif %}
onchange="updateArrayObjectData('{{ field_id }}')"> onchange="if (typeof window.updateArrayObjectData === 'function') { window.updateArrayObjectData('{{ field_id }}'); }">
<span class="ml-2 text-sm text-gray-700">{{ prop_label }}</span> <span class="ml-2 text-sm text-gray-700">{{ prop_label }}</span>
</label> </label>
{% else %} {% else %}
@@ -147,7 +147,7 @@
<div class="flex justify-end mt-2"> <div class="flex justify-end mt-2">
<button type="button" <button type="button"
onclick="removeArrayObjectItem('{{ field_id }}', {{ item_index }})" onclick="if (typeof window.removeArrayObjectItem === 'function') { window.removeArrayObjectItem('{{ field_id }}', {{ item_index }}); } else { console.error('removeArrayObjectItem not available'); }"
class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors" class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
title="Remove Feed"> title="Remove Feed">
<i class="fas fa-trash mr-1"></i> Remove Feed <i class="fas fa-trash mr-1"></i> Remove Feed
@@ -158,7 +158,7 @@
</div> </div>
<button type="button" <button type="button"
onclick="addArrayObjectItem('{{ field_id }}', '{{ full_key }}', {{ max_items }})" onclick="if (typeof window.addArrayObjectItem === 'function') { window.addArrayObjectItem('{{ field_id }}', '{{ full_key }}', {{ max_items }}); } else { console.error('addArrayObjectItem not available'); }"
class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors" class="mt-3 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
{% if array_value|length >= max_items %}disabled style="opacity: 0.5; cursor: not-allowed;"{% endif %}> {% if array_value|length >= max_items %}disabled style="opacity: 0.5; cursor: not-allowed;"{% endif %}>
<i class="fas fa-plus mr-1"></i> Add Feed <i class="fas fa-plus mr-1"></i> Add Feed