diff --git a/assets/widgets/frontend.css b/assets/widgets/frontend.css index 430e8758..856e0725 100644 --- a/assets/widgets/frontend.css +++ b/assets/widgets/frontend.css @@ -110,7 +110,7 @@ .aksrt-widget-comments { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }.aksrt-widget-comments li { display: flex; gap: 11px; }.aksrt-widget-comments__avatar img { width: 42px; height: 42px; border-radius: 50%; }.aksrt-widget-comments p { margin: 3px 0; color: var(--muted-color,#8a8c98); font-size: 13px; line-height: 1.55; }.aksrt-widget-comments__source { font-size: 12px; opacity: .65; } .aksrt-widget-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.aksrt-widget-links a { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: var(--main-radius,8px); background: var(--muted-border-color,#f2f3f5); color:var(--key-color,#333); }.aksrt-widget-links small { color: var(--muted-color,#8a8c98); }.aksrt-widget-links--simple { display: flex; flex-wrap: wrap; }.aksrt-widget-links--simple a { padding: 5px 9px; box-shadow: none; background: transparent; } .aksrt-widget-notice { display: flex; height: 48px; align-items: center; gap: 12px; padding: 0 15px; overflow: hidden; border-radius: var(--main-radius,8px); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-widget-notice .swiper { height: 48px; flex: 1; }.aksrt-widget-notice .swiper-slide, .aksrt-widget-notice .swiper-slide a { display: flex; height: 48px; align-items: center; gap: 10px; }.aksrt-widget-notice .swiper-slide span { overflow: hidden; color: var(--muted-color,#8a8c98); text-overflow: ellipsis; white-space: nowrap; } -.aksrt-widget-swiper { position: relative; }.aksrt-widget-swiper__pause { position: absolute; z-index: 6; top: 10px; right: 10px; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(20,21,27,.72); color: #fff; cursor: pointer; }.aksrt-widget-notice .aksrt-widget-swiper__pause { top: 7px; right: 4px; width: 30px; height: 30px; } +.aksrt-widget-swiper { position: relative; } .aksrt-term-card { display: block; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-term-card__media { display: block; aspect-ratio: 16/9; background: var(--muted-border-color,#eee); }.aksrt-term-card__media img { width: 100%; height: 100%; object-fit: cover; }.aksrt-term-card__body { display: flex; flex-direction: column; gap: 5px; padding: 14px; }.aksrt-term-card__body small { min-height: 38px; color: var(--muted-color,#8a8c98); }.aksrt-term-card__body em { font-size: 12px; color: var(--focus-color,#ff5473); font-style: normal; } .aksrt-term-aggregation { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.aksrt-term-aggregation__card { padding: 15px; border-radius: var(--aksrt-widget-radius); background: var(--main-bg-color,#fff); box-shadow: 0 0 10px var(--main-shadow,rgba(116,116,116,.08)); }.aksrt-term-aggregation header a { display: flex; justify-content: space-between; }.aksrt-term-aggregation header span { color: var(--muted-color,#8a8c98); font-size: 13px; }.aksrt-term-aggregation ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }.aksrt-term-aggregation li a { display: flex; align-items: center; gap: 10px; }.aksrt-term-aggregation li img { width: 55px; height: 42px; border-radius: 6px; object-fit: cover; } diff --git a/assets/widgets/frontend.js b/assets/widgets/frontend.js index 5d348ba9..60f1ddb6 100644 --- a/assets/widgets/frontend.js +++ b/assets/widgets/frontend.js @@ -27,79 +27,6 @@ tabs[next].click(); } - function initSwiperA11y(el) { - if (el.dataset.autoplay !== '1' || !once(el, 'SwiperA11y')) return; - var i18n = config.i18n || {}; - var userPaused = reducedMotion; - var focusPaused = false; - var button = document.createElement('button'); - button.type = 'button'; - button.className = 'aksrt-widget-swiper__pause'; - - function setControlState() { - button.setAttribute('aria-pressed', userPaused ? 'true' : 'false'); - button.setAttribute('aria-label', userPaused ? (i18n.resume || '继续自动播放') : (i18n.pause || '暂停自动播放')); - button.textContent = userPaused ? '▶' : 'Ⅱ'; - } - - function autoplay() { - return el.swiper && el.swiper.autoplay ? el.swiper.autoplay : null; - } - - function stopAutoplay() { - var runtime = autoplay(); - if (runtime && typeof runtime.stop === 'function') runtime.stop(); - setControlState(); - } - - function pause() { - focusPaused = true; - stopAutoplay(); - } - - function resume() { - if (reducedMotion || userPaused || focusPaused) { - stopAutoplay(); - return; - } - var runtime = autoplay(); - if (runtime && typeof runtime.start === 'function') runtime.start(); - setControlState(); - } - - button.addEventListener('click', function () { - if (userPaused && !reducedMotion) { - userPaused = false; - resume(); - } else { - userPaused = true; - stopAutoplay(); - } - }); - el.addEventListener('focusin', pause); - el.addEventListener('focusout', function () { - window.setTimeout(function () { - if (el.contains(document.activeElement)) return; - focusPaused = false; - resume(); - }, 0); - }); - - setControlState(); - el.appendChild(button); - - var attempts = 0; - function connectToSwiper() { - if (autoplay()) { - if (reducedMotion || userPaused || focusPaused) stopAutoplay(); - return; - } - attempts += 1; - if (attempts < 120) window.requestAnimationFrame(connectToSwiper); - } - connectToSwiper(); - } - function videoType(url) { if (/\.m3u8(?:\?|$)/i.test(url)) return 'hls'; if (/\.flv(?:\?|$)/i.test(url)) return 'flv'; @@ -330,8 +257,6 @@ function scan(root) { var scope = root || document; - if (scope.matches && scope.matches('.aksrt-widget-swiper')) initSwiperA11y(scope); - scope.querySelectorAll('.aksrt-widget-swiper').forEach(initSwiperA11y); scope.querySelectorAll('.aksrt-widget-video[data-video-url]').forEach(initVideo); scope.querySelectorAll('.aksrt-widget-toc').forEach(initToc); scope.querySelectorAll('.aksrt-widget-quote').forEach(initQuote); diff --git a/src/WidgetSystem/AssetManager.php b/src/WidgetSystem/AssetManager.php index 3cea1aef..4c5986f7 100644 --- a/src/WidgetSystem/AssetManager.php +++ b/src/WidgetSystem/AssetManager.php @@ -36,8 +36,6 @@ final class AssetManager { 'loading' => __('正在加载…', 'aksrt'), 'error' => __('加载失败,请重试。', 'aksrt'), 'retry' => __('重试', 'aksrt'), - 'pause' => __('暂停自动播放', 'aksrt'), - 'resume' => __('继续自动播放', 'aksrt'), ], ]; wp_add_inline_script(self::SCRIPT_HANDLE, 'window.aksrtWidgets=' . wp_json_encode($config) . ';', 'before');