nfu-nfumanagement/modules/text_marquee/_widget3.html.erb

<div class="marquee-1 marquee-3" module="text_marquee" data-ps="">
	<div class="marquee-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>
			</a>
			<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
				<i aria-hidden="true"></i>
			</a>
		</ul>
	</div>
	<div class="marquee-container">
		<ul class="marquee" data-level="0" data-list="texts">
			<li>{{content}}</li>
		</ul>
	</div>
</div>

<style>
.marquee-row{
  li{
    list-style:none;
    a{
      color:#990000;
    }
  }
}
.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 150px;
}

.marquee {
  display: flex;
  position: absolute;
  white-space: nowrap;
  left: 0;
}

.marquee-row {
  position: relative;
  height: 25px;
  overflow: hidden;
}

.marquee-row ul {
  display: flex;
  position: absolute;
  white-space: nowrap;
  left: 0;
}

.marquee li {
  display: inline-block;
  padding-right: 200px;
}

/* controlplay 樣式 */
.marquee-1 .controlplay {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0 0 6px 0;
  padding: 0;
  gap: 4px;
  position:relative;
}

.marquee-1 .controlplay a {
    display: inline-block;
    margin-right: 0.25em;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
    i {
    font-family: FontAwesome;
    position: relative;
    font-size: 1rem;
    line-height: 1;
    color: #FFF;
    vertical-align: middle;
    font-style: unset;
    }
}

.marquee-1 .controlplay a:hover {
  border-color: #888;
}

.marquee-1 .controlplay a:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* resume-slide icon：play 三角形 */
.marquee-1 .controlplay .resume-slide i::before {
content: "\f04b";
}

/* pause-slide icon：兩條直線 */
.marquee-1 .controlplay .pause-slide i {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.marquee-1 .controlplay .pause-slide i::before{
    content: "\f04c";
}

/* active 狀態顏色 */
.marquee-1 .controlplay .resume-slide.active i {
  color: #32D9C3;
}

.marquee-1 .controlplay .pause-slide.active i {
  color: #ff4500;
}
</style>

<script type="text/javascript">
(function(){
  var main_div    = $("div[data-subpart-id={{subpart-id}}]");
  var container   = main_div.find(".marquee-container");
  var original_ul = main_div.find("ul.marquee");
  var items       = original_ul.find("li");
  var $resumeBtn  = main_div.find(".resume-slide");
  var $pauseBtn   = main_div.find(".pause-slide");

  if (!items.length) return;

  container.empty();

  for (var i = 0; i < 3; i++) {
    container.append('<div class="marquee-row"><ul></ul></div>');
  }

  var rows = container.find(".marquee-row ul");

  items.each(function(index){
    rows.eq(index % 3).append($(this));
  });

  var speed    = 0.06;
  var isPaused = false;

  function pauseAll() {
    isPaused = true;
    rows.each(function(){
      $(this).stop(true);
    });
    $pauseBtn.attr('aria-checked', 'true').addClass('active');
    $resumeBtn.attr('aria-checked', 'false').removeClass('active');
  }

  function resumeAll() {
    isPaused = false;
    rows.each(function(){
      startMarquee($(this));
    });
    $resumeBtn.attr('aria-checked', 'true').addClass('active');
    $pauseBtn.attr('aria-checked', 'false').removeClass('active');
  }

  function startMarquee($ul){
    if (isPaused) return;

    var total_width = 0;
    $ul.find("li").each(function(){
      total_width += $(this).outerWidth(true);
    });
    total_width += 100;

    var containerWidth = container.width();
    var currentLeft    = parseFloat($ul.css('left'));

    if (isNaN(currentLeft)) {
      $ul.css({ left: containerWidth + 'px' });
      currentLeft = containerWidth;
    }

    var remainingDistance = currentLeft - (-total_width);
    var duration = remainingDistance / speed;

    $ul.animate({
      left: -total_width + 'px'
    }, duration, 'linear', function(){
      $ul.css({ left: containerWidth + 'px' });
      startMarquee($ul);
    });
  }

  // 繼續播放按鈕
  $resumeBtn.on('click', function(e){
    e.preventDefault();
    if (isPaused) resumeAll();
  });

  // 暫停按鈕
  $pauseBtn.on('click', function(e){
    e.preventDefault();
    if (!isPaused) pauseAll();
  });

  // 焦點進入暫停/離開恢復
  container.on('focusin', function(){
    if (!isPaused) pauseAll();
  });
  container.on('focusout', function(e){
    if (!container[0].contains(e.relatedTarget)) {
      if (isPaused) resumeAll();
    }
  });

  // 初始狀態：播放中，resume active
  $resumeBtn.addClass('active').attr('aria-checked', 'true');
  $pauseBtn.attr('aria-checked', 'false');

  rows.each(function(){
    startMarquee($(this));
  });

})();
</script>