[presentation] Fixed clicked image alignment and scaling

4 files changed, 13 insertions, 6 deletions

diff --git a/awk-edits/Presentation.awk b/awk-edits/Presentation.awk
index 618a060..fc18e85 100644
--- a/awk-edits/Presentation.awk
+++ b/awk-edits/Presentation.awk
@@ -161,7 +161,7 @@ BEGIN {
 "	<img id=\"presentBtn\" class=\"unzoomable btn setting-btn icon\" src=\"/img/presentation-tabler.svg\" alt=\"Present\">" ORS \
 "	<img id=\"printBtn\" class=\"unzoomable btn setting-btn icon\" src=\"/img/printer-tabler.svg\" alt=\"Print\">" ORS \
 "		</nav><br><br>" ORS \
-"		<script type=\"text/javascript\" src=\"/scripts/presentation.js\" integrity=\"sha512-RvyAYY80I1pA4CRdrA+TfpTohHcTQ6WQNixMluhDL9ND/Zo+45Eb6zDX42G1DJnSdED4FhRziC355AYBY31HTw==\" crossorigin=\"anonymous\"></script>"
+"		<script type=\"text/javascript\" src=\"/scripts/presentation.js\" integrity=\"sha512-PoIbgOwiicYREcbrrt+nQUZV+/goInUOpP3f7I7H6Rba7Ww6CkTbM7MRQnMnQn1yvJVdcLNXE5LsYMjT6+HEZA==\" crossorigin=\"anonymous\"></script>"
 
 	for (i = 1; i <= length(names); i++) {
 		pat[i] = "&#38;&#38;" names[i]
diff --git a/src/presentation.css b/src/presentation.css
index 0f6d287..19433e8 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -1,4 +1,4 @@
-/* This is done so that .slide and .absolute-slide are easily findable in DOM CSS representation. */
+/* These styles are located here for easy retrieval in JS */
 
 .slide {
     box-sizing: border-box;
@@ -17,6 +17,11 @@
     transform: translate(-50%, -50%);
     visibility: visible;
   }
+  .absolute-slide .clicked-image {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
 
 /* Stylesheet override */
 
diff --git a/src/regarding-js.md b/src/regarding-js.md
index f36b532..af40a69 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -15,7 +15,7 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |[js-styling-preload.js](/scripts/js-styling-preload.js)|Show hidden elements (used solely by scripts) as soon as possible|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/js-styling-preload.js)|81B|3|
 |[page-width.js](/scripts/page-width.js)|Change whether text covers the whole width of the page or only the middle (applicable to wide screens)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/page-width.js)|597B|20|
 |[expand-navbar.js](/scripts/expand-navbar.js)|Button to shrink and expand the sidebar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js)|734B|20|
-|[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|3.7KB|137|
+|[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|3.9KB|139|
 
 ## Data in browser storage
 
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 930c7b0..df80183 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -86,9 +86,11 @@ presentBtn.addEventListener('click', function() {
 });
 
 function fixAbsoluteSlideScale() {
-	var tr = 'translate(-50%, -50%) scale(' + Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth) + ')' 
-	// Update transform
-	document.styleSheets.item(3).cssRules[1].style.transform = tr;
+	var scale = Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth); 
+	// Update .absolute-slide
+	document.styleSheets.item(3).cssRules[1].style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
+	// Update .clicked-image
+	document.styleSheets.item(3).cssRules[2].style.transform = 'translate(-50%, -50%) scale(' + (1/scale) + ')';
 }
 window.addEventListener('resize', fixAbsoluteSlideScale);