|
|
| (не показана 1 промежуточная версия этого же участника) |
| Строка 2: |
Строка 2: |
|
| |
|
| // console.log("Привет"); | | // console.log("Привет"); |
| /*_____________________*/
| |
| mw.loader.using('jquery').then(function() {
| |
| $(function() {
| |
| // Создаем основные элементы
| |
| const $panel = $('.citizen-header__custom-bottom').length ?
| |
| $('.citizen-header__custom-bottom') :
| |
| $('<div>').addClass('citizen-header__custom-bottom');
| |
|
| |
| const $overlay = $('<div>').addClass('citizen-panel-overlay');
| |
| $('body').prepend($overlay, $panel);
| |
|
| |
| // Инициализация содержимого
| |
| const items = [
| |
| {
| |
| src: 'https://wiki.ss220.club/resources/assets/logo.png',
| |
| link: 'https://wiki.ss220.club',
| |
| width: '32px'
| |
| },
| |
| {
| |
| src: 'https://bs.ss220.club/resources/assets/logo.png',
| |
| link: 'https://bs.ss220.club',
| |
| width: '32px'
| |
| }
| |
| ];
| |
|
| |
| $panel.empty().append(
| |
| items.map(item =>
| |
| $('<a>')
| |
| .attr({
| |
| href: item.link,
| |
| 'aria-label': 'External link' // Для доступности
| |
| })
| |
| .append(
| |
| $('<img>')
| |
| .attr({
| |
| src: item.src,
| |
| alt: '',
| |
| loading: 'lazy'
| |
| })
| |
| .css({
| |
| width: item.width,
| |
| height: 'auto',
| |
| transition: 'transform 0.2s'
| |
| })
| |
| )
| |
| .hover(
| |
| function() { $(this).css('transform', 'scale(1.1)'); },
| |
| function() { $(this).css('transform', 'none'); }
| |
| )
| |
| )
| |
| );
| |
|
| |
| // Управление состоянием
| |
| function togglePanel(state) {
| |
| $panel.toggleClass('citizen-panel-active', state);
| |
| $overlay.toggle(state);
| |
| }
| |
|
| |
| // Закрытие по клику вне панели
| |
| $overlay.on('click', () => togglePanel(false));
| |
|
| |
| // Закрытие по ESC
| |
| $(document).on('keydown', e => {
| |
| if (e.key === 'Escape') togglePanel(false);
| |
| });
| |
|
| |
| // Для тестирования: добавьте кнопку активации
| |
| $('<button>')
| |
| .text('☰')
| |
| .css({
| |
| position: 'fixed',
| |
| left: '20px',
| |
| top: '20px',
| |
| zIndex: '1001'
| |
| })
| |
| .click(() => togglePanel(true))
| |
| .appendTo('body');
| |
| });
| |
| });
| |
/* Размещённый здесь код JavaScript будет загружаться пользователям при обращении к каждой странице */
// console.log("Привет");
