VGSidebar

Боковая панель

AJAX и состояния

Загрузка HTML, кеш once, пустой ответ и обработка ошибки.

Панели открываются поверх текущей страницы. Их разметка размещена в конце body, вне контейнеров с transform и overflow. Код каждого примера используется и в самой демонстрации. Кнопки и тема — OKAUX 1.0.2, поведение панелей — VGSidebar.

Загрузка при каждом открытии

Настоящий GET /api/sidebar/demo возвращает JSON с полем response, содержащим HTML. loader показывает встроенный индикатор; timeout: 350 делает загрузку заметной.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-remote" aria-controls="sidebar-remote" aria-expanded="false">Загрузить карточку</button>
<p id="sidebar-remote-status" class="mt-3" role="status">Завершено запросов: 0</p>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-remote" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-remote-title" data-ajax='{"route":"/api/sidebar/demo","target":"#sidebar-remote-content","loader":true,"once":false,"timeout":350}'>
    <div class="vg-sidebar-header">
        <h2 id="sidebar-remote-title">HTML с сервера</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-remote" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><div id="sidebar-remote-content">Контент появится после открытия.</div></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-remote">Закрыть панель</button>
    </div>
</aside>

/**
 * Описание: наблюдение за AJAX-загрузкой VGSidebar.
 * Возможности: счётчик завершённых запросов и статус загрузки через DOM-событие.
 */
function initSidebarDemo() {
    const panel = document.querySelector('#sidebar-remote');
    if (!panel) return;
    const status = document.querySelector('#sidebar-remote-status');
    let count = 0;
    panel.addEventListener('vg.sidebar.loaded', (event) => {
        status.textContent = 'Завершено запросов: ' + (++count) + ' · ' + event.stats;
    });
}

initSidebarDemo();

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */

Один запрос на экземпляр

once: true сохраняет результат до удаления экземпляра. Закройте панель и откройте снова: время ответа и счётчик останутся прежними.

<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-once" aria-controls="sidebar-once" aria-expanded="false">Загрузить один раз</button>
<p id="sidebar-once-status" class="mt-3" role="status">Завершено запросов: 0</p>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-once" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-once-title" data-ajax='{"route":"/api/sidebar/demo","target":"#sidebar-once-content","loader":true,"once":true,"timeout":350}'>
    <div class="vg-sidebar-header">
        <h2 id="sidebar-once-title">Кеш экземпляра</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-once" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><div id="sidebar-once-content">Контент появится после открытия.</div></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-once">Закрыть панель</button>
    </div>
</aside>

/**
 * Описание: наблюдение за AJAX-загрузкой VGSidebar.
 * Возможности: счётчик завершённых запросов и статус загрузки через DOM-событие.
 */
function initSidebarDemo() {
    const panel = document.querySelector('#sidebar-once');
    if (!panel) return;
    const status = document.querySelector('#sidebar-once-status');
    let count = 0;
    panel.addEventListener('vg.sidebar.loaded', (event) => {
        status.textContent = 'Завершено запросов: ' + (++count) + ' · ' + event.stats;
    });
}

initSidebarDemo();

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */

Пустой ответ, ошибка и повторный запрос

output: false отключает автоматическую вставку. Приложение отображает состояние по event.stats и event.data. Маршрут выбирается data-атрибутом триггера.

Закройте панель перед выбором другого состояния. Повторный запрос: закройте ошибку и нажмите «Успешный ответ».

<div class="sidebar-demo-actions">
<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-states" aria-controls="sidebar-states" aria-expanded="false" data-ajax-route="/api/sidebar/demo?state=success">Успешный ответ</button>
<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-states" aria-controls="sidebar-states" aria-expanded="false" data-ajax-route="/api/sidebar/demo?state=empty">Пустой ответ</button>
<button type="button" class="btn btn-surface btn-sm" data-vg-toggle="sidebar" data-vg-target="#sidebar-states" aria-controls="sidebar-states" aria-expanded="false" data-ajax-route="/api/sidebar/demo?state=error">Ошибка HTTP 503</button>
</div>
<p class="mt-3">Закройте панель перед выбором другого состояния. Повторный запрос: закройте ошибку и нажмите «Успешный ответ».</p>
<!-- Panels: разместите в конце body -->
<aside id="sidebar-states" class="vg-sidebar right sidebar-demo-panel" aria-labelledby="sidebar-states-title" data-ajax='{"output":false,"once":false,"timeout":350}'>
    <div class="vg-sidebar-header">
        <h2 id="sidebar-states-title">Состояния запроса</h2>
        <button type="button" class="vg-btn-close" data-vg-dismiss="sidebar" data-vg-target="#sidebar-states" aria-label="Закрыть"></button>
    </div>
    <div class="vg-sidebar-body"><div id="sidebar-states-content" role="status">Ожидание запроса.</div></div>
    <div class="vg-sidebar-footer">
        <button type="button" class="btn btn-primary btn-sm" data-vg-dismiss="sidebar" data-vg-target="#sidebar-states">Закрыть панель</button>
    </div>
