diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/scripts/quran.js | 9 | ||||
| -rw-r--r-- | src/scripts/zoom.js | 30 | ||||
| -rw-r--r-- | src/styles/style.css | 52 | ||||
| -rw-r--r-- | src/sura.html | 12 |
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"> |