Перейти к содержанию

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

Материал из Horny Jail WIKI
Нет описания правки
Нет описания правки
 
Строка 1: Строка 1:
// Переключение вкладок + синхронизация фона и карточек.
// Переключение вкладок и классов "chaos-*".
// Работает по каждому .hj-chaos-container отдельно.
mw.hook('wikipage.content').add(function ($root) {
mw.hook('wikipage.content').add(function ($root) {
   $root.find('.hj-chaos-container').each(function () {
   $root.find('.hj-chaos-container').each(function () {
Строка 9: Строка 8:
     if (!$buttons.length || !$blocks.length) return;
     if (!$buttons.length || !$blocks.length) return;


    // Жёсткая мапа цветов под режимы
     var CHAOS_CLASSES = 'chaos-overview chaos-calm chaos-medium chaos-high';
     var COLORS = {
      overview: '#2f3b4d',
      calm:    '#234526',
      medium:  '#5c4716',
      high:    '#5c1f1f'
    };
 
    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 applyColors($btn, $block) {
      var key = $btn.data('chaos');
      var bg  = COLORS[key] || '#2f3b4d';
 
      // Фон блока = цвет режима
      $block.css('background-color', bg);
      $container[0].style.setProperty('--hj-chaos-block-bg', bg);
 
      // Рамка того же цвета
      $container[0].style.setProperty('--hj-chaos-border', bg);
 
      // Карточки — чуть темнее
      var cardBg = darken(bg, 0.18);
      $block.find('.hj-rule-card').css('background-color', cardBg);
    }


     function activate(key, $btn) {
     function activate(key, $btn) {
      // активная кнопка
       $buttons.removeClass('active');
       $buttons.removeClass('active');
       $btn.addClass('active');
       $btn.addClass('active');


      // активный блок
       $blocks.removeClass('active').hide();
       $blocks.removeClass('active').hide();
       var $blk = $blocks
       $blocks
         .filter('[data-chaos="' + key + '"]')
         .filter('[data-chaos="' + key + '"]')
         .addClass('active')
         .addClass('active')
         .show();
         .show();


       applyColors($btn, $blk);
       // класс на контейнере для раскраски рамок/фона
      $container
        .removeClass(CHAOS_CLASSES)
        .addClass('chaos-' + key);
     }
     }


Строка 65: Строка 39:
     // Клики
     // Клики
     $buttons.off('click.hjChaos').on('click.hjChaos', function () {
     $buttons.off('click.hjChaos').on('click.hjChaos', function () {
       var $btn = $(this);
       var $btn = $(this);
       var key  = $btn.data('chaos');
       activate($btn.data('chaos'), $btn);
      activate(key, $btn);
     });
     });
   });
   });
});
});

Текущая версия от 23:37, 15 ноября 2025

// Переключение вкладок и классов "chaos-*".
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;

    var CHAOS_CLASSES = 'chaos-overview chaos-calm chaos-medium chaos-high';

    function activate(key, $btn) {
      // активная кнопка
      $buttons.removeClass('active');
      $btn.addClass('active');

      // активный блок
      $blocks.removeClass('active').hide();
      $blocks
        .filter('[data-chaos="' + key + '"]')
        .addClass('active')
        .show();

      // класс на контейнере для раскраски рамок/фона
      $container
        .removeClass(CHAOS_CLASSES)
        .addClass('chaos-' + key);
    }

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

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