Popup isn't styled correctly and isn't working, but it does pop up.
This commit is contained in:
parent
7a1ea7b7e5
commit
277833aeb2
102
japji/index.html
102
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 © Simon Brooke and Lucy Fyfe 2025 <br>
|
||||
Made with <a href="https://babashka.org/scittle/">Scittle</a>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue