Skip to content

Commit d03c046

Browse files
marjune163marjune163
committed
feat(tpl): use form submission for deleting
Reference: #5
1 parent dfb2ffe commit d03c046

File tree

7 files changed

+61
-19
lines changed

7 files changed

+61
-19
lines changed

‎src/serverHandler/page.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ func updateSubItemsHtml(data *responseData) {
3939
_, isRenamedInfo := info.(*renamedFileInfo)
4040
_, isFakeInfo := info.(*fakeFileInfo)
4141
if !isRenamedInfo && !isFakeInfo {
42-
deleteUrl = data.SubItemPrefix + "?delete&name=" + urlEscapedName
42+
deleteUrl = name
4343
}
4444
}
4545

‎src/tpl/asset/main.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ html {
88
font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
99
}
1010

11-
body, input, textarea {
11+
body, input, textarea, button {
1212
font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
1313
}
1414

@@ -353,14 +353,22 @@ em {
353353
top: 0;
354354
right: 0;
355355
bottom: 0;
356+
display: flex;
357+
align-items: stretch;
358+
}
359+
360+
.item-list .delete button {
361+
border: 0;
356362
color: #800000;
363+
background: none;
357364
font-weight: bold;
358365
font-size: 1.6em;
359366
line-height: 1em;
360367
padding: 0.1875em 0.3125em 0.3125em;
368+
cursor: pointer;
361369
}
362370

363-
.item-list .delete:hover {
371+
.item-list .delete button:hover {
364372
background: #fee;
365373
}
366374

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ background: #fff;
99
html {
1010
font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
1111
}
12-
body, input, textarea {
12+
body, input, textarea, button {
1313
font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
1414
}
1515
body {
@@ -296,13 +296,20 @@ position: absolute;
296296
top: 0;
297297
right: 0;
298298
bottom: 0;
299+
display: flex;
300+
align-items: stretch;
301+
}
302+
.item-list .delete button {
303+
border: 0;
299304
color: #800000;
305+
background: none;
300306
font-weight: bold;
301307
font-size: 1.6em;
302308
line-height: 1em;
303309
padding: 0.1875em 0.3125em 0.3125em;
310+
cursor: pointer;
304311
}
305-
.item-list .delete:hover {
312+
.item-list .delete button:hover {
306313
background: #fee;
307314
}
308315
.item-list .header:hover {

‎src/tpl/asset/main.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -946,8 +946,8 @@
946946
return;
947947
}
948948

949-
itemList.addEventListener('click', function (e) {
950-
if (e.defaultPrevented || !e.target || !e.target.href || e.target.className.indexOf('delete') < 0) {
949+
itemList.addEventListener('submit', function (e) {
950+
if (e.defaultPrevented) {
951951
return;
952952
}
953953

@@ -963,8 +963,22 @@
963963
elItemParent && elItemParent.removeChild(elItem);
964964
}
965965

966+
var params = '';
967+
var els = [];
968+
Array.prototype.push.apply(els, e.target.elements)
969+
for (var i = 0, len = els.length; i < len; i++) {
970+
if (!els[i].name) {
971+
continue
972+
}
973+
if (params.length > 0) {
974+
params += '&'
975+
}
976+
params += els[i].name + '=' + encodeURIComponent(els[i].value)
977+
}
978+
var url = e.target.action + '?' + params
979+
966980
var xhr = new XMLHttpRequest();
967-
xhr.open('POST', e.target.href); // will retrieve deleted result into bfcache
981+
xhr.open('POST', url); // will retrieve deleted result into bfcache
968982
xhr.addEventListener('load', onLoad);
969983
xhr.send();
970984
e.preventDefault();

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -840,8 +840,8 @@ return;
840840
} else if (itemList.className.indexOf('has-deletable') < 0) {
841841
return;
842842
}
843-
itemList.addEventListener('click', function (e) {
844-
if (e.defaultPrevented || !e.target || !e.target.href || e.target.className.indexOf('delete') < 0) {
843+
itemList.addEventListener('submit', function (e) {
844+
if (e.defaultPrevented) {
845845
return;
846846
}
847847
function onLoad() {
@@ -855,8 +855,21 @@ return;
855855
var elItemParent = elItem.parentNode;
856856
elItemParent && elItemParent.removeChild(elItem);
857857
}
858+
var params = '';
859+
var els = [];
860+
Array.prototype.push.apply(els, e.target.elements)
861+
for (var i = 0, len = els.length; i < len; i++) {
862+
if (!els[i].name) {
863+
continue
864+
}
865+
if (params.length > 0) {
866+
params += '&'
867+
}
868+
params += els[i].name + '=' + encodeURIComponent(els[i].value)
869+
}
870+
var url = e.target.action + '?' + params
858871
var xhr = new XMLHttpRequest();
859-
xhr.open('POST', e.target.href); // will retrieve deleted result into bfcache
872+
xhr.open('POST', url); // will retrieve deleted result into bfcache
860873
xhr.addEventListener('load', onLoad);
861874
xhr.send();
862875
e.preventDefault();

‎src/tpl/page.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<body class="{{if .IsRoot}}root-dir{{else}}sub-dir{{end}}">
1414
{{$contextQueryString := .Context.QueryString}}
1515
{{$isDownload := .IsDownload}}
16+
{{$SubItemPrefix := .SubItemPrefix}}
1617
{{if not $isDownload}}
1718
<ol class="path-list">
1819
{{range .Paths}}
@@ -64,9 +65,8 @@
6465

6566
{{if .CanDelete}}
6667
<script type="text/javascript">
67-
function confirmDelete(el) {
68-
var href = el.href;
69-
var name = decodeURIComponent(href.substr(href.lastIndexOf('=') + 1));
68+
function confirmDelete(form) {
69+
var name = form.name.value;
7070
return confirm('Delete?\n' + name);
7171
}
7272
</script>
@@ -98,7 +98,7 @@
9898
<span class="field size">{{.DisplaySize}}</span>
9999
<span class="field time">{{.DisplayTime}}</span>
100100
</a>
101-
{{if and (not $isDownload) .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
101+
{{if and (not $isDownload) .DeleteUrl}}<form class="delete" action="{{$SubItemPrefix}}" onsubmit="return confirmDelete(this)"><input type="hidden" name="delete"/><input type="hidden" name="name" value="{{.DeleteUrl}}"/><button type="submit">x</button></form>{{end}}
102102
</li>
103103
{{end}}
104104
</ul>

‎src/tpl/page.html.go‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const pageTplStr = `
2323
<body class="{{if .IsRoot}}root-dir{{else}}sub-dir{{end}}">
2424
{{$contextQueryString := .Context.QueryString}}
2525
{{$isDownload := .IsDownload}}
26+
{{$SubItemPrefix := .SubItemPrefix}}
2627
{{if not $isDownload}}
2728
<ol class="path-list">
2829
{{range .Paths}}
@@ -69,9 +70,8 @@ const pageTplStr = `
6970
{{end}}
7071
{{if .CanDelete}}
7172
<script type="text/javascript">
72-
function confirmDelete(el) {
73-
var href = el.href;
74-
var name = decodeURIComponent(href.substr(href.lastIndexOf('=') + 1));
73+
function confirmDelete(form) {
74+
var name = form.name.value;
7575
return confirm('Delete?\n' + name);
7676
}
7777
</script>
@@ -103,7 +103,7 @@ return confirm('Delete?\n' + name);
103103
<span class="field size">{{.DisplaySize}}</span>
104104
<span class="field time">{{.DisplayTime}}</span>
105105
</a>
106-
{{if and (not $isDownload) .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
106+
{{if and (not $isDownload) .DeleteUrl}}<form class="delete" action="{{$SubItemPrefix}}" onsubmit="return confirmDelete(this)"><input type="hidden" name="delete"/><input type="hidden" name="name" value="{{.DeleteUrl}}"/><button type="submit">x</button></form>{{end}}
107107
</li>
108108
{{end}}
109109
</ul>

0 commit comments

Comments
 (0)