refactor(defaultTheme): refine enhanceUpload() mode switch

Author: marjune163

src/tpl/defaultTheme/frontend/index.css

@@ -163,33 +163,39 @@ html.dragging::before {
 
 .tab {
 	display: flex;
+	gap: 0.5em;
 	white-space: nowrap;
 	margin: 1em 1em -1em 1em;
 }
 
-.tab label {
+.tab h3, .tab a {
 	flex: 0 0 auto;
-	margin-right: 0.5em;
 	padding: 1em;
+}
+
+.tab h3 {
+	margin: 0;
+	font-size: inherit;
+}
+
+.tab a {
 	cursor: pointer;
 }
 
-.tab label:focus {
-	outline: 0;
-	text-decoration: underline;
-	text-decoration-style: dotted;
+.tab a:focus {
+	text-decoration: underline 1px dotted;
 }
 
-.tab label:hover {
+.tab a:hover {
 	background: #fbfbfb;
 }
 
-.tab label.active {
+.tab a.active {
 	color: #000;
 	background: #f7f7f7;
 }
 
-.tab label:last-child {
+.tab a:last-child {
 	margin-right: 0;
 }
 
@@ -544,11 +550,11 @@ html.dragging::before {
 		border-color: #555 #555 transparent transparent;
 	}
 
-	.tab label:hover {
+	.tab a:hover {
 		background-color: #181818;
 	}
 
-	.tab label.active {
+	.tab a.active {
 		color: #fff;
 		background-color: #222;
 	}

src/tpl/defaultTheme/frontend/index.html

@@ -54,9 +54,10 @@
 	}
 </script>
 <div class="tab upload-type">
-	<label class="file active" tabindex="0" role="button" title="{{.Trans.UploadFilesHint}}">{{.Trans.UploadFilesLabel}}</label>
-	{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirHint}}">{{.Trans.UploadDirLabel}}</label>
-	<label class="innerdirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirContentsHint}}">{{.Trans.UploadDirContentsLabel}}</label>{{end}}
+	<h3>{{.Trans.UploadLabel}}</h3>
+	<a class="file active" tabindex="0" role="button" title="{{.Trans.UploadFilesHint}}">{{.Trans.UploadFilesLabel}}</a>
+	{{if .CanMkdir}}<a class="dirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirHint}}">{{.Trans.UploadDirLabel}}</a>
+	<a class="innerdirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirContentsHint}}">{{.Trans.UploadDirContentsLabel}}</a>{{end}}
 </div>
 <div class="panel upload">
 	<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">

src/tpl/defaultTheme/frontend/index.js

@@ -442,6 +442,9 @@
 		var fileInput = form.querySelector('.file');
 		if (!fileInput) return;
 
+		var submitButton = form.querySelector('[type=submit]');
+		if (submitButton) submitButton.classList.add(classNone);
+
 		var uploadType = document.body.querySelector('.upload-type');
 		if (!uploadType) return;
 
@@ -600,16 +603,13 @@
 			}
 		}
 
-		var switchToFileMode = noop;
-		var switchToDirMode = noop;
-
-		function enableAddDirFile() {
+		function enableFileDirModeSwitch() {
 			var classHidden = 'hidden';
 			var classActive = 'active';
 
 			function onClickOpt(optTarget, clearInput) {
 				if (optTarget === optActive) {
-					return;
+					return false;
 				}
 				optActive.classList.remove(classActive);
 
@@ -666,6 +666,25 @@
 			if (optFile) {
 				optFile.addEventListener('click', onClickOptFile);
 				optFile.addEventListener('keydown', onKeydownOpt);
+
+				fileInput.addEventListener('change', function (e) {
+					// workaround fix for old browsers, select dir not work but still act like select files
+					// switch back to file
+					if (optActive === optFile) {
+						return;
+					}
+					var files = e.target.files;
+					if (!files.length) {
+						return;
+					}
+
+					var nodir = Array.prototype.slice.call(files).every(function (file) {
+						return file.webkitRelativePath.indexOf('/') < 0;
+					});
+					if (nodir) {
+						onClickOptFile();	// prevent clear input files
+					}
+				});
 			}
 			if (optDirFile) {
 				optDirFile.addEventListener('click', onClickOptDirFile);
@@ -679,49 +698,32 @@
 			if (hasStorage) {
 				var uploadTypeField = 'upload-type';
 				var prevUploadType = sessionStorage.getItem(uploadTypeField);
-				sessionStorage.removeItem(uploadTypeField);
-
-				window.addEventListener(leavingEvent, function () {
-					var activeUploadType = fileInput.name;
-					if (activeUploadType !== file) {
-						sessionStorage.setItem(uploadTypeField, activeUploadType)
-					}
-				}, false);
-
 				if (prevUploadType === dirFile) {
 					optDirFile && optDirFile.click();
 				} else if (prevUploadType === innerDirFile) {
 					optInnerDirFile && optInnerDirFile.click();
 				}
-			}
 
-			optFile && fileInput.addEventListener('change', function (e) {
-				// workaround fix for mobile device, select dir not work but still act like select files
-				// switch back to file
-				if (optActive === optFile) {
-					return;
-				}
-				var files = e.target.files;
-				if (!files.length) {
-					return;
+				if (prevUploadType !== null) {
+					sessionStorage.removeItem(uploadTypeField);
 				}
 
-				var nodir = Array.prototype.slice.call(files).every(function (file) {
-					return file.webkitRelativePath.indexOf('/') < 0;
+				window.addEventListener(leavingEvent, function () {
+					var activeUploadType = fileInput.name;
+					if (activeUploadType !== file) {
+						sessionStorage.setItem(uploadTypeField, activeUploadType)
+					}
 				});
-				if (nodir) {
-					onClickOptFile();	// prevent clear input files
-				}
-			});
+			}
 
-			switchToFileMode = function () {
+			function switchToFileMode() {
 				if (optFile && optActive !== optFile) {
 					optFile.focus();
 					onClickOptFile(true);
 				}
 			}
 
-			switchToDirMode = function () {
+			function switchToDirMode() {
 				if (optDirFile) {
 					if (optActive !== optDirFile) {
 						optDirFile.focus();
@@ -734,6 +736,11 @@
 					}
 				}
 			}
+
+			return {
+				switchToFileMode: switchToFileMode,
+				switchToDirMode: switchToDirMode
+			};
 		}
 
 		function enableUploadProgress() {	// also fix Safari upload filename has no path info
@@ -853,7 +860,7 @@
 			});
 		}
 
-		function enableAddDragDrop(uploadProgressively) {
+		function enableAddDragDrop(uploadProgressively, switchToFileMode, switchToDirMode) {
 			var isSelfDragging = false;
 			var classDragging = 'dragging';
 
@@ -919,7 +926,7 @@
 			dragDropEl.addEventListener('drop', onDrop);
 		}
 
-		function enableAddPasteProgressively(uploadProgressively) {
+		function enableAddPasteProgressively(uploadProgressively, switchToFileMode, switchToDirMode) {
 			var typeTextPlain = 'text/plain';
 			var nonTextInputTypes = ['hidden', 'radio', 'checkbox', 'button', 'reset', 'submit', 'image'];
 
@@ -1031,11 +1038,11 @@
 			});
 		}
 
-		enableAddDirFile();
+		var modes = enableFileDirModeSwitch();
 		var uploadProgressively = enableUploadProgress();
 		enableFormUploadProgress(uploadProgressively);
-		enableAddPasteProgressively(uploadProgressively);
-		enableAddDragDrop(uploadProgressively);
+		enableAddPasteProgressively(uploadProgressively, modes.switchToFileMode, modes.switchToDirMode);
+		enableAddDragDrop(uploadProgressively, modes.switchToFileMode, modes.switchToDirMode);
 	}
 
 	function enableNonRefreshDelete() {