</aside>

/**
 * Описание: ручное отображение состояний AJAX в VGSidebar.
 * Возможности: загрузка, пустой ответ, HTTP-ошибка и успешный HTML при output: false.
 */
function initSidebarDemo() {
    const panel = document.querySelector('#sidebar-states');
    if (!panel) return;
    const content = document.querySelector('#sidebar-states-content');
    panel.addEventListener('vg.sidebar.show', () => {
        content.textContent = 'Загрузка…';
        content.setAttribute('aria-busy', 'true');
    });
    panel.addEventListener('vg.sidebar.loaded', (event) => {
        content.setAttribute('aria-busy', 'false');
        // VGSidebar передаёт stats и data прямо в событии, не в detail.
        if (event.stats === 'error') {
            content.textContent = 'Не удалось загрузить данные. Закройте панель и повторите запрос.';
            return;
        }
        // Ajax оборачивает HTTP-ответ: { code: 200, response: { response: HTML } }.
        const html = event.data?.response?.response;
        if (typeof html !== 'string' || html.trim() === '') {
            content.textContent = 'Пока нет данных.';
            return;
        }
        // HTML допустим только от доверенного endpoint; пользовательские поля экранируются на сервере.
        content.innerHTML = html;
    });
}

initSidebarDemo();

/* Композиция демо; OKAUX на сайте использует префикс токенов vg. */
.sidebar-demo-panel {
    --vg-sidebar-horizontal-width: min(26rem, 100vw);
    --vg-sidebar-horizontal-height: 100dvh;
    --vg-sidebar-vertical-height: min(24rem, 80dvh);
    --vg-sidebar-header-height: 72px;
    --vg-sidebar-footer-height: 64px;
    --vg-sidebar-padding: 1rem;
    --vg-sidebar-bg-color: var(--vg-bg-primary);
    --vg-sidebar-color: var(--vg-text-primary);
    --vg-sidebar-border: 1px solid var(--vg-border-default);
}
.sidebar-demo-panel .vg-sidebar-header {
    justify-content: space-between;
    gap: 1rem;
}
.sidebar-demo-panel .vg-sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
}
.sidebar-demo-panel .vg-btn-close { flex-shrink: 0; }
.sidebar-demo-panel .vg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sidebar-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sidebar-demo-card, .sidebar-demo-log {
    padding: 1rem;
    border: 1px solid var(--vg-border-default);
    border-radius: var(--vg-radius-lg);
    background: var(--vg-bg-secondary);
    color: var(--vg-text-primary);
    overflow-wrap: anywhere;
}
.sidebar-demo-log {
    margin-top: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}
.sidebar-demo-panel .vg-sidebar-body { overflow-wrap: anywhere; }
.sidebar-demo-check { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
/* Не меняем состояние темы: оно остаётся в data-theme / okaux.theme. */

Контракт тестового endpoint

GET /api/sidebar/demo?state=success|empty|error ничего не сохраняет. success возвращает HTTP 200 и {"response":"<div>…</div>"}; empty — HTTP 200 и {"response":""}; error — HTTP 503 и {"message":"…"}. Неизвестное состояние — 404.

Это демонстрационный API, не production-сервис. Встроенная загрузка использует BaseModule AJAX. ajax.target — глобальный селектор документа, поэтому id должны быть уникальны.

Для контролируемого отображения ошибок используйте output: false, как в третьем примере. Кеш once отмечает завершённый запрос, включая ошибку; для повторных попыток оставляйте once: false. Отмена события show не отменяет уже запущенную загрузку.