Merge pull request #102 from WordPress/update/consistent-navigation

Move prototype navigation UI into common script
WordPress · Feb 21, 2017 · ef32ec2 · ef32ec2
2 parents 91c0598 + 362be18
commit ef32ec2
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -8,10 +8,6 @@
 		<link href="style.css" rel="stylesheet" type="text/css" media="all">
 	</head>
 	<body>
-		<div class="prototypes">
-			<a href="https://wordpress.github.io/gutenberg/" title="UI Prototype" class="is-current">1</a>
-			<a href="https://wordpress.github.io/gutenberg/tinymce-per-block/" title="TinyMCE per text block prototype">2</a>
-		</div>
 		<div class="block-switcher">
 			<svg width="18" height="18" class="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2 11l7-7 7 7-1.4 1.4L9 6.8l-5.6 5.6"/></svg>
 			<svg width="18" height="18" class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16 6.414l-7 7-7-7 1.4-1.4 5.6 5.6 5.6-5.6"/></svg>
@@ -91,5 +87,6 @@ <h2>1.0 Is The Loneliest Number</h2>
 			</div>
 		</div>
 		<script src="blocks.js"></script>
+		<script src="navigation.js"></script>
 	</body>
 </html>
diff --git a/navigation.js b/navigation.js
@@ -0,0 +1,72 @@
+( function( window, document ) {
+	var PROTOTYPES, paths, p, pl, path, navigation, path, label, link, style;
+
+	/**
+	 * Set of all prototypes, keyed by path with label value.
+	 *
+	 * @type {Object}
+	 */
+	PROTOTYPES = {
+		'/': 'UI Prototype',
+		'/tinymce-per-block/': 'TinyMCE per block prototype'
+	};
+
+	// Generate Navigation DOM
+
+	navigation = document.createElement( 'div' );
+	navigation.className = 'prototype-navigation';
+
+	paths = Object.keys( PROTOTYPES );
+
+	for ( p = 0, pl = paths.length; p < pl; p++ ) {
+		path = paths[ p ];
+		label = PROTOTYPES[ path ];
+
+		link = document.createElement( 'a' );
+		link.href = '/gutenberg' + path;
+		link.setAttribute( 'title', label );
+		link.textContent = ( p + 1 );
+
+		if ( '/gutenberg' + path === window.location.pathname ) {
+			link.className = 'is-current';
+		}
+
+		navigation.appendChild( link );
+	}
+
+	// Generate Stylesheet DOM
+
+	style = document.createElement( 'style' );
+	style.innerHTML = [
+		'.prototype-navigation {',
+			'font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;',
+			'display: flex;',
+			'position: absolute;',
+			'top: 24px;',
+			'left: 24px;',
+		'}',
+		'.prototype-navigation a {',
+			'display: inline-block;',
+			'width: 28px;',
+			'height: 28px;',
+			'font-size: 12px;',
+			'border: 1px solid #b4b9be;',
+			'line-height: 28px;',
+			'border-radius: 50%;',
+			'text-decoration: none;',
+			'text-align: center;',
+			'margin-right: 8px;',
+		'}',
+		'.prototype-navigation a.is-current {',
+			'background: #008ec2;',
+			'border-color: #008ec2;',
+			'color: #fff;',
+		'}'
+	].join( '\n' );
+
+	// Append to body
+
+	document.body.appendChild( navigation );
+	document.body.appendChild( style );
+
+} )( this, this.document );
diff --git a/style.css b/style.css
@@ -537,29 +537,3 @@ p a {
 	position: relative;
 	left: 5px;
 }
-
-.prototypes {
-	display: flex;
-	position: absolute;
-		top: 24px;
-		left: 24px;
-}
-
-.prototypes a {
-	display: inline-block;
-	width: 28px;
-	height: 28px;
-	font-size: 12px;
-	border: 1px solid #b4b9be;
-	line-height: 28px;
-	border-radius: 50%;
-	text-decoration: none;
-	text-align: center;
-	margin-right: 8px;
-}
-
-.prototypes a.is-current {
-	background: #008ec2;
-	border-color: #008ec2;
-	color: #fff;
-}
diff --git a/tinymce-per-block/index.html b/tinymce-per-block/index.html
@@ -15,5 +15,6 @@
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i">
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
 	<script src="build/app.js"></script>
+	<script src="../navigation.js"></script>
 </body>
 </html>