From 33ce37faf525b5a851cea27fcb13e9ec678651aa Mon Sep 17 00:00:00 2001
From: Ariejan de Vroom <ariejan@ariejan.net>
Date: Mon, 20 Mar 2017 23:21:16 +0100
Subject: [PATCH] Refactor to not use jquery

---
 layouts/_default/single.html | 38 +++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6072941..6ebea6a 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -56,20 +56,36 @@
     {{ end }}
 </article>
 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript">
-$(function() {
-    $(document).on('click', 'article img', function() {
-        $(this).toggleClass('zoomed');
+function ready(fn) {
+    if (document.readyState != 'loading') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+function imageClick(e) {
+    e.preventDefault();
+    this.classList.toggle('zoomed');
+}
+
+function handleEsc(e) {
+    if (e.keyCode == 27) {
+        var zoomedImages = document.querySelectorAll('img.zoomed');
+        Array.prototype.forEach.call(zoomedImages, function(el, i) {
+            el.classList.toggle('zoomed');
+        });
+    }
+}
+
+ready(function() {
+    var images = document.querySelectorAll('article img');
+    Array.prototype.forEach.call(images, function(el, i) {
+        el.addEventListener('click', imageClick);
     });
 
-    $(document).keyup(function(e) {
-        if (e.keyCode == 27) {
-            $('img.zoomed').each(function(idx) {
-                $(this).toggleClass('zoomed');
-            });
-        }
-    });
+    document.addEventListener('keyup', handleEsc);
 });
 </script>