feat(tpl): use form submission for deleting

marjune163 · marjune163 · commit 04257820ae07 · 2021-03-20T23:09:58.000+08:00
Reference: #5
diff --git a/src/serverHandler/page.go b/src/serverHandler/page.go
@@ -43,7 +43,7 @@ func updateSubItemsHtml(data *responseData) {
 			_, isRenamedInfo := info.(*renamedFileInfo)
 			_, isFakeInfo := info.(*fakeFileInfo)
 			if !isRenamedInfo && !isFakeInfo {
-				deleteUrl = data.SubItemPrefix + "?delete&name=" + urlEscapedName
+				deleteUrl = name
 			}
 		}
 
diff --git a/src/tpl/frontend/index.css b/src/tpl/frontend/index.css
@@ -8,7 +8,7 @@ html {
 	font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-body, input, textarea {
+body, input, textarea, button {
 	font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
 }
 
@@ -353,14 +353,22 @@ em {
 	top: 0;
 	right: 0;
 	bottom: 0;
+	display: flex;
+	align-items: stretch;
+}
+
+.item-list .delete button {
+	border: 0;
 	color: #800000;
+	background: none;
 	font-weight: bold;
 	font-size: 1.6em;
 	line-height: 1em;
 	padding: 0.1875em 0.3125em 0.3125em;
+	cursor: pointer;
 }
 
-.item-list .delete:hover {
+.item-list .delete button:hover {
 	background: #fee;
 }
 
diff --git a/src/tpl/frontend/index.html b/src/tpl/frontend/index.html
@@ -13,6 +13,7 @@
 <body class="{{if .IsRoot}}root-dir{{else}}sub-dir{{end}}">
 {{$contextQueryString := .Context.QueryString}}
 {{$isDownload := .IsDownload}}
+{{$SubItemPrefix := .SubItemPrefix}}
 {{if not $isDownload}}
 <ol class="path-list">
 	{{range .Paths}}
@@ -64,9 +65,8 @@
 
 {{if .CanDelete}}
 <script type="text/javascript">
-	function confirmDelete(el) {
-		var href = el.href;
-		var name = decodeURIComponent(href.substr(href.lastIndexOf('=') + 1));
+	function confirmDelete(form) {
+		var name = form.name.value;
 		return confirm('{{.Trans.DeleteConfirm}}\n' + name);
 	}
 </script>
@@ -98,7 +98,7 @@
 			<span class="field size">{{.DisplaySize}}</span>
 			<span class="field time">{{.DisplayTime}}</span>
 		</a>
-		{{if and (not $isDownload) .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
+		{{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}}
 	</li>
 	{{end}}
 </ul>
diff --git a/src/tpl/frontend/index.js b/src/tpl/frontend/index.js
@@ -946,8 +946,8 @@
 			return;
 		}
 
-		itemList.addEventListener('click', function (e) {
-			if (e.defaultPrevented || !e.target || !e.target.href || e.target.className.indexOf('delete') < 0) {
+		itemList.addEventListener('submit', function (e) {
+			if (e.defaultPrevented) {
 				return;
 			}
 
@@ -963,8 +963,22 @@
 				elItemParent && elItemParent.removeChild(elItem);
 			}
 
+			var params = '';
+			var els = [];
+			Array.prototype.push.apply(els, e.target.elements)
+			for (var i = 0, len = els.length; i < len; i++) {
+				if (!els[i].name) {
+					continue
+				}
+				if (params.length > 0) {
+					params += '&'
+				}
+				params += els[i].name + '=' + encodeURIComponent(els[i].value)
+			}
+			var url = e.target.action + '?' + params
+
 			var xhr = new XMLHttpRequest();
-			xhr.open('POST', e.target.href);	// will retrieve deleted result into bfcache
+			xhr.open('POST', url);	// will retrieve deleted result into bfcache
 			xhr.addEventListener('load', onLoad);
 			xhr.send();
 			e.preventDefault();

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ func updateSubItemsHtml(data *responseData) {`
`43`	`43`	`_, isRenamedInfo := info.(*renamedFileInfo)`
`44`	`44`	`_, isFakeInfo := info.(*fakeFileInfo)`
`45`	`45`	`if !isRenamedInfo && !isFakeInfo {`
`46`		`- deleteUrl = data.SubItemPrefix + "?delete&name=" + urlEscapedName`
	`46`	`+ deleteUrl = name`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`