Skip to content

Commit 23d2595

Browse files
mrdoobmrdoob
committed
Merge pull request mrdoob#8103 from Mugen87/dev
added filter option to example viewer
2 parents 0c8aa09 + b237645 commit 23d2595

File tree

1 file changed

+201
-40
lines changed

1 file changed

+201
-40
lines changed

‎examples/index.html

Lines changed: 201 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,24 @@
5959
background: #fafafa;
6060
}
6161

62-
#panel #content {
63-
padding: 0px 20px 20px 20px;
64-
}
62+
#panel #content {
63+
padding: 0px 20px 20px 20px;
64+
}
6565

66-
#panel #content .link {
67-
color: #2194CE;
68-
text-decoration: none;
69-
cursor: pointer;
70-
display: block;
71-
}
66+
#panel #content .link {
67+
color: #2194CE;
68+
text-decoration: none;
69+
cursor: pointer;
70+
display: block;
71+
}
7272

73-
#panel #content .selected {
74-
color: #ff0000;
75-
}
73+
#panel #content .selected {
74+
color: #ff0000;
75+
}
7676

77-
#panel #content .link:hover {
78-
text-decoration: underline;
79-
}
77+
#panel #content .link:hover {
78+
text-decoration: underline;
79+
}
8080

8181
#viewer {
8282
position: absolute;
@@ -97,10 +97,59 @@
9797
opacity: 0.7;
9898
}
9999

100-
#button:hover {
101-
cursor: pointer;
102-
opacity: 1;
103-
}
100+
#button:hover {
101+
cursor: pointer;
102+
opacity: 1;
103+
}
104+
105+
.filterBlock{
106+
margin: 20px;
107+
position: relative;
108+
}
109+
110+
.filterBlock p {
111+
margin: 0;
112+
}
113+
114+
#filterInput {
115+
width: 100%;
116+
padding: 5px;
117+
font-family: inherit;
118+
font-size: 15px;
119+
outline: none;
120+
border: 1px solid #dedede;
121+
}
122+
123+
#filterInput:focus{
124+
border: 1px solid #2194CE;
125+
}
126+
127+
#clearFilterButton {
128+
position: absolute;
129+
right: 6px;
130+
top: 50%;
131+
margin-top: -8px;
132+
width: 16px;
133+
height: 16px;
134+
font-size: 14px;
135+
color: grey;
136+
text-align: center;
137+
line-height: 0;
138+
padding-top: 7px;
139+
opacity: .5;
140+
}
141+
142+
#clearFilterButton:hover {
143+
opacity: 1;
144+
}
145+
146+
.filtered {
147+
display: none !important;
148+
}
149+
150+
#panel li b {
151+
font-weight: bold;
152+
}
104153

105154
/* mobile */
106155

@@ -113,22 +162,22 @@
113162
height: 32px;
114163
}
115164

116-
#expandButton span {
117-
height: 2px;
118-
background-color: #2194CE;
119-
width: 16px;
120-
position: absolute;
121-
left: 8px;
122-
top: 10px;
123-
}
165+
#expandButton span {
166+
height: 2px;
167+
background-color: #2194CE;
168+
width: 16px;
169+
position: absolute;
170+
left: 8px;
171+
top: 10px;
172+
}
124173

125-
#expandButton span:nth-child(1) {
126-
top: 16px;
127-
}
174+
#expandButton span:nth-child(1) {
175+
top: 16px;
176+
}
128177

129-
#expandButton span:nth-child(2) {
130-
top: 22px;
131-
}
178+
#expandButton span:nth-child(2) {
179+
top: 22px;
180+
}
132181

