Skip to content

Commit 49aae88

Browse files
marjune163marjune163
committed
feat(tpl): allow upload single directory on froentend side
1 parent faae3b1 commit 49aae88

File tree

6 files changed

+302
-41
lines changed

6 files changed

+302
-41
lines changed

‎src/tpl/asset/main.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ em {
7070
display: none;
7171
}
7272

73+
.hidden {
74+
visibility: hidden;
75+
}
76+
7377
.path-list {
7478
font-size: 1.5em;
7579
overflow: hidden;
@@ -112,6 +116,38 @@ em {
112116
display: none;
113117
}
114118

119+
.tab {
120+
display: flex;
121+
white-space: nowrap;
122+
margin: 1em 1em -1em 1em;
123+
}
124+
125+
.tab label {
126+
flex: 0 0 auto;
127+
margin-right: 0.5em;
128+
padding: 1em;
129+
cursor: pointer;
130+
}
131+
132+
.tab label:focus {
133+
outline: 0;
134+
text-decoration: underline;
135+
text-decoration-style: dotted;
136+
}
137+
138+
.tab label:hover {
139+
background: #fbfbfb;
140+
}
141+
142+
.tab label.active {
143+
color: #000;
144+
background: #f7f7f7;
145+
}
146+
147+
.tab label:last-child {
148+
margin-right: 0;
149+
}
150+
115151
.panel {
116152
margin: 1em;
117153
padding: 1em;
@@ -357,6 +393,15 @@ em {
357393
border-color: #555 #555 transparent transparent;
358394
}
359395

396+
.tab label:hover {
397+
background-color: #181818;
398+
}
399+
400+
.tab label.active {
401+
color: #fff;
402+
background-color: #222;
403+
}
404+
360405
.panel {
361406
background-color: #222;
362407
}

‎src/tpl/asset/main.css.go‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ border-radius: 3px;
6060
.none, :root body .none {
6161
display: none;
6262
}
63+
.hidden {
64+
visibility: hidden;
65+
}
6366
.path-list {
6467
font-size: 1.5em;
6568
overflow: hidden;
@@ -96,6 +99,32 @@ padding-right: 0.5em;
9699
.path-list li:last-child a:after {
97100
display: none;
98101
}
102+
.tab {
103+
display: flex;
104+
white-space: nowrap;
105+
margin: 1em 1em -1em 1em;
106+
}
107+
.tab label {
108+
flex: 0 0 auto;
109+
margin-right: 0.5em;
110+
padding: 1em;
111+
cursor: pointer;
112+
}
113+
.tab label:focus {
114+
outline: 0;
115+
text-decoration: underline;
116+
text-decoration-style: dotted;
117+
}
118+
.tab label:hover {
119+
background: #fbfbfb;
120+
}
121+
.tab label.active {
122+
color: #000;
123+
background: #f7f7f7;
124+
}
125+
.tab label:last-child {
126+
margin-right: 0;
127+
}
99128
.panel {
100129
margin: 1em;
101130
padding: 1em;
@@ -298,6 +327,13 @@ border-bottom-color: #999;
298327
.path-list a:after {
299328
border-color: #555 #555 transparent transparent;
300329
}
330+
.tab label:hover {
331+
background-color: #181818;
332+
}
333+
.tab label.active {
334+
color: #fff;
335+
background-color: #222;
336+
}
301337
.panel {
302338
background-color: #222;
303339
}

‎src/tpl/asset/main.js‎

Lines changed: 120 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(function () {
22
var classNone = 'none';
33
var classHeader = 'header';
4+
var leavingEvent = typeof window.onpagehide !== 'undefined' ? 'pagehide' : 'beforeunload';
45

56
function enableFilter() {
67
if (!document.querySelector) {
@@ -102,7 +103,6 @@
102103
var prevSessionFilter = sessionStorage.getItem(location.pathname);
103104
sessionStorage.removeItem(location.pathname);
104105

105-
var leavingEvent = typeof window.onpagehide !== 'undefined' ? 'pagehide' : 'beforeunload';
106106
window.addEventListener(leavingEvent, function () {
107107
if (input.value) {
108108
sessionStorage.setItem(location.pathname, input.value);
@@ -368,7 +368,7 @@
368368
});
369369
}
370370

371-
function enableDragUpload() {
371+
function enhanceUpload() {
372372
if (!document.querySelector || !document.addEventListener || !document.body.classList) {
373373
return;
374374
}
@@ -378,42 +378,134 @@
378378
return;
379379
}
380380
var fileInput = upload.querySelector('.file');
381+
if (!fileInput) {
382+
return;
383+
}
384+
385+
var uploadType = document.body.querySelector('.upload-type');
386+
if (!uploadType) {
387+
return;
388+
}
389+
390+
var file = 'file';
391+
var dirFile = 'dirfile';
392+
var innerDirFile = 'innerdirfile';
393+
394+
var optFile = uploadType.querySelector('.' + file);
395+
var optDirFile = uploadType.querySelector('.' + dirFile);
396+
var optInnerDirFile = uploadType.querySelector('.' + innerDirFile);
397+
var optActive = optFile;
381398

382-
var addClass = function (ele, className) {
399+
function addClass(ele, className) {
383400
ele && ele.classList.add(className);
384-
};
401+
}
385402

386-
var removeClass = function (ele, className) {
403+
function removeClass(ele, className) {
387404
ele && ele.classList.remove(className);
388-
};
405+
}
389406

390-
var onDragEnterOver = function (e) {
391-
e.stopPropagation();
392-
e.preventDefault();
393-
addClass(e.currentTarget, 'dragging');
394-
};
407+
function enableAddDir() {
408+
var classHidden = 'hidden';
409+
var classActive = 'active';
395410

396-
var onDragLeave = function (e) {
397-
if (e.target === e.currentTarget) {
398-
removeClass(e.currentTarget, 'dragging');
399-
}
400-
};
411+
function onClickOpt(e) {
412+
var optTarget = e.target;
413+
if (optTarget === optActive) {
414+
return;
415+
}
416+
removeClass(optActive, classActive);
401417

402-
var onDrop = function (e) {
403-
e.stopPropagation();
404-
e.preventDefault();
405-
removeClass(e.currentTarget, 'dragging');
418+
optActive = optTarget;
419+
addClass(optActive, classActive);
406420

407-
if (!e.dataTransfer.files) {
421+
fileInput.value = '';
422+
}
423+
424+
if (typeof fileInput.webkitdirectory === 'undefined') {
408425
return;
409426
}
410-
fileInput.files = e.dataTransfer.files;
411-
};
427+
removeClass(optDirFile, classHidden);
428+
removeClass(optInnerDirFile, classHidden);
429+
430+
if (optFile) {
431+
optFile.addEventListener('click', onClickOpt);
432+
optFile.addEventListener('click', function () {
433+
fileInput.name = file;
434+
fileInput.webkitdirectory = false;
435+
});
436+
}
437+
if (optDirFile) {
438+
optDirFile.addEventListener('click', onClickOpt);
439+
optDirFile.addEventListener('click', function () {
440+
fileInput.name = dirFile;
441+
fileInput.webkitdirectory = true
442+
});
443+
}
444+
if (optInnerDirFile) {
445+
optInnerDirFile.addEventListener('click', onClickOpt);
446+
optInnerDirFile.addEventListener('click', function () {
447+
fileInput.name = innerDirFile;
448+
fileInput.webkitdirectory = true
449+
});
450+
}
451+
452+
if (sessionStorage) {
453+
var uploadTypeField = 'upload-type';
454+
var prevUploadType = sessionStorage.getItem(uploadTypeField);
455+
sessionStorage.removeItem(uploadTypeField);
456+
457+
window.addEventListener(leavingEvent, function () {
458+
var activeUploadType = fileInput.name;
459+
if (activeUploadType !== file) {
460+
sessionStorage.setItem(uploadTypeField, activeUploadType)
461+
}
462+
}, false);
463+
464+
if (prevUploadType === dirFile) {
465+
optDirFile && optDirFile.click();
466+
} else if (prevUploadType === innerDirFile) {
467+
optInnerDirFile && optInnerDirFile.click();
468+
}
469+
}
470+
}
471+
472+
function enableAddDragDrop() {
473+
function onDragEnterOver(e) {
474+
e.stopPropagation();
475+
e.preventDefault();
476+
addClass(e.currentTarget, 'dragging');
477+
}
478+
479+
function onDragLeave(e) {
480+
if (e.target === e.currentTarget) {
481+
removeClass(e.currentTarget, 'dragging');
482+
}
483+
}
484+
485+
function onDrop(e) {
486+
e.stopPropagation();
487+
e.preventDefault();
488+
removeClass(e.currentTarget, 'dragging');
489+
490+
if (!e.dataTransfer.files) {
491+
return;
492+
}
493+
494+
if (optFile && optActive !== optFile) {
495+
optFile.focus();
496+
optFile.click();
497+
}
498+
fileInput.files = e.dataTransfer.files;
499+
}
500+
501+
upload.addEventListener('dragenter', onDragEnterOver, false);
502+
upload.addEventListener('dragover', onDragEnterOver, false);
503+
upload.addEventListener('dragleave', onDragLeave, false);
504+
upload.addEventListener('drop', onDrop, false);
505+
}
412506

413-
upload.addEventListener('dragenter', onDragEnterOver, false);
414-
upload.addEventListener('dragover', onDragEnterOver, false);
415-
upload.addEventListener('dragleave', onDragLeave, false);
416-
upload.addEventListener('drop', onDrop, false);
507+
enableAddDir();
508+
enableAddDragDrop();
417509
}
418510

419511
function enableNonRefreshDelete() {
@@ -470,6 +562,6 @@
470562

471563
enableFilter();
472564
enableKeyboardNavigate();
473-
enableDragUpload();
565+
enhanceUpload();
474566
enableNonRefreshDelete();
475567
})();

0 commit comments

Comments
 (0)