MediaWiki:Common.js

/* Размещённый здесь код JavaScript будет загружаться пользователям при обращении к каждой странице */

// console.log("Привет");
/*_____________________*/
mw.loader.using('jquery').then(function() {
  $(function() {
    // Создаем основные элементы
    const $panel = $('.citizen-header__custom-bottom').length ? 
      $('.citizen-header__custom-bottom') : 
      $('<div>').addClass('citizen-header__custom-bottom');
    
    const $overlay = $('<div>').addClass('citizen-panel-overlay');
    $('body').prepend($overlay, $panel);

    // Инициализация содержимого
    const items = [
      { 
        src: 'https://wiki.ss220.club/resources/assets/logo.png',
        link: 'https://wiki.ss220.club',
        width: '32px'
      },
      {
        src: 'https://bs.ss220.club/resources/assets/logo.png',
        link: 'https://bs.ss220.club',
        width: '32px'
      }
    ];

    $panel.empty().append(
      items.map(item => 
        $('<a>')
          .attr({
            href: item.link,
            'aria-label': 'External link' // Для доступности
          })
          .append(
            $('<img>')
              .attr({
                src: item.src,
                alt: '',
                loading: 'lazy'
              })
              .css({
                width: item.width,
                height: 'auto',
                transition: 'transform 0.2s'
              })
          )
          .hover(
            function() { $(this).css('transform', 'scale(1.1)'); },
            function() { $(this).css('transform', 'none'); }
          )
      )
    );

    // Управление состоянием
    function togglePanel(state) {
      $panel.toggleClass('citizen-panel-active', state);
      $overlay.toggle(state);
    }

    // Закрытие по клику вне панели
    $overlay.on('click', () => togglePanel(false));
    
    // Закрытие по ESC
    $(document).on('keydown', e => {
      if (e.key === 'Escape') togglePanel(false);
    });

    // Для тестирования: добавьте кнопку активации
    $('<button>')
      .text('☰')
      .css({
        position: 'fixed',
        left: '20px',
        top: '20px',
        zIndex: '1001'
      })
      .click(() => togglePanel(true))
      .appendTo('body');
  });
});