MediaWiki:Vector.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(8 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
document.addEventListener('DOMContentLoaded', function () { | |||
var elements = document.querySelectorAll('body *'); // Выбираем все элементы на странице | |||
elements.forEach(function (el) { | |||
var bgColor = window.getComputedStyle(el).backgroundColor; // Получаем цвет фона элемента | |||
// Проверяем, если цвет фона соответствует #D02019 (rgb(208, 32, 25)) | |||
if (bgColor === 'rgb(208, 32, 25)') { | |||
el.classList.add('custom-selection'); // Добавляем класс для изменения стилей | |||
} | |||
}); | |||
}); | |||
$(document).ready(function() { | $(document).ready(function() { | ||
var newItem = $('<li class="personal-version" title="Version October 2024"><a href="/index.php?title=MediaWiki:Blog" style="text-decoration: none; color: inherit;">Version: Beta 5.1</a><hr style="display:inline-block; height: 20px; bottom: 2px; width: 1px; background: linear-gradient(to bottom, #DDD7CC, #702114); border: none; margin-left: 10px; vertical-align: middle;"></li>'); | var newItem = $('<li class="personal-version" title="Version October 2024"><a href="/index.php?title=MediaWiki:Blog" style="text-decoration: none; color: inherit;">Version: Beta 5.1</a><hr style="display:inline-block; height: 20px; bottom: 2px; width: 1px; background: linear-gradient(to bottom, #DDD7CC, #702114); border: none; margin-left: 10px; vertical-align: middle;"></li>'); | ||
Line 12: | Line 26: | ||
var container = $('<div>') | var container = $('<div>') | ||
.attr('id', 'help-container') // Присваиваем контейнеру id | .attr('id', 'help-container') // Присваиваем контейнеру id | ||
. | .addClass('help-container'); // Добавляем класс | ||
// Создаем заголовок "Help" с ссылкой | |||
var helpHeader = $('<h3>') | |||
.addClass('help-header') // Добавляем класс | |||
.html('<a href="https://example.com/help" style="text-decoration: none; color: inherit;">Help</a>'); // Заголовок с ссылкой | |||
// | // Добавляем заголовок в контейнер | ||
container.append(helpHeader); | |||
// Массив с путями к изображениям | // Массив с путями к изображениям | ||
var images = [ | var images = [ | ||
'/images/5/52/10.14.2009.jpg', | { src: '/images/5/52/10.14.2009.jpg', link: 'https://example.com/image1' }, | ||
'/images/6/66/Friends_from_FC_29_Dec_2009.jpg' | { src: '/images/6/66/Friends_from_FC_29_Dec_2009.jpg', link: 'https://example.com/image2' }, | ||
{ src: '/images/0/06/Skully%27s_2009_Newspaper.png', link: 'https://example.com/image2' }, | |||
{ src: '/images/0/00/Tyler_phone293729.png', link: 'https://example.com/image2' }, | |||
{ src: '/images/a/a0/Another_Tyler_photo_in_2008-2009.jpg', link: 'https://example.com/image2' }, | |||
{ src: '/images/6/62/Johnny_Boy_-_EP.png', link: 'https://example.com/image2' }, | |||
{ src: '/images/5/5a/Location_Sessions.jpg', link: 'https://example.com/image2' } | |||
]; | ]; | ||
Line 38: | Line 50: | ||
var randomImage = images[Math.floor(Math.random() * images.length)]; | var randomImage = images[Math.floor(Math.random() * images.length)]; | ||
// Создаем элемент изображения | // Создаем элемент изображения с ссылкой | ||
var | var imageLink = $('<a>') | ||
.attr(' | .attr('href', randomImage.link) // Устанавливаем ссылку на изображение | ||
. | .html('<img src="' + randomImage.src + '" class="help-image" alt="Help Image">'); // Создаем элемент изображения | ||
// Добавляем изображение в контейнер | |||
container.append(imageLink); | |||
// Добавляем текст снизу | |||
var helpText = $('<p>') | |||
.addClass('help-text') // Добавляем класс для стилизации | |||
.text("Here's pages that you can help us to get more information about them."); // Добавляем текст | |||
// Добавляем | // Добавляем текст в контейнер | ||
container.append( | container.append(helpText); // Этот текст теперь будет под изображением | ||
// Вставляем контейнер после Sidebar | // Вставляем контейнер после Sidebar |
Latest revision as of 11:29, 23 October 2024
document.addEventListener('DOMContentLoaded', function () {
var elements = document.querySelectorAll('body *'); // Выбираем все элементы на странице
elements.forEach(function (el) {
var bgColor = window.getComputedStyle(el).backgroundColor; // Получаем цвет фона элемента
// Проверяем, если цвет фона соответствует #D02019 (rgb(208, 32, 25))
if (bgColor === 'rgb(208, 32, 25)') {
el.classList.add('custom-selection'); // Добавляем класс для изменения стилей
}
});
});
$(document).ready(function() {
var newItem = $('<li class="personal-version" title="Version October 2024"><a href="/index.php?title=MediaWiki:Blog" style="text-decoration: none; color: inherit;">Version: Beta 5.1</a><hr style="display:inline-block; height: 20px; bottom: 2px; width: 1px; background: linear-gradient(to bottom, #DDD7CC, #702114); border: none; margin-left: 10px; vertical-align: middle;"></li>');
$('#p-personal > div > ul').prepend(newItem); // Добавляем элемент первым в списке навигации
});
$(document).ready(function() {
// Найдем элемент Sidebar (в Vector skin это обычно div с id 'p-tb')
var sidebar = $('#p-tb'); // Стандартный id для Sidebar в Vector skin
if (sidebar.length) {
// Создаем контейнер div
var container = $('<div>')
.attr('id', 'help-container') // Присваиваем контейнеру id
.addClass('help-container'); // Добавляем класс
// Создаем заголовок "Help" с ссылкой
var helpHeader = $('<h3>')
.addClass('help-header') // Добавляем класс
.html('<a href="https://example.com/help" style="text-decoration: none; color: inherit;">Help</a>'); // Заголовок с ссылкой
// Добавляем заголовок в контейнер
container.append(helpHeader);
// Массив с путями к изображениям
var images = [
{ src: '/images/5/52/10.14.2009.jpg', link: 'https://example.com/image1' },
{ src: '/images/6/66/Friends_from_FC_29_Dec_2009.jpg', link: 'https://example.com/image2' },
{ src: '/images/0/06/Skully%27s_2009_Newspaper.png', link: 'https://example.com/image2' },
{ src: '/images/0/00/Tyler_phone293729.png', link: 'https://example.com/image2' },
{ src: '/images/a/a0/Another_Tyler_photo_in_2008-2009.jpg', link: 'https://example.com/image2' },
{ src: '/images/6/62/Johnny_Boy_-_EP.png', link: 'https://example.com/image2' },
{ src: '/images/5/5a/Location_Sessions.jpg', link: 'https://example.com/image2' }
];
// Выбираем случайное изображение
var randomImage = images[Math.floor(Math.random() * images.length)];
// Создаем элемент изображения с ссылкой
var imageLink = $('<a>')
.attr('href', randomImage.link) // Устанавливаем ссылку на изображение
.html('<img src="' + randomImage.src + '" class="help-image" alt="Help Image">'); // Создаем элемент изображения
// Добавляем изображение в контейнер
container.append(imageLink);
// Добавляем текст снизу
var helpText = $('<p>')
.addClass('help-text') // Добавляем класс для стилизации
.text("Here's pages that you can help us to get more information about them."); // Добавляем текст
// Добавляем текст в контейнер
container.append(helpText); // Этот текст теперь будет под изображением
// Вставляем контейнер после Sidebar
sidebar.after(container);
}
});