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

Страница интерфейса MediaWiki
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
$(document).ready(function () {
$(document).ready(function () {
   // Анимация раскрытия контента
   // Устанавливаем границу и цвет текущего блока
  $('.recipe-card').each(function () {
    var $card = $(this);
    var borderColor = $card.data('border');
    var substanceColor = borderColor || '#81d4fa';
 
    // рамка карточки
    $card.css('border-color', borderColor);
 
    // название вещества (цвет текста и underline)
    var $sub = $card.find('.card-substance');
    $sub.text($card.data('substance'));
    $sub.css('color', substanceColor);
 
    // цвет линии под заголовками
    $card.find('.collapsible-header').css('color', substanceColor);
  });
 
  // Клик по заголовку — раскрытие контента
   $('.collapsible-header').click(function () {
   $('.collapsible-header').click(function () {
     var content = $(this).next('.collapsible-content');
     var $hdr = $(this);
     content.slideToggle(300, function() {
    var $content = $hdr.next('.collapsible-content');
       // Анимация появления элементов после раскрытия
 
       $(this).find('li').each(function (index) {
    $content.toggleClass('show');
         $(this).css('animation-delay', (index * 0.1) + 's');
     if ($content.hasClass('show')) {
        $(this).addClass('visible');
      $content.css('max-height', $content.get(0).scrollHeight + 'px');
       // анимация элементов
       $content.find('li').each(function (i) {
         $(this)
          .css('animation-delay', (i * 0.1) + 's')
          .addClass('visible');
       });
       });
     });
     } else {
    $(this).toggleClass('open');
       $content.css('max-height', '0');
  });
 
  // Устанавливаем цвет границы из data-атрибута
  $('.recipe-card').each(function () {
    var borderColor = $(this).attr('data-border');
    if (borderColor) {
       $(this).css('border-color', borderColor);
     }
     }
    $hdr.toggleClass('open');
   });
   });
});
});

Версия от 18:05, 3 мая 2025

$(document).ready(function () {
  // Устанавливаем границу и цвет текущего блока
  $('.recipe-card').each(function () {
    var $card = $(this);
    var borderColor = $card.data('border');
    var substanceColor = borderColor || '#81d4fa';

    // рамка карточки
    $card.css('border-color', borderColor);

    // название вещества (цвет текста и underline)
    var $sub = $card.find('.card-substance');
    $sub.text($card.data('substance'));
    $sub.css('color', substanceColor);

    // цвет линии под заголовками
    $card.find('.collapsible-header').css('color', substanceColor);
  });

  // Клик по заголовку — раскрытие контента
  $('.collapsible-header').click(function () {
    var $hdr = $(this);
    var $content = $hdr.next('.collapsible-content');

    $content.toggleClass('show');
    if ($content.hasClass('show')) {
      $content.css('max-height', $content.get(0).scrollHeight + 'px');
      // анимация элементов
      $content.find('li').each(function (i) {
        $(this)
          .css('animation-delay', (i * 0.1) + 's')
          .addClass('visible');
      });
    } else {
      $content.css('max-height', '0');
    }
    $hdr.toggleClass('open');
  });
});