added toggle for example previews

examples/index.html

@@ -31,6 +31,14 @@
 					<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>
+			</div>
+			
 				<div id="content"></div>
 			</div>
 
@@ -52,6 +60,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 links = {};
 		var selected = null;
@@ -150,6 +161,27 @@
 
 			};
 
+			toggleOn.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 ) {
+
+				event.preventDefault();
+				toggleOn.classList.remove('selected');
+				toggleOff.classList.add( 'selected' );
+				for(i = 0; i< previews.length; i++){
+					previews[i].style.display = 'none';
+				}
+
+			};
+
 			// iOS iframe auto-resize workaround
 
 			if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

files/main.css

@@ -121,7 +121,19 @@ 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;
@@ -217,6 +229,7 @@ h1 a {
 		display: none;
 	}
 
+
 #panel #inputWrapper {
 	display: flex;
 	align-items: center;
@@ -339,6 +352,37 @@ 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;