From 12efa76e679624563d508685ac17d411c3c4441e Mon Sep 17 00:00:00 2001
From: altaf-creator <athaalaa@gmail.com>
Date: Mon, 17 Jul 2023 14:16:21 +0700
Subject: Added zoom feature, Added sura index

---
 src/scripts/quran.js |  9 +++++----
 src/scripts/zoom.js  | 30 ++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/scripts/zoom.js

(limited to 'src/scripts')

diff --git a/src/scripts/quran.js b/src/scripts/quran.js
index c50d9c0..5fac7b5 100644
--- a/src/scripts/quran.js
+++ b/src/scripts/quran.js
@@ -78,7 +78,7 @@ function loadSura(xml, translationIndex, index) {
 
     var children = sura[suraIndex].children;
 
-    txt += "<ol>"
+    txt += "<ol id=\"sura-ol\">"
     for (var i = 0; i < children.length; i++) {
         txt += `<li class="sura-li">${children[i].getAttribute('text')}</li>
         <p id="t-${i}"></p>
@@ -88,8 +88,7 @@ function loadSura(xml, translationIndex, index) {
 
     loadTranslation(index, translationIndex);
 
-    document.getElementById("header").innerHTML = metadata[3] +
-        " - <b>" + sura[suraIndex].getAttribute('name') + "</b>";
+    document.getElementById("header").innerHTML = metadata[0] + ": " + metadata[3] + " - <b>" + sura[suraIndex].getAttribute('name') + "</b>";
     document.getElementById("navbar-text").innerHTML = metadata[3] +
         " - <b>" + sura[suraIndex].getAttribute('name') + "</b>";
     document.getElementById("subheader").innerHTML = metadata[1] + " Aya <br>" + metadata[4];
@@ -169,7 +168,7 @@ function loadMetadataButtons(xml) {
         var index = sura[i].getAttribute('index');
         var tname = sura[i].getAttribute('tname');
 
-        document.getElementById("sidebar-sura").innerHTML += `<a class="side-buttons" href="#" onclick="load(${index}, ${tIndex})"><i class="fa-solid fa-book-quran"></i> ${tname}</a>`;
+        document.getElementById("sidebar-sura").innerHTML += `<a class="side-buttons" href="#" onclick="load(${index}, ${tIndex}); updateZoom()"><i class="fa-solid fa-book-quran"></i> ${index}: ${tname}</a>`;
     }
 }
 
@@ -200,4 +199,6 @@ function loadTranslationAya(xml, index, aya) {
         txt = children[i].getAttribute("text");
         document.getElementById(`t-${i}`).innerHTML = txt;
     }
+
+    updateZoom();
 }
diff --git a/src/scripts/zoom.js b/src/scripts/zoom.js
new file mode 100644
index 0000000..82465ec
--- /dev/null
+++ b/src/scripts/zoom.js
@@ -0,0 +1,30 @@
+var zoomLevel = 1;
+
+function zoomIn() {
+    if (zoomLevel < 2) {
+        zoomLevel += .1;
+    }
+}
+
+function zoomOut() {
+    if (zoomLevel > 0.6 ) {
+        zoomLevel -= .1;
+    }
+}
+
+function updateZoom() {
+    const elements = document.getElementsByTagName("li");
+    const zoomText = document.getElementById("zoomText");
+    const zoomTextAlt = document.getElementById("zoomTextAlt");
+    const suraOl = document.getElementById("sura-ol");
+
+    zoomText.innerHTML = Math.round((100 * zoomLevel)).toString() + "%";
+    zoomTextAlt.innerHTML = Math.round((100 * zoomLevel)).toString() + "%";
+    suraOl.style.fontSize = (1 * zoomLevel).toString() + "em";
+    suraOl.style.paddingLeft = (40 * zoomLevel * 1.25).toString() + "px"; 
+
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].style.fontSize = (28 * zoomLevel).toString() + "px"; 
+        elements[i].style.lineHeight = ((28 * zoomLevel) + (44 * zoomLevel * 0.7)).toString() + "px"; 
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3