133182
@media all and ( max-width: 640px ) {
134183
h1{
@@ -149,7 +198,7 @@
149198
#content{
150199
position: absolute;
151200
left: 0;
152-
top: 60px;
201+
top: 90px;
153202
right: 0;
154203
bottom: 0;
155204
font-size: 17px;
@@ -182,6 +231,10 @@ <h1><a href="http://threejs.org">three.js</a> / examples</h1>
182231
<span></span>
183232
<span></span>
184233
</a>
234+
<div class="filterBlock" >
235+
<input type="text" id="filterInput" placeholder="Type to filter"/>
236+
<a href="#" id="clearFilterButton" >x</a>
237+
</div>
185238
<div id="content"></div>
186239
</div>
187240
<iframe id="viewer" allowfullscreen onmousewheel=""></iframe>
@@ -193,6 +246,9 @@ <h1><a href="http://threejs.org">three.js</a> / examples</h1>
193246
var content = document.getElementById( 'content' );
194247
var viewer = document.getElementById( 'viewer' );
195248

249+
var filterInput = document.getElementById( 'filterInput' );
250+
var clearFilterButton = document.getElementById( 'clearFilterButton' );
251+
196252
var expandButton = document.getElementById( 'expandButton' );
197253
expandButton.addEventListener( 'click', function ( event ) {
198254
panel.classList.toggle( 'collapsed' );
@@ -236,17 +292,16 @@ <h1><a href="http://threejs.org">three.js</a> / examples</h1>
236292

237293
var section = files[ key ];
238294

239-
var div = document.createElement( 'h2' );
240-
div.textContent = key;
241-
container.appendChild( div );
295+
var header = document.createElement( 'h2' );
296+
header.textContent = key;
297+
header.setAttribute( 'data-category', key );
298+
container.appendChild( header );
242299

243300
for ( var i = 0; i < section.length; i ++ ) {
244301

245302
( function ( file ) {
246303

247-
var name = file.split( '_' );
248-
name.shift();
249-
name = name.join( ' / ' );
304+
var name = getName( file );
250305

251306
var link = document.createElement( 'a' );
252307
link.className = 'link';
@@ -296,6 +351,112 @@ <h1><a href="http://threejs.org">three.js</a> / examples</h1>
296351

297352
}
298353

354+
// filter
355+
356+
filterInput.addEventListener( 'input', function( e ) {
357+
358+
updateFilter();
359+
360+
} );
361+
362+
clearFilterButton.addEventListener( 'click', function( e ) {
363+
364+
filterInput.value = '';
365+
updateFilter();
366+
e.preventDefault();
367+
368+
} );
369+
370+
function updateFilter() {
371+
372+
var exp = new RegExp( filterInput.value, 'gi' );
373+
374+
for ( var key in files ) {
375+
376+
var section = files[ key ];
377+
378+
for ( var i = 0; i < section.length; i ++ ) {
379+
380+
filterExample( section[ i ], exp );
381+
382+
}
383+
384+
}
385+
386+
layoutList();
387+
388+
}
389+
390+
function filterExample( file, exp ){
391+
392+
var link = links[ file ];
393+
var name = getName( file );
394+
var res = file.match( exp );
395+
var text;
396+
397+
if ( res && res.length > 0 ) {
398+
399+
link.classList.remove( 'filtered' );
400+
401+
for( var i = 0; i < res.length; i++ ) {
402+
text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
403+
}
404+
405+
link.innerHTML = text;
406+
407+
} else {
408+
409+
link.classList.add( 'filtered' );
410+
link.innerHTML = name;
411+
412+
}
413+
}
414+
415+
function getName( file ) {
416+
417+
var name = file.split( '_' );
418+
name.shift();
419+
return name.join( ' / ' );
420+
421+
}
422+
423+
function layoutList() {
424+
425+
for ( var key in files ) {
426+
427+
var collapsed = true;
428+
429+
var section = files[ key ];
430+
431+
for ( var i = 0; i < section.length; i ++ ) {
432+
433+
var file = section[ i ];
434+
435+
if( !links[ file ].classList.contains( 'filtered' ) ){
436+
437+
collapsed = false;
438+
break;
439+
440+
}
441+
442+
}
443+
444+
var element = document.querySelector( 'h2[data-category="' + key + '"]' );
445+
446+
if( collapsed ){
447+
448+
element.classList.add( 'filtered' );
449+
450+
} else {
451+
452+
element.classList.remove( 'filtered' );
453+
454+
}
455+
456+
}
457+
458+
}
459+
299460
</script>
300461

301462
</body>

0 commit comments

Comments
 (0)