Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* Размещённый здесь код JavaScript будет загружаться пользователям при обращении к каждой странице */
// console.log("Привет");
/*_____________________*/
mw.loader.using('jquery').then(function() {
$(document).ready(function() {
// Удаляем старые элементы
$('.citizen-header__custom-bottom, .citizen-panel-overlay').remove();
// Создаем новую панель
const $panel = $('<div>')
.addClass('citizen-header__custom-bottom')
.hide();
// Создаем оверлей
const $overlay = $('<div>')
.addClass('citizen-panel-overlay')
.hide();
// Добавляем элементы на страницу
$('body').append($overlay, $panel);
// Контент панели
const items = [
{
src: 'https://wiki.ss220.club/resources/assets/logo.png',
link: 'https://wiki.ss220.club',
width: '40px'
},
{
src: 'https://bs.ss220.club/resources/assets/logo.png',
link: 'https://bs.ss220.club',
width: '40px'
}
];
// Заполняем панель
$panel.append(
items.map(item =>
$('<a>')
.attr('href', item.link)
.append(
$('<img>')
.attr('src', item.src)
.css('width', item.width)
)
.css({
display: 'block',
transition: '0.2s transform'
})
.hover(
() => $(this).css('transform', 'scale(1.1)'),
() => $(this).css('transform', 'none')
)
)
);
// Управление видимостью
function togglePanel(show) {
$panel.toggle(show);
$overlay.toggle(show);
$('body').toggleClass('citizen-panel-active', show);
}
// Открытие/закрытие
$overlay.click(() => togglePanel(false));
$(document).on('keyup', e => e.key === 'Escape' && togglePanel(false));
// Инициализация
togglePanel(true); // Для теста - сразу показать панель
});
});