Skip to content

Commit 81ca742

Browse files
marjune163marjune163
committed
feat(tpl): add client side filter
1 parent e006e8b commit 81ca742

File tree

6 files changed

+303
-46
lines changed

6 files changed

+303
-46
lines changed

‎src/tpl/assert/main.css‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ html {
88
font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
99
}
1010

11+
body, input, textarea {
12+
font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
13+
}
14+
1115
body {
1216
color: #333;
1317
font-size: 0.625em;
14-
font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
1518
font-variant-ligatures: none;
1619
font-kerning: none;
1720
hyphens: none;
@@ -58,6 +61,10 @@ em {
5861
border-radius: 3px;
5962
}
6063

64+
.none, :root body .none {
65+
display: none;
66+
}
67+
6168
.path-list {
6269
font-size: 1.5em;
6370
overflow: hidden;
@@ -100,13 +107,16 @@ em {
100107
display: none;
101108
}
102109

103-
.upload {
104-
position: relative;
110+
.panel {
105111
margin: 1em;
106112
padding: 1em;
107113
background: #f7f7f7;
108114
}
109115

116+
.upload {
117+
position: relative;
118+
}
119+
110120
.upload::before {
111121
display: none;
112122
content: '';
@@ -134,15 +144,15 @@ em {
134144
}
135145

136146
.archive {
137-
margin: 0 1em;
147+
margin: 1em;
138148
overflow: hidden;
139149
zoom: 1;
140150
}
141151

142152
.archive a {
143153
position: relative;
144154
float: left;
145-
margin: 1em 0.5em 0 0.5em;
155+
margin: 0 0.5em;
146156
padding: 1em 1em 1em 3em;
147157
border: 2px #f5f5f5 solid;
148158
}
@@ -176,12 +186,6 @@ em {
176186
transform: rotate(45deg);
177187
}
178188

179-
.mkdir {
180-
margin: 1em;
181-
padding: 1em;
182-
background: #f7f7f7;
183-
}
184-
185189
.mkdir form {
186190
display: flex;
187191
}
@@ -195,6 +199,22 @@ em {
195199
padding-right: 0.5em;
196200
}
197201

202+
.filter {
203+
display: none;
204+
}
205+
206+
:root .filter {
207+
display: block;
208+
}
209+
210+
.filter .form {
211+
display: flex;
212+
}
213+
214+
.filter .filter-text {
215+
flex: 1 1 auto;
216+
}
217+
198218
.item-list {
199219
margin: 1em;
200220
}

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

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ background: #fff;
99
html {
1010
font-family: "roboto_condensedbold", "Helvetica Neue", Helvetica, Arial, sans-serif;
1111
}
12+
body, input, textarea {
13+
font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
14+
}
1215
body {
1316
color: #333;
1417
font-size: 0.625em;
15-
font-family: Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", monospace;
1618
font-variant-ligatures: none;
1719
font-kerning: none;
1820
hyphens: none;
@@ -51,6 +53,9 @@ padding: 0 0.2em;
5153
border: 1px #ddd solid;
5254
border-radius: 3px;
5355
}
56+
.none, :root body .none {
57+
display: none;
58+
}
5459
.path-list {
5560
font-size: 1.5em;
5661
overflow: hidden;
@@ -87,12 +92,14 @@ padding-right: 0.5em;
8792
.path-list li:last-child a:after {
8893
display: none;
8994
}
90-
.upload {
91-
position: relative;
95+
.panel {
9296
margin: 1em;
9397
padding: 1em;
9498
background: #f7f7f7;
9599
}
100+
.upload {
101+
position: relative;
102+
}
96103
.upload::before {
97104
display: none;
98105
content: '';
@@ -116,14 +123,14 @@ box-sizing: border-box;
116123
margin-top: 0.5em;
117124
}
118125
.archive {
119-
margin: 0 1em;
126+
margin: 1em;
120127
overflow: hidden;
121128
zoom: 1;
122129
}
123130
.archive a {
124131
position: relative;
125132
float: left;
126-
margin: 1em 0.5em 0 0.5em;
133+
margin: 0 0.5em;
127134
padding: 1em 1em 1em 3em;
128135
border: 2px #f5f5f5 solid;
129136
}
@@ -153,11 +160,6 @@ border-left-color: transparent;
153160
-webkit-transform: rotate(45deg);
154161
transform: rotate(45deg);
155162
}
156-
.mkdir {
157-
margin: 1em;
158-
padding: 1em;
159-
background: #f7f7f7;
160-
}
161163
.mkdir form {
162164
display: flex;
163165
}
@@ -168,6 +170,18 @@ flex: 1 1 auto;
168170
padding-left: 0.5em;
169171
padding-right: 0.5em;
170172
}
173+
.filter {
174+
display: none;
175+
}
176+
:root .filter {
177+
display: block;
178+
}
179+
.filter .form {
180+
display: flex;
181+
}
182+
.filter .filter-text {
183+
flex: 1 1 auto;
184+
}
171185
.item-list {
172186
margin: 1em;
173187
}

‎src/tpl/assert/main.js‎

Lines changed: 113 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
(function () {
22
function enableDragUpload() {
3+
if (!document.querySelector) {
4+
return;
5+
}
6+
37
var upload = document.body.querySelector('.upload');
48
if (!upload || !upload.addEventListener) {
59
return;
@@ -43,7 +47,115 @@
4347
upload.addEventListener('drop', onDrop);
4448
}
4549

50+
function enableFilter() {
51+
if (!document.querySelector) {
52+
var filter = document.getElementById && document.getElementById('panel-filter');
53+
if (filter) {
54+
filter.className += ' none';
55+
}
56+
return;
57+
}
58+
59+
// pre check
60+
var filter = document.body.querySelector('.filter');
61+
if (!filter) {
62+
return;
63+
}
64+
if (!filter.classList || !filter.addEventListener) {
65+
filter.className += ' none';
66+
return;
67+
}
68+
69+
var input = filter.querySelector('input.filter-text');
70+
if (!input) {
71+
return;
72+
}
73+
74+
// event handler
75+
var timeoutId;
76+
var lastFilterText = '';
77+
var doFilter = function () {
78+
var filterText = input.value.trim().toLowerCase();
79+
if (filterText === lastFilterText) {
80+
return;
81+
}
82+
83+
var itemsSelector = '.item-list > li:not(.header):not(.parent)';
84+
var items, i;
85+
86+
if (!filterText) { // filter cleared, show all items
87+
itemsSelector += '.none';
88+
items = document.body.querySelectorAll(itemsSelector);
89+
for (i = items.length - 1; i >= 0; i--) {
90+
items[i].classList.remove('none');
91+
}
92+
} else {
93+
if (filterText.indexOf(lastFilterText) >= 0) { // increment search, find in visible items
94+
itemsSelector += ':not(.none)';
95+
} else if (lastFilterText.indexOf(filterText) >= 0) { // decrement search, find in hidden items
96+
itemsSelector += '.none';
97+
}
98+
99+
items = document.body.querySelectorAll(itemsSelector);
100+
for (i = items.length - 1; i >= 0; i--) {
101+
var item = items[i];
102+
var name = item.querySelector('.name');
103+
if (name && name.textContent.toLowerCase().indexOf(filterText) < 0) {
104+
item.classList.add('none');
105+
} else {
106+
item.classList.remove('none');
107+
}
108+
}
109+
}
110+
111+
lastFilterText = filterText;
112+
};
113+
114+
var onValueMayChange = function () {
115+
clearTimeout(timeoutId);
116+
timeoutId = setTimeout(doFilter, 350);
117+
};
118+
input.addEventListener('input', onValueMayChange);
119+
input.addEventListener('change', onValueMayChange);
120+
input.addEventListener('keydown', function (e) {
121+
switch (e.key) {
122+
case 'Enter':
123+
clearTimeout(timeoutId);
124+
input.blur();
125+
doFilter();
126+
break;
127+
case 'Escape':
128+
case 'Esc':
129+
clearTimeout(timeoutId);
130+
input.value = '';
131+
doFilter();
132+
break;
133+
}
134+
});
135+
136+
// init
137+
if (sessionStorage) {
138+
var prevSessionFilter = sessionStorage.getItem(location.pathname);
139+
sessionStorage.removeItem(location.pathname);
140+
window.addEventListener('beforeunload', function () {
141+
if (input.value) {
142+
sessionStorage.setItem(location.pathname, input.value);
143+
}
144+
});
145+
if (prevSessionFilter) {
146+
input.value = prevSessionFilter;
147+
}
148+
}
149+
if (input.value) {
150+
doFilter();
151+
}
152+
}
153+
46154
function enableNonRefreshDelete() {
155+
if (!document.querySelector) {
156+
return;
157+
}
158+
47159
var itemList = document.body.querySelector('.item-list');
48160
if (!itemList || !itemList.addEventListener) {
49161
return;
@@ -91,9 +203,7 @@
91203
});
92204
}
93205

94-
if (!document.querySelector) {
95-
return;
96-
}
97206
enableDragUpload();
207+
enableFilter();
98208
enableNonRefreshDelete();
99209
})();

0 commit comments

Comments
 (0)