MediaWiki:Common.js

// Переключение вкладок + синхронизация фона и карточек.
// Работает по каждому .hj-chaos-container отдельно.
mw.hook('wikipage.content').add(function ($root) {
  $root.find('.hj-chaos-container').each(function () {
    var $container = $(this);
    var $buttons   = $container.find('.hj-chaos-tab-button');
    var $blocks    = $container.find('.hj-chaos-block');

    if (!$buttons.length || !$blocks.length) return;

    function darken(rgb, k) {
      var m = (rgb || '').match(/\d+/g) || [17,17,17];
      var r = Math.round(m[0] * (1 - k));
      var g = Math.round(m[1] * (1 - k));
      var b = Math.round(m[2] * (1 - k));
      return 'rgb(' + r + ', ' + g + ', ' + b + ')';
    }

    function lighten(rgb, k) {
      var m = (rgb || '').match(/\d+/g) || [17,17,17];
      var r = Math.round(m[0] + (255 - m[0]) * k);
      var g = Math.round(m[1] + (255 - m[1]) * k);
      var b = Math.round(m[2] + (255 - m[2]) * k);
      return 'rgb(' + r + ', ' + g + ', ' + b + ')';
    }

    function toRgba(rgb, a) {
      var m = (rgb || '').match(/\d+/g) || [17,17,17];
      return 'rgba(' + m[0] + ', ' + m[1] + ', ' + m[2] + ', ' + (a == null ? 1 : a) + ')';
    }

    function applyColors($btn, $block) {
      var bg = getComputedStyle($btn[0]).backgroundColor;

      // Панель блока — тот же фон, что у вкладки
      $block.css('background-color', bg);

      // Карточки внутри активного блока — чуть темнее
      var cardBg = darken(bg, 0.18);
      $block.find('.hj-rule-card').css('background-color', cardBg);

      // Цвет рамки делаем чуть светлее, чем фон вкладки
      var borderColor = lighten(bg, 0.25);
      var glow        = toRgba(borderColor, 0.55);

      // Рамка и подсветка только у АКТИВНОГО блока
      $blocks.css({
        'border-color': '#555',
        'box-shadow': 'none'
      });
      $block.css({
        'border-color': borderColor,
        'box-shadow': '0 0 10px ' + glow
      });

      // Обводка только у АКТИВНОЙ кнопки
      $buttons.css({
        'box-shadow': 'none',
        'z-index': 1
      });
      $btn.css({
        'box-shadow': '0 0 0 3px ' + borderColor + ', 0 0 10px ' + glow,
        'z-index': 2
      });
    }

    function activate(key, $btn) {
      $buttons.removeClass('active');
      $btn.addClass('active');

      $blocks.removeClass('active').hide();
      var $blk = $blocks.filter('[data-chaos="' + key + '"]').addClass('active').show();

      applyColors($btn, $blk);
    }

    // Инициализация
    var $activeBtn = $buttons.filter('.active').first();
    if ($activeBtn.length) {
      activate($activeBtn.data('chaos'), $activeBtn);
    } else {
      activate($buttons.first().data('chaos'), $buttons.first());
    }

    // Клики
    $buttons.off('click.hjChaos').on('click.hjChaos', function () {
      var $btn = $(this);
      activate($btn.data('chaos'), $btn);
    });
  });
});