Examples: Refactored previews toggler code.

mrdoob · Jul 20, 2020 · f60dc5b · f60dc5b
1 parent e90fcf2
commit f60dc5b
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 69 deletions.
diff --git a/examples/files/thumbnails.svg b/examples/files/thumbnails.svg
diff --git a/examples/index.html b/examples/index.html
@@ -31,16 +31,10 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 					<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 @@ <h3 id="toggleOff">Off</h3>
 		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 @@ <h3 id="toggleOff">Off</h3>
 
 			};
 
-			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';
 				}
 
 			};

diff --git a/files/main.css b/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;