feat(tpl): use link as delete button

Author: marjune163

.editorconfig

@@ -3,6 +3,7 @@ root = true
 [*]
 end_of_line = lf
 insert_final_newline = true
+max_line_length = 120
 indent_style = tab
 indent_size = 4
 charset = utf-8

src/serverHandler/page.go

@@ -32,12 +32,18 @@ func updateSubItemsHtml(data *responseData) {
 			readableSize = tplutil.FormatSize(info.Size())
 		}
 
+		var deleteUrl string
+		if data.CanDelete {
+			deleteUrl = data.SubItemPrefix + "?delete&name=" + name
+		}
+
 		data.SubItemsHtml[i] = &itemHtml{
 			Type:        typ,
 			Url:         url,
 			DisplayName: displayName,
 			DisplaySize: readableSize,
 			DisplayTime: tplutil.FormatTime(info.ModTime()),
+			DeleteUrl:   deleteUrl,
 		}
 	}
 }

src/serverHandler/responseData.go

@@ -21,6 +21,7 @@ type itemHtml struct {
 	DisplayName template.HTML
 	DisplaySize template.HTML
 	DisplayTime template.HTML
+	DeleteUrl   string
 }
 
 type responseData struct {

src/tpl/assert/main.css

@@ -45,6 +45,7 @@ a:hover {
 }
 
 input, button {
+	min-width: 0;
 	margin: 0;
 	padding: 0.25em 0;
 }
@@ -198,7 +199,11 @@ em {
 	margin: 1em;
 }
 
-.item-list a {
+.item-list li {
+	position: relative;
+}
+
+.item-list .link {
 	display: flex;
 	flex-flow: row nowrap;
 	align-items: center;
@@ -207,6 +212,10 @@ em {
 	zoom: 1;
 }
 
+.can-delete .link {
+	padding-right: 2.2em;
+}
+
 .item-list .name {
 	flex-grow: 1;
 	flex-shrink: 1;
@@ -231,20 +240,21 @@ em {
 }
 
 .item-list .delete {
-	display: none;
-	border: 0;
-	padding: 0.1em 0.5em;
+	position: absolute;
+	top: 0;
+	right: 0;
+	border-bottom: 1px #f5f5f5 solid;
 	color: #800000;
-	background: none;
 	font-weight: bold;
 }
 
 .item-list .delete:hover {
 	background: #fee;
 }
 
-.can-delete .delete {
-	display: inline-block;
+.item-list .delete span {
+	margin-left: 0;
+	font-size: 1.5em;
 }
 
 .item-list span,

src/tpl/assert/main.css.go

@@ -40,6 +40,7 @@ a:hover {
 background: #f5f5f5;
 }
 input, button {
+min-width: 0;
 margin: 0;
 padding: 0.25em 0;
 }
@@ -170,14 +171,20 @@ padding-right: 0.5em;
 .item-list {
 margin: 1em;
 }
-.item-list a {
+.item-list li {
+position: relative;
+}
+.item-list .link {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
 border-bottom: 1px #f5f5f5 solid;
 overflow: hidden;
 zoom: 1;
 }
+.can-delete .link {
+padding-right: 2.2em;
+}
 .item-list .name {
 flex-grow: 1;
 flex-shrink: 1;
@@ -199,18 +206,19 @@ white-space: nowrap;
 overflow: hidden;
 }
 .item-list .delete {
-display: none;
-border: 0;
-padding: 0.1em 0.5em;
+position: absolute;
+top: 0;
+right: 0;
+border-bottom: 1px #f5f5f5 solid;
 color: #800000;
-background: none;
 font-weight: bold;
 }
 .item-list .delete:hover {
 background: #fee;
 }
-.can-delete .delete {
-display: inline-block;
+.item-list .delete span {
+margin-left: 0;
+font-size: 1.5em;
 }
 .item-list span,
 .item-list button {

src/tpl/assert/main.js

@@ -45,43 +45,3 @@
 	upload.addEventListener('dragleave', onDragLeave);
 	upload.addEventListener('drop', onDrop);
 })();
-
-(function enableDelete() {
-	if (!canDelete || !document.querySelector) {
-		return;
-	}
-
-	var onClick = function (e) {
-		var target = e ? e.target :
-			event ? event.srcElement :
-				null;
-
-		if (target && confirm('Delete?')) {
-			// extract and assembly delete url
-			// display name is not reliable since non-displayable char is escaped
-			var pathName = target.parentNode.pathname;
-			if (pathName.charAt(pathName.length - 1) === '/') {
-				pathName = pathName.substr(0, pathName.length - 1);
-			}
-
-			var index = pathName.lastIndexOf('/') + 1;
-			var deleteUrl = pathName.substr(0, index) + '?delete&name=' + pathName.substr(index);
-			location.href = deleteUrl;
-		}
-
-		return false;
-	};
-
-	var itemList = document.querySelector('.item-list');
-	if (!itemList) {
-		return;
-	}
-
-	var buttons = itemList.querySelectorAll('.delete');
-	var buttonCount = buttons.length;
-	for (var i = 0; i < buttonCount; i++) {
-		buttons[i].onclick = onClick;
-	}
-
-	itemList.className += ' can-delete';
-})();

src/tpl/assert/main.js.go

@@ -40,36 +40,4 @@ upload.addEventListener('dragover', onDragEnterOver);
 upload.addEventListener('dragleave', onDragLeave);
 upload.addEventListener('drop', onDrop);
 })();
-(function enableDelete() {
-if (!canDelete || !document.querySelector) {
-return;
-}
-var onClick = function (e) {
-var target = e ? e.target :
-event ? event.srcElement :
-null;
-if (target && confirm('Delete?')) {
-// extract and assembly delete url
-// display name is not reliable since non-displayable char is escaped
-var pathName = target.parentNode.pathname;
-if (pathName.charAt(pathName.length - 1) === '/') {
-pathName = pathName.substr(0, pathName.length - 1);
-}
-var index = pathName.lastIndexOf('/') + 1;
-var deleteUrl = pathName.substr(0, index) + '?delete&name=' + pathName.substr(index);
-location.href = deleteUrl;
-}
-return false;
-};
-var itemList = document.querySelector('.item-list');
-if (!itemList) {
-return;
-}
-var buttons = itemList.querySelectorAll('.delete');
-var buttonCount = buttons.length;
-for (var i = 0; i < buttonCount; i++) {
-buttons[i].onclick = onClick;
-}
-itemList.className += ' can-delete';
-})();
 `

src/tpl/page.html

@@ -1,4 +1,3 @@
-{{$subItemPrefix := .SubItemPrefix}}
 <!DOCTYPE html>
 <html lang="">
 <head>
@@ -9,7 +8,6 @@
 	<meta name="renderer" content="webkit"/>
 	<meta name="wap-font-scale" content="no"/>
 	<title>{{.Path}}</title>
-
 	<link rel="stylesheet" type="text/css" href="{{.RootRelPath}}/../assert/main.css"/>
 </head>
 <body class="{{if .IsRoot}}root-dir{{else}}sub-dir{{end}}">
@@ -22,47 +20,56 @@
 
 {{if .CanUpload}}
 	<div class="upload">
-		<form method="POST" action="{{$subItemPrefix}}?upload" enctype="multipart/form-data">
+		<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">
 			<input type="file" name="files" class="files" multiple="multiple"/>
 			<input type="submit" value="Upload"/>
 		</form>
 	</div>
 {{end}}
 
-{{if .CanArchive}}
-	<div class="archive">
-		<a href="{{$subItemPrefix}}?tar" download="{{.ItemName}}.tar">.tar</a>
-		<a href="{{$subItemPrefix}}?tgz" download="{{.ItemName}}.tar.gz">.tar.gz</a>
-		<a href="{{$subItemPrefix}}?zip" download="{{.ItemName}}.zip">.zip</a>
-	</div>
-{{end}}
-
 {{if .CanMkdir}}
 	<div class="mkdir">
-		<form method="POST" action="{{$subItemPrefix}}?mkdir">
+		<form method="POST" action="{{.SubItemPrefix}}?mkdir">
 			<input type="text" name="name" autocomplete="off"/>
 			<button type="submit">mkdir</button>
 		</form>
 	</div>
 {{end}}
 
-<ul class="item-list">
+{{if .CanArchive}}
+	<div class="archive">
+		<a href="{{.SubItemPrefix}}?tar" download="{{.ItemName}}.tar">.tar</a>
+		<a href="{{.SubItemPrefix}}?tgz" download="{{.ItemName}}.tar.gz">.tar.gz</a>
+		<a href="{{.SubItemPrefix}}?zip" download="{{.ItemName}}.zip">.zip</a>
+	</div>
+{{end}}
+
+{{$canDelete := .CanDelete}}
+{{if $canDelete}}
+	<script type="text/javascript">
+		function confirmDelete(el) {
+			var href = el.href;
+			var name = decodeURIComponent(href.substr(href.lastIndexOf('=') + 1));
+			return confirm('Delete?\n' + name);
+		}
+	</script>
+{{end}}
+<ul class="item-list{{if $canDelete}} can-delete{{end}}">
 	<li class="dir parent">
-		<a href="{{if .IsRoot}}./{{else}}../{{end}}">
+		<a href="{{if .IsRoot}}./{{else}}../{{end}}" class="link">
 			<span class="name">../</span>
 			<span class="size"></span>
 			<span class="time"></span>
 		</a>
 	</li>
-	{{$canDelete := .CanDelete}}
 	{{range .SubItemsHtml}}
 		<li class="{{.Type}}">
-			<a href="{{.Url}}">
+			<a href="{{.Url}}" class="link">
 				<span class="name">{{.DisplayName}}</span>
 				<span class="size">{{.DisplaySize}}</span>
 				<span class="time">{{.DisplayTime}}</span>
-				{{if $canDelete}}<button class="delete">x</button>{{end}}
 			</a>
+			{{if $canDelete}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)"><span>x</span></a>{{end}}
 		</li>
 	{{end}}
 </ul>
@@ -75,10 +82,6 @@
 	<div class="error">500 potential issue occurred</div>
 {{end}}
 
-<script type="text/javascript">
-	var canDelete = {{.CanDelete}};
-	var canMkdir = {{.CanMkdir}};
-</script>
 <script type="text/javascript" src="{{.RootRelPath}}/../assert/main.js" defer="defer" async="async"></script>
 </body>
 </html>