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

Текущая версия от 06:47, 2 апреля 2025

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

// console.log("Привет");
/*_____________________*/
mw.loader.using('jquery').then(function() {
  $(document).ready(function() {
    // Удаляем старые элементы
    $('.citizen-header__custom-bottom, .citizen-panel-overlay').remove();
    
    // Создаем новую панель
    const $panel = $('<div>')
      .addClass('citizen-header__custom-bottom')
      .hide();
    
    // Создаем оверлей
    const $overlay = $('<div>')
      .addClass('citizen-panel-overlay')
      .hide();

    // Добавляем элементы на страницу
    $('body').append($overlay, $panel);

    // Контент панели
    const items = [
      {
        src: 'https://wiki.ss220.club/resources/assets/logo.png',
        link: 'https://wiki.ss220.club',
        width: '40px'
      },
      {
        src: 'https://bs.ss220.club/resources/assets/logo.png',
        link: 'https://bs.ss220.club',
        width: '40px'
      }
    ];

    // Заполняем панель
    $panel.append(
      items.map(item => 
        $('<a>')
          .attr('href', item.link)
          .append(
            $('<img>')
              .attr('src', item.src)
              .css('width', item.width)
          )
          .css({
            display: 'block',
            transition: '0.2s transform'
          })
          .hover(
            () => $(this).css('transform', 'scale(1.1)'),
            () => $(this).css('transform', 'none')
          )
      )
    );

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

    // Открытие/закрытие
    $overlay.click(() => togglePanel(false));
    $(document).on('keyup', e => e.key === 'Escape' && togglePanel(false));

    // Инициализация
    togglePanel(true); // Для теста - сразу показать панель
  });
});

@@ Строка 3: / Строка 3: @@
 // console.log("Привет");
 /*_____________________*/
-// Проверяем загрузку jQuery
 mw.loader.using('jquery').then(function() {
-   $(function() {
+   $(document).ready(function() {
-     // Инициализация кастомной панели
+     // Удаляем старые элементы
-     const $header = $('.citizen-header');
+     $('.citizen-header__custom-bottom, .citizen-panel-overlay').remove();
-     const $customContainer = $('.citizen-header__custom-bottom').length ?
-       $('.citizen-header__custom-bottom') :
+    // Создаем новую панель
-       $('<div>').addClass('citizen-header__custom-bottom').appendTo($header);
+     const $panel = $('<div>')
+       .addClass('citizen-header__custom-bottom')
+       .hide();
+    // Создаем оверлей
+    const $overlay = $('<div>')
+      .addClass('citizen-panel-overlay')
+      .hide();
-     // Добавление оверлея
+     // Добавляем элементы на страницу
-    const $overlay = $('<div>').addClass('citizen-overlay');
+     $('body').append($overlay, $panel);
-     $('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'
+         width: '40px'
        },
        {
-        type: 'image',
          src: 'https://bs.ss220.club/resources/assets/logo.png',
          link: 'https://bs.ss220.club',
-         width: '20px'
+         width: '40px'
        }
      ];
-     $customContainer.empty().append(
+    // Заполняем панель
+     $panel.append(
        items.map(item =>
          $('<a>')
@@ Строка 54: / Строка 46: @@
            )
            .css({
-             display: 'flex',
+             display: 'block',
-             alignItems: 'center',
+             transition: '0.2s transform'
-            padding: '4px'
            })
+          .hover(
+            () => $(this).css('transform', 'scale(1.1)'),
+            () => $(this).css('transform', 'none')
+          )
        )
      );
+    // Управление видимостью
+    function togglePanel(show) {
+      $panel.toggle(show);
+      $overlay.toggle(show);
+      $('body').toggleClass('citizen-panel-active', show);
+    }
+    // Открытие/закрытие
+    $overlay.click(() => togglePanel(false));
+    $(document).on('keyup', e => e.key === 'Escape' && togglePanel(false));
+    // Инициализация
+    togglePanel(true); // Для теста - сразу показать панель
    });
 });