110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
/**
|
|
* AKSRT Yiyan — 一言轮播组件
|
|
*
|
|
* Fetches random quotes from hitokoto.cn API and auto-rotates.
|
|
*
|
|
* @package AKSRT
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
function initYiyan(el) {
|
|
if (el.dataset.yiyanBound) return;
|
|
el.dataset.yiyanBound = '1';
|
|
|
|
var count = parseInt(el.dataset.count || '5', 10);
|
|
var interval = parseInt(el.dataset.interval || '5', 10) * 1000;
|
|
var type = el.dataset.type || 'a';
|
|
var textEl = el.querySelector('.aksrt-yiyan__text');
|
|
var fromEl = el.querySelector('.aksrt-yiyan__from');
|
|
var dotsEl = el.querySelector('.aksrt-yiyan__dots');
|
|
var quotes = [];
|
|
var currentIndex = 0;
|
|
var timer = null;
|
|
|
|
function showQuote(index) {
|
|
if (!quotes.length || !textEl) return;
|
|
var q = quotes[index % quotes.length];
|
|
textEl.style.opacity = '0';
|
|
setTimeout(function () {
|
|
textEl.textContent = '"' + q.text + '"';
|
|
textEl.style.opacity = '1';
|
|
if (fromEl) {
|
|
fromEl.textContent = q.from ? '—— ' + q.from : '';
|
|
}
|
|
}, 200);
|
|
|
|
// Update dots
|
|
if (dotsEl) {
|
|
dotsEl.querySelectorAll('.aksrt-yiyan__dot').forEach(function (dot, i) {
|
|
dot.classList.toggle('is-active', i === index % quotes.length);
|
|
});
|
|
}
|
|
}
|
|
|
|
function nextQuote() {
|
|
currentIndex = (currentIndex + 1) % quotes.length;
|
|
showQuote(currentIndex);
|
|
}
|
|
|
|
function fetchQuotes() {
|
|
var url = 'https://v1.hitokoto.cn/?c=' + encodeURIComponent(type) + '&encode=json&count=' + count;
|
|
fetch(url)
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
// API returns single object or array
|
|
if (Array.isArray(data)) {
|
|
quotes = data.map(function (item) {
|
|
return { text: item.hitokoto || '', from: item.from || '' };
|
|
});
|
|
} else if (data && data.hitokoto) {
|
|
quotes = [{ text: data.hitokoto, from: data.from || '' }];
|
|
}
|
|
|
|
if (!quotes.length) {
|
|
if (textEl) textEl.textContent = '暂无内容';
|
|
return;
|
|
}
|
|
|
|
// Build dots
|
|
if (dotsEl && quotes.length > 1) {
|
|
dotsEl.innerHTML = '';
|
|
quotes.forEach(function (_, i) {
|
|
var dot = document.createElement('span');
|
|
dot.className = 'aksrt-yiyan__dot' + (i === 0 ? ' is-active' : '');
|
|
dotsEl.appendChild(dot);
|
|
});
|
|
}
|
|
|
|
showQuote(0);
|
|
|
|
// Auto-rotate
|
|
if (quotes.length > 1) {
|
|
timer = setInterval(nextQuote, interval);
|
|
}
|
|
})
|
|
.catch(function () {
|
|
if (textEl) textEl.textContent = '加载失败，请稍后再试';
|
|
});
|
|
}
|
|
|
|
// Pause on hover
|
|
el.addEventListener('mouseenter', function () {
|
|
if (timer) clearInterval(timer);
|
|
});
|
|
el.addEventListener('mouseleave', function () {
|
|
if (quotes.length > 1) {
|
|
timer = setInterval(nextQuote, interval);
|
|
}
|
|
});
|
|
|
|
fetchQuotes();
|
|
}
|
|
|
|
// Auto-init all yiyan widgets
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('[data-aksrt-yiyan]').forEach(initYiyan);
|
|
});
|
|
})();
|