askclass-course-theme 0.16.2 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ce64de0443f65b49f34b38d0533ff9e62ecf3000e3e75000dee8cece5120464
-  data.tar.gz: 55381a81434be5e764ea82ffc0d89a64da0ac070b31387251e2a34e8d40810a8
+  metadata.gz: 774894d1fc1a67d7c731c3cd0d3563798198c89968ddf9620529004f3d31b17b
+  data.tar.gz: a16889d3dfde34bac5aeaaa375403f1f46efcbc827458d9ffb988118b8107722
 SHA512:
-  metadata.gz: b7dde1de1e3910395c4625721569ad72324bf233ffa77a00d4ffd6fddbf1bca212c5887b4c97924e6fbc303005a8a19030b9a0d85b1e837bfc9759e6fd8aa0f3
-  data.tar.gz: cd0db138a8946959e5f402dc99fb7376abc56af4d3c8834f0b2e1fb5c4bfb5d7e2450b87254c77dad73f2de44b5780d4da32349152f51c37e0ffcb5d55e0bbaa
+  metadata.gz: 5c17878b86a406c61a94e490b23f7c26f9d1453d3f4e2e485a00f5951d56cfe42d30fbeb0619d00671368117b70e05e60c70ca145c1546c9704d7f595e707e7c
+  data.tar.gz: 0c42c8af64f481af2ebbf8e14174dc10ee8636621c6fcdbdff7a6b25c65ea5f1e6a1073c8816ca2a38d8d5d579c02d1e3c59246921ff49abcb700acc0142450b

data/_includes/course.html

@@ -48,7 +48,7 @@
               {{ session.title }}
 
               {%- if session.part -%}
-                <small>(Part {{ session.part }})</small>
+                <small>({{ session.part }})</small>
               {%- endif -%}
             </div>
           {%- endfor -%}
@@ -56,8 +56,10 @@
         <div class="control">
           <a class="button" href="/segment/{{ segment }}">
             {{ info.title }}&nbsp;
+            {%- if info['rocket-icon'] != 'none' %}
             <span data-date="{{ info.end }}"
               class="middle-align rocket {{ symbols }}">rocket_launch</span>
+            {%- endif %}
           </a>
         </div>
       </li>

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/header.html

@@ -2,7 +2,7 @@
   {% include head/meta.html -%}
   {%- include head/common.html -%}
   {%- if page.collection == 'session' -%}
-    {%- if session_data.type == 'Dialog' -%}
+    {%- if session_data.dialog -%}
       <link rel="stylesheet" href="{{ 'assets/css/dialog.css' |  relative_url }}" />
     {%- else -%}
       <link rel="stylesheet" href="{{ 'assets/css/session.css' |  relative_url }}" />

data/_includes/segment/index.html

@@ -23,10 +23,8 @@
           <span data-date="{{ session.due }}" class="{{ symbols }} alarm">alarm_on</span>
           {{ session.due | date: '%b %e, %y' }}
         </div>
-      {%- elsif session.type -%}
-        <div class="header">{{ session.header }}</div>
       {%- else -%}
-        <div class="header">&nbsp;</div>
+        <div class="header">{{ session.header | default: "&nbsp;" }}</div>
       {%- endif -%}
 
       <div class="body">
@@ -38,7 +36,7 @@
 
         {%- if session.part -%}
           <div class="item">
-          Part {{ session.part }}
+          {{ session.part }}
           </div>
         {%- endif -%}
       </div>

data/_includes/session/bubble.html

@@ -1,36 +1,27 @@
-{% 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.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.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/_base.scss

@@ -53,6 +53,10 @@ body {
   &::-webkit-scrollbar-corner {
     background-color: transparent;
   }
+  &.no-scroll {
+    overflow: hidden;
+    padding-right: 6px;
+  }
 }
 
 hr {

data/_sass/_bubbles.scss

@@ -281,23 +281,24 @@ html {
   font-size: calc(20px + (30 - 10) * ((100vw - 500px) / (1600 - 300)));
   line-height: calc(30px + (12 - 0) * ((100vw - 500px) / (600 - 10)));
   font-family: var(--font-tertiary);
-}
-.talktext .index {
-  position: absolute;
-  top: -14px;
-  display: flex;
-  width: 30px;
-  font-size: 20px;
-  line-height: 29px;
+  .index {
+    position: absolute;
+    top: -14px;
+    display: flex;
+    width: 30px;
+    font-size: 20px;
+    line-height: 29px;
+    white-space: nowrap;
+  }
 }
 .left .talktext .index {
   color: var(--color1);
-  left: -40px;
+  left: -37px;
   justify-content: flex-end;
 }
 .right .talktext .index {
   color: var(--color2);
-  right: -40px;
+  right: -37px;
   justify-content: flex-begin;
 }
 u {

data/_sass/_bullets.scss

@@ -32,3 +32,36 @@ ul > li > ul > li {
     list-style-type: initial;
   }
 }
+
+details {
+  summary {
+    cursor: pointer;
+    list-style: none;
+    &::-webkit-details-marker,
+    &::marker {
+      display: none;
+    }
+    &::before {
+      content: "\25B6\FE0E";
+      margin-right: 5px;
+      font-size: 0.9em;
+      color: var(--color-bullet);
+    }
+  }
+  &[open] {
+    summary {
+      &::before {
+        content: "\25BC\FE0E";
+      }
+    }
+  }
+}
+
+details > *:not(summary) {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; margin-top: -10px; }
+  to   { opacity: 1; margin-top: 0;    }
+}

data/_sass/_tab-main.scss

@@ -45,6 +45,7 @@
     font-family: var(--icon-name);
     line-height: 0.7;
     font-size: 37px;
+    cursor: pointer;
   }
 }
 
@@ -69,6 +70,9 @@
   padding: 10px;
   overflow: hidden;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   &.limit-height {
     max-height: var(--grid-body-height);
     overflow-y: auto;

data/_sass/popup.scss

@@ -0,0 +1,29 @@
+.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: initial;
+  }
+
+  .body {
+    overflow-y: auto;
+  }
+}

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,74 @@
+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');
+  document.body.classList.add('no-scroll');
+}
+
+function close(popup) {
+  popup.classList.remove('show');
+  document.body.classList.remove('no-scroll');
+}
+
+function initPopupClose() {
+  const popup = document.getElementById('course-popup');
+  if (!popup) return;
+
+  popup.querySelector('.tab')?.addEventListener('click', () => close(popup));
+
+  popup.addEventListener('click', (e) => {
+    if (e.target === popup) {
+      close(popup);
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && popup.classList.contains('show')) {
+      close(popup);
+    }
+  });
+}
+
+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.18.0
 platform: ruby
 authors:
 - AskClass
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-16 00:00:00.000000000 Z
+date: 2026-01-30 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 }}