nfu-ba/modules/text_marquee/_widget.html.erb

<div class="marquee-1" module="text_marquee" data-ps="">
  <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}}]");
    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;

    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>

<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>