select tafsir in tafsir-view, in place of the note

in addition to the select in the options.

.index.html

@@ -56,7 +56,7 @@
     <span id="uthm_options_title" class="mode_options_title">خيارات وضع التسميع العثماني (بلا كتابة):</span>
 
     <div class="option">
-      <label for="tafsir">تفسير أو ترجمة:&ensp;</label><select id="tafsir" onchange="change_tafsir()">
+      <label for="tafsir_option">تفسير أو ترجمة:&ensp;</label><select class="tafsir" id="tafsir_option" onchange="change_tafsir()">
         <<!! cat res/tafasir | while read v; do read t; printf '<option value="%s">%s</option>' "$v" "$t"; done >>
       </select>
     </div>
@@ -195,7 +195,10 @@
 </svg>
 
 <div id="tvc" class="popup"><!-- tafsir-view container -->
-<div id="tv" class="pc"></div><!-- tafsir-view -->
+<div id="tv" class="pc"><!-- tafsir-view -->
+<div id="tvh"></div><!-- header -->
+<div id="tvt"></div><!-- text -->
+</div>
 <svg class="x" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><!-- tafsir-view close-button -->
 <circle cx="5" cy="5" r="5" />
 <line x1="2" y1="2" x2="8" y2="8" stroke-width="1.25" />

a.gen.js

@@ -72,7 +72,7 @@ const el_quizmode_option = Qid("quizmode_option")
 const el_quizmode = Qid("quizmode")
 const el_uthm_options = Qid("uthm_options")
 const el_uthm_options_title = Qid("uthm_options_title")
-const el_tafsir = Qid("tafsir")
+const el_tafsir_option = Qid("tafsir_option")
 const el_mvbtns_input = Qid("mvbtns_input")
 const el_textclr_input = Qid("textclr_input")
 const el_ayatnum_input = Qid("ayatnum_input")
@@ -123,6 +123,8 @@ const el_J = Qid("J")
 const el_T = Qid("T")
 const el_tvc = Qid("tvc")
 const el_tv = Qid("tv")
+const el_tvh = Qid("tvh")
+const el_tvt = Qid("tvt")
 const el_sxc = Qid("sxc")
 const el_sx = Qid("sx")
 const el_sxi = Qid("sxi")
@@ -463,7 +465,7 @@ function change_mvbtns () {
 }
 
 function change_tafsir () {
-  const t = el_tafsir.value
+  const t = el_tafsir_option.value
   if (t === 'ar_muyassar') { S.removeItem('tafsir') } else { S.setItem('tafsir', t) }
   zz_set('tafsir', t)
 }

a.js

@@ -386,7 +386,7 @@ function change_mvbtns () {
 }
 
 function change_tafsir () {
-  const t = el_tafsir.value
+  const t = el_tafsir_option.value
   if (t === 'ar_muyassar') { S.removeItem('tafsir') } else { S.setItem('tafsir', t) }
   zz_set('tafsir', t)
 }

style.css

@@ -312,7 +312,7 @@ label, label *, select, input, button {
 #mvbtns_input  { width: calc(100% -  9.40em) }
 #textclr_input { width: calc(100% -  6.45em) }
 #feedbackrate  { width: calc(100% -  9.25em) }
-#tafsir        { width: calc(100% -  7.90em) }
+.tafsir        { width: calc(100% -  7.90em) }
 
 #imla_txt { background: var(--background); color: var(--txt); transition: background 1s }
 
@@ -880,13 +880,11 @@ details[open] > .details-content {
 
 /* to accomodate the various languages (our KacstOne is subsetted); */
 /* scripts other than Latin and Perso-Arabic use an available font on the system */
-#tafsir /* selector */, #tafsir > option,
+.tafsir /* selector */, .tafsir > option,
 #tv [lang] /* title & content */ {
   font-family: "Noto Sans Arabic", "Noto Sans";
 }
 
-#tafsirnote { font-size: 0.70em }
-
 #tvtxt[dir="ltr"], #tvtxt[dir="ltr"] * {
   text-align: left;
 }

tafsir.js

@@ -1,5 +1,25 @@
 'use strict'
 
