From 12efa76e679624563d508685ac17d411c3c4441e Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Mon, 17 Jul 2023 14:16:21 +0700 Subject: Added zoom feature, Added sura index --- README.md | 4 ++-- favicon.ico | Bin 0 -> 4286 bytes forge.config.js | 4 +++- package-lock.json | 8 ++++---- package.json | 2 +- src/scripts/quran.js | 9 +++++---- src/scripts/zoom.js | 30 +++++++++++++++++++++++++++++ src/styles/style.css | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/sura.html | 12 ++++++++++++ 9 files changed, 109 insertions(+), 12 deletions(-) create mode 100644 favicon.ico create mode 100644 src/scripts/zoom.js diff --git a/README.md b/README.md index 91ea618..482b80b 100644 --- a/README.md +++ b/README.md @@ -9,12 +9,12 @@ OpenQuran is an online & offline (for Windows) Al-Qur'an Reader website & app. ## Features - - Al-Qur'an - Sura List - Translation - English - Indonesia +- Zooming ## Installation @@ -28,7 +28,7 @@ OpenQuran is an online & offline (for Windows) Al-Qur'an Reader website & app. 2. Navigate to OpenQuran 3. Install dependencies using `npm install` 4. To preview your electron app, run `npm start` -5. To build your electron app, run `npm run start` +5. To build your electron app, run `npm run make` ### Add to Homescreen (Browser) 1. Open OpenQuran's website [here](https://altaf-creator.github.io/OpenQuran/) diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..6371195 Binary files /dev/null and b/favicon.ico differ diff --git a/forge.config.js b/forge.config.js index 9a4060f..dbcefc2 100644 --- a/forge.config.js +++ b/forge.config.js @@ -1,5 +1,7 @@ module.exports = { - packagerConfig: {}, + packagerConfig: { + icon: '/favicon' + }, rebuildConfig: {}, makers: [ { diff --git a/package-lock.json b/package-lock.json index 30352e2..1116e9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "testapp", - "version": "1.0.0", + "name": "OpenQuran", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "testapp", - "version": "1.0.0", + "name": "OpenQuran", + "version": "1.1.0", "license": "ISC", "dependencies": { "electron-squirrel-startup": "^1.0.0" diff --git a/package.json b/package.json index 2ee51ba..12ad036 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "OpenQuran", - "version": "1.1.0", + "version": "1.2.0", "description": "A quran reader", "main": "main.js", "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 += "
    " + txt += "
      " for (var i = 0; i < children.length; i++) { txt += `
    1. ${children[i].getAttribute('text')}

      2. @@ -88,8 +88,7 @@ function loadSura(xml, translationIndex, index) { loadTranslation(index, translationIndex); - document.getElementById("header").innerHTML = metadata[3] + - " - " + sura[suraIndex].getAttribute('name') + ""; + document.getElementById("header").innerHTML = metadata[0] + ": " + metadata[3] + " - " + sura[suraIndex].getAttribute('name') + ""; document.getElementById("navbar-text").innerHTML = metadata[3] + " - " + sura[suraIndex].getAttribute('name') + ""; document.getElementById("subheader").innerHTML = metadata[1] + " Aya
      " + 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 += ` ${tname}`; + document.getElementById("sidebar-sura").innerHTML += ` ${index}: ${tname}`; } } @@ -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 @@ +
      @@ -69,6 +70,11 @@ onclick="changeDropdownName(`dropdown-content`, `Indonesia`); changeLang(1);">Indonesia
      +
      + + 100% + +
      +
      + + 100% + +
      +

      Loading...

      -- cgit v1.2.3