From 687f5fcb8de9250739a01d5855faa868f593fb73 Mon Sep 17 00:00:00 2001
From: Michael Wallner <mike@php.net>
Date: Wed, 6 Mar 2019 16:14:27 +0100
Subject: [PATCH] load disqus only on request

---
 public/index.css   | 21 ++++++++++++++++++++-
 public/index.js    | 14 ++++++++++++++
 views/layout.phtml | 10 +---------
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/public/index.css b/public/index.css
index 69f33cc..c0204cd 100644
--- a/public/index.css
+++ b/public/index.css
@@ -27,6 +27,9 @@ div.page {
 div.page>* {
 	margin-left: 1em;
 }
+div.page>footer {
+	margin-left: 0;
+}
 div.page>ul, div.page>div>ul {
 	margin-left: 2em;
 }
@@ -247,6 +250,18 @@ li h3 a:hover {
 	margin-top: 8em;
 	margin-right: 2em;
 }
+#disqus_activator {
+	margin: auto;
+	width: 80%;
+	padding: 1em;
+	background-color: slategrey;
+	color: white;
+	font-size: 1em;
+	font-weight: bold;
+	border: 0;
+	border-radius: 2px;
+	box-shadow: 0 0 4px #999;
+}
 
 footer {
 	font-size: smaller;
@@ -256,7 +271,11 @@ footer {
 	bottom: 0;
 	width: 100%;
 	padding: 0;
-	margin: 0 !important;
+	transition: margin-bottom 2s ease 0.1s;
+}
+footer.hidden {
+	margin-bottom: -10em;
+	transition: margin-bottom 2s ease 0.1s;
 }
 
 footer ul {
diff --git a/public/index.js b/public/index.js
index 8d6c506..5f0f34f 100644
--- a/public/index.js
+++ b/public/index.js
@@ -231,4 +231,18 @@ $(function() {
 	$("h1,h2,h3,h4,h5,h6,p,li,code,td").each(mdref.walk);
 	$(window).on("hashchange", mdref.hashchange);
 	mdref.hashchange();
+
+	$("#disqus_activator").on("click", function() {
+		var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+		dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+	});
+	$.ajax("https://disqus.com/api/3.0/threads/details.json?thread:ident="+(disqus_identifier||"index")+"&forum=mdref&api_key=VmhVG4z5jjtY8SCaMstOjfUuwniMv43Xy9FCU9YfEzhsrl95dNz1epykXSJn8jt9"). then(function(json) {
+		if (json && json.response) {
+			$("#disqus_activator span").text(json.response.posts);
+		}
+	});
+	setTimeout(function() {
+		$("footer").addClass("hidden");
+	}, 1);
 });
diff --git a/views/layout.phtml b/views/layout.phtml
index e4d438d..e49d520 100644
--- a/views/layout.phtml
+++ b/views/layout.phtml
@@ -32,19 +32,11 @@
 			<?php include __DIR__."/index.phtml" ?>
 		<?php endif; ?>
 
-		<?php if (@$_SERVER["SERVER_NAME"] != "localhost") : ?>
-
-			<div id="disqus_thread"></div>
+			<div id="disqus_thread"><button id="disqus_activator">Show <span> </span> Comment(s)</button></div>
 			<script>
 				var disqus_shortname = 'mdref';
 				var disqus_identifier = '<?=$ref?>';
-				(function() {
-					var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-					dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-					(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-				})();
 			</script>
-		<?php endif; ?>
 
 			<footer>
 				<?php include __DIR__."/footer.phtml" ?>
-- 
2.30.2