152 lines
3.9 KiB
Plaintext
152 lines
3.9 KiB
Plaintext
<div class="marquee-3" module="text_marquee" data-ps="">
|
||
<div class="marquee-3-controls">
|
||
<h3 class="marquee-title">
|
||
<span>{{widget-title}}</span>
|
||
</h3>
|
||
<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>
|
||
<ul class="marquee" data-level="0" data-list="texts">
|
||
<li>{{content}}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<style>
|
||
|
||
|
||
/* controlplay 樣式 */
|
||
.marquee-3 .controlplay {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
list-style: none;
|
||
margin: 0 0 6px 0;
|
||
padding: 0;
|
||
gap: 4px;
|
||
top:1em;
|
||
}
|
||
|
||
.marquee-3 .controlplay a {
|
||
display: inline-block;
|
||
margin-right: 0.25em;
|
||
cursor: pointer;
|
||
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-3 .controlplay a:hover {
|
||
border-color: #888;
|
||
}
|
||
|
||
.marquee-3 .controlplay a:focus {
|
||
outline: 2px solid #005fcc;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* resume-slide icon：play 三角形 */
|
||
.marquee-3 .controlplay .resume-slide i::before {
|
||
content: "\f04b";
|
||
}
|
||
|
||
/* pause-slide icon：兩條直線 */
|
||
.marquee-3 .controlplay .pause-slide i {
|
||
display: inline-flex;
|
||
gap: 3px;
|
||
align-items: center;
|
||
}
|
||
|
||
.marquee-3 .controlplay .pause-slide i::before{
|
||
content: "\f04c";
|
||
}
|
||
|
||
/* active 狀態顏色 */
|
||
.marquee-3 .controlplay .resume-slide.active i {
|
||
color: #32D9C3;
|
||
}
|
||
|
||
.marquee-3 .controlplay .pause-slide.active i {
|
||
color: #ff4500;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
(function(){
|
||
var main_div = $("div[data-subpart-id={{subpart-id}}]");
|
||
var $resumeBtn = main_div.find(".resume-slide");
|
||
var $pauseBtn = main_div.find(".pause-slide");
|
||
var total_texts = main_div.find("ul li").length - 1;
|
||
var current_text = 0;
|
||
var last_text = 0;
|
||
var isPaused = false;
|
||
var timer = null;
|
||
|
||
main_div.find("ul 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');
|
||
|
||
main_div.find("ul li").eq(last_text).slideUp(500);
|
||
main_div.find("ul li").eq(current_text).slideDown(500);
|
||
|
||
if (total_texts > 0) {
|
||
timer = setTimeout(textTransform, speed);
|
||
}
|
||
}
|
||
|
||
function pauseAll() {
|
||
isPaused = true;
|
||
clearTimeout(timer);
|
||
$pauseBtn.attr('aria-checked', 'true').addClass('active');
|
||
$resumeBtn.attr('aria-checked', 'false').removeClass('active');
|
||
}
|
||
|
||
function resumeAll() {
|
||
isPaused = false;
|
||
$resumeBtn.attr('aria-checked', 'true').addClass('active');
|
||
$pauseBtn.attr('aria-checked', 'false').removeClass('active');
|
||
var speed = $('.marquee > li > a').eq(current_text).attr('speed') || 500;
|
||
timer = setTimeout(textTransform, speed);
|
||
}
|
||
|
||
// 繼續播放按鈕
|
||
$resumeBtn.on('click', function(e) {
|
||
e.preventDefault();
|
||
if (isPaused) resumeAll();
|
||
});
|
||
|
||
// 暫停按鈕
|
||
$pauseBtn.on('click', function(e) {
|
||
e.preventDefault();
|
||
if (!isPaused) pauseAll();
|
||
});
|
||
|
||
// 初始狀態
|
||
$resumeBtn.addClass('active').attr('aria-checked', 'true');
|
||
$pauseBtn.attr('aria-checked', 'false');
|
||
|
||
timer = setTimeout(textTransform, 500);
|
||
})();
|
||
</script>
|