Using ajax instead of iframe!

contributte · Nov 22, 2017 · 3d6e763 · 3d6e763
1 parent 6146059
commit 3d6e763
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 220 deletions.
diff --git a/assets/layout.css b/assets/layout.css
@@ -5,10 +5,6 @@ html, body {
 	width: 100%;
 }
 
-h1, h2, h3, h4, h5, h6, p {
-	margin: 0;
-}
-
 body {
 	background-color: #2980b9;
 	background-color: #34495e;
@@ -35,6 +31,15 @@ header {
 	grid-area: header;
 }
 
+header > h1 {
+	color: #fff;
+	font-family: monospace;
+	font-weight: normal;
+	text-align: center;
+	line-height: 80px;
+	vertical-align: middle;
+}
+
 nav {
 	grid-area: nav;
 	align-self: start;
@@ -48,10 +53,6 @@ nav {
 	grid-area: empty-right;
 }
 
-main {
-	grid-area: main;
-}
-
 footer {
 	grid-area: footer;
 }
@@ -107,3 +108,110 @@ iframe {
 	padding: 0;
 	margin: 0;
 }
+
+h1, h2, h3, h4, h5, h6 {
+	margin: 1.2em 0;
+	font-weight: 600;
+}
+
+h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
+	margin: 0 0 1em 0;
+}
+
+p {
+	margin: 0 0 1em 0;
+}
+
+h1 {
+	font-size: 2.2em;
+}
+
+h2 {
+	font-size: 1.7em;
+}
+
+h3 {
+	font-size: 1.37em;
+}
+
+h4 {
+	font-size: 1em;
+}
+
+h5 {
+	font-size: 1.03em;
+}
+
+h6 {
+	font-size: .87em;
+}
+
+ul {
+	margin: 1em 0 1.5em;
+}
+
+h2:first-of-type::before {
+	content: "Section: ";
+	font-weight: normal;
+	color: #949aa0;
+}
+
+a {
+	color: #3498db;
+	text-decoration: none;
+}
+
+a:visited {
+	color: #3498db;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+main {
+	background-color: #fff;
+	padding: 1em;
+	border-radius: 2px;
+	box-sizing: border-box;
+	font-size: 14px;
+	grid-area: main;
+	align-self: start;
+}
+
+pre {
+	background-color: #ecf0f1;
+	padding: 0.5em;
+	font-size: 12px;
+	font-family: "Lucida Console", Monaco, monospace;
+}
+
+code {
+	background-color: #ecf0f1;
+	color: #8e44ad;
+	padding: 2px 4px;
+	font-size: 12px;
+	font-family: "Lucida Console", Monaco, monospace;
+}
+
+pre code {
+	background-color: #ecf0f1;
+	color: #2c3e50;
+	padding: none;
+}
+
+pre:last-child {
+	margin-bottom: 0;
+}
+
+.language-json-string {
+	color: #e67e22;
+}
+
+.language-json-number {
+	color: #138C58;
+}
+
+.language-json-key {
+	color: #4a51bf;
+}
diff --git a/assets/layout.js b/assets/layout.js
@@ -1,42 +1,8 @@
-/**
- * 1, Make nav sections clickable - load apropriate section into the iframe
- * 2, Load immediately first section from the nav
- */
-document.addEventListener("DOMContentLoaded", function(event) {
-	var buttons = document.querySelectorAll('[data-section-href]');
-
-	for (var i = 0; i < buttons.length; i++) {
-		buttons[i].addEventListener("click", function(event) {
-			event.stopPropagation();
-			event.preventDefault();
-
-			window.location.hash = this.getAttribute("data-target");
-		});
-	}
-
-	if (buttons.length) {
-		if (window.location.hash) {
-			onHashChangeRouter();
-		} else {
-			var sectionLink = buttons[0].getAttribute("data-section-href");
-
-			document.getElementsByTagName('iframe')[0].setAttribute("src", sectionLink);
-		}
-	}
-});
-
-/**
- * Adjust iframe size it's content
- */
-document.getElementsByTagName("iframe")[0].addEventListener("load", function() {
-	this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
-});
-
 /**
  * Syntax highlighting - JSON
  */
-document.getElementsByTagName("iframe")[0].addEventListener("load", function() {
-	var jsonAreas = this.contentWindow.document.getElementsByClassName('language-json');
+var initSyntaxHighlighting = function() {
+	var jsonAreas = document.getElementById("section").getElementsByClassName("language-json");
 
 	for (var i = 0; i < jsonAreas.length; i++) {
 		var content = jsonAreas[i].innerHTML;
@@ -68,22 +34,53 @@ document.getElementsByTagName("iframe")[0].addEventListener("load", function() {
 
 		jsonAreas[i].innerHTML = content;
 	}
+};
+
+/**
+ * 1, Make nav sections clickable - load apropriate section into the iframe
+ * 2, Load immediately first section from the nav
+ */
+document.addEventListener("DOMContentLoaded", function(event) {
+	var buttons = document.querySelectorAll("[data-section-src]");
+
+	for (var i = 0; i < buttons.length; i++) {
+		buttons[i].addEventListener("click", function(event) {
+			event.stopPropagation();
+			event.preventDefault();
+
+			window.location.hash = this.getAttribute("data-target");
+		});
+	}
+
+	if (buttons.length) {
+		if (window.location.hash) {
+			onHashChangeRouter();
+		} else {
+			window.location.hash = buttons[0].getAttribute("data-target");
+		}
+	}
 });
 
 /**
  * Simple router
  */
 var onHashChangeRouter = function() {
 	if (window.location.hash) {
-		var hash = window.location.hash.replace(/#/, '');
+		var hash = window.location.hash.replace(/#/, "");
 		var sectionLink = document.querySelectorAll('[data-target="'+hash+'"]');
 
 		if (sectionLink.length) {
-			var sectionSrc = sectionLink[0].getAttribute("data-section-href");
+			var xhr = new XMLHttpRequest();
+
+			xhr.addEventListener("load", function(e) {
+				document.getElementById("section").innerHTML = this.response;
+				initSyntaxHighlighting();
+			});
 
-			document.getElementsByTagName('iframe')[0].setAttribute("src", sectionSrc);
+			xhr.open("GET", sectionLink[0].getAttribute("data-section-src"));
+			xhr.send();
 		}
 	}
 };
 
-window.addEventListener('hashchange', onHashChangeRouter);
+window.addEventListener("hashchange", onHashChangeRouter);
diff --git a/assets/layout.php b/assets/layout.php
@@ -7,13 +7,11 @@
 	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
 </head>
 <body>
-	<header>{title}</header>
+	<header><h1>{title}</h1></header>
 	<div class="empty-left"></div>
 	<nav>{content}</nav>
 	<div class="empty-right"></div>
-	<main>
-		<iframe src="" scrolling="no"></iframe>
-	</main>
+	<main id="section"></main>
 	<footer></footer>
 	<script type="text/javascript">{scripts}</script>
 </body>

diff --git a/assets/section.css b/assets/section.css