chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善MeNav浏览器扩展API规范实现

Browse Source
This commit is contained in:
Zuoling Rong
2025-07-06 23:20:50 +08:00
parent 9a70864790
commit 4c7a5e6a60
14 changed files with 206 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/script.js
View File

@@ -8,24 +8,56 @@ window.MeNav = {
return configData ? JSON.parse(configData.textContent) : null;
},
// 更新DOM元素
updateElement: function(id, newData) {
const element = document.querySelector(`[data-menav-id="${id}"]`);
if (!element) return false;
// 获取元素的唯一标识符
_getElementId: function(element) {
const type = element.getAttribute('data-type');
if (type === 'nav-item') {
return element.getAttribute('data-id');
} else if (type === 'social-link') {
return element.getAttribute('data-url');
} else {
return element.getAttribute('data-name');
}
},
// 根据元素类型更新内容
const type = element.getAttribute('data-menav-type');
// 根据类型和ID查找元素
_findElement: function(type, id) {
let selector;
if (type === 'nav-item') {
selector = `[data-type="${type}"][data-id="${id}"]`;
} else if (type === 'social-link') {
selector = `[data-type="${type}"][data-url="${id}"]`;
} else {
selector = `[data-type="${type}"][data-name="${id}"]`;
}
return document.querySelector(selector);
},
// 更新DOM元素
updateElement: function(type, id, newData) {
const element = this._findElement(type, id);
if (!element) return false;
if (type === 'site') {
// 更新站点卡片
if (newData.url) element.href = newData.url;
if (newData.name) element.querySelector('h3').textContent = newData.name;
if (newData.description) element.querySelector('p').textContent = newData.description;
if (newData.url) {
element.href = newData.url;
element.setAttribute('data-url', newData.url);
}
if (newData.name) {
element.querySelector('h3').textContent = newData.name;
element.setAttribute('data-name', newData.name);
}
if (newData.description) {
element.querySelector('p').textContent = newData.description;
element.setAttribute('data-description', newData.description);
}
if (newData.icon) {
const iconElement = element.querySelector('i');
if (iconElement) {
iconElement.className = newData.icon;
}
element.setAttribute('data-icon', newData.icon);
}
if (newData.title) element.title = newData.title;
@@ -47,6 +79,10 @@ window.MeNav = {
const iconClass = iconElement ? iconElement.className : '';
titleElement.innerHTML = `<i class="${newData.icon || iconClass}"></i> ${newData.name}`;
}
element.setAttribute('data-name', newData.name);
}
if (newData.icon) {
element.setAttribute('data-icon', newData.icon);
}
// 触发元素更新事件
@@ -56,6 +92,60 @@ window.MeNav = {
data: newData
});
return true;
} else if (type === 'nav-item') {
// 更新导航项
if (newData.name) {
const textElement = element.querySelector('.nav-text');
if (textElement) {
textElement.textContent = newData.name;
}
element.setAttribute('data-name', newData.name);
}
if (newData.icon) {
const iconElement = element.querySelector('i');
if (iconElement) {
iconElement.className = newData.icon;
}
element.setAttribute('data-icon', newData.icon);
}
// 触发元素更新事件
this.events.emit('elementUpdated', {
id: id,
type: 'nav-item',
data: newData
});
return true;
} else if (type === 'social-link') {
// 更新社交链接
if (newData.url) {
element.href = newData.url;
element.setAttribute('data-url', newData.url);
}
if (newData.name) {
const textElement = element.querySelector('.nav-text');
if (textElement) {
textElement.textContent = newData.name;
}
element.setAttribute('data-name', newData.name);
}
if (newData.icon) {
const iconElement = element.querySelector('i');
if (iconElement) {
iconElement.className = newData.icon;
}
element.setAttribute('data-icon', newData.icon);
}
// 触发元素更新事件
this.events.emit('elementUpdated', {
id: id,
type: 'social-link',
data: newData
});
return true;
}
@@ -64,12 +154,15 @@ window.MeNav = {
// 添加新元素
addElement: function(type, parentId, data) {
const parent = document.querySelector(`[data-menav-id="${parentId}"]`);
let parent;
if (type === 'site') {
// 查找父级分类
parent = document.querySelector(`[data-type="category"][data-name="${parentId}"]`);
if (!parent) return null;
if (type === 'site' && parent.getAttribute('data-menav-type') === 'category') {
// 添加站点卡片到分类
const sitesGrid = parent.querySelector('.sites-grid');
const sitesGrid = parent.querySelector('[data-container="sites"]');
if (!sitesGrid) return null;
// 创建新的站点卡片
@@ -77,10 +170,13 @@ window.MeNav = {
newSite.className = 'site-card';
newSite.href = data.url || '#';
newSite.title = data.name + (data.description ? ' - ' + data.description : '');
const elementId = `site-new-${Date.now()}`;
newSite.setAttribute('data-menav-id', elementId);
newSite.setAttribute('data-menav-type', 'site');
newSite.setAttribute('data-menav-category', parent.id);
// 设置数据属性
newSite.setAttribute('data-type', 'site');
newSite.setAttribute('data-name', data.name || '未命名站点');
newSite.setAttribute('data-url', data.url || '');
newSite.setAttribute('data-icon', data.icon || 'fas fa-link');
newSite.setAttribute('data-description', data.description || '');
// 添加内容
newSite.innerHTML = `
@@ -100,26 +196,65 @@ window.MeNav = {
// 触发元素添加事件
this.events.emit('elementAdded', {
id: elementId,
id: data.name,
type: 'site',
parentId: parentId,
data: data
});
return elementId;
return data.name;
} else if (type === 'category') {
// 查找父级页面容器
parent = document.querySelector(`[data-container="categories"]`);
if (!parent) return null;
// 创建新的分类
const newCategory = document.createElement('section');
newCategory.className = 'category';
// 设置数据属性
newCategory.setAttribute('data-type', 'category');
newCategory.setAttribute('data-name', data.name || '未命名分类');
newCategory.setAttribute('data-icon', data.icon || 'fas fa-folder');
newCategory.setAttribute('data-container', 'categories');
// 添加内容
newCategory.innerHTML = `
<h2 data-editable="category-name"><i class="${data.icon || 'fas fa-folder'}"></i> ${data.name || '未命名分类'}</h2>
<div class="sites-grid" data-container="sites">
<p class="empty-sites">暂无网站</p>
</div>
`;
// 添加到DOM
parent.appendChild(newCategory);
// 触发元素添加事件
this.events.emit('elementAdded', {
id: data.name,
type: 'category',
data: data
});
return data.name;
}
return null;
},
// 删除元素
removeElement: function(id) {
const element = document.querySelector(`[data-menav-id="${id}"]`);
removeElement: function(type, id) {
const element = this._findElement(type, id);
if (!element) return false;
// 获取元素类型和分类（如果是站点卡片）
const type = element.getAttribute('data-menav-type');
const category = element.getAttribute('data-menav-category');
// 获取父级容器（如果是站点卡片）
let parentId = null;
if (type === 'site') {
const categoryElement = element.closest('[data-type="category"]');
if (categoryElement) {
parentId = categoryElement.getAttribute('data-name');
}
}
// 删除元素
element.remove();
@@ -128,7 +263,7 @@ window.MeNav = {
this.events.emit('elementRemoved', {
id: id,
type: type,
category: category
parentId: parentId
});
return true;
@@ -136,10 +271,11 @@ window.MeNav = {
// 获取所有元素
getAllElements: function(type) {
return Array.from(document.querySelectorAll(`[data-menav-type="${type}"]`)).map(el => {
return Array.from(document.querySelectorAll(`[data-type="${type}"]`)).map(el => {
const id = this._getElementId(el);
return {
id: el.getAttribute('data-menav-id'),
type: el.getAttribute('data-menav-type'),
id: id,
type: type,
element: el
};
});

6
templates/components/category.hbs
View File

@@ -1,6 +1,6 @@
<section class="category" id="{{name}}" data-menav-id="category-{{@index}}" data-menav-type="category">
<h2><i class="{{icon}}"></i> {{name}}</h2>
<div class="sites-grid" data-menav-category="{{name}}">
<section class="category" id="{{name}}" data-type="category" data-name="{{name}}" data-icon="{{icon}}" data-container="categories">
<h2 data-editable="category-name"><i class="{{icon}}"></i> {{name}}</h2>
<div class="sites-grid" data-container="sites">
{{#if sites.length}}
{{#each sites}}
{{> site-card}}

6
templates/components/navigation.hbs
View File

@@ -1,10 +1,11 @@
<div data-container="nav-items">
{{#each this}}
<div class="nav-item-wrapper">
<a href="#" class="nav-item{{#if isActive}} active{{/if}}{{#if active}} active{{/if}}" data-page="{{id}}">
<a href="#" class="nav-item{{#if isActive}} active{{/if}}{{#if active}} active{{/if}}" data-page="{{id}}" data-type="nav-item" data-id="{{id}}" data-name="{{name}}" data-icon="{{icon}}">
<div class="icon-container">
<i class="{{icon}}"></i>
</div>
<span class="nav-text">{{name}}</span>
<span class="nav-text" data-editable="nav-item-name">{{name}}</span>
{{#if submenu}}<i class="fas fa-chevron-down submenu-toggle"></i>{{/if}}
</a>
{{#if submenu}}
@@ -19,3 +20,4 @@
{{/if}}
</div>
{{/each}}
</div>

10
templates/components/search-results.hbs
View File

@@ -1,11 +1,11 @@
<!-- 搜索结果组件 -->
<div class="welcome-section">
<h2>搜索结果</h2>
<p class="subtitle">在所有页面中找到的匹配项</p>
<h2 data-editable="page-title">搜索结果</h2>
<p class="subtitle" data-editable="page-subtitle">在所有页面中找到的匹配项</p>
</div>
{{#each navigation}}
<section class="category search-section" data-section="{{id}}" style="display: none;">
<h2><i class="{{icon}}"></i> {{name}}匹配项</h2>
<div class="sites-grid"></div>
<section class="category search-section" data-section="{{id}}" data-type="category" data-name="{{name}}" data-icon="{{icon}}" style="display: none;">
<h2 data-editable="category-name"><i class="{{icon}}"></i> {{name}}匹配项</h2>
<div class="sites-grid" data-container="sites"></div>
</section>
{{/each}}

8
templates/components/site-card.hbs
View File

@@ -2,9 +2,11 @@
<a href="{{url}}" class="site-card{{#if style}} site-card-{{style}}{{/if}}"
title="{{name}} - {{#if description}}{{description}}{{else}}{{url}}{{/if}}"
{{#if external}}target="_blank" rel="noopener"{{/if}}
data-menav-id="site-{{@index}}"
data-menav-type="site"
data-menav-category="{{../name}}">
data-type="site"
data-name="{{name}}"
data-url="{{url}}"
data-icon="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"
data-description="{{#if description}}{{description}}{{else}}{{url}}{{/if}}">
<i class="{{#if icon}}{{icon}}{{else}}fas fa-link{{/if}}"></i>
<h3>{{#if name}}{{name}}{{else}}未命名站点{{/if}}</h3>
<p>{{#if description}}{{description}}{{else}}{{url}}{{/if}}</p>

6
templates/components/social-links.hbs
View File

@@ -1,11 +1,13 @@
{{#if this}}
<div data-container="social-links">
{{#each this}}
<a href="{{url}}" class="nav-item" target="_blank" rel="noopener">
<a href="{{url}}" class="nav-item" target="_blank" rel="noopener" data-type="social-link" data-name="{{name}}" data-url="{{url}}" data-icon="{{icon}}">
<div class="icon-container">
<i class="{{icon}}"></i>
</div>
<span class="nav-text">{{name}}</span>
<span class="nav-text" data-editable="social-link-name">{{name}}</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>
{{/each}}
</div>
{{/if}}

3
templates/layouts/default.hbs
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="menav-version" content="{{_meta.version}}">
<title>{{site.title}}</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
@@ -53,7 +54,7 @@
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<h1>{{site.logo_text}}</h1>
<h1 data-editable="logo-text">{{site.logo_text}}</h1>
<button class="sidebar-toggle" aria-label="收起/展开侧边栏">
<i class="fas fa-chevron-left toggle-icon"></i>
</button>

4
templates/pages/articles.hbs
View File

@@ -1,6 +1,6 @@
<div class="welcome-section">
<h2>{{title}}</h2>
<p class="subtitle">{{subtitle}}</p>
<h2 data-editable="page-title">{{title}}</h2>
<p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
</div>
{{#each categories}}
{{> category}}

4
templates/pages/bookmarks.hbs
View File

@@ -1,6 +1,6 @@
<div class="welcome-section">
<h2>{{title}}</h2>
<p class="subtitle">{{subtitle}}</p>
<h2 data-editable="page-title">{{title}}</h2>
<p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
</div>
{{#each categories}}
{{> category}}

4
templates/pages/friends.hbs
View File

@@ -1,6 +1,6 @@
<div class="welcome-section">
<h2>{{title}}</h2>
<p class="subtitle">{{subtitle}}</p>
<h2 data-editable="page-title">{{title}}</h2>
<p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
</div>
{{#each categories}}
{{> category}}

6
templates/pages/home.hbs
View File

@@ -1,7 +1,7 @@
<div class="welcome-section">
<h2>{{profile.title}}</h2>
<h3>{{profile.subtitle}}</h3>
<p class="subtitle">{{profile.description}}</p>
<h2 data-editable="profile-title">{{profile.title}}</h2>
<h3 data-editable="profile-subtitle">{{profile.subtitle}}</h3>
<p class="subtitle" data-editable="profile-description">{{profile.description}}</p>
</div>
{{#each categories}}
{{> category}}

4
templates/pages/page.hbs
View File

@@ -1,7 +1,7 @@
<div class="page" id="{{pageId}}">
<div class="welcome-section">
<h2>{{title}}</h2>
<p class="subtitle">{{subtitle}}</p>
<h2 data-editable="page-title">{{title}}</h2>
<p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
</div>
{{#each categories}}
{{> category}}

4
templates/pages/projects.hbs
View File

@@ -1,6 +1,6 @@
<div class="welcome-section">
<h2>{{title}}</h2>
<p class="subtitle">{{subtitle}}</p>
<h2 data-editable="page-title">{{title}}</h2>
<p class="subtitle" data-editable="page-subtitle">{{subtitle}}</p>
</div>
{{#each categories}}
{{> category}}

10
templates/pages/search-results.hbs
View File

@@ -1,11 +1,11 @@
<!-- 搜索结果页 -->
<div class="welcome-section">
<h2>搜索结果</h2>
<p class="subtitle">在所有页面中找到的匹配项</p>
<h2 data-editable="page-title">搜索结果</h2>
<p class="subtitle" data-editable="page-subtitle">在所有页面中找到的匹配项</p>
</div>
{{#each navigation}}
<section class="category search-section" data-section="{{id}}" style="display: none;">
<h2><i class="{{icon}}"></i> {{name}}匹配项</h2>
<div class="sites-grid"></div>
<section class="category search-section" data-section="{{id}}" data-type="category" data-name="{{name}}" data-icon="{{icon}}" style="display: none;">
<h2 data-editable="category-name"><i class="{{icon}}"></i> {{name}}匹配项</h2>
<div class="sites-grid" data-container="sites"></div>
</section>
{{/each}}