Examples: refactor index.html

docs/index.html

@@ -27,7 +27,7 @@
 
 			<div id="contentWrapper">
 				<div id="inputWrapper">
-					<input placeholder="" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+					<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
 					<div id="exitSearchButton"></div>
 					<select id="language">
 						<option value="en">en</option>
@@ -94,7 +94,7 @@
 			var expandButton = document.getElementById( 'expandButton' );
 			var exitSearchButton = document.getElementById( 'exitSearchButton' );
 			var panelScrim = document.getElementById( 'panelScrim' );
-			var filterInput = document.getElementById( 'filter' );
+			var filterInput = document.getElementById( 'filterInput' );
 			var iframe = document.querySelector( 'iframe' );
 
 			var pageProperties = {};

examples/index.html

@@ -32,7 +32,7 @@
 			<div id="contentWrapper">
 
 				<div id="inputWrapper">
-					<input placeholder="" type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false" />
+					<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
 					<div id="exitSearchButton"></div>
 				</div>
 
@@ -49,28 +49,98 @@
 
 		<script>
 
-		function extractQuery() {
+		var panel = document.getElementById( 'panel' );
+		var content = document.getElementById( 'content' );
+		var viewer = document.getElementById( 'viewer' );
+		var filterInput = document.getElementById( 'filterInput' );
+		var exitSearchButton = document.getElementById( 'exitSearchButton' );
+		var expandButton = document.getElementById( 'expandButton' );
+		var viewSrcButton = document.getElementById( 'button' );
+		var panelScrim = document.getElementById( 'panelScrim' );
 
-			var p = window.location.search.indexOf( '?q=' );
+		var links = {};
+		var selected = null;
+		var container = document.createElement( 'div' );
 
-			if ( p !== - 1 ) {
+		init();
 
-				return window.location.search.substr( 3 );
+		function init() {
+
+			content.appendChild( container );
+
+			viewSrcButton.style.display = 'none';
+
+			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;
 
 				}
 
-			return '';
+			}
+
+			if ( window.location.hash !== '' && links[ window.location.hash.substring( 1 ) ] ) {
+
+				loadFile( window.location.hash.substring( 1 ) );
 
 			}
 
-		var panel = document.getElementById( 'panel' );
-		var content = document.getElementById( 'content' );
-		var viewer = document.getElementById( 'viewer' );
+			filterInput.value = extractQuery();
+
+			if ( filterInput.value !== '' ) {
+
+				panel.classList.add( 'searchFocused' );
+
+			}
+
+			updateFilter();
+
+			// Events
+
+			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 () {
+
+				updateFilter();
+
+			} );
 
-		var filterInput = document.getElementById( 'filter' );
-		var exitSearchButton = document.getElementById( 'exitSearchButton' );
 
-		var expandButton = document.getElementById( 'expandButton' );
 			expandButton.addEventListener( 'click', function ( event ) {
 
 				event.preventDefault();
@@ -78,7 +148,6 @@
 
 			} );
 
-		var panelScrim = document.getElementById( 'panelScrim' );
 			panelScrim.onclick = function ( event ) {
 
 				event.preventDefault();
@@ -96,14 +165,7 @@
 
 			}
 
-		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 ) {
 
@@ -124,28 +186,6 @@
 
 		}
 
-		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 );
@@ -173,43 +213,6 @@
 
 		}
 
-		if ( window.location.hash !== '' && links[ window.location.hash.substring( 1 ) ] ) {
-
-			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 () {
-
-			updateFilter();
-
-		} );
-
 		function updateFilter() {
 
 			var v = filterInput.value;
@@ -315,15 +318,19 @@
 
 		}
 
-		filterInput.value = extractQuery();
+		function extractQuery() {
 
-		if ( filterInput.value !== '' ) {
+			var p = window.location.search.indexOf( '?q=' );
 
-			panel.classList.add( 'searchFocused' );
+			if ( p !== - 1 ) {
+
+				return window.location.search.substr( 3 );
 
 			}
 
-		updateFilter();
+			return '';
+
+		}
 
 		</script>
 

files/main.css

@@ -157,7 +157,7 @@ h1 a {
 		display: none;
 	}
 
-	#panel.searchFocused #filter {
+	#panel.searchFocused #filterInput {
 		-webkit-mask-image: none;
 		mask-image: none;
 		background-color: inherit;
@@ -232,7 +232,7 @@ h1 a {
 	content: "";
 }
 
-	#panel #filter {
+	#panel #filterInput {
 		flex: 1;
 		width: 100%;
 		padding: 0 36px;