From 2a5cde856b05642b03fa5b46a8396cf568fc4f40 Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Fri, 10 Dec 2021 21:08:40 +0330
Subject: [PATCH] #256 allow locking recitation to text from the beginning in
 new UI

---
 GanjooRazor/Pages/_AudioPlayerPartial.cshtml |  3 +-
 GanjooRazor/wwwroot/css/p8.css               |  8 +++++
 GanjooRazor/wwwroot/js/bk.js                 | 38 ++++++++++++++------
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/GanjooRazor/Pages/_AudioPlayerPartial.cshtml b/GanjooRazor/Pages/_AudioPlayerPartial.cshtml
index 955ba77d..83d531ad 100644
--- a/GanjooRazor/Pages/_AudioPlayerPartial.cshtml
+++ b/GanjooRazor/Pages/_AudioPlayerPartial.cshtml
@@ -17,7 +17,8 @@
                 <a role="button" onclick="document.getElementById('audio-@(nRecitationIndex + 1)').play()" class="actionlink">@recitaion.AudioTitle</a> @Html.Raw(Model.getAudioDesc(recitaion, nRecitationIndex == 0))
             </div>
             <div class="audio-partial-action-box">
-                <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/AudioClip/?a={recitaion.Id}")" onclick="wpopen(this.href); return false">دریافت <i class="recitation-icons recitation-download"></i><span class="w3tooltiptext">دریافت خوانش</span></a>
+                <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/AudioClip/?a={recitaion.Id}")" onclick="wpopen(this.href); return false"><i class="recitation-icons recitation-download"></i><span class="w3tooltiptext">دریافت خوانش</span></a>
+                <a role="button" class="w3tooltip cursor-pointer recitation-button" onclick="switchPlayerScrollLock()"><i class="recitation-icons recitation-scrollunlock"></i><span class="w3tooltiptext">قفل متن روی خوانش</span></a>
             </div>
             <script>
                 document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener('play', () => {
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index f6d862ce..bff3f37f 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -1253,3 +1253,11 @@ ol {
 .recitation-download::after {
     content: 'download';
 }
+
+.recitation-scrollunlock::after {
+    content: 'no_encryption';
+}
+
+.recitation-scrolllock::after {
+    content: 'lock';
+}
\ No newline at end of file
diff --git a/GanjooRazor/wwwroot/js/bk.js b/GanjooRazor/wwwroot/js/bk.js
index c698676d..7955e65c 100644
--- a/GanjooRazor/wwwroot/js/bk.js
+++ b/GanjooRazor/wwwroot/js/bk.js
@@ -125,6 +125,33 @@ function btshmr(poemId) {
     setTimeout(function () { btshmr_internal(poemId); }, 1);
 }
 
+function switchPlayerScrollLock() {
+    playerScrollLock = !playerScrollLock;
+    if (playerScrollLock) {
+
+        $('#scroll-lock').text('🔒');
+    }
+    else {
+        $('#scroll-lock').text('🔓');
+    }
+
+    if (playerScrollLock) {
+        const lockButtons = document.querySelectorAll('.recitation-scrollunlock');
+        lockButtons.forEach(function (lockButton) {
+            lockButton.classList.toggle('recitation-scrollunlock');
+            lockButton.classList.toggle('recitation-scrolllock');
+        });
+    }
+    else {
+        const lockButtons = document.querySelectorAll('.recitation-scrolllock');
+        lockButtons.forEach(function (lockButtons) {
+            lockButtons.classList.toggle('recitation-scrollunlock');
+            lockButtons.classList.toggle('recitation-scrolllock');
+        });
+    }
+
+}
+
 function hilightverse(vnum, clr, sc, forceScroll) {
     var root = document;
     if (typeof root == "string") root = document.getElementById(root);
@@ -169,16 +196,7 @@ function hilightverse(vnum, clr, sc, forceScroll) {
                     btnLock.id = "InlineLockButton";
                     btnLock.setAttribute('role', 'button');
                     btnLock.className = 'inlineanchor';
-                    btnLock.onclick = function () {
-                        playerScrollLock = !playerScrollLock;
-                        if (playerScrollLock) {
-
-                            $('#scroll-lock').text('🔒');
-                        }
-                        else {
-                            $('#scroll-lock').text('🔓');
-                        }
-                    };
+                    btnLock.onclick = switchPlayerScrollLock;
                     element.lastChild.appendChild(btnLock);
 
                     var btnLockIcon = document.createElement("i");