From 802892b78c90745473742ab718ec835458a0cb7b Mon Sep 17 00:00:00 2001
From: ken <poopooken11@gmail.com>
Date: Wed, 8 Jul 2026 16:22:11 +0800
Subject: [PATCH] update

---
 modules/text_marquee/_widget.html.erb | 203 ++++++++++++++++++++++----
 1 file changed, 173 insertions(+), 30 deletions(-)

diff --git a/modules/text_marquee/_widget.html.erb b/modules/text_marquee/_widget.html.erb
index e001a7d..b1a1e58 100644
--- a/modules/text_marquee/_widget.html.erb
+++ b/modules/text_marquee/_widget.html.erb
@@ -1,37 +1,180 @@
 <div class="marquee-1" module="text_marquee" data-ps="">
-	<ul class="marquee" data-level="0" data-list="texts">
-		<li>{{content}}</li>
-	</ul>
+  <div class="marquee-1-controls">
+    <ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
+      <a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
+        <i aria-hidden="true"></i>
+        <p style="display: none;">繼續播放</p>
+      </a>
+      <a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
+        <i aria-hidden="true"></i>
+        <p style="display: none;">暫停播放</p>
+      </a>
+    </ul>
+  </div>
+
+  <ul class="marquee" data-level="0" data-list="texts" aria-live="polite" aria-atomic="true">
+    <li>{{content}}</li>
+  </ul>
 </div>
- 
+
 <script type="text/javascript">
-	(function(){
-		var main_div = $("div[data-subpart-id={{subpart-id}}]"),
-			total_texts = main_div.find("ul li").length - 1,
-			current_text = 0,
-			last_text = 0;
+  (function(){
+    var main_div    = $("div[data-subpart-id={{subpart-id}}]");
+    var total_texts = main_div.find("ul.marquee li").length - 1;
+    var current_text = 0;
+    var last_text    = 0;
+    var isPaused     = false;
+    var timer        = null;
 
-		main_div.find("ul li").hide();
-		var textTransform = function(){
-			current_text++;
-			current_text = (current_text > total_texts ? 0 : current_text);
-			last_text = (current_text == 0 ? total_texts : current_text - 1);
-			speed = $('.marquee > li > a').eq(current_text).attr('speed');
-			main_div.find("ul li").eq(last_text).slideUp(500);
-			main_div.find("ul li").eq(current_text).slideDown(500);
-			if(total_texts > 0){
-				setTimeout(textTransform,speed);
-			}
-		}
-		setTimeout(textTransform,500);
-	})();
+    var $resumeBtn = main_div.find(".resume-slide");
+    var $pauseBtn  = main_div.find(".pause-slide");
+    var $marquee   = main_div.find("ul.marquee");
+
+    main_div.find("ul.marquee li").hide();
+
+    function textTransform() {
+      if (isPaused) return;
+
+      current_text++;
+      current_text = (current_text > total_texts ? 0 : current_text);
+      last_text    = (current_text === 0 ? total_texts : current_text - 1);
+
+      var speed = $(".marquee > li > a").eq(current_text).attr("speed") || 3000;
+
+      main_div.find("ul.marquee li").eq(last_text).slideUp(500);
+      main_div.find("ul.marquee li").eq(current_text).slideDown(500);
+
+      if (total_texts > 0) {
+        timer = setTimeout(textTransform, speed);
+      }
+    }
+
+    function pause() {
+      isPaused = true;
+      clearTimeout(timer);
+      $pauseBtn.attr("aria-checked", "true").addClass("active");
+      $resumeBtn.attr("aria-checked", "false").removeClass("active");
+      // aria-live 暫停時設 off，避免螢幕報讀繼續讀
+      $marquee.attr("aria-live", "off");
+    }
+
+    function resume() {
+      isPaused = false;
+      $resumeBtn.attr("aria-checked", "true").addClass("active");
+      $pauseBtn.attr("aria-checked", "false").removeClass("active");
+      $marquee.attr("aria-live", "polite");
+      var speed = $(".marquee > li > a").eq(current_text).attr("speed") || 3000;
+      timer = setTimeout(textTransform, speed);
+    }
+
+    // 播放/暫停按鈕
+    $resumeBtn.on("click", function(e) {
+      e.preventDefault();
+      if (isPaused) resume();
+    });
+
+    $pauseBtn.on("click", function(e) {
+      e.preventDefault();
+      if (!isPaused) pause();
+    });
+
+    // 焦點進入跑馬燈區域時自動暫停
+    main_div.on("focusin", function() {
+      if (!isPaused) pause();
+    });
+
+    // 焦點離開跑馬燈區域時自動恢復
+    main_div.on("focusout", function(e) {
+      setTimeout(function() {
+        if (!main_div[0].contains(document.activeElement)) {
+          if (isPaused) resume();
+        }
+      }, 50);
+    });
+
+    // 初始狀態：播放中
+    $resumeBtn.addClass("active").attr("aria-checked", "true");
+    $pauseBtn.attr("aria-checked", "false");
+
+    timer = setTimeout(textTransform, 500);
+  })();
 </script>
-	
-<script type="text/javascript">
-	(function(){
-		var main_div = $("div[data-subpart-id"{{subpart-id}})
-	}	
-</script>
-	
 
+<style>
+  .marquee-1-controls {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 4px;
+  }
 
+  .marquee-1 .controlplay {
+	    right: 0.5em;
+    top: 0.6em;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 4px;
+  }
+
+  .marquee-1 .controlplay a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border: 1.5px solid #bbb;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.15s;
+  }
+
+  .marquee-1 .controlplay a:hover,
+  .marquee-1 .controlplay a:focus {
+    background: #f0f0f0;
+    outline: 2px solid #005fcc;
+    outline-offset: 2px;
+  }
+
+  /* resume icon：play 三角形 */
+  .marquee-1 .controlplay .resume-slide i::before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 0 4px 8px;
+    border-color: transparent transparent transparent #555;
+    margin-left: 2px;
+  }
+
+  /* pause icon：兩條直線 */
+  .marquee-1 .controlplay .pause-slide i {
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+  }
+
+  .marquee-1 .controlplay .pause-slide i::before,
+  .marquee-1 .controlplay .pause-slide i::after {
+    content: '';
+    display: inline-block;
+    width: 3px;
+    height: 10px;
+    background: #555;
+    border-radius: 1px;
+  }
+
+  /* active 狀態顏色 */
+  .marquee-1 .controlplay .resume-slide.active i::before {
+    border-color: transparent transparent transparent #32D9C3;
+  }
+
+  .marquee-1 .controlplay .pause-slide.active i::before,
+  .marquee-1 .controlplay .pause-slide.active i::after {
+    background: #ff4500;
+  }
+</style>
\ No newline at end of file