referat(WT): Implement image clicking

1 files changed, 19 insertions, 0 deletions

diff --git a/Year 4/Web technologies/referat/javascript/figure-click.js b/Year 4/Web technologies/referat/javascript/figure-click.js
new file mode 100644
index 0000000..a525787
--- /dev/null
+++ b/Year 4/Web technologies/referat/javascript/figure-click.js
@@ -0,0 +1,19 @@
+const full_screen_backing = document.getElementById('full-screen-backing');
+
+for (figure of document.getElementsByTagName('figure')) {
+    figure.addEventListener('click', function(event) {
+        if (document.getSelection().type === 'Range') {
+            return;
+        }
+
+        event.currentTarget.classList.toggle('full-screen');
+
+        document.body.classList.toggle('no-overflow');
+        document.documentElement.classList.toggle('no-overflow');
+        document.body.classList.toggle('no-selection');
+
+        event.currentTarget.style.top = 'calc(' + window.scrollY + 'px + 50%)';
+        full_screen_backing.style.top = window.scrollY + 'px';
+        full_screen_backing.classList.toggle('none');
+    });
+}