askclass-course-theme 0.16.2 → 0.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ce64de0443f65b49f34b38d0533ff9e62ecf3000e3e75000dee8cece5120464
-  data.tar.gz: 55381a81434be5e764ea82ffc0d89a64da0ac070b31387251e2a34e8d40810a8
+  metadata.gz: 886e39bbcdab94d388dfa9c55bcbfe41b1b1283f479c4db696d93883bf9c23df
+  data.tar.gz: 785bca91c47314ff9456392e3f5f32ccaee7b78eb07e0f046929ba4be96215d3
 SHA512:
-  metadata.gz: b7dde1de1e3910395c4625721569ad72324bf233ffa77a00d4ffd6fddbf1bca212c5887b4c97924e6fbc303005a8a19030b9a0d85b1e837bfc9759e6fd8aa0f3
-  data.tar.gz: cd0db138a8946959e5f402dc99fb7376abc56af4d3c8834f0b2e1fb5c4bfb5d7e2450b87254c77dad73f2de44b5780d4da32349152f51c37e0ffcb5d55e0bbaa
+  metadata.gz: 6571e10c3b28c25ac4e98153c5bf828ac3ae36ebf28beac7beac9b927ef948940b2c95970a9df227b1801a01183ea5cbe27477d503ff8a3bb42ea8808087c780
+  data.tar.gz: 7d45255fc7eb87db6331645d7ccf3f2636ea596f2cb11db03d893d35c85364f8812fcd0add0120dd14727843caa34029f0df0c2b690c2391aec2742f4282dba9

data/_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>

data/_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>

data/_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>

data/_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 -%}

data/_includes/word-click-handler.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>

data/_layouts/session.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>

data/_sass/popup.scss

@@ -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;
+  }
+}

data/assets/css/dialog.scss

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

data/assets/js/word-click-handler.js

@@ -0,0 +1,70 @@
+function handleWordClick(e) {
+  let link = e.target.closest('a[data-word-click]');
+  if (!link) return;
+
+  const fnName = link.dataset.wordClick;
+  if (!fnName) return;
+
+  const customFn = window[fnName];
+  if (typeof customFn !== 'function') {
+    console.warn(`Custom function not found: ${fnName}`);
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  const args = {};
+  for (const attr of link.attributes) {
+    if (attr.name.startsWith('data-arg-')) {
+      const key = attr.name.replace(/^data-arg-/, '');
+      args[key] = attr.value;
+    }
+  }
+
+  try {
+    customFn(e, link, args);
+  } catch (err) {
+    console.error(`Error in word click handler "${fnName}":`, err);
+  }
+}
+
+function showPopup(title, html) {
+  const popup = document.getElementById('course-popup');
+  if (!popup) return;
+
+  const header = popup.querySelector('.top-bar');
+  const body = popup.querySelector('.body');
+  if (header) header.textContent = title;
+  if (body) body.innerHTML = html;
+
+  popup.classList.add('show');
+}
+
+function initPopupClose() {
+  const popup = document.getElementById('course-popup');
+  if (!popup) return;
+
+  popup.querySelector('.tab')?.addEventListener('click', () => {
+    popup.classList.remove('show');
+  });
+
+  popup.addEventListener('click', (e) => {
+    if (e.target === popup) {
+      popup.classList.remove('show');
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && popup.classList.contains('show')) {
+      popup.classList.remove('show');
+    }
+  });
+}
+
+document.addEventListener('click', handleWordClick, true);
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initPopupClose);
+} else {
+  initPopupClose();
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-course-theme
 version: !ruby/object:Gem::Version
-  version: 0.16.2
+  version: 0.17.0
 platform: ruby
 authors:
 - AskClass
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-16 00:00:00.000000000 Z
+date: 2026-01-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -37,6 +37,7 @@ files:
 - _includes/course.html
 - _includes/date_range.html
 - _includes/foot/mathjax.html
+- _includes/foot/popup.html
 - _includes/foot/pwaupdate.html
 - _includes/footer.html
 - _includes/head/common.html
@@ -53,15 +54,16 @@ files:
 - _includes/session/conversation.html
 - _includes/session/googledrive.html
 - _includes/session/header.html
+- _includes/session/hilight_word.html
 - _includes/session/images.html
 - _includes/session/item.html
 - _includes/session/next_prev.html
 - _includes/session/paginator.html
 - _includes/session/points.html
-- _includes/session/say.html
 - _includes/session/sounds.html
 - _includes/session/videos.html
 - _includes/session/youtube.html
+- _includes/word-click-handler.html
 - _layouts/default.html
 - _layouts/segment.html
 - _layouts/session.html
@@ -80,11 +82,13 @@ files:
 - _sass/_table.scss
 - _sass/_video.scss
 - _sass/init.scss
+- _sass/popup.scss
 - assets/css/dialog.scss
 - assets/css/segment.scss
 - assets/css/session.scss
 - assets/favicon.ico
 - assets/js/essential-audio-player.js
+- assets/js/word-click-handler.js
 - assets/loading.svg
 - assets/logo-144.png
 - assets/logo-192.png

data/_includes/session/say.html

@@ -1,2 +0,0 @@
-{% assign word = include.word | replace: '<u>' | replace: '</u>' %}
-<a target="_blank" href="https://www.google.com/search?q=pronounce+{{ word }}">{{ include.word }}</a>{{ include.punct }}