Загружаю инструмент…
Разместите инструмент-блоки ниже на странице — этот хаб сам их найдёт.
Разместите такие скрипты в отдельных HTML-блоках ниже на странице.
*/
(function(){
const hub = document.getElementById('avimasterHub');
if(!hub) return;
const sidebar = document.getElementById('hubSidebar');
const mount = document.getElementById('hubMount');
const loader = document.getElementById('hubLoader');
const titleEl = document.getElementById('hubTitle');
// Собираем все зарегистрированные инструмент-блоки на странице
const toolNodes = Array.from(document.querySelectorAll('script.avimaster-tool[type="text/plain"][data-tool]'));
// Если ничего не нашли — выводим подсказку
if(!toolNodes.length){
sidebar.innerHTML = '
Инструменты не найдены. Добавьте HTML-блоки с script.avimaster-tool.
';
return;
}
// Создадим список инструментов
const tools = toolNodes.map(n => ({
id: n.getAttribute('data-tool'),
name: n.getAttribute('data-name') || n.getAttribute('data-tool'),
html: n.textContent || ''
}));
// Рисуем меню
sidebar.innerHTML = tools.map((t,i)=>`
${t.name}
`).join('');
let currentToolId = null;
function setActive(el){
sidebar.querySelectorAll('.hub-item').forEach(i=>i.classList.remove('active'));
el.classList.add('active');
}
async function showTool(id){
if(currentToolId===id) return;
currentToolId = id;
const tool = tools.find(t=>t.id===id);
if(!tool){ mount.innerHTML = '
Код инструмента не найден.
'; return; }
titleEl.textContent = tool.name;
loader.classList.add('show');
mount.innerHTML = '';
const shell = document.createElement('div');
const shadow = shell.attachShadow({mode:'open'});
mount.appendChild(shell);
const blob = new Blob([tool.html], {type:'text/html'});
const url = URL.createObjectURL(blob);
const iframe = document.createElement('iframe');
iframe.className = 'hub-iframe';
iframe.src = url;
iframe.onload = ()=>{ loader.classList.remove('show'); };
shadow.appendChild(iframe);
}
// Клики по меню
sidebar.addEventListener('click', (e)=>{
const item = e.target.closest('.hub-item');
if(!item) return;
setActive(item);
showTool(item.getAttribute('data-tool'));
});
// Автооткрыть первый
const first = sidebar.querySelector('.hub-item');
if(first){ showTool(first.getAttribute('data-tool')); }
})();