+let current_tafsir_aayah
+
+const tsel_ujo = el_tafsir_option.parentElement.cloneNode(true)  /* deep clone */
+const tsel = tsel_ujo.Q('select')
+delete tsel.id
+tsel.value = el_tafsir_option.value
+//
+tsel_ujo.style.fontSize = '80%'
+tsel_ujo.style.width = '75%'
+tsel_ujo.style.margin = 'auto'
+//
+tsel.onchange = () => {
+  el_tafsir_option.value = tsel.value
+  change_tafsir()
+  show_tafsir(current_tafsir_aayah)
+  // not tv() because uglify-js crashes on it
+  // the only way is to never call tv(), not even indirectly
+  // thus the split of the implementation (show_tafsir) and the reserved name (tv())
+}
+
 const qwSet = (s) => new Set(s.split(' '))
 
 const big = [ 0, 7, 107, 217, 293, 493, 669, 789, 954, 1160, 1235, 1364, 1473, 1596, 1707, 1750, 1901, 2029, 2140, 2250, 2348, 2483, 2595, 2673, 2791, 2855, 2932, 3159, 3252, 3340, 3409, 3533, 3606, 3705, 3970, 4058, 4133, 4272, 4472, 4583, 4630, 4901, 5104, 5163, 5241, 5447, 5672, 5993, 6130, 6236 ]
@@ -19,12 +39,16 @@ let last_tafsir
 // because showing a tafsir remembers the scroll position, which is the wrong behavior,
 // unless re-openning the same tafsir with the same aayah.
 
-function tv (i) {
-  const name = el_tafsir.value
+function tv (i) { show_tafsir(i) }
+
+function show_tafsir (i) {
+  current_tafsir_aayah = i
+  //
+  const name = el_tafsir_option.value
   const lang = (() => { const m = name.match(/^([a-z]+)_/); return m ? m[1] : 'ar' })()
   const attr = lang === 'ar' ? ' ' : RTL.has(lang) ? ` lang="${lang}" ` : ` lang="${lang}" dir="ltr" `
-  // const title = el_tafsir.Q('[value="'+el_tafsir.value+'"]').innerText
-  const title = el_tafsir.innerHTML.match('value="'+el_tafsir.value+'"[^<>]*>([^<>]+)')[1]
+  // const title = el_tafsir_option.Q('[value="'+el_tafsir_option.value+'"]').innerText
+  const title = el_tafsir_option.innerHTML.match('value="'+el_tafsir_option.value+'"[^<>]*>([^<>]+)')[1]
   const t = attr === ' ' ? title : `ترجمة <span${attr}>${title}</span>`
   // show tafsir
   el_tvc.style.display = 'block'
@@ -36,12 +60,18 @@ function tv (i) {
   // compose header
   const s = sura_of(i) - 1
   const aya = ayat.u[i-1].replace(/[#A-Z<>]+/g, '')
-  const head = `<p>${t} للآية ${toarab(i - sura_offset[s])} من سورة ${sura_name[s]}</p><p id="tafsirnote">(يمكن تغيير التفسير من «الخيارات» في أعلى الصفحة بعد إغلاق التفسير)</p><p class="aya">${aya}</p><hr>`
+  // const head = `<p>${t} للآية ${toarab(i - sura_offset[s])} من سورة ${sura_name[s]}</p><p id="tafsirnote">(يمكن تغيير التفسير من «الخيارات» في أعلى الصفحة بعد إغلاق التفسير)</p><p class="aya">${aya}</p><hr>`
+  el_tvh.innerHTML = ''
+  el_tvh.append(
+    make_elem('p', { innerHTML: `${t} للآية ${toarab(i - sura_offset[s])} من سورة ${sura_name[s]}` }),
+    tsel_ujo,
+    make_elem('p', { className: 'aya', innerText: aya }),
+    make_elem('hr'),
+  )
   // loading screen
-  el_tv.innerHTML = head
-  el_tv.append(spinner)
+  el_tvt.append(spinner)
   // get the tafsir
-  get_tafsir(name, i, (content) => { el_tv.innerHTML = head + '<div'+attr+'id="tvtxt">'+content+'</div>' })
+  get_tafsir(name, i, (content) => { el_tvt.innerHTML = '<div'+attr+'id="tvtxt">'+content+'</div>' })
 }
 
 Q('#tvc > .x').onclick = () => {

tajlorligilumi.js

@@ -178,7 +178,7 @@ function tajlorligilumi () {
     store_bool('teacher', opts.teacher)
   }
   //
-  update_options(el_tafsir, opts.tafsir, 'tafsir', 'ar_muyassar')
+  update_options(el_tafsir_option, opts.tafsir, 'tafsir', 'ar_muyassar')
   update_options(el_qaris, opts.qari, 'qari', '')
   update_options(el_mvbtns_input, opts.mv, 'mvbtns', 'b')
   update_options(el_feedbackrate, opts.fbrate, 'fbrate', 'l')