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

Страница интерфейса MediaWiki
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
mw.loader.using('jquery', function () {
mw.loader.using('jquery', function() {
   $(function () {
   $(function() {
     $('.faction-header').each(function () {
     $('.faction-header').each(function() {
       $(this).css('cursor', 'pointer');
       const $header = $(this);
       $(this).on('click', function () {
      const $list = $header.next('.faction-list');
        var $list = $(this).next('.faction-list');
       const $arrow = $header.find('.arrow');
        $list.slideToggle(150);
     
 
      $list.data('is-open', false);
         var $arrow = $(this).find('.arrow');
     
      $header.on('click', function() {
         const isOpen = !$list.data('is-open');
          
          
         $arrow.css('transform', $list.is(':visible') ? 'rotate(0deg)' : 'rotate(180deg)');
        // Анимация стрелки
         $arrow.css('transform', isOpen ? 'rotate(180deg)' : 'rotate(0deg)');
       
        // Анимация списка
        $list.stop().slideToggle({
          duration: 300,
          start: function() {
            if (isOpen) {
              $(this).css('display', 'flex');
            }
          }
        });
       
        $list.find('.faction-item').each(function(index) {
          $(this).delay(50 * index).queue(function(next) {
            $(this).css({
              opacity: isOpen ? 1 : 0,
              transform: isOpen ? 'translateY(0)' : 'translateY(-10px)'
            });
            next();
          });
        });
       
        $list.data('is-open', isOpen);
       });
       });
     });
     });
   });
   });
});
});

Версия от 16:14, 8 мая 2025

mw.loader.using('jquery', function() {
  $(function() {
    $('.faction-header').each(function() {
      const $header = $(this);
      const $list = $header.next('.faction-list');
      const $arrow = $header.find('.arrow');
      
      $list.data('is-open', false);
      
      $header.on('click', function() {
        const isOpen = !$list.data('is-open');
        
        // Анимация стрелки
        $arrow.css('transform', isOpen ? 'rotate(180deg)' : 'rotate(0deg)');
        
        // Анимация списка
        $list.stop().slideToggle({
          duration: 300,
          start: function() {
            if (isOpen) {
              $(this).css('display', 'flex');
            }
          }
        });
        
        $list.find('.faction-item').each(function(index) {
          $(this).delay(50 * index).queue(function(next) {
            $(this).css({
              opacity: isOpen ? 1 : 0,
              transform: isOpen ? 'translateY(0)' : 'translateY(-10px)'
            });
            next();
          });
        });
        
        $list.data('is-open', isOpen);
      });
    });
  });
});