feat: Clickable dialog words that pops up a modal

Author: pham

_data/sessions.yml

@@ -62,6 +62,8 @@ dialog-01:
   segment: 'week-03'
   title: 'Making Conversations'
   type: 'Dialog'
+  mode: learn-english
+  index: true
   icon: forum
   sequence: 1
   header: 'Dialogue 1'

_includes/foot/popup.html

@@ -0,0 +1,7 @@
+<div id="course-popup" class="course-popup">
+  <div class="card-tab {{ segment_data.theme }}">
+    <div class="top-bar">&nbsp;</div>
+    <div class="tab icon {{ symbols }}">close</div>
+    <div class="body"></div>
+  </div>
+</div>

_includes/session/bubble.html

@@ -1,36 +1,28 @@
-{% assign words = include.text | split: " " %}
 
 <div class="bubble-container {{ include.side }}">
   <div class="talk-bubble {{ include.side }} tri-right {{ include.side }}-in border round">
     <div class="talktext">
-      <div class="index">{{ include.index }}</div>
+      {%- if session_data.index %}
+        <div class="index">{{ include.index }}</div>
+      {%- endif %}
+
+      {% assign words = include.text | replace: '\', '<br/>' | split: " " %}
       {%- for raw in words %}
-        {%- assign w = raw
-          | replace: 'th', '<u>th</u>'
-          | replace: 'Th', '<u>Th</u>'
-          | replace: 'St', '<u>St</u>'
-          | replace: 've', '<u>ve</u>'
-          | replace: 'Ve', '<u>Ve</u>'
-          | replace: 'dr', '<u>dr</u>'
-          | replace: 'Dr', '<u>Dr</u>'
-        %}
-        {%- assign str = w | remove_first: '^' %}
-        {%- if str == w %}
-          {{ w }}
-        {%- else -%}
-          {%- assign word = str
-             | remove_first: '.'
-             | remove_first: ','
-             | remove_first: '!'
-             | remove_first: '?'
-           %}
-          {%- if word == str %}
-            {%- include session/say.html word=word -%}
-          {%- else %}
-            {%- assign punct = str | slice: -1, 1 -%}
-            {%- include session/say.html word=word punct=punct -%}
-          {% endif -%}
-        {% endif -%}
+        {%- if session_data.mode == 'learn-english' %}
+          {%- assign w = raw
+            | replace: 'th', '<u>th</u>'
+            | replace: 'Th', '<u>Th</u>'
+            | replace: 'St', '<u>St</u>'
+            | replace: 've', '<u>ve</u>'
+            | replace: 'Ve', '<u>Ve</u>'
+            | replace: 'dr', '<u>dr</u>'
+            | replace: 'Dr', '<u>Dr</u>'
+          %}
+        {%- else %}
+          {%- assign w = raw %}
+        {%- endif %}
+
+        {%- include session/hilight_word.html word=w %}
       {% endfor -%}
     </div>
   </div>

_includes/session/conversation.html

@@ -6,6 +6,14 @@
   {%- else -%}
     {%- assign side = 'left' -%}
   {%- endif -%}
-  {% include session/bubble.html text=text side=side index=forloop.index %}
+  {%- if text.first -%}
+    {%- assign idx = forloop.index -%}
+    {%- for line in text -%}
+      {%- assign i = forloop.index | prepend: "." | prepend: idx -%}
+      {% include session/bubble.html text=line side=side index=i %}
+    {%- endfor -%}
+  {%- else -%}
+    {% include session/bubble.html text=text side=side index=forloop.index %}
+  {%- endif -%}
 {%- endfor -%}
 </section>

_includes/session/hilight_word.html

@@ -0,0 +1,23 @@
+{% assign word = include.word | replace: '<u>' | replace: '</u>' %}
+{%- assign str = word | remove_first: '^' %}
+
+{%- if str == word %}
+  {{ word }}
+{%- else -%}
+  {%- assign w = str
+     | remove_first: '.'
+     | remove_first: ','
+     | remove_first: ';'
+     | remove_first: '!'
+     | remove_first: '?'
+   %}
+  {%- if w == str %}
+    {%- assign punct = '' -%}
+  {%- else %}
+    {%- assign punct = str | slice: -1, 1 -%}
+  {% endif -%}
+  <a href="#"
+    data-word-click="wordClick"
+    data-arg-word="{{ w }}"
+  >{{ w }}</a>{{ punct }}
+{% endif -%}

_includes/session/say.html

@@ -0,0 +1,7 @@
+<script>
+  function wordClick(_event, _link, args) {
+    console.info('Default "wordClick" function defined in _includes/word-click-handler.html\nReplace this file with your custom function');
+    console.log(`Word clicked: "${args.word}"`);
+    showPopup("Word", args.word);
+  }
+</script>

_includes/word-click-handler.html

@@ -4,6 +4,9 @@
 {%- if session_data.width != 'max' -%}
   {%- assign constraint = 'max-width' -%}
 {%- endif -%}
+{%- if session_data.type == 'Dialog' -%}
+  {%- assign constraint = constraint | prepend: 'dialog ' -%}
+{%- endif -%}
 
 <!doctype html>
 <html lang="en">
@@ -20,7 +23,7 @@
         {%- include session/sounds.html audio=session_data.audio -%}
         {{ content }}
         {%- if page.dialogue -%}
-          {%- include session/conversation.html data=page.dialogue-%}
+          {%- include session/conversation.html data=page.dialogue -%}
         {%- endif -%}
       </article>
     </section>
@@ -30,5 +33,10 @@
     {%- include footer.html -%}
     {%- include foot/mathjax.html -%}
     <script async src="/assets/js/essential-audio-player.js"></script>
+    {%- if session_data.type == 'Dialog' -%}
+      <script async src="/assets/js/word-click-handler.js"></script>
+      {%- include word-click-handler.html -%}
+      {%- include foot/popup.html -%}
+    {%- endif -%}
   </body>
 </html>

_layouts/session.html

@@ -0,0 +1,25 @@
+.course-popup {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .card-tab {
+    max-width: 90%;
+    width: 480px;
+    max-height: 85vh;
+    position: relative;
+    height: inherit;
+  }
+}

_sass/popup.scss

@@ -3,5 +3,7 @@
 
 @use "init" as *;
 @use "base" as *;
+@use "tab-main" as *;
 @use "article" as *;
 @use "bubbles" as *;
+@use "popup" as *;