Added zoom feature, Added sura index

4 files changed, 99 insertions, 4 deletions

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
diff --git a/src/styles/style.css b/src/styles/style.css
index f38644a..8ad010e 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -420,10 +420,54 @@ hr {
     text-decoration: none;
 }
 
+.zoom {
+    box-sizing: border-box;
+    margin: 10px;
+    width: calc(100% - 20px);
+    height: 42px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.zoom-btn {
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    display: block;
+    color: black;
+    background-color: rgb(0, 0, 0, 0);
+    border-radius: 7px;
+    text-align: center;
+    transition: all 150ms;
+}
+
+.zoom-btn:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.zoom-btn:active {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+.zoom-btn:focus {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 #dropdown-alternate {
     display: none;
 }
 
+#zoom-alternate {
+    display: none;
+}
+
+#mobile-hr {
+    display: none;
+}
+
 @media screen and (max-width: 480px) { 
     .sidebar {
         display: none;
@@ -438,6 +482,10 @@ hr {
         display: block;
     }
 
+    #mobile-hr {
+        display: block;
+    }
+
     #navbar-text {
         display: none;
     }
@@ -453,4 +501,8 @@ hr {
     .main-sidebar {
         display: none;
     }
+
+    #zoom-alternate {
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/src/sura.html b/src/sura.html
index b003f75..9be73f4 100644
--- a/src/sura.html
+++ b/src/sura.html
@@ -21,6 +21,7 @@
     <script src="scripts/window-buttons.js" defer></script>
     <script src="scripts/main.js" defer></script>
     <script src="scripts/service-worker.js" defer></script>
+    <script src="scripts/zoom.js" defer></script>
 
     <div class="navbar">
         <a href="./" style="text-decoration: none;" id="openquran-link">
@@ -69,6 +70,11 @@
                             onclick="changeDropdownName(`dropdown-content`, `Indonesia`); changeLang(1);">Indonesia</a>
                     </div>
                 </div>
+                <div class="zoom">
+                    <a href="javascript:void(0)" onclick="zoomOut(); updateZoom();" class="zoom-btn"><i class="fa-solid fa-minus"></i></a>
+                    <span id="zoomText">100%</span>
+                    <a href="javascript:void(0)" onclick="zoomIn(); updateZoom();" class="zoom-btn"><i class="fa-solid fa-plus"></i></a>
+                </div>
                 <hr style="margin: 10px">
                 <div id="sidebar-sura">
 
@@ -93,6 +99,12 @@
                             onclick="changeDropdownName(`dropdown-content-alternate`, `Indonesia`); changeLang(1);">Indonesia</a>
                     </div>
                 </div>
+                <div class="zoom" id="zoom-alternate">
+                    <a href="javascript:void(0)" onclick="zoomOut(); updateZoom();" class="zoom-btn"><i class="fa-solid fa-minus"></i></a>
+                    <span id="zoomTextAlt">100%</span>
+                    <a href="javascript:void(0)" onclick="zoomIn(); updateZoom();" class="zoom-btn"><i class="fa-solid fa-plus"></i></a>
+                </div>
+                <hr id="mobile-hr">
                 <h1 id="header" class="title">Loading...</h1>
                 <h3 id="subheader" class="subtitle"></h3>
                 <div id="main">