Added basic splash screen

#5
kittsville · Dec 21, 2016 · 55ee287 · 55ee287
1 parent 462e188
commit 55ee287
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 3 deletions.
diff --git a/docs/_includes/splash.scss b/docs/_includes/splash.scss
@@ -0,0 +1,20 @@
+#splash {
+	background: #FFF;
+	color: #000;
+	width: 100%;
+	height: 100%; 
+	z-index: 20;
+	top: 0; 
+	left: 0; 
+	position: fixed; 
+	font-family: Arial, Helvetica, sans-serif;
+	text-align: center;
+
+	* {
+		clear: both;
+	}
+
+	img {
+		margin: 10% auto 0px auto;
+	}
+}
diff --git a/docs/assets/og-image.png → docs/assets/images/og-image.png b/docs/assets/og-image.png → docs/assets/images/og-image.png
diff --git a/docs/assets/images/splash.jpg b/docs/assets/images/splash.jpg
diff --git a/docs/assets/scripts/scripts.js b/docs/assets/scripts/scripts.js
@@ -1,4 +1,20 @@
+var progress = {
+	stage  : 0,
+	stages : document.getElementById('progress').getElementsByTagName('p'),
+	increment : function() {
+		progress.stages[progress.stage].hidden = true;
+		progress.stage++;
+		if (progress.stages[progress.stage] !== undefined) {
+			progress.stages[progress.stage].hidden = false;
+		}
+	}
+}
+
+progress.increment();
+
 $.getJSON("/graph.json", function(json) {
+	progress.increment();
+
 	cy = cytoscape({
 
 		container: document.getElementById('graph'),
@@ -22,6 +38,8 @@ $.getJSON("/graph.json", function(json) {
 		]
 	});
 
+	progress.increment();
+
 	cy.on('tap', 'node', function(event) {	
 		window.open(this.data('url'));
 	});
@@ -38,5 +56,6 @@ $.getJSON("/graph.json", function(json) {
 		}
 	}
 
-	document.getElementById('wrap').removeChild(document.getElementById('loading'));
+	delete progress;
+	document.getElementById('wrap').removeChild(document.getElementById('splash'));
 });
diff --git a/docs/index.html b/docs/index.html
@@ -3,8 +3,11 @@
 title: Pyroon
 description: Pyroon is an interactive visualisation of Reddit's switch-a-roos. View the links across subreddits dating back years.
 ---
-{% assign site_image = site.url | append: '/assets/og-image.jpg' %}
+{% assign site_image = site.url | append: '/assets/images/og-image.jpg' %}
 {% assign scripts_url = site.url | append: '/assets/scripts' %}
+{% capture splash_styles %}
+{% include splash.scss %}
+{% endcapture %}
 <html>
 <head>
 	<link rel="dns-prefetch" href="//sci1.uk">
@@ -40,13 +43,25 @@
 	<link rel="canonical" href="{{ site.url }}" />
 
 	<link rel="stylesheet" href="{{ site.url }}/assets/styles.css" type="text/css">
+
+	<style>
+		{{ splash_styles | scssify }}
+	</style>
 </head>
 <body>
 <a id="fork-me" href="https://github.com/kittsville/Pyroon">
 	<img src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
 </a>
 <div id="wrap">
-	<p id="loading">Loading. This will probably cause your browser to freeze</p>
+	<div id="splash">
+		<img alt="Loading..." src="{{ site.url }}/assets/images/splash.jpg">
+		<div id="progress">
+			<p>Loading Assets</p>
+			<p hidden>Loading Roos</p>
+			<p hidden>Rendering Roos (Your browser might briefly freeze)</p>
+			<p hidden>Finishing Up</p>
+		</div>
+	</div>
 	<div id="graph"></div>
 </div>
 <div>