add tajweed color legend

.index.html

@@ -79,6 +79,10 @@
       <label for="linebreaks_input">فصل الآيات في أسطر؟&ensp;</label><input id="linebreaks_input" type="checkbox" checked onchange="change_linebreaks()">
     </div>
 
+    <div class="option maybe-inline">
+      <label for="tl_input">دلالات ألوان التجويد؟&ensp;</label><input id="tl_input" type="checkbox" checked onchange="change_tajweedlegend()">
+    </div>
+
   </div>
 
   <div class="mode_options" id="imla_options" style="display:none">
@@ -171,6 +175,20 @@
   <button title="أظهر آية (زري Ctrl+Space أو Ctrl+Enter)" id="nextaaya"><<!!cat res/nnn.svg>></button>
 </div>
 
+<!-- tajweed legend -->
+<svg id="tl" aria-expanded="true" viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
+  <!-- <line x1="0" y1="0" x2="1000" y2="0" /> -->
+  <line x1="505" y1="0" x2="505" y2="400" />
+  <circle cx="450"  cy="50" r="35" id="N" /><text x="380"  y="50">الإخفاء والغنة (حركتين)</text>
+  <circle cx="450" cy="150" r="35" id="X" /><text x="380" y="150">الإدغام وما لا ينطق</text>
+  <circle cx="450" cy="250" r="35" id="R" /><text x="380" y="250">تفخيم الراء</text>
+  <circle cx="450" cy="350" r="35" id="Q" /><text x="380" y="350">القلقلة</text>
+  <circle cx="950"  cy="50" r="35" id="L" /><text x="880"  y="50">مد ستة (٦) حركات</text>
+  <circle cx="950" cy="150" r="35" id="W" /><text x="880" y="150">مد أربعة (٤) حركات</text>
+  <circle cx="950" cy="250" r="35" id="J" /><text x="880" y="250">مد حركتين أو أربع أو ست</text>
+  <circle cx="950" cy="350" r="35" id="T" /><text x="880" y="350">مد حركتين</text>
+</svg>
+
 </div>
 </div>
 

a.gen.js

@@ -38,6 +38,7 @@ const el_mvbtns_input = Qid("mvbtns_input")
 const el_textclr_input = Qid("textclr_input")
 const el_ayatnum_input = Qid("ayatnum_input")
 const el_linebreaks_input = Qid("linebreaks_input")
+const el_tl_input = Qid("tl_input")
 const el_imla_options = Qid("imla_options")
 const el_imla_options_title = Qid("imla_options_title")
 const el_feedbackrate = Qid("feedbackrate")
@@ -68,6 +69,15 @@ const el_prevword = Qid("prevword")
 const el_nextword = Qid("nextword")
 const el_nextjmla = Qid("nextjmla")
 const el_nextaaya = Qid("nextaaya")
+const el_tl = Qid("tl")
+const el_N = Qid("N")
+const el_X = Qid("X")
+const el_R = Qid("R")
+const el_Q = Qid("Q")
+const el_L = Qid("L")
+const el_W = Qid("W")
+const el_J = Qid("J")
+const el_T = Qid("T")
 
 
 const __scroll_top = (el) => el.scrollTo({ top: 0 })
@@ -368,9 +378,21 @@ function change_mvbtns () {
                      ''  /* no class for 'bottom' */
   el_mvbtns.classList = mv_cls
   el_uthm_txt.classList.toggle('sidebtns', mv_cls)
+  el_tl.classList.toggle('right', mv === 'left')
   zz_set('mvbtns', mv.slice(0,1))
 }
 
