fix(tpl): enable selecting upload tab by keyboard

Author: marjune163

src/tpl/asset/main.js

@@ -3,6 +3,11 @@
 	var classHeader = 'header';
 	var leavingEvent = typeof window.onpagehide !== 'undefined' ? 'pagehide' : 'beforeunload';
 
+	var Enter = 'Enter';
+	var Escape = 'Escape';
+	var Esc = 'Esc';
+	var Space = ' ';
+
 	function enableFilter() {
 		if (!document.querySelector) {
 			var filter = document.getElementById && document.getElementById('panel-filter');
@@ -82,14 +87,14 @@
 		input.addEventListener('change', onValueMayChange, false);
 		input.addEventListener('keydown', function (e) {
 			switch (e.key) {
-				case 'Enter':
+				case Enter:
 					clearTimeout(timeoutId);
 					input.blur();
 					doFilter();
 					e.preventDefault();
 					break;
-				case 'Escape':
-				case 'Esc':
+				case Escape:
+				case Esc:
 					clearTimeout(timeoutId);
 					input.value = '';
 					doFilter();
@@ -448,6 +453,23 @@
 				}
 			}
 
+			function onKeydownOpt(e) {
+				switch (e.key) {
+					case Enter:
+					case Space:
+						if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) {
+							break;
+						}
+						e.preventDefault();
+						e.stopPropagation();
+						if (e.target === optActive) {
+							break;
+						}
+						e.target.click();
+						break;
+				}
+			}
+
 			if (typeof fileInput.webkitdirectory === 'undefined') {
 				addClass(uploadType, classNone);
 				return;
@@ -457,12 +479,15 @@
 
 			if (optFile) {
 				optFile.addEventListener('click', onClickOptFile);
+				optFile.addEventListener('keydown', onKeydownOpt);
 			}
 			if (optDirFile) {
 				optDirFile.addEventListener('click', onClickOptDirFile);
+				optDirFile.addEventListener('keydown', onKeydownOpt);
 			}
 			if (optInnerDirFile) {
 				optInnerDirFile.addEventListener('click', onClickOptInnerDirFile);
+				optInnerDirFile.addEventListener('keydown', onKeydownOpt);
 			}
 
 			if (sessionStorage) {

src/tpl/asset/main.js.go

@@ -5,6 +5,10 @@ const mainJs = `
 var classNone = 'none';
 var classHeader = 'header';
 var leavingEvent = typeof window.onpagehide !== 'undefined' ? 'pagehide' : 'beforeunload';
+var Enter = 'Enter';
+var Escape = 'Escape';
+var Esc = 'Esc';
+var Space = ' ';
 function enableFilter() {
 if (!document.querySelector) {
 var filter = document.getElementById && document.getElementById('panel-filter');
@@ -75,14 +79,14 @@ input.addEventListener('input', onValueMayChange, false);
 input.addEventListener('change', onValueMayChange, false);
 input.addEventListener('keydown', function (e) {
 switch (e.key) {
-case 'Enter':
+case Enter:
 clearTimeout(timeoutId);
 input.blur();
 doFilter();
 e.preventDefault();
 break;
-case 'Escape':
-case 'Esc':
+case Escape:
+case Esc:
 clearTimeout(timeoutId);
 input.value = '';
 doFilter();
@@ -400,6 +404,22 @@ fileInput.name = innerDirFile;
 fileInput.webkitdirectory = true;
 }
 }
+function onKeydownOpt(e) {
+switch (e.key) {
+case Enter:
+case Space:
+if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) {
+break;
+}
+e.preventDefault();
+e.stopPropagation();
+if (e.target === optActive) {
+break;
+}
+e.target.click();
+break;
+}
+}
 if (typeof fileInput.webkitdirectory === 'undefined') {
 addClass(uploadType, classNone);
 return;
@@ -408,12 +428,15 @@ optDirFile && removeClass(optDirFile, classHidden);
 optInnerDirFile && removeClass(optInnerDirFile, classHidden);
 if (optFile) {
 optFile.addEventListener('click', onClickOptFile);
+optFile.addEventListener('keydown', onKeydownOpt);
 }
 if (optDirFile) {
 optDirFile.addEventListener('click', onClickOptDirFile);
+optDirFile.addEventListener('keydown', onKeydownOpt);
 }
 if (optInnerDirFile) {
 optInnerDirFile.addEventListener('click', onClickOptInnerDirFile);
+optInnerDirFile.addEventListener('keydown', onKeydownOpt);
 }
 if (sessionStorage) {
 var uploadTypeField = 'upload-type';

src/tpl/page.html

@@ -29,9 +29,9 @@
 
 {{if .CanUpload}}
 	<div class="tab upload-type">
-		<label class="file active" tabindex="0" title="Upload files">Files</label>
-		{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" title="Upload Directory itself">Dir</label>{{end}}
-		<label class="innerdirfile hidden" tabindex="0" title="Upload contents of directory">Dir contents</label>
+		<label class="file active" tabindex="0" role="button" title="Upload files">Files</label>
+		{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" role="button" title="Upload Directory itself">Dir</label>{{end}}
+		<label class="innerdirfile hidden" tabindex="0" role="button" title="Upload contents of directory">Dir contents</label>
 	</div>
 	<div class="panel upload">
 		<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">

src/tpl/page.html.go

@@ -37,9 +37,9 @@ const pageTplStr = `
 {{end}}
 {{if .CanUpload}}
 <div class="tab upload-type">
-<label class="file active" tabindex="0" title="Upload files">Files</label>
-{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" title="Upload Directory itself">Dir</label>{{end}}
-<label class="innerdirfile hidden" tabindex="0" title="Upload contents of directory">Dir contents</label>
+<label class="file active" tabindex="0" role="button" title="Upload files">Files</label>
+{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" role="button" title="Upload Directory itself">Dir</label>{{end}}
+<label class="innerdirfile hidden" tabindex="0" role="button" title="Upload contents of directory">Dir contents</label>
 </div>
 <div class="panel upload">
 <form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">