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">
		<style>
			#panel #content .link {
				display: block;
			}
			#button {
				position: fixed;
				bottom: 12px;
				right: 12px;

				padding: 8px;
				border-radius: 50%;
				margin-bottom: 0px; /* TODO div sets it to 20px */

				background-color: #E5E5E5;
				opacity: .9;
			}

			#button:hover {
				cursor: pointer;
				opacity: 1;
			}

			#button img {
				display: block;
				width: 20px;
			}
		</style>
	</head>
	<body>

		<div id="panel">

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

				<div id="sections">
					<a href="../docs/">docs</a>
					<span class="selected">examples</span>
				</div>

				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
			</div>

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

			<div id="contentWrapper">
				<input placeholder="Search" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
				<div id="exitSearchButton"></div>

				<div id="content"></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>

		function extractQuery() {
			var p = window.location.search.indexOf( '?q=' );
			if( p !== -1 ) {
				return window.location.search.substr( 3 );
			}
			return ''
		}

		var panel = document.getElementById( 'panel' );
		var content = document.getElementById( 'content' );
		var viewer = document.getElementById( 'viewer' );

		var filterInput = document.getElementById( 'filter' );
		var exitSearchButton = document.getElementById( 'exitSearchButton' );

		var expandButton = document.getElementById( 'expandButton' );
		expandButton.addEventListener( 'click', function ( event ) {
			event.preventDefault();
			panel.classList.toggle( 'open' );
		} );

		var panelScrim = document.getElementById( 'panelScrim' );
		panelScrim.onclick = function ( event ) {

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

		};

		// 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' );

		}

		var container = document.createElement( 'div' );
		content.appendChild( container );

		var viewSrcButton = document.getElementById( 'button' );
		viewSrcButton.style.display = 'none';

		var links = {};
		var selected = null;

		function createLink( file ) {

			var link = document.createElement( 'a' );
			link.className = 'link';
			link.href = file + '.html';
			link.textContent = getName( file );
			link.setAttribute( 'target', 'viewer' );
			link.addEventListener( 'click', function ( event ) {

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

				selectFile( file );

			} );

			return link;

		}

		for ( var key in files ) {

			var section = files[ key ];

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

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

				var file = section[ i ];

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

				links[ file ] = 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';

		}

		if ( window.location.hash !== '' ) {

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

		}

		// filter
		filterInput.onfocus = function ( event ) {

			panel.classList.add('searchFocused');

		}

		filterInput.onblur = function ( event ) {

			if(filterInput.value === '') {
				panel.classList.remove('searchFocused');
			}

		}

		exitSearchButton.onclick = function( event ) {

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

		}

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

			updateFilter();

		} );

		function updateFilter() {

			var v = filterInput.value;
			if( v !== '' ) {
				window.history.replaceState( {} , '', '?q=' + v + window.location.hash );
			} else {
				window.history.replaceState( {} , '', window.location.pathname + window.location.hash );
			}

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

			for ( var key in files ) {

				var section = files[ key ];

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

					filterExample( section[ i ], exp );

				}

			}

			layoutList();

		}

		function filterExample( file, exp ){

			var link = links[ file ];
			var name = getName( file );
			var res = file.match( exp );
			var text;

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

				link.classList.remove( 'hidden' );

				for( var i = 0; i < res.length; i++ ) {
					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
				}

				link.innerHTML = text;

			} else {

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

			}
		}

		function getName( file ) {

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

		}

		function layoutList() {

			for ( var key in files ) {

				var collapsed = true;

				var section = files[ key ];

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

					var file = section[ i ];

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

						collapsed = false;
						break;

					}

				}

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

				if ( collapsed ) {

					element.classList.add( 'hidden' );

				} else {

					element.classList.remove( 'hidden' );

				}

			}

		}

		filterInput.value = extractQuery();
		updateFilter();

		</script>

	</body>
</html>