+function change_tajweedlegend () {
+  if (el_tl_input.checked) {
+    if (!el_uthm_txt.hidden) {
+      el_tl.style.display = ''
+    }
+  }
+  else {
+      el_tl.style.display = 'none'
+  }
+}
+
 function decode_contact () {
   let xyz = Qid('xyz')  // do NOT change to el_xyz; it's not defined in .index.html thus this const is not created
   let mia_nomo = Q('body').innerHTML.match(/github[.]com\/([a-z0-9]+)\//)[1]

a.js

@@ -314,9 +314,21 @@ function change_mvbtns () {
                      ''  /* no class for 'bottom' */
   el_mvbtns.classList = mv_cls
   el_uthm_txt.classList.toggle('sidebtns', mv_cls)
+  el_tl.classList.toggle('right', mv === 'left')
   zz_set('mvbtns', mv.slice(0,1))
 }
 
+function change_tajweedlegend () {
+  if (el_tl_input.checked) {
+    if (!el_uthm_txt.hidden) {
+      el_tl.style.display = ''
+    }
+  }
+  else {
+      el_tl.style.display = 'none'
+  }
+}
+
 function decode_contact () {
   let xyz = Qid('xyz')  // do NOT change to el_xyz; it's not defined in .index.html thus this const is not created
   let mia_nomo = Q('body').innerHTML.match(/github[.]com\/([a-z0-9]+)\//)[1]

javascript.js

@@ -22,6 +22,25 @@ document.body.addEventListener('click', (ev) => {
   }
 })
 
+el_tl.onclick = () => {
+  if (el_tl.getAttribute('aria-expanded') === 'true') {
+    el_tl.setAttribute('aria-expanded', false)
+    el_tl.querySelectorAll('circle').forEach(c =>
+      c.setAttribute('cx', c.getAttribute('cx') == 950 ? 105 : 35))
+    el_tl.querySelectorAll('text').forEach(t => { t.style.display = 'none' })
+    el_tl.querySelector('line').style.display = 'none'
+    el_tl.setAttribute('viewBox', '0 0 140 400')
+  }
+  else {
+    el_tl.setAttribute('aria-expanded', true)
+    el_tl.querySelectorAll('circle').forEach(c =>
+      c.setAttribute('cx', c.getAttribute('cx') < 50 ? 450 : 950))
+    el_tl.querySelectorAll('text').forEach(t => { t.style.display = '' })
+    el_tl.querySelector('line').style.display = ''
+    el_tl.setAttribute('viewBox', '0 0 1000 400')
+  }
+}
+
 function input_trigger_x (ev) {
   // this fn is connected to onkeyup and onmouseup. it handles three "events"
 
@@ -335,6 +354,8 @@ function _recite_uthm () {
   el_uthm_txt.focus()
   audio.set_index(teacher ? 0 : -1)
 
+  if (el_tl_input.checked) { el_tl.style.display = '' }
+
   let words = make_words_list(st, en, cn)
 
   const fwd = function (kind) {
@@ -464,6 +485,7 @@ const show_selectors = function () {
   el_ok.hidden = false
   el_mvbtns.hidden = true
   el_title.style.display = 'none'
+  el_tl.style.display = 'none'  // tajweed legend
   validate_aaya_sura_input({}) /* to enable #ok for easier repeating */
 }
 
@@ -497,6 +519,8 @@ onload = function () {
   Qall('input, select').forEach(e => e.onchange && e.onchange())
   decode_contact()
   versligilumi()
+  el_tl.onclick()  // close
+  el_tl.style.display = 'none'
   el_imla_txt.spellcheck = false
   // fix help opening
   Qall('details').forEach(el => {

style.css

@@ -71,6 +71,8 @@ body {
   --background-translucent: rgba(var(--background-rgb), 0.66);
   --details-bg: white; --details-shadow: black;
   --title-rgb: 0, 0, 0;
+  --tl-open: #fff8;
+  --tl-closed: #fff2;
   /* tajweed */
   --L: #bb6666; --W: red;     --J: orangered; --T: #ff9900;    --N: #009000;
   --X: #9595a0; --R: #2222e0; --Q: #00a5e7;   --A: darkorange; --D: navy;
@@ -94,6 +96,8 @@ body {
   --uitext: #ccc;  --txt: #eee;  --background-rgb: 26, 20, 20; --content-rgb: 23, 23, 23;
   --details-bg: black; --details-shadow: white;
   --title-rgb: 255, 255, 255;
+  --tl-open: #0008;
+  --tl-closed: #0002;
   /* tajweed */
   --L: #bb5555;  --W: red    ;  --J: #ff6600;  --T: #ffbb00;  --N: #00ff00;
   --X: #808080;  --R: #4477ff;  --Q: #00d6ff;  --A: #ff8c00;  --D: #ffffff;
@@ -343,6 +347,44 @@ button:disabled {
 #dark:checked ~ #body button,
 #dark:checked ~ #body select { filter: invert(1) hue-rotate(180deg) }
 
+/* begin: svg#tl -- tajweed legend */
+svg #L { fill: var(--L) }
+svg #W { fill: var(--W) }
+svg #J { fill: var(--J) }
+svg #T { fill: var(--T) }
+svg #N { fill: var(--N) }
+svg #X { fill: var(--X) }
+svg #R { fill: var(--R) }
+svg #Q { fill: var(--Q) }
+
+text {
+  font-family: KacstOne;
+  fill: var(--txt);
+  font-size: 38px;  /* available width is 400px */
+}
+
+line { stroke: var(--txt); stroke-width: 2px }
+
+#tl {
+  position: fixed;
+  bottom: 4em;
+  left: 0;
+  height: 7em;
+  margin: 0 auto;
+  display: block;
+  z-index: 100;
+  background: var(--tl-closed);
+  cursor: pointer;
+}
+#tl[aria-expanded="true"] {
+  background: var(--tl-open);
+}
+#tl.right {
+  left: initial;
+  right: 0;
+}
+/* end: svg#tl -- tajweed legend */
+
 #uthm_txt.letter-parts {
   --txt-font: AmiriQuranColoredWeb;
   --L: var(--txt); --W: var(--txt); --J: var(--txt); --T: var(--txt);
@@ -402,7 +444,7 @@ summary::marker { color: #c00; }
 
 #mvbtns {
   position: fixed;
-  bottom: 1rem;
+  bottom: 1em;
   height: 2em;
   /* right: calc(50vw - 0.5 * var(--mvbtns-width)); */
   right: calc(50vw - var(--all-width) / 2);