diff --git a/assets/css/frontend/widget-batch5.css b/assets/css/frontend/widget-batch5.css index ddc37d63..c5d94b39 100644 --- a/assets/css/frontend/widget-batch5.css +++ b/assets/css/frontend/widget-batch5.css @@ -2479,3 +2479,41 @@ a.main-color > .icon-cover-card:hover, .widget-tab-posts__skeleton .placeholder.k1 { width: 80%; } .widget-tab-posts__skeleton .placeholder.s1 { width: 48%; } .posts-mini-lists.aksrt-main-posts { /* zibll mini outer */ } + + +/* batch37-39 residual */ +.aksrt-post-pay-box { position: relative; overflow: hidden; } +.aksrt-post-pay-box .pay-tag.abs-center { + position: absolute; top: 12px; left: 50%; transform: translateX(-50%); + z-index: 2; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; +} +.aksrt-post-pay-box__hero { position: relative; overflow: hidden; min-height: 120px; color: #fff; } +.aksrt-post-pay-box__blob { opacity: .55; pointer-events: none; } +.aksrt-post-pay-box__blob--a { height: 200px; left: 75%; width: 200px; top: -34%; border-radius: 100%; } +.aksrt-post-pay-box__blob--b { height: 305px; width: 337px; left: -229px; border-radius: 100%; opacity: .7; } +.aksrt-post-pay-box .box-body { position: relative; z-index: 1; } +.aksrt-post-pay-box .img-badge.hot { position: absolute; top: 8px; right: 8px; z-index: 2; } +.aksrt-post-pay-box .but.btn-block { width: 100%; justify-content: center; } +.aksrt-main-posts__skeleton .placeholder-row, +.aksrt-product-tab__skeleton .placeholder-row { + display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; +} +.aksrt-main-posts__skeleton .posts-mini.placeholder-row { flex-direction: row; align-items: center; gap: 10px; } +.aksrt-main-posts__skeleton .thumb-placeholder, +.aksrt-product-tab__skeleton .placeholder.thumb { + width: 72px; height: 54px; border-radius: 8px; background: var(--surface-2, #eee); +} +.aksrt-product-tab__skeleton .placeholder.thumb { width: 100%; height: 100px; } +.aksrt-main-posts__skeleton .placeholder.k1, +.aksrt-main-posts__skeleton .placeholder.t1, +.aksrt-main-posts__skeleton .placeholder.s1, +.aksrt-product-tab__skeleton .placeholder.k1, +.aksrt-product-tab__skeleton .placeholder.s1 { + height: 12px; border-radius: 4px; background: var(--surface-2, #eee); +} +.aksrt-main-posts__skeleton .placeholder.k1, +.aksrt-product-tab__skeleton .placeholder.k1 { width: 80%; } +.aksrt-main-posts__skeleton .placeholder.s1, +.aksrt-product-tab__skeleton .placeholder.s1 { width: 48%; } +.aksrt-main-posts[data-load-mode="ajax"].is-ajax-loading { opacity: .85; } +.widget-search-box.is-affix { position: sticky; top: 72px; } diff --git a/assets/js/widget-set.js b/assets/js/widget-set.js index 5ee91678..6bd366d6 100644 --- a/assets/js/widget-set.js +++ b/assets/js/widget-set.js @@ -9,8 +9,16 @@ (function () { 'use strict'; + function restHeaders() { + var headers = { Accept: 'application/json' }; + if (window.aksrtData && aksrtData.restNonce) { + headers['X-WP-Nonce'] = aksrtData.restNonce; + } + return headers; + } + function initWidgetTabs() { - document.querySelectorAll('.widget-tab-posts').forEach(function (widget) { + document.querySelectorAll('.widget-tab-posts[data-aksrt-tab-posts]').forEach(function (widget) { if (widget.dataset.aksrtWidgetTabsBound === '1') return; widget.dataset.aksrtWidgetTabsBound = '1'; @@ -37,11 +45,7 @@ }); var url = rest + (rest.indexOf('?') > -1 ? '&' : '?') + qs.toString(); panel.classList.add('is-ajax-loading'); - var headers = { Accept: 'application/json' }; - if (window.aksrtData && aksrtData.restNonce) { - headers['X-WP-Nonce'] = aksrtData.restNonce; - } - fetch(url, { credentials: 'same-origin', headers: headers }) + fetch(url, { credentials: 'same-origin', headers: restHeaders() }) .then(function (r) { return r.json(); }) .then(function (j) { var d = (j && j.data) || j || {}; @@ -59,16 +63,16 @@ tabs.forEach(function (tab) { tab.addEventListener('click', function () { var target = tab.getAttribute('data-tab'); - tabs.forEach(function (item) { var active = item === tab; item.classList.toggle('active', active); + item.classList.toggle('is-active', active); item.setAttribute('aria-selected', active ? 'true' : 'false'); }); - panels.forEach(function (panel) { var active = panel.getAttribute('data-tab-panel') === target; panel.classList.toggle('active', active); + panel.classList.toggle('is-active', active); if (active) { panel.removeAttribute('hidden'); loadPanel(panel, tab); @@ -81,6 +85,265 @@ }); } + // Homepage category tabs (was inline in CategoryTabsWidget). + function initCategoryTabs() { + document.querySelectorAll('[data-aksrt-home-cat-tabs]').forEach(function (section) { + if (section.dataset.aksrtCatTabsBound === '1') return; + section.dataset.aksrtCatTabsBound = '1'; + var rest = section.getAttribute('data-rest') || ''; + var count = section.getAttribute('data-count') || '6'; + var layout = section.getAttribute('data-layout') || 'card'; + var columns = section.getAttribute('data-columns') || '3'; + var context = section.getAttribute('data-context') || 'homepage'; + var showMore = section.getAttribute('data-show-more') === '1'; + var tabs = [].slice.call(section.querySelectorAll('.widget-tab-posts__tab')); + var panels = [].slice.call(section.querySelectorAll('.widget-tab-posts__panel')); + if (!tabs.length || !panels.length || !rest) return; + + function load(panel) { + if (!panel || panel.getAttribute('data-loaded') === '1') return; + var cat = panel.getAttribute('data-cat') || '0'; + var more = panel.getAttribute('data-more') || ''; + var qs = new URLSearchParams({ + cat: cat, + count: String(count), + layout: layout, + columns: String(columns), + context: context, + }); + var url = rest + (rest.indexOf('?') > -1 ? '&' : '?') + qs.toString(); + panel.classList.add('is-ajax-loading'); + fetch(url, { credentials: 'same-origin', headers: restHeaders() }) + .then(function (r) { return r.json(); }) + .then(function (j) { + var d = (j && j.data) || j || {}; + var html = d.html || ''; + if (showMore && more) { + html += '
查看更多
'; + } + panel.innerHTML = html || '
暂无文章
'; + panel.setAttribute('data-loaded', '1'); + panel.classList.remove('is-ajax-loading'); + }) + .catch(function () { + panel.classList.remove('is-ajax-loading'); + }); + } + + tabs.forEach(function (tab) { + tab.addEventListener('click', function () { + var target = tab.getAttribute('data-tab'); + tabs.forEach(function (item) { + var active = item === tab; + item.classList.toggle('active', active); + item.setAttribute('aria-selected', active ? 'true' : 'false'); + }); + panels.forEach(function (panel) { + var active = panel.getAttribute('data-tab-panel') === target; + panel.classList.toggle('active', active); + if (active) { + panel.removeAttribute('hidden'); + load(panel); + } else { + panel.setAttribute('hidden', ''); + } + }); + }); + }); + }); + } + + // Forum multi-tab topics. + function initForumTabTopics() { + document.querySelectorAll('.aksrt-ftab[data-aksrt-ftab]').forEach(function (root) { + if (root.dataset.aksrtFtabBound === '1') return; + root.dataset.aksrtFtabBound = '1'; + var rest = root.getAttribute('data-rest') || ''; + var count = root.getAttribute('data-count') || '6'; + var style = root.getAttribute('data-style') || 'mini'; + var plate = root.getAttribute('data-plate') || '0'; + var btns = [].slice.call(root.querySelectorAll('.aksrt-ftab__btn')); + var panels = [].slice.call(root.querySelectorAll('.aksrt-ftab__panel')); + + function load(panel, orderby) { + if (!panel || panel.getAttribute('data-loaded') === '1' || !rest) return; + var qs = new URLSearchParams({ + page: '1', + count: count, + orderby: orderby || 'date', + style: style, + plate: plate, + period: 'all', + paginate: 'none', + }); + var url = rest + (rest.indexOf('?') > -1 ? '&' : '?') + qs.toString(); + panel.classList.add('is-ajax-loading'); + fetch(url, { credentials: 'same-origin', headers: restHeaders() }) + .then(function (r) { return r.json(); }) + .then(function (j) { + var d = (j && j.data) || j || {}; + var html = d.html || ''; + panel.innerHTML = html || '
暂无内容
'; + panel.setAttribute('data-loaded', '1'); + panel.classList.remove('is-ajax-loading'); + }) + .catch(function () { + panel.classList.remove('is-ajax-loading'); + }); + } + + function go(i) { + btns.forEach(function (b, idx) { + var on = idx === i; + b.classList.toggle('is-active', on); + b.setAttribute('aria-selected', on ? 'true' : 'false'); + }); + panels.forEach(function (p, idx) { + var on = idx === i; + p.classList.toggle('is-active', on); + if (on) { + p.removeAttribute('hidden'); + } else { + p.setAttribute('hidden', ''); + } + }); + var btn = btns[i]; + var panel = panels[i]; + if (btn && panel) load(panel, btn.getAttribute('data-orderby') || 'date'); + } + + btns.forEach(function (b) { + b.addEventListener('click', function () { + go(parseInt(b.getAttribute('data-index') || '0', 10)); + }); + }); + }); + } + + // Product multi-tab. + function initProductTabs() { + document.querySelectorAll('[data-aksrt-product-tab]').forEach(function (root) { + if (root.dataset.aksrtProductTabBound === '1') return; + root.dataset.aksrtProductTabBound = '1'; + var rest = root.getAttribute('data-rest') || ''; + var per = root.getAttribute('data-per-page') || '8'; + var style = root.getAttribute('data-style') || 'default'; + var paginate = root.getAttribute('data-paginate') || 'ajax'; + + function skeleton(n) { + n = Math.max(1, Math.min(12, parseInt(n, 10) || 4)); + var html = '
'; + for (var i = 0; i < n; i++) { + html += '
'; + } + return html + '
'; + } + + function loadPanel(panel, btn) { + if (!panel || panel.getAttribute('data-loaded') === '1' || !rest) return; + var grid = panel.querySelector('[data-aksrt-ajaxpager]'); + if (!grid) return; + var qs = new URLSearchParams({ + page: '1', + per_page: per, + style: style, + paginate: paginate, + orderby: btn.getAttribute('data-orderby') || 'date', + order: 'DESC', + cat_ids: btn.getAttribute('data-cat-ids') || '', + tag_ids: btn.getAttribute('data-tag-ids') || '', + discount_ids: btn.getAttribute('data-discount-ids') || '', + }); + var url = rest + (rest.indexOf('?') > -1 ? '&' : '?') + qs.toString(); + grid.classList.add('is-ajax-loading'); + if (!grid.querySelector('.aksrt-product-tab__skeleton') && !grid.querySelector('.ajax-item')) { + grid.insertAdjacentHTML('afterbegin', skeleton(per)); + } + fetch(url, { credentials: 'same-origin', headers: restHeaders() }) + .then(function (r) { return r.json(); }) + .then(function (j) { + var d = (j && j.data && (j.data.data || j.data)) || j || {}; + var html = d.html || ''; + var pag = d.paginate_html || d.paginateHtml || ''; + var loader = grid.querySelector('[data-aksrt-ajax-loader]'); + grid.innerHTML = ''; + if (html) grid.insertAdjacentHTML('beforeend', html); + else grid.insertAdjacentHTML('beforeend', '

暂无商品

'); + if (pag) grid.insertAdjacentHTML('beforeend', pag); + if (loader) grid.appendChild(loader); + panel.setAttribute('data-loaded', '1'); + grid.classList.remove('is-ajax-loading'); + }) + .catch(function () { + grid.classList.remove('is-ajax-loading'); + }); + } + + root.querySelectorAll('.aksrt-product-tab__header').forEach(function (btn) { + btn.addEventListener('click', function () { + root.querySelectorAll('.aksrt-product-tab__header').forEach(function (b) { + b.classList.remove('is-active'); + }); + root.querySelectorAll('.aksrt-product-tab__panel').forEach(function (p) { + p.style.display = 'none'; + p.classList.remove('is-active'); + }); + btn.classList.add('is-active'); + var idx = btn.getAttribute('data-tab-index'); + var panel = root.querySelector('.aksrt-product-tab__panel[data-tab-index="' + idx + '"]'); + if (panel) { + panel.style.display = ''; + panel.classList.add('is-active'); + loadPanel(panel, btn); + } + }); + }); + }); + } + + // Main posts load_mode=ajax first paint. + function initMainPostsLazy() { + document.querySelectorAll('.aksrt-main-posts[data-load-mode="ajax"]').forEach(function (root) { + if (root.dataset.aksrtMainLazyBound === '1') return; + root.dataset.aksrtMainLazyBound = '1'; + if (root.getAttribute('data-loaded') === '1') return; + var rest = root.getAttribute('data-aksrt-ajax-url') || root.getAttribute('data-rest') || ''; + if (!rest) return; + var qs = root.getAttribute('data-query') || ''; + var url = rest + (rest.indexOf('?') > -1 ? '&' : '?') + (qs || 'page=1'); + root.classList.add('is-ajax-loading'); + fetch(url, { credentials: 'same-origin', headers: restHeaders() }) + .then(function (r) { return r.json(); }) + .then(function (j) { + var d = (j && j.data) || j || {}; + var html = d.html || ''; + var pag = d.paginate_html || d.paginateHtml || ''; + var loader = root.querySelector('[data-aksrt-ajax-loader]'); + // Remove skeleton rows. + root.querySelectorAll('.aksrt-main-posts__skeleton, .posts-mini.placeholder-row, .placeholder-row').forEach(function (n) { + n.remove(); + }); + if (html) { + root.insertAdjacentHTML('afterbegin', html); + } else { + root.insertAdjacentHTML('afterbegin', '

暂无文章

'); + } + // Replace/append paginate. + var oldPag = root.querySelector('.ajax-pag, .pagenav.ajax-pag'); + if (oldPag) oldPag.remove(); + if (pag) { + if (loader) loader.insertAdjacentHTML('beforebegin', pag); + else root.insertAdjacentHTML('beforeend', pag); + } + root.setAttribute('data-loaded', '1'); + root.classList.remove('is-ajax-loading'); + }) + .catch(function () { + root.classList.remove('is-ajax-loading'); + }); + }); + } + function initFloatingQRCodes() { var wrap = document.querySelector('.float-right'); if (!wrap) return; @@ -121,6 +384,10 @@ function init() { initWidgetTabs(); + initCategoryTabs(); + initForumTabTopics(); + initProductTabs(); + initMainPostsLazy(); initFloatingQRCodes(); } diff --git a/inc/modules/widgets-register.php b/inc/modules/widgets-register.php index fcde9935..3b9ab49b 100644 --- a/inc/modules/widgets-register.php +++ b/inc/modules/widgets-register.php @@ -81,6 +81,7 @@ function aksrt_register_widgets() { register_widget('\AKSRT\Widgets\WidgetFeatureIntro'); register_widget('\AKSRT\Widgets\WidgetTermCards'); register_widget('\AKSRT\Widgets\WidgetPaidPosts'); + register_widget('\AKSRT\Widgets\WidgetPostPayBox'); register_widget('\AKSRT\Widgets\WidgetAuthorCard'); register_widget('\AKSRT\Widgets\WidgetOnelinePosts'); register_widget('\AKSRT\Widgets\WidgetTiltCases'); diff --git a/src/AKSRT/Core/WidgetAjax.php b/src/AKSRT/Core/WidgetAjax.php index d8b80ae4..0acba307 100644 --- a/src/AKSRT/Core/WidgetAjax.php +++ b/src/AKSRT/Core/WidgetAjax.php @@ -240,6 +240,7 @@ class WidgetAjax { 'include' => sanitize_text_field((string) ($request->get_param('include') ?? '')), 'exclude' => sanitize_text_field((string) ($request->get_param('exclude') ?? '')), 'hide_box' => (int) ($request->get_param('hide_box') ?? 0), + 'blur_bg' => (int) ($request->get_param('blur_bg') ?? 0), ]; $html = \AKSRT\Widgets\WidgetUserLists::render_html($instance); return new \WP_REST_Response(['success' => true, 'html' => $html], 200); diff --git a/src/AKSRT/Widgets/CategoryTabsWidget.php b/src/AKSRT/Widgets/CategoryTabsWidget.php index 41f0242a..f279e824 100644 --- a/src/AKSRT/Widgets/CategoryTabsWidget.php +++ b/src/AKSRT/Widgets/CategoryTabsWidget.php @@ -38,7 +38,7 @@ class CategoryTabsWidget extends \WP_Widget { $tabs = $this->resolve_tabs($instance); echo $args['before_widget']; - echo '
'; + echo '
'; if (empty($tabs)) { echo function_exists('aksrt_get_widget_null') ? aksrt_get_widget_null(__('暂无可用分类', 'aksrt')) : '

' . esc_html__('暂无可用分类', 'aksrt') . '

'; @@ -95,65 +95,16 @@ class CategoryTabsWidget extends \WP_Widget { -
+
+ +
+ +
- - '; echo $args['after_widget']; } diff --git a/src/AKSRT/Widgets/SearchWidget.php b/src/AKSRT/Widgets/SearchWidget.php index edb25bdd..3120ce75 100644 --- a/src/AKSRT/Widgets/SearchWidget.php +++ b/src/AKSRT/Widgets/SearchWidget.php @@ -109,7 +109,7 @@ class SearchWidget extends \WP_Widget { $uid = 'aksrt-sw-' . esc_attr($this->id); ?> -