MediaWiki:Common.js: различия между версиями

Страница интерфейса MediaWiki
мНет описания правки
Метка: ручная отмена
мНет описания правки
Строка 6: Строка 6:
mw.loader.using('jquery').then(function() {
mw.loader.using('jquery').then(function() {
   $(function() {
   $(function() {
     // Создаем контейнер, если его нет
     // Инициализация кастомной панели
     var $customContainer = $('.citizen-header__custom-bottom');
     const $header = $('.citizen-header');
    if ($customContainer.length === 0) {
    const $customContainer = $('.citizen-header__custom-bottom').length ?
       $customContainer = $('<div>')
      $('.citizen-header__custom-bottom') :
        .addClass('citizen-header__custom-bottom')
       $('<div>').addClass('citizen-header__custom-bottom').appendTo($header);
        .appendTo('.citizen-header');
    }


     // Пример данных (замените на свои!)
     // Добавление оверлея
     var items = [
    const $overlay = $('<div>').addClass('citizen-overlay');
    $('body').append($overlay);
 
    // Закрытие элементов при клике на оверлей
    $overlay.on('click', function() {
      $header.removeClass('menu-open');
      $overlay.hide();
    });
 
    // Инициализация элементов управления
    $('[data-citizen-toggle]').on('click', function() {
      $header.toggleClass('menu-open');
      $overlay.toggle();
    });
 
    // Ваши кастомные элементы
     const items = [
       {  
       {  
         type: 'image',  
         type: 'image',  
         src: 'https://wiki.ss220.club/resources/assets/logo.png',  
         src: 'https://wiki.ss220.club/resources/assets/logo.png',
         link: 'https://wiki.ss220.club',
         link: 'https://wiki.ss220.club',
         width: '20px'
         width: '20px'
Строка 30: Строка 44:
     ];
     ];


    // Очищаем контейнер перед добавлением
     $customContainer.empty().append(
     $customContainer.empty();
       items.map(item =>
 
         $('<a>')
    // Добавляем элементы
           .attr('href', item.link)
    items.forEach(function(item) {
           .append(
       var $element;
            $('<img>')
      if (item.type === 'image') {
              .attr('src', item.src)
         $element = $('<img>')
              .css('width', item.width)
           .attr('src', item.src)
          )
           .css('width', item.width);
          .css({
      } else {
            display: 'flex',
        $element = $('<span>').text(item.text);
            alignItems: 'center',
      }
            padding: '4px'
 
          })
      var $link = $('<a>')
       )
        .attr('href', item.link)
     );
        .append($element)
        .css({
          display: 'grid',
          margin: '0 10px'
        });
 
       $customContainer.append($link);
    });
 
    // Принудительно показываем контейнер
     $customContainer.css('display', 'flex');
   });
   });
});
});

Версия от 05:36, 2 апреля 2025

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

// console.log("Привет");
/*_____________________*/
// Проверяем загрузку jQuery
mw.loader.using('jquery').then(function() {
  $(function() {
    // Инициализация кастомной панели
    const $header = $('.citizen-header');
    const $customContainer = $('.citizen-header__custom-bottom').length ? 
      $('.citizen-header__custom-bottom') : 
      $('<div>').addClass('citizen-header__custom-bottom').appendTo($header);

    // Добавление оверлея
    const $overlay = $('<div>').addClass('citizen-overlay');
    $('body').append($overlay);

    // Закрытие элементов при клике на оверлей
    $overlay.on('click', function() {
      $header.removeClass('menu-open');
      $overlay.hide();
    });

    // Инициализация элементов управления
    $('[data-citizen-toggle]').on('click', function() {
      $header.toggleClass('menu-open');
      $overlay.toggle();
    });

    // Ваши кастомные элементы
    const items = [
      { 
        type: 'image', 
        src: 'https://wiki.ss220.club/resources/assets/logo.png',
        link: 'https://wiki.ss220.club',
        width: '20px'
      },
      {
        type: 'image',
        src: 'https://bs.ss220.club/resources/assets/logo.png',
        link: 'https://bs.ss220.club',
        width: '20px'
      }
    ];

    $customContainer.empty().append(
      items.map(item => 
        $('<a>')
          .attr('href', item.link)
          .append(
            $('<img>')
              .attr('src', item.src)
              .css('width', item.width)
          )
          .css({
            display: 'flex',
            alignItems: 'center',
            padding: '4px'
          })
      )
    );
  });
});