Examples: Refactored previews toggler code.

examples/files/thumbnails.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4f, 2020-05-01)"
+   sodipodi:docname="thumbnails.svg"
+   id="svg18"
+   viewBox="0 0 512 512"
+   version="1.1">
+  <metadata
+     id="metadata24">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs22" />
+  <sodipodi:namedview
+     inkscape:current-layer="g16"
+     inkscape:window-maximized="1"
+     inkscape:window-y="23"
+     inkscape:window-x="0"
+     inkscape:cy="256"
+     inkscape:cx="233.80568"
+     inkscape:zoom="1.3066406"
+     showgrid="false"
+     id="namedview20"
+     inkscape:window-height="855"
+     inkscape:window-width="1440"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <g
+     id="g16"
+     fill="none">
+    <path
+       sodipodi:nodetypes="cssccssc"
+       d="M 308.66797,108.63086 H 113.99023 c -27.699995,0 -49.999996,22.3 -49.999996,50 v 194.67773 m 142.656246,55.33203 h 194.59375 c 27.7,0 50,-22.3 50,-50 V 164.04688"
+       style="stroke:#000000;stroke-width:35;stroke-linecap:round"
+       id="rect10" />
+    <path
+       id="path14"
+       stroke-width="35"
+       stroke-linecap="round"
+       stroke="#000"
+       d="m66.583 449.71 379.6-379.6" />
+  </g>
+</svg>

examples/index.html

@@ -31,16 +31,10 @@
 					<div id="exitSearchButton"></div>
 				</div>
 
-			<div id="previewToggle">
-				<h2>Previews</h2>
-				<div id="toggles">
-					<h3 id="toggleOn" class="selected">On</h3>
-					<h3 id="toggleOff">Off</h3>
+				<div id="content">
+					<img id="previewsToggler" src="./files/thumbnails.svg" width="20" height="20" />
 				</div>
 			</div>
-			
-				<div id="content"></div>
-			</div>
 
 		</div>
 
@@ -60,9 +54,9 @@
 		var expandButton = document.getElementById( 'expandButton' );
 		var viewSrcButton = document.getElementById( 'button' );
 		var panelScrim = document.getElementById( 'panelScrim' );
-		var toggleOn = document.getElementById( 'toggleOn' );
-		var toggleOff = document.getElementById( 'toggleOff' );
-		var previews = document.getElementsByClassName('cover');
+
+		var previewsToggler = document.getElementById( 'previewsToggler' );
+		var previewsVisible = true;
 
 		var links = {};
 		var selected = null;
@@ -161,23 +155,26 @@
 
 			};
 
-			toggleOn.onclick = function ( event ) {
+			previewsToggler.onclick = function ( event ) {
 
 				event.preventDefault();
-				toggleOff.classList.remove('selected');
-				toggleOn.classList.add( 'selected' );
-				for(i = 0; i< previews.length; i++){
-					previews[i].style.display = 'block';
-				}
 
-			};
-			toggleOff.onclick = function ( event ) {
+				var styles = document.styleSheets[ 0 ];
+
+				if ( previewsVisible ) {
+
+					styles.insertRule( '.cover { display: none } ', 0 );
+
+					previewsToggler.style.opacity = 1;
+					previewsVisible = false;
+
+				} else {
+
+					styles.deleteRule( 0 );
+
+					previewsToggler.style.opacity = 0.25;
+					previewsVisible = true;
 
-				event.preventDefault();
-				toggleOn.classList.remove('selected');
-				toggleOff.classList.add( 'selected' );
-				for(i = 0; i< previews.length; i++){
-					previews[i].style.display = 'none';
 				}
 
 			};

files/main.css

@@ -30,6 +30,10 @@
 		--border-style: 1px solid #444;
 	}
 
+	#previewsToggler {
+		filter: invert(100%);
+	}
+
 }
 
 @font-face {
@@ -121,19 +125,6 @@ h1 a {
 	margin-left: 6px;
 	font-size: .9rem;
 }
-#previewToggle {
-	display: flex;
-	height: var(--header-height);
-	border-bottom: var(--border-style);
-	align-items: center;
-}
-#previewToggle h2 {
-	padding-left: var(--panel-padding);
-	flex: 1;
-	display: flex;
-	align-items: center;
-	color: var(--color-blue);
-}
 #panel {
 	position: fixed;
 	z-index: 100;
@@ -294,8 +285,16 @@ h1 a {
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
-		transform: translate3d(0,0,0);
 	}
+
+	#previewsToggler {
+		cursor: pointer;
+		float: right;
+		margin-top: 18px;
+		margin-bottom: -18px;
+		opacity: 0.25;
+	}
+
 	#panel #content {
 		flex: 1;
 		overflow-y: auto;
@@ -352,37 +351,6 @@ h1 a {
 			padding-top: 6px;
 		}
 
-	#panel #toggles {
-		display: flex;
-		justify-content: center;
-		z-index: 1000;
-		position: relative;
-		height: 100%;
-		align-items: center;
-		font-weight: 500;
-	}
-	#panel #toggles * {
-		padding: 0 var(--panel-padding);
-		height: 100%;
-		position: relative;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	#panel #toggles .selected:after {
-		content: "";
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: -1px;
-		border-bottom: 1px solid var(--text-color);
-	}
-
-	#panel #toggles :hover,
-	#panel #toggles .selected {
-		color: var(--color-blue);
-	}
-
 .spacer {
 	color: var(--secondary-text-color);
 	margin-left: 2px;