368 lines
14 KiB
JavaScript
368 lines
14 KiB
JavaScript
const LS_KEY_MARKETPLACE_URL = 'wb_marketplace_url';
|
|
const DEFAULT_URL_PLACEHOLDER = 'https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/marketplace.json';
|
|
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
|
const UPDATE_EXTENSIONS_API = '/api/extensions/update';
|
|
|
|
// DOM Elements
|
|
const dom = {
|
|
content: document.getElementById('marketplace-content'),
|
|
configPanel: document.getElementById('config-panel'),
|
|
inputUrl: document.getElementById('source-url-input'),
|
|
|
|
// Filters & Toggles
|
|
filterType: document.getElementById('filter-type'),
|
|
filterLang: document.getElementById('filter-lang'),
|
|
btnNsfw: document.getElementById('btn-toggle-nsfw'),
|
|
|
|
// Buttons
|
|
btnConfig: document.getElementById('btn-configure'),
|
|
btnSaveSource: document.getElementById('btn-save-source'),
|
|
btnResetSource: document.getElementById('btn-reset-source'),
|
|
btnUpdateAll: document.getElementById('btn-update-all'),
|
|
|
|
// Tabs
|
|
tabs: document.querySelectorAll('.tab-btn'),
|
|
|
|
// Modal
|
|
modal: document.getElementById('customModal'),
|
|
modalTitle: document.getElementById('modalTitle'),
|
|
modalMsg: document.getElementById('modalMessage'),
|
|
modalConfirm: document.getElementById('modalConfirmButton'),
|
|
modalClose: document.getElementById('modalCloseButton')
|
|
};
|
|
|
|
// State
|
|
let state = {
|
|
url: localStorage.getItem(LS_KEY_MARKETPLACE_URL) || null,
|
|
metadata: {},
|
|
installed: [],
|
|
currentTab: 'marketplace',
|
|
showNsfw: false // Default to HIDDEN
|
|
};
|
|
|
|
/* --- Initialization --- */
|
|
async function init() {
|
|
setupEventListeners();
|
|
|
|
if (!state.url) {
|
|
renderWelcomeState();
|
|
} else {
|
|
await loadData();
|
|
}
|
|
}
|
|
|
|
function setupEventListeners() {
|
|
// Config Panel
|
|
dom.btnConfig.addEventListener('click', () => {
|
|
dom.configPanel.classList.toggle('hidden');
|
|
if(!dom.configPanel.classList.contains('hidden')) dom.inputUrl.focus();
|
|
});
|
|
|
|
dom.btnSaveSource.addEventListener('click', saveSource);
|
|
dom.btnResetSource.addEventListener('click', () => {
|
|
dom.inputUrl.value = DEFAULT_URL_PLACEHOLDER;
|
|
saveSource();
|
|
});
|
|
|
|
// Filters
|
|
dom.filterType.addEventListener('change', render);
|
|
dom.filterLang.addEventListener('change', render);
|
|
|
|
// NSFW Toggle
|
|
dom.btnNsfw.addEventListener('click', toggleNsfw);
|
|
|
|
// Tabs
|
|
dom.tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
dom.tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
state.currentTab = tab.dataset.tab;
|
|
|
|
if (state.currentTab === 'installed') dom.btnUpdateAll.classList.remove('hidden');
|
|
else dom.btnUpdateAll.classList.add('hidden');
|
|
|
|
render();
|
|
});
|
|
});
|
|
|
|
if(dom.btnUpdateAll) dom.btnUpdateAll.addEventListener('click', handleUpdateAll);
|
|
|
|
// Modal
|
|
dom.modalClose.addEventListener('click', hideModal);
|
|
}
|
|
|
|
/* --- Logic --- */
|
|
function toggleNsfw() {
|
|
state.showNsfw = !state.showNsfw;
|
|
|
|
// Update Button UI
|
|
if (state.showNsfw) {
|
|
dom.btnNsfw.classList.add('btn-danger'); // Red for ALERT/NSFW
|
|
dom.btnNsfw.classList.remove('btn-secondary');
|
|
dom.btnNsfw.innerHTML = `
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg> NSFW: ON
|
|
`;
|
|
} else {
|
|
dom.btnNsfw.classList.remove('btn-danger');
|
|
dom.btnNsfw.classList.add('btn-secondary');
|
|
dom.btnNsfw.innerHTML = `
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
|
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
|
|
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
</svg> NSFW: Off
|
|
`;
|
|
}
|
|
|
|
render();
|
|
}
|
|
|
|
function saveSource() {
|
|
const url = dom.inputUrl.value.trim();
|
|
if (!url) return window.NotificationUtils.error('Please enter a valid URL');
|
|
localStorage.setItem(LS_KEY_MARKETPLACE_URL, url);
|
|
state.url = url;
|
|
dom.configPanel.classList.add('hidden');
|
|
window.NotificationUtils.success('Source updated');
|
|
loadData();
|
|
}
|
|
|
|
async function loadData() {
|
|
renderLoading();
|
|
try {
|
|
const proxyUrl = `/api/proxy?url=${encodeURIComponent(state.url)}`;
|
|
const [metaRes, installedRes] = await Promise.all([
|
|
fetch(proxyUrl).then(r => r.ok ? r.json() : null),
|
|
fetch(INSTALLED_EXTENSIONS_API).then(r => r.json())
|
|
]);
|
|
|
|
if (!metaRes) throw new Error('Failed to fetch marketplace JSON');
|
|
|
|
state.metadata = metaRes.extensions || {};
|
|
state.installed = (installedRes.extensions || []).map(e => e.toLowerCase());
|
|
|
|
render();
|
|
} catch (error) {
|
|
console.error(error);
|
|
renderError(error.message);
|
|
}
|
|
}
|
|
|
|
/* --- Rendering --- */
|
|
function render() {
|
|
dom.content.innerHTML = '';
|
|
const typeFilter = dom.filterType.value;
|
|
const langFilter = dom.filterLang.value;
|
|
|
|
let items = [];
|
|
|
|
// 1. Prepare items
|
|
if (state.currentTab === 'marketplace') {
|
|
items = Object.entries(state.metadata).map(([id, data]) => ({
|
|
id, ...data, isInstalled: state.installed.includes(id.toLowerCase())
|
|
}));
|
|
} else {
|
|
const metaItems = Object.entries(state.metadata)
|
|
.filter(([id]) => state.installed.includes(id.toLowerCase()))
|
|
.map(([id, data]) => ({ id, ...data, isInstalled: true }));
|
|
|
|
items = [...metaItems];
|
|
|
|
state.installed.forEach(instId => {
|
|
if (!items.find(i => i.id.toLowerCase() === instId)) {
|
|
items.push({
|
|
id: instId,
|
|
name: capitalize(instId),
|
|
type: 'Local',
|
|
description: 'Locally installed.',
|
|
author: '?',
|
|
lang: 'Local',
|
|
isInstalled: true,
|
|
isLocal: true
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 2. Filter
|
|
items = items.filter(item => {
|
|
// NSFW Filter logic
|
|
if (!state.showNsfw && item.nsfw) return false;
|
|
|
|
// Type Filter
|
|
if (typeFilter !== 'All' && item.type !== typeFilter && item.type !== 'Local') return false;
|
|
|
|
// Lang Filter
|
|
if (langFilter !== 'All') {
|
|
const itemLang = (item.lang || 'en').toLowerCase();
|
|
// Si es image-board, ignoramos el filtro de idioma (ya que no tienen idioma)
|
|
// O podemos decidir que siempre pasen, o que solo pasen si el filtro es "All".
|
|
// Para simplificar: Si es image-board, pasa el filtro de idioma automáticamente.
|
|
if (item.type !== 'image-board' && itemLang !== 'multi' && itemLang !== langFilter.toLowerCase()) return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
const grouped = groupBy(items, 'type');
|
|
const types = Object.keys(grouped).sort();
|
|
|
|
if (types.length === 0) return renderEmptyState();
|
|
|
|
types.forEach(type => {
|
|
const section = document.createElement('div');
|
|
section.className = 'mp-section';
|
|
const title = document.createElement('h2');
|
|
title.className = 'category-title';
|
|
title.innerText = formatType(type);
|
|
const grid = document.createElement('div');
|
|
grid.className = 'mp-grid';
|
|
grouped[type].forEach(ext => grid.appendChild(createCard(ext)));
|
|
section.appendChild(title);
|
|
section.appendChild(grid);
|
|
dom.content.appendChild(section);
|
|
});
|
|
}
|
|
|
|
function createCard(ext) {
|
|
const card = document.createElement('div');
|
|
card.className = `mp-card ${ext.nsfw ? 'card-nsfw' : ''}`;
|
|
|
|
// Icon logic
|
|
const iconSrc = ext.icon || '/public/assets/waifuboards.ico';
|
|
|
|
// Button Logic
|
|
let btnClass = 'btn-primary';
|
|
let btnText = 'Install';
|
|
|
|
if (ext.isInstalled) {
|
|
btnClass = 'btn-danger';
|
|
btnText = 'Uninstall';
|
|
} else if (ext.broken) {
|
|
btnClass = 'btn-secondary';
|
|
btnText = 'Broken';
|
|
}
|
|
|
|
// Language Pill Logic
|
|
let langHtml = '';
|
|
// Solo mostramos lenguaje si NO es un image-board
|
|
if (ext.type !== 'image-board') {
|
|
const langCode = (ext.lang || 'EN').toLowerCase();
|
|
const langClass = `lang-${langCode}`;
|
|
const langLabel = langCode === 'multi' ? 'MULTI' : langCode.toUpperCase();
|
|
langHtml = `<span class="pill ${langClass}">${langLabel}</span>`;
|
|
}
|
|
|
|
card.innerHTML = `
|
|
<div class="card-header">
|
|
<img class="card-icon" src="${iconSrc}" loading="lazy" onerror="this.src='/public/assets/waifuboards.ico'">
|
|
<div class="card-info">
|
|
<h3 class="card-title" title="${ext.name}">${ext.name}</h3>
|
|
<span class="card-author">by ${ext.author || 'Unknown'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-meta">
|
|
${langHtml}
|
|
${ext.isInstalled ? '<span class="pill status-installed">INSTALLED</span>' : ''}
|
|
${ext.nsfw ? '<span class="pill nsfw">NSFW</span>' : ''}
|
|
</div>
|
|
|
|
<p class="card-desc">${ext.description || 'No description provided.'}</p>
|
|
|
|
<div class="card-actions">
|
|
<button class="btn-primary btn-card ${btnClass}" ${ext.broken && !ext.isInstalled ? 'disabled' : ''}>
|
|
${btnText}
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
const btn = card.querySelector('button');
|
|
if (!ext.broken || ext.isInstalled) {
|
|
btn.onclick = () => ext.isInstalled ? confirmUninstall(ext) : installExtension(ext);
|
|
}
|
|
|
|
return card;
|
|
}
|
|
|
|
/* --- Actions & Helpers --- */
|
|
async function installExtension(ext) {
|
|
if (!ext.entry) return window.NotificationUtils.error('Invalid extension entry point');
|
|
try {
|
|
window.NotificationUtils.info(`Installing ${ext.name}...`);
|
|
const res = await fetch('/api/extensions/install', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ url: ext.entry })
|
|
});
|
|
if (res.ok) {
|
|
window.NotificationUtils.success(`${ext.name} Installed!`);
|
|
state.installed.push(ext.id.toLowerCase());
|
|
render();
|
|
} else throw new Error('Install failed');
|
|
} catch (e) { window.NotificationUtils.error(`Failed to install ${ext.name}`); }
|
|
}
|
|
|
|
function confirmUninstall(ext) {
|
|
showModal('Uninstall Extension', `Remove ${ext.name}?`, true, () => uninstallExtension(ext));
|
|
}
|
|
|
|
async function uninstallExtension(ext) {
|
|
try {
|
|
const res = await fetch('/api/extensions/uninstall', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ fileName: ext.id + '.js' })
|
|
});
|
|
if (res.ok) {
|
|
state.installed = state.installed.filter(id => id !== ext.id.toLowerCase());
|
|
window.NotificationUtils.success(`${ext.name} removed.`);
|
|
render();
|
|
}
|
|
} catch (e) { window.NotificationUtils.error('Uninstall failed'); }
|
|
}
|
|
|
|
async function handleUpdateAll() {
|
|
const btn = dom.btnUpdateAll;
|
|
const oldText = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = 'Updating...';
|
|
try {
|
|
const res = await fetch(UPDATE_EXTENSIONS_API, { method: 'POST' });
|
|
const data = await res.json();
|
|
if (data.updated?.length) {
|
|
window.NotificationUtils.success(`Updated ${data.updated.length} extensions.`);
|
|
loadData();
|
|
} else window.NotificationUtils.info('All up to date.');
|
|
} catch (e) { window.NotificationUtils.error('Bulk update failed.'); }
|
|
finally { btn.disabled = false; btn.innerHTML = oldText; }
|
|
}
|
|
|
|
function renderWelcomeState() {
|
|
dom.content.innerHTML = `
|
|
<div class="empty-state">
|
|
<div style="font-size: 3rem; margin-bottom: 1rem;">🔌</div>
|
|
<h2>Configure Source</h2>
|
|
<p class="empty-text" style="max-width: 500px; margin: 0 auto 2rem;">Configure a source URL to start.</p>
|
|
<button class="btn-primary" onclick="document.getElementById('config-panel').classList.remove('hidden'); document.getElementById('source-url-input').focus();">Setup URL</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderEmptyState() {
|
|
dom.content.innerHTML = `<div class="empty-state"><div style="font-size: 3rem;">🔍</div><p class="empty-text">No extensions found.</p></div>`;
|
|
}
|
|
function renderLoading() { dom.content.innerHTML = '<div class="empty-state"><p class="empty-text">Loading...</p></div>'; }
|
|
function renderError(msg) { dom.content.innerHTML = `<div class="empty-state"><p class="empty-text" style="color:#f87171;">Error: ${msg}</p></div>`; }
|
|
function showModal(title, msg, hasConfirm, onConfirm) {
|
|
dom.modalTitle.innerText = title; dom.modalMsg.innerText = msg; dom.modal.classList.remove('hidden');
|
|
if (hasConfirm) { dom.modalConfirm.classList.remove('hidden'); dom.modalConfirm.onclick = () => { hideModal(); if (onConfirm) onConfirm(); }; }
|
|
else dom.modalConfirm.classList.add('hidden');
|
|
}
|
|
function hideModal() { dom.modal.classList.add('hidden'); }
|
|
function groupBy(arr, key) { return arr.reduce((acc, i) => ((acc[i[key] || 'Other'] = acc[i[key] || 'Other'] || []).push(i), acc), {}); }
|
|
function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }
|
|
function formatType(t) { return t.replace(/-/g, ' ').toUpperCase(); }
|
|
|
|
document.addEventListener('DOMContentLoaded', init); |