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>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
<!-- Copyright: Simon Brooke and Lucy Fyfe 2025 -->
|
||||||
<title>Japji Sahib</title>
|
<title>Japji Sahib</title>
|
||||||
<!-- link href="style.css" rel="stylesheet" type="text/css" / -->
|
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Bulara;
|
font-family: Bulara;
|
||||||
|
|
@ -16,23 +16,30 @@
|
||||||
background-color: #f8e1cf;
|
background-color: #f8e1cf;
|
||||||
color: #331f16;
|
color: #331f16;
|
||||||
padding: 5% 20%;
|
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;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
} */
|
||||||
|
|
||||||
#popup-phrase {
|
#popup-phrase {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 4em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#record-stop {
|
#popup-record-stop {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -67,7 +74,7 @@
|
||||||
(require '[reagent.core :as r]
|
(require '[reagent.core :as r]
|
||||||
'[reagent.dom :as rdom])
|
'[reagent.dom :as rdom])
|
||||||
|
|
||||||
(declare launch-popup)
|
(declare launch-popup markup-phrase)
|
||||||
|
|
||||||
(def data ;; converted from japji-nihung-timings.json using http://cljson.com/
|
(def data ;; converted from japji-nihung-timings.json using http://cljson.com/
|
||||||
[{:words [{:text "ੴ", :start 3.482, :end 5.761}],
|
[{:words [{:text "ੴ", :start 3.482, :end 5.761}],
|
||||||
|
|
@ -1722,6 +1729,33 @@
|
||||||
:on-click #(play-segment recording (:start record) (:end record))}
|
:on-click #(play-segment recording (:start record) (:end record))}
|
||||||
(str " " (:text 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]
|
(defn markup-phrase [record n]
|
||||||
[:div {:class "phrase" :id (str "phrase-" n)}
|
[:div {:class "phrase" :id (str "phrase-" n)}
|
||||||
[:span {:class "play-control" :lang "en-GB"
|
[:span {:class "play-control" :lang "en-GB"
|
||||||
|
|
@ -1729,28 +1763,6 @@
|
||||||
(map #(markup-word %1 n %2) (:words record) (range))
|
(map #(markup-word %1 n %2) (:words record) (range))
|
||||||
[:span {:class "popup-launcher"
|
[:span {:class "popup-launcher"
|
||||||
:on-click #(launch-popup n %)} "..."]])
|
: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))]
|
(let [content (map markup-phrase data (range))]
|
||||||
(rdom/render content (.getElementById js/document "content")))
|
(rdom/render content (.getElementById js/document "content")))
|
||||||
|
|
@ -1758,36 +1770,18 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="popup" style="display: none; border: thin solid gray; width: 10%">
|
<div id="popup"></div>
|
||||||
<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>
|
|
||||||
<h1><span class="en-GB" lang="en-GB">Japji Sahib</span></h1>
|
<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
|
<p>Select words to hear them. Select the bullet • to hear the whole line. Select three dots ... to record your own
|
||||||
voice.</p>
|
voice.</p>
|
||||||
|
|
||||||
|
<audio id="japji-bindranwale" controls src="resources/audio/japji_bindranwale.mp3"></audio>
|
||||||
|
|
||||||
<div id="content"><span class="gurmukhi" lang="pa">ਕ੍ਰਿਪਾ ਕਰਕੇ ਉਡੀਕ ਕਰੋ...</span></div>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue