Skip to content

Commit 8849852

Browse files
marjune163marjune163
committed
feat(tpl): use AJAX to enhance delete action
1 parent 7a0dd9e commit 8849852

File tree

6 files changed

+140
-63
lines changed

6 files changed

+140
-63
lines changed

‎src/tpl/assert/main.css‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,11 @@ em {
221221
padding-right: 2.2em;
222222
}
223223

224+
.item-list span {
225+
margin: 0 0 0 1em;
226+
flex-shrink: 0;
227+
}
228+
224229
.item-list .name {
225230
flex-grow: 1;
226231
flex-shrink: 1;
@@ -249,26 +254,16 @@ em {
249254
top: 0;
250255
right: 0;
251256
bottom: 0;
252-
border-bottom: 1px #f5f5f5 solid;
253257
color: #800000;
254258
font-weight: bold;
259+
font-size: 1.6em;
260+
padding: 0.25em 0.3125em;
255261
}
256262

257263
.item-list .delete:hover {
258264
background: #fee;
259265
}
260266

261-
.item-list .delete span {
262-
margin-left: 0;
263-
font-size: 1.5em;
264-
}
265-
266-
.item-list span,
267-
.item-list button {
268-
margin: 0 0 0 1em;
269-
flex-shrink: 0;
270-
}
271-
272267
.error {
273268
margin: 1em;
274269
padding: 1em;

‎src/tpl/assert/main.css.go‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,10 @@ zoom: 1;
189189
.has-deletable .link {
190190
padding-right: 2.2em;
191191
}
192+
.item-list span {
193+
margin: 0 0 0 1em;
194+
flex-shrink: 0;
195+
}
192196
.item-list .name {
193197
flex-grow: 1;
194198
flex-shrink: 1;
@@ -214,22 +218,14 @@ position: absolute;
214218
top: 0;
215219
right: 0;
216220
bottom: 0;
217-
border-bottom: 1px #f5f5f5 solid;
218221
color: #800000;
219222
font-weight: bold;
223+
font-size: 1.6em;
224+
padding: 0.25em 0.3125em;
220225
}
221226
.item-list .delete:hover {
222227
background: #fee;
223228
}
224-
.item-list .delete span {
225-
margin-left: 0;
226-
font-size: 1.5em;
227-
}
228-
.item-list span,
229-
.item-list button {
230-
margin: 0 0 0 1em;
231-
flex-shrink: 0;
232-
}
233229
.error {
234230
margin: 1em;
235231
padding: 1em;

‎src/tpl/assert/main.js‎

Lines changed: 80 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,92 @@
1-
(function enableDragUpload() {
2-
if (!document.querySelector) {
3-
return;
4-
}
1+
(function () {
2+
function enableDragUpload() {
3+
var upload = document.querySelector('.upload');
4+
if (!upload || !upload.addEventListener) {
5+
return;
6+
}
7+
var fileInput = upload.querySelector('.files');
58

6-
var upload = document.querySelector('.upload');
7-
if (!upload || !upload.addEventListener) {
8-
return;
9-
}
10-
var fileInput = upload.querySelector('.files');
9+
var addClass = function (ele, className) {
10+
ele && ele.classList && ele.classList.add(className);
11+
};
1112

12-
var addClass = function (ele, className) {
13-
ele && ele.classList && ele.classList.add(className);
14-
};
13+
var removeClass = function (ele, className) {
14+
ele && ele.classList && ele.classList.remove(className);
15+
};
1516

16-
var removeClass = function (ele, className) {
17-
ele && ele.classList && ele.classList.remove(className);
18-
};
17+
var onDragEnterOver = function (e) {
18+
e.stopPropagation();
19+
e.preventDefault();
20+
addClass(e.currentTarget, 'dragging');
21+
};
1922

20-
var onDragEnterOver = function (e) {
21-
e.stopPropagation();
22-
e.preventDefault();
23-
addClass(e.currentTarget, 'dragging');
24-
};
23+
var onDragLeave = function (e) {
24+
if (e.target === e.currentTarget) {
25+
removeClass(e.currentTarget, 'dragging');
26+
}
27+
};
2528

26-
var onDragLeave = function (e) {
27-
if (e.target === e.currentTarget) {
29+
var onDrop = function (e) {
30+
e.stopPropagation();
31+
e.preventDefault();
2832
removeClass(e.currentTarget, 'dragging');
29-
}
30-
};
3133

32-
var onDrop = function (e) {
33-
e.stopPropagation();
34-
e.preventDefault();
35-
removeClass(e.currentTarget, 'dragging');
34+
if (!e.dataTransfer.files) {
35+
return;
36+
}
37+
fileInput.files = e.dataTransfer.files;
38+
};
3639

37-
if (!e.dataTransfer.files) {
40+
upload.addEventListener('dragenter', onDragEnterOver);
41+
upload.addEventListener('dragover', onDragEnterOver);
42+
upload.addEventListener('dragleave', onDragLeave);
43+
upload.addEventListener('drop', onDrop);
44+
}
45+
46+
function enableNonRefreshDelete() {
47+
var itemList = document.querySelector('.item-list.has-deletable');
48+
if (!itemList || !itemList.addEventListener) {
3849
return;
3950
}
40-
fileInput.files = e.dataTransfer.files;
41-
};
4251

43-
upload.addEventListener('dragenter', onDragEnterOver);
44-
upload.addEventListener('dragover', onDragEnterOver);
45-
upload.addEventListener('dragleave', onDragLeave);
46-
upload.addEventListener('drop', onDrop);
52+
itemList.addEventListener('click', function (e) {
53+
if (e.defaultPrevented || !e.target || e.target.className.indexOf('delete') < 0) {
54+
return;
55+
}
56+
57+
var target = e.target;
58+
59+
var xhr = new XMLHttpRequest();
60+
xhr.open('POST', target.href);
61+
xhr.onload = function () {
62+
var item = target;
63+
var parentNode = item.parentNode;
64+
while (item.nodeName !== 'LI') {
65+
if (!parentNode) {
66+
break;
67+
}
68+
item = parentNode;
69+
parentNode = item.parentNode;
70+
}
71+
if (parentNode) {
72+
parentNode.removeChild(item);
73+
}
74+
item = null;
75+
parentNode = null;
76+
target = null;
77+
};
78+
xhr.onerror = xhr.onabort = function () {
79+
target = null;
80+
};
81+
xhr.send();
82+
e.preventDefault();
83+
return false;
84+
});
85+
}
86+
87+
if (!document.querySelector) {
88+
return;
89+
}
90+
enableDragUpload();
91+
enableNonRefreshDelete();
4792
})();

‎src/tpl/assert/main.js.go‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
package assert
22

33
const mainJs = `
4-
(function enableDragUpload() {
5-
if (!document.querySelector) {
6-
return;
7-
}
4+
(function () {
5+
function enableDragUpload() {
86
var upload = document.querySelector('.upload');
97
if (!upload || !upload.addEventListener) {
108
return;
@@ -39,5 +37,48 @@ upload.addEventListener('dragenter', onDragEnterOver);
3937
upload.addEventListener('dragover', onDragEnterOver);
4038
upload.addEventListener('dragleave', onDragLeave);
4139
upload.addEventListener('drop', onDrop);
40+
}
41+
function enableNonRefreshDelete() {
42+
var itemList = document.querySelector('.item-list.has-deletable');
43+
if (!itemList || !itemList.addEventListener) {
44+
return;
45+
}
46+
itemList.addEventListener('click', function (e) {
47+
if (e.defaultPrevented || !e.target || e.target.className.indexOf('delete') < 0) {
48+
return;
49+
}
50+
var target = e.target;
51+
var xhr = new XMLHttpRequest();
52+
xhr.open('POST', target.href);
53+
xhr.onload = function () {
54+
var item = target;
55+
var parentNode = item.parentNode;
56+
while (item.nodeName !== 'LI') {
57+
if (!parentNode) {
58+
break;
59+
}
60+
item = parentNode;
61+
parentNode = item.parentNode;
62+
}
63+
if (parentNode) {
64+
parentNode.removeChild(item);
65+
}
66+
item = null;
67+
parentNode = null;
68+
target = null;
69+
};
70+
xhr.onerror = xhr.onabort = function () {
71+
target = null;
72+
};
73+
xhr.send();
74+
e.preventDefault();
75+
return false;
76+
});
77+
}
78+
if (!document.querySelector) {
79+
return;
80+
}
81+
enableDragUpload();
82+
enableNonRefreshDelete();
4283
})();
4384
`

‎src/tpl/page.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<span class="size">{{.DisplaySize}}</span>
6969
<span class="time">{{.DisplayTime}}</span>
7070
</a>
71-
{{if .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)"><span>x</span></a>{{end}}
71+
{{if .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
7272
</li>
7373
{{end}}
7474
</ul>

‎src/tpl/page.html.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ return confirm('Delete?\n' + name);
7373
<span class="size">{{.DisplaySize}}</span>
7474
<span class="time">{{.DisplayTime}}</span>
7575
</a>
76-
{{if .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)"><span>x</span></a>{{end}}
76+
{{if .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
7777
</li>
7878
{{end}}
7979
</ul>

0 commit comments

Comments
 (0)