index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js examples</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="shortcut icon" href="../files/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../files/main.css">
	</head>
	<body>

		<div id="panel">

			<div id="header">
				<h1><a href="https://threejs.org">three.js</a></h1>

				<div id="sections">
					<a href="../docs/index.html#manual/introduction/Creating-a-scene">docs</a>
					<span class="selected">examples</span>
				</div>

				<div id="expandButton"></div>
			</div>

			<div id="panelScrim"></div>

			<div id="contentWrapper">

				<div id="inputWrapper">
					<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
					<div id="exitSearchButton"></div>
				</div>

				<div id="content">
					<img id="previewsToggler" src="./files/thumbnails.svg" width="20" height="20" />
				</div>
			</div>

		</div>

		<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>

		<a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>

		<script src="files.js"></script>

		<script>

		const panel = document.getElementById( 'panel' );
		const content = document.getElementById( 'content' );
		const viewer = document.getElementById( 'viewer' );
		const filterInput = document.getElementById( 'filterInput' );
		const exitSearchButton = document.getElementById( 'exitSearchButton' );
		const expandButton = document.getElementById( 'expandButton' );
		const viewSrcButton = document.getElementById( 'button' );
		const panelScrim = document.getElementById( 'panelScrim' );

		const previewsToggler = document.getElementById( 'previewsToggler' );

		const links = {};
		const container = document.createElement( 'div' );

		let selected = null;

		init();

		function init() {

			content.appendChild( container );

			viewSrcButton.style.display = 'none';

			for ( const key in files ) {

				const section = files[ key ];

				const header = document.createElement( 'h2' );
				header.textContent = key;
				header.setAttribute( 'data-category', key );
				container.appendChild( header );

				for ( let i = 0; i < section.length; i ++ ) {

					const file = section[ i ];

					const link = createLink( file );
					container.appendChild( link );

					links[ file ] = link;

				}

			}

			if ( window.location.hash !== '' && links[ window.location.hash.substring( 1 ) ] ) {

				loadFile( window.location.hash.substring( 1 ) );

			}

			filterInput.value = extractQuery();

			if ( filterInput.value !== '' ) {

				panel.classList.add( 'searchFocused' );

			}

			updateFilter();

			// Events

			filterInput.onfocus = function ( ) {

				panel.classList.add( 'searchFocused' );

			};

			filterInput.onblur = function ( ) {

				if ( filterInput.value === '' ) {

					panel.classList.remove( 'searchFocused' );

				}

			};

			exitSearchButton.onclick = function ( ) {

				filterInput.value = '';
				updateFilter();
				panel.classList.remove( 'searchFocused' );

			};

			filterInput.addEventListener( 'input', function () {

				updateFilter();

			} );


			expandButton.addEventListener( 'click', function ( event ) {

				event.preventDefault();
				panel.classList.toggle( 'open' );

			} );

			panelScrim.onclick = function ( event ) {

				event.preventDefault();
				panel.classList.toggle( 'open' );

			};

			previewsToggler.onclick = function ( event ) {

				event.preventDefault();
				content.classList.toggle( 'minimal' );

			};

			// iOS iframe auto-resize workaround

			if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

				viewer.style.width = getComputedStyle( viewer ).width;
				viewer.style.height = getComputedStyle( viewer ).height;
				viewer.setAttribute( 'scrolling', 'no' );

			}

		}

		function createLink( file ) {

			const template = [
				'<div class="card">',
				'	<a href="' + file + '.html" target="viewer">',
				'		<div class="cover">',
				'			<img src="screenshots/' + file + '.jpg" loading="lazy" width="400" />',
				'		</div>',
				'		<div class="title">' + getName( file ) + '</div>',
				'	</a>',
				'</div>'
			].join( "\n" );

			const link = createElementFromHTML( template );

			link.querySelector( 'a[target="viewer"]' ).addEventListener( 'click', function ( event ) {

				if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;

				selectFile( file );

			} );

			return link;

		}

		function loadFile( file ) {

			selectFile( file );
			viewer.src = file + '.html';

		}

		function selectFile( file ) {

			if ( selected !== null ) links[ selected ].classList.remove( 'selected' );

			links[ file ].classList.add( 'selected' );

			window.location.hash = file;
			viewer.focus();

			panel.classList.remove( 'open' );

			selected = file;

			// Reveal "View source" button and set attributes to this example
			viewSrcButton.style.display = '';
			viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
			viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';

		}

		function updateFilter() {

			let v = filterInput.value.trim();
			v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one

			if ( v !== '' ) {

				window.history.replaceState( {}, '', '?q=' + v + window.location.hash );

			} else {

				window.history.replaceState( {}, '', window.location.pathname + window.location.hash );

			}

			const exp = new RegExp( v, 'gi' );

			for ( const key in files ) {

				const section = files[ key ];

				for ( let i = 0; i < section.length; i ++ ) {

					filterExample( section[ i ], exp );

				}

			}

			layoutList();

		}

		function filterExample( file, exp ) {

			const link = links[ file ];
			const name = getName( file );
			if ( file in tags ) file += ' ' + tags[ file ].join( ' ' );
			const res = file.match( exp );
			let text;

			if ( res && res.length > 0 ) {

				link.classList.remove( 'hidden' );

				for ( let i = 0; i < res.length; i ++ ) {

					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );

				}

				link.querySelector( '.title' ).innerHTML = text;

			} else {

				link.classList.add( 'hidden' );
				link.querySelector( '.title' ).innerHTML = name;

			}

		}

		function getName( file ) {

			const name = file.split( '_' );
			name.shift();
			return name.join( ' / ' );

		}

		function layoutList() {

			for ( const key in files ) {

				let collapsed = true;

				const section = files[ key ];

				for ( let i = 0; i < section.length; i ++ ) {

					const file = section[ i ];

					if ( links[ file ].classList.contains( 'hidden' ) === false ) {

						collapsed = false;
						break;

					}

				}

				const element = document.querySelector( 'h2[data-category="' + key + '"]' );

				if ( collapsed ) {

					element.classList.add( 'hidden' );

				} else {

					element.classList.remove( 'hidden' );

				}

			}

		}

		function extractQuery() {

			const p = window.location.search.indexOf( '?q=' );

			if ( p !== - 1 ) {

				return decodeURI( window.location.search.substr( 3 ) );

			}

			return '';

		}


		function createElementFromHTML( htmlString ) {

			const div = document.createElement( 'div' );
			div.innerHTML = htmlString.trim();
			return div.firstChild;

		}

		</script>

	</body>
</html>