Skip to content

Commit 720154a

Browse files
EduardoJMEduardoJM
authored
test: write some tests for htmx and array field
1 parent a512d77 commit 720154a

File tree

9 files changed

+859
-281
lines changed

9 files changed

+859
-281
lines changed

‎.editorconfig

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,7 @@ charset = utf-8
99
[*.{js,html}]
1010
indent_style = space
1111
indent_size = 2
12+
13+
[*.py]
14+
indent_style = space
15+
indent_size = 4

‎image_uploader_widget/static/admin/js/image-uploader-inline.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -351,8 +351,11 @@ function handleBeginOrdering(previewsContainer) {
351351
root.classList.add('dragging');
352352
}
353353

354-
document.addEventListener('DOMContentLoaded', function() {
355-
const items = Array.from(document.querySelectorAll('.iuw-inline-root .previews'));
354+
function initialize(doc) {
355+
if (!doc) {
356+
doc = document;
357+
}
358+
const items = Array.from(doc.querySelectorAll('.iuw-inline-root .previews'));
356359
for (const item of items) {
357360
const root = item.closest('.iuw-inline-root');
358361
const inlineGroup = root.closest('.inline-group');
@@ -371,4 +374,11 @@ document.addEventListener('DOMContentLoaded', function() {
371374
}
372375
});
373376
}
377+
}
378+
379+
document.addEventListener('DOMContentLoaded', function() {
380+
initialize();
374381
});
382+
document.addEventListener('htmx:afterSwap', function(ev) {
383+
initialize(ev.target);
384+
})

‎image_uploader_widget/static/admin/js/image-uploader-widget.js

Lines changed: 119 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,142 @@
1-
function changeImagePreview(root, input) {
2-
if (!input) {
3-
input = root.querySelector('input[type=file]');
4-
}
5-
6-
const [file] = input.files;
7-
const url = URL.createObjectURL(file);
8-
root.classList.remove('empty');
9-
10-
const checkbox = root.querySelector('input[type="checkbox"]');
11-
if (checkbox) {
12-
checkbox.checked = false;
13-
}
14-
15-
const previewImage = root.querySelector('.iuw-image-preview img');
16-
if (!previewImage) {
17-
const previewRoot = root.querySelector('.iuw-image-preview');
18-
19-
const img = document.createElement('img');
20-
img.src = url;
21-
previewRoot.appendChild(img);
22-
return;
1+
document.addEventListener('DOMContentLoaded', function(){
2+
function changeImagePreview(root, input) {
3+
if (!input) {
4+
input = root.querySelector('input[type=file]');
5+
}
6+
7+
const [file] = input.files;
8+
const url = URL.createObjectURL(file);
9+
root.classList.remove('empty');
10+
11+
const checkbox = root.querySelector('input[type="checkbox"]');
12+
if (checkbox) {
13+
checkbox.checked = false;
14+
}
15+
16+
const previewImage = root.querySelector('.iuw-image-preview img');
17+
if (!previewImage) {
18+
const previewRoot = root.querySelector('.iuw-image-preview');
19+
20+
const img = document.createElement('img');
21+
img.src = url;
22+
previewRoot.appendChild(img);
23+
return;
24+
}
25+
previewImage.src = url;
2326
}
24-
previewImage.src = url;
25-
}
26-
27-
document.addEventListener('change', function(evt) {
28-
const { target } = evt;
29-
const root = target.closest('.iuw-root');
30-
if (!root) { return; }
3127

32-
const input = root.querySelector('input[type="file"]');
33-
if (!input.files.length) { return; }
34-
35-
changeImagePreview(root, input);
36-
});
37-
38-
function handleEmptyMarkerClick(emptyMarker) {
39-
const root = emptyMarker.closest('.iuw-root');
40-
if (!root) { return; }
28+
document.addEventListener('change', function(evt) {
29+
const { target } = evt;
30+
const root = target.closest('.iuw-root');
31+
if (!root) { return; }
4132

42-
root.querySelector('input[type="file"]').click();
43-
}
33+
const input = root.querySelector('input[type="file"]');
34+
if (!input.files.length) { return; }
4435

45-
function handlePreviewImage(previewItem) {
46-
let image = previewItem.querySelector('img');
47-
if (!image) {
48-
return;
49-
}
50-
image = image.cloneNode(true);
51-
IUWPreviewModal.createPreviewModal(image);
52-
IUWPreviewModal.openPreviewModal();
53-
}
54-
55-
function handleRemoveImage(root) {
56-
const checkbox = root.querySelector('input[type="checkbox"]');
57-
if (checkbox) {
58-
checkbox.checked = true;
59-
}
36+
changeImagePreview(root, input);
37+
});
6038

61-
const fileInput = root.querySelector('input[type="file"]');
62-
fileInput.value = '';
63-
root.classList.add('empty');
64-
}
39+
function handleEmptyMarkerClick(emptyMarker) {
40+
const root = emptyMarker.closest('.iuw-root');
41+
if (!root) { return; }
6542

66-
document.addEventListener('click', function(evt) {
67-
const { target } = evt;
68-
const emptyMarker = target.closest('.iuw-empty');
69-
if (emptyMarker) {
70-
return handleEmptyMarkerClick(emptyMarker);
43+
root.querySelector('input[type="file"]').click();
7144
}
7245

73-
const deleteButton = target.closest('.iuw-delete-icon');
74-
if (deleteButton) {
75-
return handleRemoveImage(target.closest('.iuw-root'));
46+
function handlePreviewImage(previewItem) {
47+
let image = previewItem.querySelector('img');
48+
if (!image) {
49+
return;
50+
}
51+
image = image.cloneNode(true);
52+
IUWPreviewModal.createPreviewModal(image);
53+
IUWPreviewModal.openPreviewModal();
7654
}
7755

78-
const previewButton = target.closest('.iuw-preview-icon');
79-
if (previewButton) {
80-
return handlePreviewImage(target.closest('.iuw-image-preview'));
81-
}
56+
function handleRemoveImage(root) {
57+
const checkbox = root.querySelector('input[type="checkbox"]');
58+
if (checkbox) {
59+
checkbox.checked = true;
60+
}
8261

83-
const previewItem = target.closest('.iuw-image-preview');
84-
if (previewItem) {
85-
const root = target.closest('.iuw-root');
8662
const fileInput = root.querySelector('input[type="file"]');
87-
fileInput.click();
63+
fileInput.value = '';
64+
root.classList.add('empty');
8865
}
89-
});
90-
91-
document.addEventListener('dragenter', function(evt) {
92-
const root = evt.target.closest('.iuw-root');
93-
if (!root) { return; }
94-
95-
window.draggingWidget = root;
96-
root.classList.add('drop-zone');
97-
});
98-
99-
document.addEventListener('dragover', function(evt) {
100-
const root = evt.target.closest('.iuw-root');
101-
if (!root) { return; }
102-
103-
evt.preventDefault();
104-
});
10566

106-
document.addEventListener('dragleave', function(evt) {
107-
if (evt.relatedTarget && evt.relatedTarget.closest('.iuw-root') === window.draggingWidget) {
108-
return;
109-
}
110-
const root = evt.target.closest('.iuw-root');
111-
if (!root) { return; }
67+
document.addEventListener('click', function(evt) {
68+
const { target } = evt;
69+
const emptyMarker = target.closest('.iuw-empty');
70+
if (emptyMarker) {
71+
return handleEmptyMarkerClick(emptyMarker);
72+
}
73+
74+
const deleteButton = target.closest('.iuw-delete-icon');
75+
if (deleteButton) {
76+
return handleRemoveImage(target.closest('.iuw-root'));
77+
}
78+
79+
const previewButton = target.closest('.iuw-preview-icon');
80+
if (previewButton) {
81+
return handlePreviewImage(target.closest('.iuw-image-preview'));
82+
}
83+
84+
const previewItem = target.closest('.iuw-image-preview');
85+
if (previewItem) {
86+
const root = target.closest('.iuw-root');
87+
const fileInput = root.querySelector('input[type="file"]');
88+
fileInput.click();
89+
}
90+
});
91+
92+
document.addEventListener('dragenter', function(evt) {
93+
const root = evt.target.closest('.iuw-root');
94+
if (!root) { return; }
95+
96+
window.draggingWidget = root;
97+
root.classList.add('drop-zone');
98+
});
99+
100+
document.addEventListener('dragover', function(evt) {
101+
const root = evt.target.closest('.iuw-root');
102+
if (!root) { return; }
103+
104+
evt.preventDefault();
105+
});
106+
107+
document.addEventListener('dragleave', function(evt) {
108+
if (evt.relatedTarget && evt.relatedTarget.closest('.iuw-root') === window.draggingWidget) {
109+
return;
110+
}
111+
const root = evt.target.closest('.iuw-root');
112+
if (!root) { return; }
112113

113-
root.classList.remove('drop-zone');
114-
window.draggingWidget = null;
115-
});
114+
root.classList.remove('drop-zone');
115+
window.draggingWidget = null;
116+
});
116117

117-
document.addEventListener('dragend', function(evt) {
118-
const root = evt.target.closest('.iuw-root');
119-
if (!root) { return; }
118+
document.addEventListener('dragend', function(evt) {
119+
const root = evt.target.closest('.iuw-root');
120+
if (!root) { return; }
120121

121-
root.classList.remove('drop-zone');
122-
});
122+
root.classList.remove('drop-zone');
123+
});
123124

124-
document.addEventListener('drop', function(evt) {
125-
const root = window.draggingWidget;
126-
if (!root) { return; }
125+
document.addEventListener('drop', function(evt) {
126+
const root = window.draggingWidget;
127+
if (!root) { return; }
127128

128-
evt.preventDefault();
129+
evt.preventDefault();
129130

130-
window.draggingWidget = null;
131-
root.classList.remove('drop-zone');
132-
if (!evt.dataTransfer.files.length) {
133-
return;
134-
}
131+
window.draggingWidget = null;
132+
root.classList.remove('drop-zone');
133+
if (!evt.dataTransfer.files.length) {
134+
return;
135+
}
135136

136-
const fileInput = root.querySelector('input[type="file"]');
137+
const fileInput = root.querySelector('input[type="file"]');
137138

138-
fileInput.files = evt.dataTransfer.files;
139-
changeImagePreview(root, fileInput);
139+
fileInput.files = evt.dataTransfer.files;
140+
changeImagePreview(root, fileInput);
141+
});
140142
});

‎image_uploader_widget/templates/admin/widgets/image_uploader_widget_preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="iuw-image-preview">
1+
<div class="iuw-image-preview" {% if url %}data-raw="{{ url }}"{% endif %}>
22
{% if url %}
33
<img src="{{ url }}" />
44
{% endif %}

0 commit comments

Comments
 (0)