Update captioning

3 files changed, 51 insertions, 24 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 455a8ee..7b0648b 100755
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,6 +3,52 @@
 {{ if .Draft }}

 DRAFT

 {{ end }}

+<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;"></div>

+<script>

+function fadeOut(el) {

+  el.style.opacity = 1;

+

+  var last = +new Date();

+  var tick = function() {

+    el.style.opacity = +el.style.opacity - (new Date() - last) / 80;

+    last = +new Date();

+    // console.log(el.style.opacity);

+

+    if (el.style.opacity > 0) {

+      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);

+    } else {

+    	el.style.display='none';

+    }

+  };

+

+  tick();

+}

+

+function ready(fn) {

+    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {

+         el = document.getElementById('loadingMask');

+         fadeOut(el);

+        var elements = document.querySelectorAll("img");

+        Array.prototype.forEach.call(elements, function(el, i) {

+            if (el.getAttribute("alt")) {

+                const caption = document.createElement('figcaption');

+                var node = document.createTextNode(el.getAttribute("alt"));

+                caption.appendChild(node);

+                const wrapper = document.createElement('figure');

+                wrapper.className = 'image';

+                el.parentNode.insertBefore(wrapper, el);

+                el.parentNode.removeChild(el);

+                wrapper.appendChild(el);

+                wrapper.appendChild(caption);

+            }

+        });

+

+    } else {

+        document.addEventListener('DOMContentLoaded', fn);

+    }

+}

+window.onload = ready;

+</script>

 

 <div class="content">

 	<h1>{{ .Title }} <aside>{{ range .Params.tags }}<a href="/tags/{{.}}/" class="w3-tag">/{{.}}</a>&nbsp;&nbsp;&nbsp;{{end}}{{ if .Params.tags}}<a href="/about" class="w3-tag">/about</a>{{ end}}</aside></h1>

diff --git a/layouts/partials/middle.html b/layouts/partials/middle.html
index 8bc1cfe..ca72347 100644
--- a/layouts/partials/middle.html
+++ b/layouts/partials/middle.html
@@ -21,7 +21,8 @@ DRAFT
 
             {{ end }}-->
         </aside>
-        <a href="{{ .Permalink }}">{{ .Title }}</a>
+        <a href="{{ .Permalink }}" style="color:black;">{{ .Title }}</a>{{ if .Draft }} <span style="color:blue;">(unpublished)</span>
+{{ end }}
         </p>
     {{ end }}
     {{ end }}
diff --git a/static/js/caption.js b/static/js/caption.js
index 95bcfdc..b28b04f 100644
--- a/static/js/caption.js
+++ b/static/js/caption.js
@@ -1,23 +1,3 @@
-function ready(fn) {
-    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
-        var elements = document.querySelectorAll("img");
-        Array.prototype.forEach.call(elements, function(el, i) {
-            if (el.getAttribute("alt")) {
-                const caption = document.createElement('figcaption');
-                var node = document.createTextNode(el.getAttribute("alt"));
-                caption.appendChild(node);
-                const wrapper = document.createElement('figure');
-                wrapper.className = 'image';
-                el.parentNode.insertBefore(wrapper, el);
-                el.parentNode.removeChild(el);
-                wrapper.appendChild(el);
-                wrapper.appendChild(caption);
-                console.log(el);
-                console.log(el.outerHTML)
-            }
-        });
-    } else {
-        document.addEventListener('DOMContentLoaded', fn);
-    }
-}
-window.onload = ready;
+
+
+