25 lines
2.0 KiB
JavaScript
25 lines
2.0 KiB
JavaScript
|
export function createCatalog(query) {
|
||
|
|
const descriptions={
|
||
|
|
all:'',
|
||
|
|
visual:'用光场、曲面和影像建立品牌印象。先选视觉语言，再替换品牌与内容。',
|
||
|
|
product:'把真实产品的一小段体验放大呈现：任务、文件、运行输出与内容就绪。',
|
||
|
|
data:'表达数量、范围和连接关系。数据可以替换，图形应保持清楚的阅读顺序。',
|
||
|
|
action:'引导一个清楚的下一步：快捷操作、资源入口或推广行动。'
|
||
|
|
};
|
||
|
|
const items=[...document.querySelectorAll('main [data-family]')],buttons=[...document.querySelectorAll('[data-family-filter]')],summary=document.querySelector('.category-summary');
|
||
|
|
const groups=[...document.querySelectorAll('.signature-grid,.exploration-grid,.utility-grid,.peer-grid')];
|
||
|
|
const controller=new AbortController();
|
||
|
|
buttons.forEach(button=>{const family=button.dataset.familyFilter;button.querySelector('span').textContent=String(items.filter(item=>family==='all'||item.dataset.family===family).length);});
|
||
|
|
function select(family){
|
||
|
|
document.querySelector('main').dataset.category=family;
|
||
|
|
items.forEach(item=>{item.hidden=family!=='all'&&item.dataset.family!==family;});
|
||
|
|
groups.forEach(group=>{group.hidden=![...group.querySelectorAll('[data-family]')].some(item=>!item.hidden);});
|
||
|
|
document.querySelector('.peer-intro').hidden=document.querySelector('.peer-grid').hidden;
|
||
|
|
document.querySelector('.showcase-intro').hidden=document.querySelector('.showcase-section').hidden;
|
||
|
|
buttons.forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.familyFilter===family)));
|
||
|
|
summary.textContent=descriptions[family];summary.hidden=!summary.textContent;
|
||
|
|
}
|
||
|
|
buttons.forEach(button=>button.addEventListener('click',()=>select(button.dataset.familyFilter),{signal:controller.signal}));
|
||
|
|
const requested=query.get('category');select(!query.has('focus')&&Object.hasOwn(descriptions,requested)?requested:'all');
|
||
|
|
return {destroy(){controller.abort();}};
|
||
|
|
}
|