MediaWiki:Vector.js: Difference between revisions

From TwentyOneWiki
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
 
(16 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 4: Line 18:
});
});


// Дождемся полной загрузки страницы
$(document).ready(function() {
$(document).ready(function() {
     // Найдем элемент Sidebar (в Vector skin это обычно div с id 'p-tb')
     // Найдем элемент Sidebar (в Vector skin это обычно div с id 'p-tb')
Line 13: Line 26:
         var container = $('<div>')
         var container = $('<div>')
             .attr('id', 'help-container')  // Присваиваем контейнеру id
             .attr('id', 'help-container')  // Присваиваем контейнеру id
             .css({
             .addClass('help-container');    // Добавляем класс
                'background-color': '#DDD7CC', // Цвет фона
 
                'padding': '10px',         // Внутренний отступ для контейнера
        // Создаем заголовок "Help" с ссылкой
                'margin-top': '10px',       // Отступ сверху
        var helpHeader = $('<h3>')
                'text-align': 'center',     // Центрирование содержимого
            .addClass('help-header')    // Добавляем класс
                'font-family': '\'MyCustomFont2\', sans-serif' // Применение пользовательского шрифта
            .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);


         // Добавляем HTML-код
         // Добавляем текст снизу
         var customHTML = `
         var helpText = $('<p>')
        <div style="text-align:center;">
             .addClass('help-text') // Добавляем класс для стилизации
             <span style="padding:1.5em 1.5em; text-align:center;">
            .text("Here's pages that you can help us to get more information about them."); // Добавляем текст
                <choose uncached="">
                    <option>{{CSS image crop
                    |Image = [[File:Tyler phone293729.png|link=October 2008]]
                    |bSize = 100
                    |cWidth = 350
                    |cHeight = 280
                    |oTop = 80
                    |oLeft = 60
                    }}<br>Only known performance in unknown vebue around October 2008. Photo of concrt was taken from [[Level of Concern/USB]] from [[Tyler Joseph|Tyler]] phone while ARG game.</option>
                    <option>[[File:Without_image.png|290x290px|center|link=October 2008]]<br>'''[[October 2008]]'''<br>Only known performance in unknown vebue around October 2008. Photo of concrt was taken from [[Level of Concern/USB]] from [[Tyler Joseph|Tyler]] phone while ARG game.</option>
                    <option>[[File:Without_image.png|270x270px|center|link=Spring 2008]]<br>'''[[Spring 2008]]'''</option>
                    <option>[[File:Without_image.png|270x270px|center|link=Kidd Coffee 2009]]<br>'''[[Kidd Coffee 2009]]'''</option>
                    <option><div style="margin-left: 120px;">{{CSS image crop
                    |Image = [[File:Twenty One Pilots Newspaper Jan 2010.jpg|center|link=Skully's Music Diner 2009]]
                    |bSize = 100
                    |cWidth = 200
                    |cHeight = 300
                    |oTop = 40
                    |oLeft = 410
                    }}</div><br>'''[[Skully's Music Diner 2009]]''' — Unknown 2009 band show that is mentioned in a January 2010 newspaper and by a bar employee on Reddit.</option>
                    <option>[[File:6 May 2011.png|300x300px|center|link=05.06.2011]]<br>'''[[05.06.2011|6 May 2011]]''' — The concert took place outside in a small pavilion in the late afternoon. The band started their performance at 11:30 and played the song Time to Say Goodbye after which people complained about a lot of noise and the police stopped the concert. Tyler was concerned because of the possibility of a negative citizenship rank.</option>
                    <option>[[File:Location Sessions.jpg|270x270px|center|link=Location Sessions]]<br>'''[[Location Sessions]]''' (stylized as «'''Løcatiøn Sessiøns'''») — This is a series of singles released <span class="plainlinks">[https://twentyonewiki.info/index.php/Category:2019 2019]</span> - <span class="plainlinks">[https://twentyonewiki.info/index.php/Category:2020 2020]</span> alternative reconstructed [[Twenty One Pilots]] songs recorded at several different sessions.</option>
                </choose>
            </span>
        </div>`;


         // Добавляем HTML-код в контейнер
         // Добавляем текст в контейнер
         container.append(customHTML);
         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);
    }
});