From 277833aeb2668fdf15befd6e3224213c1047c597 Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 28 Aug 2025 23:37:20 +0100
Subject: [PATCH] Popup isn't styled correctly and isn't working, but it does
 pop up.

---
 japji/index.html | 102 ++++++++++++++++++++++-------------------------
 1 file changed, 48 insertions(+), 54 deletions(-)
diff --git a/japji/index.html b/japji/index.html
index 92a85de..eceb0f8 100644
--- a/japji/index.html
+++ b/japji/index.html
@@ -2,8 +2,8 @@
 <html>
 
 <head>
+  <!-- Copyright: Simon Brooke and Lucy Fyfe 2025 -->
   <title>Japji Sahib</title>
-  <!-- link href="style.css" rel="stylesheet" type="text/css" / -->
   <style>
     @font-face {
       font-family: Bulara;
@@ -16,23 +16,30 @@
       background-color: #f8e1cf;
       color: #331f16;
       padding: 5% 20%;
-      font-size: large;
+      font-size: x-large;
     }
 
-    #popup {
+    footer {
+      border-top: thin solid #331f16;
+      font-size: medium;
+      padding: 0.5em 0;
+      text-align: center;
+    }
+
+    /* #popup {
       position: absolute;
       display: none;
       background-color: whitesmoke;
       z-index: 10;
-    }
+    } */
 
     #popup-phrase {
       text-align: center; 
       margin: 0; 
-      font-size: 4em;
+      font-size: 2em;
     }
 
-    #record-stop {
+    #popup-record-stop {
       color: red;
     }
 
@@ -67,7 +74,7 @@
       (require '[reagent.core :as r]
            '[reagent.dom :as rdom])
 
-      (declare launch-popup)
+      (declare launch-popup markup-phrase)
 
       (def data ;; converted from japji-nihung-timings.json using http://cljson.com/
       [{:words [{:text "ੴ", :start 3.482, :end 5.761}],
@@ -1722,6 +1729,33 @@
             :on-click #(play-segment recording (:start record) (:end record))}
             (str " " (:text record))])
 
+      (defn close-popup []
+        (let [popup (.getElementById js/document "popup")]
+          (when popup
+            (rdom/render "" popup))))
+
+      (defn launch-popup [phrase-no event]
+        (.log js/console (str "Launching popup for phrase " phrase-no))
+        (let [popup (.getElementById js/document "popup")
+              phrase-data (nth data phrase-no)
+              content [:div {:id "popup-content"
+                              :style {:border "thin solid #331f16"
+                                      :background-color "whitesmoke"
+                                      :left (.-pageX event)
+                                      :top (.-pageY event)
+                                      :position "absolute"
+                                      :display "block"
+                                      :z-index 10}}
+                        [:div {:id "popup-closebox" :on-click #(close-popup) :title "Close popup"} "x"
+                        (apply vector (concat [:p {:id "popup-phrase" :class "gurmukhi"}]
+                          (map #(markup-word %1 phrase-no %2) (:words phrase-data) (range)))) 
+                        [:table {:id "popup-controls" :summary "Controls for audio playback and recording"}
+                          [:tr [:th "Tutor"][:td {:id "popup-play-tutor"} "►"]]
+                          [:tr [:th "You"] 
+                              [:td {:id "popup-play-student"} "►"]
+                              [:td {:id "popup-record-stop"} "⏺"]]]]]]
+            (rdom/render content popup)))
+
       (defn markup-phrase [record n]
         [:div {:class "phrase" :id (str "phrase-" n)}
           [:span {:class "play-control" :lang "en-GB"
@@ -1729,28 +1763,6 @@
           (map #(markup-word %1 n %2) (:words record) (range))
           [:span {:class "popup-launcher"
                   :on-click #(launch-popup n %)} "..."]])
-
-      (defn close-popup []
-        (let [popup (.getElementById js/document "popup")]
-          (when popup
-            (rdom/render "" popup))))
-
-      (defn launch-popup [phrase-no event]
-        (let [popup (.getElementById js/document "popup")
-              phrase-data (nth data phrase-no)
-              content [:div {:id "popup-content"
-                              :style {:left (.-pageX event)
-                                      :top (.-pageY event)
-                                      :position "absolute"
-                                      :z-index 10}}
-                        [:div {:id "popup-closebox" :on-click #(close-popup) :title "Close popup"} "x"
-                        [:p {:id popup-phrase :class "gurmukhi"} (markup-phrase phrase-data n)]
-                        [:table {:id "popup-controls" :summary "Controls for audio playback and recording"}
-                          [:tr [:th "Tutor"][:td {:id "popup-play-tutor"} "►"]]
-                          [:tr [:th "You"] 
-                              [:td {:id "popup-play-student"} "►"]
-                              [:td {:id "popup-record-stop"} "⏺"]]]]]
-            (rdom/render content popup)))
       
       (let [content (map markup-phrase data (range))]
           (rdom/render content (.getElementById js/document "content")))
@@ -1758,36 +1770,18 @@
 </head>
 
 <body>
-  <div id="popup" style="display: none; border: thin solid gray; width: 10%">
-    <div id="closebox" onclick="$('#popup').hide();" title="Close popup">✖</div>
-    <p class="gurmukhi" id="popup-phrase" style="text-align: center; margin: 0; font-size: 4em;">?</p>
-    <table id="popup-controls" summary="Controls for audio playback and recording">
-      <tr>
-        <th>Tutor</th>
-        <td>
-          <span id="popup-play-tutor" title="Play tutor audio">►</span>
-        </td>
-      </tr>
-      <tr>
-        <th>You</th>
-        <td>
-          <span id="play-student" title="Play student audio">►</span>
-        </td>
-        <td>
-          <span id="record-stop" title="Record student audio">⏺</span>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="3" id="progress"></td>
-      </tr>
-    </table>
-  </div>
-  <audio id="japji-bindranwale" src="resources/audio/japji_bindranwale.mp3"></audio>
+  <div id="popup"></div>
   <h1><span class="en-GB" lang="en-GB">Japji Sahib</span></h1>
   <p>Select words to hear them. Select the bullet • to hear the whole line. Select three dots ... to record your own
     voice.</p>
 
+  <audio id="japji-bindranwale" controls src="resources/audio/japji_bindranwale.mp3"></audio>
+
   <div id="content"><span class="gurmukhi" lang="pa">ਕ੍ਰਿਪਾ ਕਰਕੇ ਉਡੀਕ ਕਰੋ...</span></div>
+  <footer>
+    Page scripts copyright &copy; Simon Brooke and Lucy Fyfe 2025 <br>
+    Made with <a href="https://babashka.org/scittle/">Scittle</a>
+  </footer>
 </body>
 
 </html>
\ No newline at end of file
