feat(widgets): replicate 12 reference widgets for full Zibll parity
- rewrite schemas for posts, tab_posts, oneline_posts, hot_posts, term_cards, term_aggregation, media_cards, combo_info, partners, recent_comments, posts_toc and slider_media_combo to mirror the modern reference modules field by field (options, defaults, dependencies, min/max/step, subheadings) - port reference renderers: hot ranking with TOP badges, category aggregation card, graphic cover cards, partners CSS marquee, combo info cards with auto band palette, recent comment list - rename 分类与标签聚合卡片 to 分类聚合卡片 and restrict it to categories (no tags/topics branch in this project) - drop topics filter fields and the topics query branch; align orderby value domain with supported post meta - add searchable sortable terms admin field type and spinner unit suffix rendering - unify widget pagination and lazy loading on the REST client with the runtime-owned ias reveal trigger; remove the legacy post_ajax_trigger dual path - align section-navs TOC with the reference contract (wznav ids, 3-heading minimum, zib-widget box)
This commit is contained in:
kate522 committed
1 parent
9dc278bd83
commit
b639d57c5b
25 files changed
+1388
-446
No files matched your search
@@ -197,3 +197,13 @@
|
||||
.aksrt-widget-switch span::after { transition: none; }
|
||||
}
|
||||
|
||||
|
||||
/* terms: searchable multi-select with drag ordering */
|
||||
.aksrt-widget-terms .aksrt-widget-terms__selected { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__selected:empty { display: none; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; background: #f0f0f1; border: 1px solid #dcdcde; font-size: 12px; cursor: move; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__chip .dashicons { font-size: 14px; width: 14px; height: 14px; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__remove { border: 0; background: none; cursor: pointer; line-height: 1; padding: 0 0 0 2px; text-decoration: none; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__search { margin-bottom: 6px; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__options { max-height: 180px; overflow-y: auto; border: 1px solid #dcdcde; border-radius: 4px; padding: 4px 8px; background: #fff; }
|
||||
.aksrt-widget-terms .aksrt-widget-terms__option { display: block; padding: 2px 0; }
|
||||
@@ -12,6 +12,10 @@
|
||||
axis: 'y',
|
||||
update: renumberRepeaters,
|
||||
});
|
||||
$root.find('.aksrt-widget-terms__selected').sortable({
|
||||
items: '.aksrt-widget-terms__chip',
|
||||
update: () => $root.find('.aksrt-widget-terms').each((_i, el) => syncTerms(el)),
|
||||
});
|
||||
$root.find('input[type="range"]').each(function () {
|
||||
const output = this.parentElement.querySelector('output');
|
||||
if (output) this.addEventListener('input', () => { output.textContent = this.value; });
|
||||
@@ -21,6 +25,25 @@
|
||||
updatePlacementWarning($root);
|
||||
}
|
||||
|
||||
/* terms 字段：以“已选标签”为唯一真源，同步隐藏输入(选择顺序)与复选框。 */
|
||||
function syncTerms(wrap) {
|
||||
const $wrap = $(wrap);
|
||||
const ids = $wrap.find('.aksrt-widget-terms__chip').map((_i, el) => String($(el).data('term-id'))).get();
|
||||
$wrap.find('.aksrt-widget-terms__value').val(ids.join(',')).trigger('change');
|
||||
$wrap.find('.aksrt-widget-terms__option input').each(function () {
|
||||
this.checked = ids.indexOf(String(this.value)) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
function addTermChip(wrap, id, name) {
|
||||
const $selected = $(wrap).find('.aksrt-widget-terms__selected');
|
||||
if ($selected.find(`.aksrt-widget-terms__chip[data-term-id="${id}"]`).length) return;
|
||||
const chip = $(`<span class="aksrt-widget-terms__chip" data-term-id="${id}"><span class="dashicons dashicons-move" aria-hidden="true"></span></span>`);
|
||||
chip.append(document.createTextNode(name));
|
||||
chip.append('<button type="button" class="button-link-delete aksrt-widget-terms__remove" aria-label="移除">×</button>');
|
||||
$selected.append(chip);
|
||||
}
|
||||
|
||||
function updateWidgetTitle(root) {
|
||||
const $root = $(root);
|
||||
const title = String($root.find('.aksrt-widget-field[data-field-id="title"] input').first().val() || '').trim();
|
||||
@@ -117,6 +140,25 @@
|
||||
$(this).closest('.aksrt-widget-repeater__row').remove();
|
||||
renumberRepeaters.call($rows[0]);
|
||||
})
|
||||
.on('click', '.aksrt-widget-terms__remove', function () {
|
||||
$(this).closest('.aksrt-widget-terms__chip').remove();
|
||||
syncTerms($(this).closest('.aksrt-widget-terms'));
|
||||
})
|
||||
.on('change', '.aksrt-widget-terms__option input', function () {
|
||||
const wrap = this.closest('.aksrt-widget-terms');
|
||||
const option = this.closest('.aksrt-widget-terms__option');
|
||||
const id = String(this.value);
|
||||
const name = (option.querySelector('[data-term-name]') || option).getAttribute('data-term-name');
|
||||
if (this.checked) addTermChip(wrap, id, name || id);
|
||||
syncTerms(wrap);
|
||||
})
|
||||
.on('input', '.aksrt-widget-terms__search', function () {
|
||||
const needle = this.value.trim().toLowerCase();
|
||||
$(this).closest('.aksrt-widget-terms').find('.aksrt-widget-terms__option').each(function () {
|
||||
const name = String(this.getAttribute('data-term-name') || '').toLowerCase();
|
||||
this.hidden = needle !== '' && name.indexOf(needle) === -1;
|
||||
});
|
||||
})
|
||||
.on('click', '.aksrt-widget-upload__choose', function () {
|
||||
const $wrap = $(this).closest('.aksrt-widget-upload');
|
||||
const frame = wp.media({ title: $wrap.data('media-library') === 'video' ? '选择视频' : '选择图片', library: $wrap.data('media-library') ? { type: $wrap.data('media-library') } : undefined, multiple: false });
|
||||
|
||||
@@ -50,14 +50,6 @@
|
||||
.aksrt-widget-search--compact button span { display: none; }
|
||||
.aksrt-widget-search--large { min-height: 58px; border-radius: 14px; }
|
||||
|
||||
.aksrt-widget-toc { padding: 0; background: transparent; }
|
||||
.aksrt-widget-toc__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
|
||||
.aksrt-widget-toc__list { margin: 14px 0 0; padding-left: 20px; max-height: 55vh; overflow: auto; }
|
||||
.aksrt-widget-toc__list li { margin: 7px 0; color: var(--muted-color, #737582); }
|
||||
.aksrt-widget-toc__list .level-h3 { padding-left: 12px; font-size: 14px; }
|
||||
.aksrt-widget-toc__list .level-h4 { padding-left: 24px; font-size: 13px; }
|
||||
.aksrt-widget-toc.is-collapsed .aksrt-widget-toc__list { display: none; }
|
||||
|
||||
.aksrt-widget-quote { position: relative; min-height: 130px; margin: 0; padding: 24px 48px 24px 25px; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: linear-gradient(135deg, #6772e5, #8b5cf6); color: #fff; }
|
||||
.aksrt-widget-quote > i { opacity: .35; font-size: 26px; }
|
||||
.aksrt-widget-quote blockquote { margin: 12px 0 0; font-size: 16px; line-height: 1.8; }
|
||||
@@ -100,23 +92,11 @@
|
||||
.dark-theme .aksrt-media-card__image--dark ~ .aksrt-media-card__image, [data-theme="dark"] .aksrt-media-card__image--dark ~ .aksrt-media-card__image { display: none; }
|
||||
.aksrt-media-card__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
|
||||
.aksrt-media-card__body small { color: var(--muted-color, #8a8c98); }
|
||||
.aksrt-widget-partners { overflow: hidden; padding: 5px 0; }
|
||||
.aksrt-widget-partners__track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--aksrt-partner-rows), 76px); grid-auto-columns: 210px; gap: 12px; width: max-content; animation: aksrt-partners var(--aksrt-partner-speed) linear infinite; }
|
||||
.aksrt-widget-partners:hover .aksrt-widget-partners__track { animation-play-state: paused; }
|
||||
.aksrt-widget-partners .aksrt-media-card { display: flex; min-height: 76px; align-items: center; }
|
||||
.aksrt-widget-partners .aksrt-media-card__media { width: 64px; aspect-ratio: 1; margin-left: 8px; border-radius: 9px; }
|
||||
.aksrt-widget-partners .aksrt-media-card__body { padding: 10px; }
|
||||
@keyframes aksrt-partners { to { transform: translateX(-50%); } }
|
||||
.aksrt-combo-card { 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-combo-card .aksrt-media-card { box-shadow: none; }
|
||||
.aksrt-combo-card__tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 16px; }
|
||||
.aksrt-combo-card__tags span { padding: 3px 8px; border-radius: 999px; background: rgba(127,127,127,.1); font-size: 12px; }
|
||||
|
||||
.aksrt-widget-text-title { padding: 18px 0; }.aksrt-widget-text-title.is-center { text-align: center; }.aksrt-widget-text-title.is-right { text-align: right; }
|
||||
.aksrt-widget-text-title h2 { margin: 0; font-size: clamp(26px,4vw,44px); line-height: 1.25; }.aksrt-widget-text-title p { margin: 12px 0 0; color: var(--muted-color,#8a8c98); line-height: 1.8; }
|
||||
.aksrt-widget-gap { height: var(--aksrt-gap); }
|
||||
.aksrt-widget-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }.aksrt-widget-tag-cloud a { padding: 6px 11px; border-radius: 6px; background: rgba(127,127,127,.1); font-size: 13px; transition: background .2s,color .2s; }.aksrt-widget-tag-cloud a:hover { background: var(--focus-color,#ff5473); color: #fff; }.aksrt-widget-tag-cloud small { margin-left: 5px; opacity: .65; }
|
||||
.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; }
|
||||
.widget-buttons-wrap { margin: calc(0px - var(--pc-gap, 10px)); }
|
||||
.widget-buttons-wrap > div { margin: var(--pc-gap, 10px); }
|
||||
@@ -134,10 +114,6 @@
|
||||
.swiper-bulletin[class*="b-"] .bulletin-icon { color: var(--this-bg); }
|
||||
.swiper-bulletin[class*="jb-"] .bulletin-icon { color: var(--this-bg-b); }
|
||||
|
||||
.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; }
|
||||
.aksrt-widget-items { position: relative; min-height: 40px; }.aksrt-widget-items.is-loading { opacity: .72; pointer-events: none; }.aksrt-widget-skeleton { height: 180px; border-radius: 10px; background: linear-gradient(90deg,rgba(127,127,127,.08),rgba(127,127,127,.17),rgba(127,127,127,.08)); background-size: 200% 100%; animation: aksrt-shimmer 1.2s infinite; }.aksrt-widget-load-more { display: block; min-width: 120px; margin: 18px auto 0; padding: 9px 18px; border: 0; border-radius: 999px; background: rgba(127,127,127,.12); color: inherit; cursor: pointer; }.aksrt-widget-pagination { display:flex;justify-content:center;gap:6px;margin-top:18px; }.aksrt-widget-pagination button { min-width:34px;height:34px;border:0;border-radius:8px;background:rgba(127,127,127,.1);color:inherit;cursor:pointer; }.aksrt-widget-pagination button[aria-current="page"] { background:var(--focus-color,#ff5473);color:#fff; }@keyframes aksrt-shimmer { to { background-position: -200% 0; } }
|
||||
.aksrt-widget-oneline .swiper-slide { width: min(300px,78vw); }.aksrt-widget-tabs__nav { display: flex; gap: 8px; margin-bottom: 15px; overflow-x: auto; }.aksrt-widget-tabs__nav button { flex: none; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(127,127,127,.1); color: inherit; cursor: pointer; }.aksrt-widget-tabs__nav button[aria-selected="true"] { background: var(--focus-color,#ff5473); color: #fff; }
|
||||
|
||||
.aksrt-pricing-card { position: relative; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--main-border-color,rgba(127,127,127,.13)); 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-pricing-card.is-featured { border-color: var(--focus-color,#ff5473); }.aksrt-pricing-card__badge { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px; background: var(--focus-color,#ff5473); color: #fff; font-size: 12px; }.aksrt-pricing-card h3 { margin: 0 0 12px; }.aksrt-pricing-card__price { font-size: 34px; font-weight: 800; }.aksrt-pricing-card p { color: var(--muted-color,#8a8c98); }.aksrt-pricing-card ul { flex: 1; display: grid; gap: 9px; margin: 15px 0 22px; padding: 0; list-style: none; }.aksrt-pricing-card li i { margin-right: 8px; color: #22c55e; }
|
||||
.aksrt-reviews .swiper-slide { width: min(390px,86vw); height: auto; }.aksrt-review-card { height: 100%; padding: 20px; 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-review-card__rating { color: #f6b73c; }.aksrt-review-card blockquote { min-height: 80px; margin: 15px 0; line-height: 1.75; }.aksrt-review-card footer { display: flex; align-items: center; gap: 11px; }.aksrt-review-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }.aksrt-review-card footer span { display: flex; flex-direction: column; }.aksrt-review-card footer small { color: var(--muted-color,#8a8c98); }
|
||||
@@ -145,7 +121,6 @@
|
||||
.aksrt-stat { padding: 22px; text-align: center; }.aksrt-stat > strong { display: block; color: var(--focus-color,#ff5473); font-size: clamp(32px,5vw,52px); }.aksrt-stat h3 { margin: 5px 0; }.aksrt-stat p { margin: 0; color: var(--muted-color,#8a8c98); }.aksrt-highlight--large { grid-column: span 2; }.aksrt-tilt-case { transform-style: preserve-3d; }.aksrt-tilt-case .aksrt-media-card__body { transform: translateZ(20px); }
|
||||
.aksrt-feature-intro__tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }.aksrt-feature-intro__tabs button { padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(127,127,127,.1); color: inherit; cursor: pointer; }.aksrt-feature-intro__tabs button[aria-selected="true"] { background: var(--focus-color,#ff5473); color: #fff; }.aksrt-feature-intro__panels article { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 34px; }.aksrt-feature-intro__copy p, .aksrt-feature-intro__copy li { color: var(--muted-color,#8a8c98); line-height: 1.7; }
|
||||
|
||||
.aksrt-widget-slider { height: var(--aksrt-slider-height); overflow: hidden; border-radius: var(--aksrt-widget-radius); background: #111; }.aksrt-widget-slider .swiper-slide, .aksrt-widget-slider .swiper-slide > a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }.aksrt-widget-slider .swiper-slide > img, .aksrt-widget-slider .swiper-slide > video, .aksrt-widget-slider .swiper-slide > a > img, .aksrt-widget-slider .swiper-slide > a > video { width: 100%; height: 100%; object-fit: cover; }.aksrt-slide-copy { position: absolute; z-index: 2; right: 8%; bottom: 12%; left: 8%; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }.aksrt-slide-copy.is-center { top: 50%; bottom: auto; text-align: center; transform: translateY(-50%); }.aksrt-slide-copy.is-right-bottom { text-align: right; }.aksrt-slide-copy h3 { margin: 0; font-size: clamp(25px,4vw,44px); }.aksrt-slide-copy p { margin: 8px 0 0; }.aksrt-slide-layer { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }.aksrt-slider-combo { display: grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 15px; }.aksrt-slider-combo__side { display: grid; gap: 15px; }.aksrt-slider-combo__side .aksrt-media-card { min-height: 0; }.aksrt-slider-combo__side .aksrt-media-card__media { aspect-ratio: 2/1; }
|
||||
|
||||
.aksrt-user-ranking { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }.aksrt-user-ranking li { display: flex; align-items: center; gap: 9px; }.aksrt-user-ranking__index { width: 24px; text-align: center; color: var(--muted-color,#8a8c98); font-weight: 700; }.aksrt-user-ranking__index.is-top { color: #f59e0b; }.aksrt-user-tile { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; }.aksrt-user-tile img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }.aksrt-user-tile span { display: flex; min-width: 0; flex-direction: column; }.aksrt-user-tile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.aksrt-user-tile small { color: var(--muted-color,#8a8c98); }.aksrt-user-list { --aksrt-cols: 4; }.aksrt-user-list article { padding: 14px; border-radius: 10px; background: var(--main-bg,#fff); box-shadow: 0 6px 20px rgba(31,35,48,.06); }
|
||||
|
||||
@@ -161,10 +136,8 @@
|
||||
.widget-buttons.m-size-small .but { padding: .3em .6em; }
|
||||
.widget-buttons.m-size-medium .but { padding: 8px 16px; }
|
||||
.widget-buttons.m-size-large .but { padding: 12px 24px; }
|
||||
.aksrt-widget-partners__track { grid-template-rows: repeat(var(--aksrt-partner-rows-m),70px); }
|
||||
.aksrt-term-aggregation, .aksrt-feature-intro__panels article, .aksrt-slider-combo { grid-template-columns: 1fr; }
|
||||
.aksrt-feature-intro__panels article { grid-template-columns: 1fr; }
|
||||
.aksrt-highlight--large { grid-column: auto; }
|
||||
.aksrt-widget-slider { height: var(--aksrt-slider-height-m); }.aksrt-slide--hide-mobile { display: none !important; }
|
||||
.aksrt-widget-gap { height: var(--aksrt-gap-m); }.aksrt-pricing-card.is-featured { transform: none; }
|
||||
.aksrt-user-list { --aksrt-cols-m: 1; }
|
||||
}
|
||||
@@ -186,15 +159,18 @@
|
||||
.widget-tab-post .tab-nav-theme > li { position: relative; padding-bottom: 5px; }
|
||||
.widget-tab-post .tab-nav-theme > li.active::before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--focus-color, #f04494); }
|
||||
.widget-tab-post .post_ajax_loader { min-height: 40px; }
|
||||
/* Widget pagination mirrors the reference .ajax-next rules while staying on the REST client. */
|
||||
.theme-pagination { margin: 20px 0; }
|
||||
.theme-pagination .next-page a { border-radius: 30px; padding: 5px 15px; color: var(--muted-color, #8a8c98); opacity: .6; cursor: pointer; }
|
||||
.theme-pagination .next-page a:hover { background: var(--main-border-color, rgba(127,127,127,.18)); opacity: 1; }
|
||||
.pagenav .page-numbers { cursor: pointer; }
|
||||
.widget-ajaxpager[lazyload-action="ias"] .post_ajax_trigger { display: none; }
|
||||
.widget-slider-graphic { gap: 10px; align-items: stretch; }
|
||||
.widget-slider-graphic .slider-col { width: var(--layout-ratio, 60%); min-width: 0; }
|
||||
.widget-slider-graphic .cover-col { width: calc(100% - var(--layout-ratio, 60%)); }
|
||||
.widget-slider-graphic .widget-graphic-cover { height: 100%; }
|
||||
.widget-slider-graphic .widget-graphic-cover > .row { height: 100%; margin: 0 -5px; }
|
||||
.widget-slider-graphic .widget-graphic-cover > .row > [class*="col-"] { height: 100%; padding: 0 5px; }
|
||||
.widget-slider-graphic .graphic-cover-item { aspect-ratio: auto; height: var(--cover-ratio, auto); }
|
||||
.widget-slider-graphic .graphic-cover-item { position: relative; overflow: hidden; min-height: 0; border-radius: var(--aksrt-widget-radius, 8px); background: #111; color: #fff; }
|
||||
.widget-slider-graphic .graphic-cover-item img, .widget-slider-graphic .graphic-cover-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
|
||||
.widget-slider-graphic .graphic-cover-title { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 1; }
|
||||
.new-swiper.slide-widget { overflow: hidden; position: relative; }
|
||||
.new-swiper.slide-widget .swiper-wrapper { height: var(--pc-height, auto); }
|
||||
@@ -225,7 +201,6 @@
|
||||
.widget-slider-graphic .cover-col { width: 100%; }
|
||||
.widget-slider-graphic .widget-graphic-cover > .row { height: auto; }
|
||||
.widget-slider-graphic .widget-graphic-cover > .row > [class*="col-"] { height: auto; }
|
||||
.widget-slider-graphic .graphic-cover-item { height: auto; aspect-ratio: 100 / var(--m-cover-ratio, 45); }
|
||||
.widget-slider-graphic .cover-col .graphic-text { font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-sm, normal); color: var(--color-sm, inherit); }
|
||||
}
|
||||
@keyframes aksrt-widget-fade { from { opacity: 0; } }@keyframes aksrt-widget-slideup { from { opacity:0;transform:translateY(25px); } }@keyframes aksrt-widget-slidedown { from { opacity:0;transform:translateY(-25px); } }@keyframes aksrt-widget-slideright { from { opacity:0;transform:translateX(-25px); } }@keyframes aksrt-widget-slideleft { from { opacity:0;transform:translateX(25px); } }@keyframes aksrt-widget-zoomin { from { opacity:0;transform:scale(.9); } }@keyframes aksrt-widget-zoomout { from { opacity:0;transform:scale(1.1); } }
|
||||
+84
-74
@@ -72,41 +72,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function initToc(toc) {
|
||||
if (!once(toc, 'Toc')) return;
|
||||
var scope = document.querySelector('.article-content, .wp-posts-content, article .entry-content');
|
||||
var headings = scope ? Array.prototype.slice.call(scope.querySelectorAll('h2,h3,h4')) : [];
|
||||
var minimum = Number(toc.dataset.minHeadings || 3);
|
||||
var list = toc.querySelector('.aksrt-widget-toc__list');
|
||||
if (headings.length < minimum || !list) {
|
||||
toc.hidden = true;
|
||||
return;
|
||||
}
|
||||
headings.forEach(function (heading, index) {
|
||||
if (!heading.id) heading.id = 'aksrt-heading-' + (index + 1);
|
||||
var item = document.createElement('li');
|
||||
item.className = 'level-' + heading.tagName.toLowerCase();
|
||||
var link = document.createElement('a');
|
||||
link.href = '#' + heading.id;
|
||||
link.textContent = heading.textContent.trim();
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
window.scrollTo({ top: heading.getBoundingClientRect().top + window.scrollY - Number(toc.dataset.scrollOffset || 70), behavior: reducedMotion ? 'auto' : 'smooth' });
|
||||
history.replaceState(null, '', link.href);
|
||||
});
|
||||
item.appendChild(link);
|
||||
list.appendChild(item);
|
||||
});
|
||||
var empty = toc.querySelector('.aksrt-widget-toc__empty');
|
||||
if (empty) empty.remove();
|
||||
var toggle = toc.querySelector('.aksrt-widget-toc__toggle');
|
||||
if (toggle) toggle.addEventListener('click', function () {
|
||||
var expanded = toggle.getAttribute('aria-expanded') === 'true';
|
||||
toggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
|
||||
toc.classList.toggle('is-collapsed', expanded);
|
||||
});
|
||||
}
|
||||
|
||||
function updateQuote(figure) {
|
||||
if (figure.dataset.source !== 'api' || !config.quoteUrl) return Promise.resolve();
|
||||
var button = figure.querySelector('button');
|
||||
@@ -141,26 +106,39 @@
|
||||
return url;
|
||||
}
|
||||
|
||||
function loaderOf(container) {
|
||||
return container.querySelector('.post_ajax_loader');
|
||||
}
|
||||
|
||||
function setBusy(container, busy) {
|
||||
if (busy) {
|
||||
container.dataset.loading = '1';
|
||||
container.setAttribute('aria-busy', 'true');
|
||||
var loader = loaderOf(container);
|
||||
if (loader) loader.style.display = '';
|
||||
} else {
|
||||
delete container.dataset.loading;
|
||||
container.setAttribute('aria-busy', 'false');
|
||||
var loader = loaderOf(container);
|
||||
if (loader) loader.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function loadItems(container, page, append) {
|
||||
var owner = container.closest('[data-widget]') || container;
|
||||
var widget = owner.dataset.widget || container.dataset.widget;
|
||||
var instance = owner.dataset.instance || container.dataset.instance;
|
||||
var segment = container.dataset.segment || owner.dataset.segment || '';
|
||||
if (!widget || !instance || !config.restUrl || container.dataset.loading === '1') return;
|
||||
container.dataset.loading = '1';
|
||||
container.classList.add('is-loading');
|
||||
container.setAttribute('aria-busy', 'true');
|
||||
setBusy(container, true);
|
||||
fetch(itemsUrl(widget, instance, page, segment), { credentials: 'same-origin', headers: { Accept: 'application/json' } })
|
||||
.then(function (response) { if (!response.ok) throw new Error('items'); return response.json(); })
|
||||
.then(function (data) {
|
||||
var oldPagination = container.querySelector('.aksrt-widget-pagination, .aksrt-widget-load-more');
|
||||
if (oldPagination) oldPagination.remove();
|
||||
var fragment = document.createElement('div');
|
||||
fragment.innerHTML = String(data.html || '');
|
||||
Array.prototype.slice.call(container.querySelectorAll(':scope > .ajax-pag')).forEach(function (node) { node.remove(); });
|
||||
if (append) {
|
||||
var target = container.querySelector('.aksrt-widget-posts, .posts-row, .swiper-wrapper') || container;
|
||||
var source = fragment.querySelector('.aksrt-widget-posts, .posts-row, .swiper-wrapper');
|
||||
Array.prototype.slice.call((source || fragment).children).forEach(function (node) { target.appendChild(node); });
|
||||
Array.prototype.slice.call(fragment.children).forEach(function (node) { container.appendChild(node); });
|
||||
} else {
|
||||
container.innerHTML = fragment.innerHTML;
|
||||
}
|
||||
@@ -169,11 +147,7 @@
|
||||
scan(container);
|
||||
})
|
||||
.catch(function () { container.innerHTML = errorMarkup(); })
|
||||
.finally(function () {
|
||||
delete container.dataset.loading;
|
||||
container.classList.remove('is-loading');
|
||||
container.setAttribute('aria-busy', 'false');
|
||||
});
|
||||
.finally(function () { setBusy(container, false); });
|
||||
}
|
||||
|
||||
function initItems(container) {
|
||||
@@ -181,35 +155,49 @@
|
||||
if (container.classList.contains('is-loading')) loadItems(container, 1, false);
|
||||
container.addEventListener('click', function (event) {
|
||||
var retry = event.target.closest('[data-widget-retry]');
|
||||
var more = event.target.closest('.aksrt-widget-load-more');
|
||||
var pageButton = event.target.closest('[data-widget-page]');
|
||||
if (retry) loadItems(container, Number(container.dataset.page || 1), false);
|
||||
if (more) loadItems(container, Number(more.dataset.nextPage || 2), true);
|
||||
if (pageButton) loadItems(container, Number(pageButton.dataset.widgetPage || 1), false);
|
||||
var trigger = event.target.closest('[data-next-page]');
|
||||
var pageLink = event.target.closest('.page-numbers[data-widget-page]');
|
||||
if (retry) {
|
||||
loadItems(container, Number(container.dataset.page || 1), false);
|
||||
return;
|
||||
}
|
||||
if (trigger) {
|
||||
// data-widget-ias marks the hidden reveal trigger the runtime clicks
|
||||
// when the lazy container scrolls into view; it reloads page one.
|
||||
event.preventDefault();
|
||||
if (trigger.dataset.widgetIas === '1') loadItems(container, 1, false);
|
||||
else loadItems(container, Number(trigger.dataset.nextPage || 2), true);
|
||||
return;
|
||||
}
|
||||
if (pageLink) {
|
||||
event.preventDefault();
|
||||
loadItems(container, Number(pageLink.dataset.widgetPage || 1), false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initTabs(tabs) {
|
||||
if (!once(tabs, 'Tabs')) return;
|
||||
tabs.addEventListener('keydown', function (event) { moveTabFocus(event, tabs); });
|
||||
tabs.addEventListener('keydown', function (event) { moveTabFocus(event, tabs); });
|
||||
tabs.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('[role="tab"][data-segment]');
|
||||
if (!button) return;
|
||||
event.preventDefault();
|
||||
tabs.querySelectorAll('[role="tab"]').forEach(function (tab) {
|
||||
tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
|
||||
tab.setAttribute('tabindex', tab === button ? '0' : '-1');
|
||||
if (tab.parentElement) tab.parentElement.classList.toggle('active', tab === button);
|
||||
});
|
||||
tabs.querySelectorAll('.tab-content > .tab-pane').forEach(function (item) {
|
||||
var active = item.id === button.getAttribute('aria-controls');
|
||||
item.classList.toggle('active', active); item.classList.toggle('in', active);
|
||||
});
|
||||
var panel = tabs.querySelector('[data-widget-items][data-segment="' + button.dataset.segment + '"]');
|
||||
if (!panel) panel = tabs.querySelector('[data-widget-items]');
|
||||
event.preventDefault();
|
||||
tabs.querySelectorAll('[role="tab"]').forEach(function (tab) {
|
||||
tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
|
||||
tab.setAttribute('tabindex', tab === button ? '0' : '-1');
|
||||
if (tab.parentElement) tab.parentElement.classList.toggle('active', tab === button);
|
||||
});
|
||||
tabs.querySelectorAll('.tab-content > .tab-pane').forEach(function (item) {
|
||||
var active = item.id === button.getAttribute('aria-controls');
|
||||
item.classList.toggle('active', active); item.classList.toggle('in', active);
|
||||
});
|
||||
var panel = tabs.querySelector('[data-widget-items][data-segment="' + button.dataset.segment + '"]');
|
||||
if (!panel) panel = tabs.querySelector('[data-widget-items]');
|
||||
if (!panel) return;
|
||||
panel.dataset.segment = button.dataset.segment;
|
||||
panel.setAttribute('aria-labelledby', button.id);
|
||||
loadItems(panel, 1, false);
|
||||
panel.setAttribute('aria-labelledby', button.id);
|
||||
loadItems(panel, 1, false);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -232,15 +220,15 @@
|
||||
|
||||
function initFeatures(features) {
|
||||
if (!once(features, 'Features')) return;
|
||||
features.addEventListener('keydown', function (event) { moveTabFocus(event, features); });
|
||||
features.addEventListener('keydown', function (event) { moveTabFocus(event, features); });
|
||||
features.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('[data-feature-index]');
|
||||
if (!button) return;
|
||||
var index = button.dataset.featureIndex;
|
||||
features.querySelectorAll('[data-feature-index]').forEach(function (tab) {
|
||||
tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
|
||||
tab.setAttribute('tabindex', tab === button ? '0' : '-1');
|
||||
});
|
||||
features.querySelectorAll('[data-feature-index]').forEach(function (tab) {
|
||||
tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
|
||||
tab.setAttribute('tabindex', tab === button ? '0' : '-1');
|
||||
});
|
||||
features.querySelectorAll('[data-feature-panel]').forEach(function (panel) { panel.hidden = panel.dataset.featurePanel !== index; });
|
||||
});
|
||||
}
|
||||
@@ -262,16 +250,38 @@
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
/* 幻灯片加图文视频卡片：以左侧幻灯片实际高度重算右侧卡片比例。
|
||||
* 合作伙伴滚动由运行时 main.js 初始化（.zib-partners-scroll 唯一所有者）。 */
|
||||
function measureSliderGraphic(widget) {
|
||||
if (once(widget, 'Combo')) return;
|
||||
var slider = widget.querySelector('.slider-col .zib-slider') || widget.querySelector('.slider-col');
|
||||
var covers = widget.querySelector('.cover-col');
|
||||
if (!slider || !covers) return;
|
||||
var row = Number(widget.dataset.row || 2);
|
||||
var col = Number(widget.dataset.col || 2);
|
||||
var gap = 10;
|
||||
function update() {
|
||||
var height = slider.offsetHeight;
|
||||
var width = covers.offsetWidth;
|
||||
if (!height || !width) return;
|
||||
var ratio = (((height - (col - 1) * gap) / col) / ((width - (row - 1) * gap) / row)) * 100;
|
||||
covers.style.setProperty('--cover-ratio', ratio.toFixed(2) + '%');
|
||||
}
|
||||
update();
|
||||
window.addEventListener('resize', update, { passive: true });
|
||||
if ('ResizeObserver' in window) new ResizeObserver(update).observe(slider);
|
||||
}
|
||||
|
||||
function scan(root) {
|
||||
var scope = root || document;
|
||||
scope.querySelectorAll('.aksrt-widget-video[data-video-url]').forEach(initVideo);
|
||||
scope.querySelectorAll('.aksrt-widget-toc').forEach(initToc);
|
||||
scope.querySelectorAll('.aksrt-widget-quote').forEach(initQuote);
|
||||
scope.querySelectorAll('[data-widget-items]').forEach(initItems);
|
||||
scope.querySelectorAll('.aksrt-widget-tabs, .widget-tab-post').forEach(initTabs);
|
||||
scope.querySelectorAll('.aksrt-faq').forEach(initFaq);
|
||||
scope.querySelectorAll('.aksrt-feature-intro').forEach(initFeatures);
|
||||
scope.querySelectorAll('[data-count-up]').forEach(initCount);
|
||||
scope.querySelectorAll('.widget-slider-graphic').forEach(measureSliderGraphic);
|
||||
if (typeof window.VanillaTilt !== 'undefined') scope.querySelectorAll('[data-aksrt-tilt]').forEach(function (el) { if (once(el, 'Tilt')) window.VanillaTilt.init(el); });
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user