浏览代码

Examples: Simpler previews toggle implementation.

Mr.doob 5 年之前
父节点
当前提交
c30ab07b0d
共有 2 个文件被更改,包括 6 次插入18 次删除
  1. 2 18
      examples/index.html
  2. 4 0
      files/main.css

+ 2 - 18
examples/index.html

@@ -56,7 +56,6 @@
 		var panelScrim = document.getElementById( 'panelScrim' );
 		var panelScrim = document.getElementById( 'panelScrim' );
 
 
 		var previewsToggler = document.getElementById( 'previewsToggler' );
 		var previewsToggler = document.getElementById( 'previewsToggler' );
-		var previewsVisible = true;
 
 
 		var links = {};
 		var links = {};
 		var selected = null;
 		var selected = null;
@@ -159,23 +158,8 @@
 
 
 				event.preventDefault();
 				event.preventDefault();
 
 
-				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;
-
-				}
+				content.classList.toggle( 'minimal' );
+				previewsToggler.style.opacity = content.classList.contains( 'minimal' ) ? 1 : 0.25;
 
 
 			};
 			};
 
 

+ 4 - 0
files/main.css

@@ -343,6 +343,10 @@ h1 a {
 			display: none !important;
 			display: none !important;
 		}
 		}
 
 
+		#panel #content.minimal .cover {
+			display: none;
+		}
+
 		body.home #panel #content h2 {
 		body.home #panel #content h2 {
 			margin-bottom: 2px;
 			margin-bottom: 2px;
 			padding-bottom: 0px;
 			padding-bottom: 0px;