feat(tpl): add delete controls for frontend

Author: marjune163

src/tpl/assert/main.css

@@ -188,11 +188,6 @@ em {
 	zoom: 1;
 }
 
-.item-list span {
-	margin-left: 1em;
-	flex-shrink: 0;
-}
-
 .item-list .name {
 	flex-grow: 1;
 	flex-shrink: 1;
@@ -214,7 +209,29 @@ em {
 	text-align: right;
 	white-space: nowrap;
 	overflow: hidden;
-	float: right;
+}
+
+.item-list .delete {
+	display: none;
+	border: 0;
+	padding: 0.1em 0.5em;
+	color: #800000;
+	background: none;
+	font-weight: bold;
+}
+
+.item-list .delete:hover {
+	background: #fee;
+}
+
+.can-delete .delete {
+	display: inline-block;
+}
+
+.item-list span,
+.item-list button {
+	margin: 0 0 0 1em;
+	flex-shrink: 0;
 }
 
 .error {

src/tpl/assert/main.css.go

@@ -163,10 +163,6 @@ border-bottom: 1px #f5f5f5 solid;
 overflow: hidden;
 zoom: 1;
 }
-.item-list span {
-margin-left: 1em;
-flex-shrink: 0;
-}
 .item-list .name {
 flex-grow: 1;
 flex-shrink: 1;
@@ -186,7 +182,25 @@ color: #999;
 text-align: right;
 white-space: nowrap;
 overflow: hidden;
-float: right;
+}
+.item-list .delete {
+display: none;
+border: 0;
+padding: 0.1em 0.5em;
+color: #800000;
+background: none;
+font-weight: bold;
+}
+.item-list .delete:hover {
+background: #fee;
+}
+.can-delete .delete {
+display: inline-block;
+}
+.item-list span,
+.item-list button {
+margin: 0 0 0 1em;
+flex-shrink: 0;
 }
 .error {
 margin: 1em;

src/tpl/assert/main.js

@@ -45,3 +45,43 @@
 	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,4 +40,36 @@ 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

@@ -45,12 +45,14 @@
 			<span class="time"></span>
 		</a>
 	</li>
+	{{$canDelete := .CanDelete}}
 	{{range .SubItemsHtml}}
 		<li class="{{.Type}}">
 			<a href="{{.Url}}">
 				<span class="name">{{.DisplayName}}</span>
 				<span class="size">{{.DisplaySize}}</span>
 				<span class="time">{{.DisplayTime}}</span>
+				{{if $canDelete}}<button class="delete">x</button>{{end}}
 			</a>
 		</li>
 	{{end}}
@@ -64,6 +66,10 @@
 	<div class="error">500 potential issue occurred</div>
 {{end}}
 
-<script type="text/javascript" src="{{.RootRelPath}}/../assert/main.js"></script>
+<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>

src/tpl/page.html.go

@@ -50,12 +50,14 @@ const pageTplStr = `
 <span class="time"></span>
 </a>
 </li>
+{{$canDelete := .CanDelete}}
 {{range .SubItemsHtml}}
 <li class="{{.Type}}">
 <a href="{{.Url}}">
 <span class="name">{{.DisplayName}}</span>
 <span class="size">{{.DisplaySize}}</span>
 <span class="time">{{.DisplayTime}}</span>
+{{if $canDelete}}<button class="delete">x</button>{{end}}
 </a>
 </li>
 {{end}}
@@ -67,7 +69,11 @@ const pageTplStr = `
 {{else if eq .Status 500}}
 <div class="error">500 potential issue occurred</div>
 {{end}}
-<script type="text/javascript" src="{{.RootRelPath}}?assert=main.js"></script>
+<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>
 `