UI

Templates for themes

Небольшой вайбкод, который будет полезен для пользователей, которые ведут постоянные рубрики

Суть проста - заполняете шаблон необходимой информацией, которую часто используете(кнопки/картинки/видео/смайлики/текст/BBC и тд), после чего используете по необходимости. Шаблоны хранятся в куках расширения!

Всего предусмотрено по 5 шаблонов для поля текста и отдельные 5 шаблонов для названия темы
​

Установка

Для работы кода нужно расширение tampermonkey, скачиваем, вставляем в него скрипт, работаем

Гитхаб

Если лень гитхаб:

// ==UserScript==
// @name Шаблон
// @namespace http://tampermonkey.net/
// @author AnimeHeHe
// @match https://lolz.live/forums/*/create-thread
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// ==/UserScript==

(function() {
'use strict';

// Шаблоны
const DEFAULT_TEMPLATES = {
title: {
1: "AnimeHeHe",
2: "AnimeHeHe",
3: "AnimeHeHe",
4: "AnimeHeHe",
5: "AnimeHeHe"
},
content: {
1: "AnimeHeHe",
2: "AnimeHeHe",
3: "AnimeHeHe",
4: "AnimeHeHe",
5: "AnimeHeHe"
}
};

GM_addStyle(`
/* Кнопоки поля заголовка */
.title-template-container {
display: flex !important;
gap: 5px !important;
margin-top: 10px !important;
align-items: center !important;
padding: 5px 0 !important;
}

/* Кнопки поля текста */
.content-template-container {
position: absolute !important;
display: flex !important;
gap: 5px !important;
align-items: center !important;
z-index: 9999 !important;
padding: 8px 12px !important;
}

/* Общие стили кнопок */
.template-button {
padding: 6px 12px !important;
background: #00ba78 !important;
color: white !important;
border: none !important;
border-radius: 3px !important;
cursor: pointer !important;
font-weight: bold !important;
min-width: 35px !important;
font-size: 14px !important;
}
.template-button:hover {
background: #884444 !important;
}

/* Кнопка сохранения */
.save-button {
padding: 6px 12px !important;
background: #884444 !important;
color: white !important;
border: none !important;
border-radius: 3px !important;
cursor: pointer !important;
margin-left: 10px !important;
font-size: 14px !important;
}
.save-button:hover {
background: #00ba78 !important;
}

/* Уведомления */
.template-notification {
position: fixed !important;
top: 20px !important;
right: 20px !important;
background: #00ba78 !important;
color: white !important;
padding: 10px 20px !important;
border-radius: 4px !important;
z-index: 10000 !important;
animation: fadeInOut 2s ease-in-out !important;
}

@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(-20px); }
10% { opacity: 1; transform: translateY(0); }
90% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-20px); }
}
`);

// Загружаем сохраненные шаблоны
let titleTemplates = GM_getValue('titleTemplates', DEFAULT_TEMPLATES.title);
let contentTemplates = GM_getValue('contentTemplates', DEFAULT_TEMPLATES.content);
let currentTemplateNumber = 1;
let contentButtonsContainer = null;

// Функция инициализации
function init() {
const titleInput = document.getElementById('ctrl_title_thread_create') ||
document.querySelector('input[name="title"][type="text"]');
const contentDiv = document.querySelector('.fr-element.fr-view');

if (titleInput) {
addTitleButtons(titleInput);
}

if (contentDiv) {
addContentButtons(contentDiv);
// Позиционируем кнопки сразу
positionButtonsAboveElement(contentDiv);
}

// Добавляем обработчики для обновления позиции
setupEventListeners();
}

// Добавляем кнопки к полю заголовка
function addTitleButtons(field) {
const container = document.createElement('div');
container.className = 'title-template-container';

for (let i = 1; i <= 5; i++) {
const button = createTemplateButton(i, 'title', field);
container.appendChild(button);
}

const saveButton = document.createElement('button');
saveButton.textContent = '';
saveButton.className = 'save-button';
// УДАЛИЛ title атрибут
saveButton.addEventListener('click', function(e) {
e.preventDefault();
const text = field.value.trim();
if (text) {
titleTemplates[currentTemplateNumber] = text;
GM_setValue('titleTemplates', titleTemplates);
showNotification(`Сохранено`);
// УДАЛИЛ вызов updateButtonTooltips
}
});

container.appendChild(saveButton);
field.parentNode.insertBefore(container, field.nextSibling);
}

// Добавляем кнопки к полю текста
function addContentButtons(field) {
// Создаем контейнер для кнопок ВНЕ текстового поля
contentButtonsContainer = document.createElement('div');
contentButtonsContainer.className = 'content-template-container';

// Добавляем его в body
document.body.appendChild(contentButtonsContainer);

for (let i = 1; i <= 5; i++) {
const button = createTemplateButton(i, 'content', field);
contentButtonsContainer.appendChild(button);
}

const saveButton = document.createElement('button');
saveButton.textContent = '';
saveButton.className = 'save-button';
// УДАЛИЛ title атрибут
saveButton.addEventListener('click', function(e) {
e.preventDefault();
const text = field.innerHTML.trim();
if (text !== '<p><br></p>' && text !== '') {
contentTemplates[currentTemplateNumber] = text;
GM_setValue('contentTemplates', contentTemplates);
showNotification(`Сохранено`);
// УДАЛИЛ вызов updateButtonTooltips
}
});

contentButtonsContainer.appendChild(saveButton);
}

// Создание кнопки шаблона - УПРОЩЕНО
function createTemplateButton(number, type, field) {
const button = document.createElement('button');
button.textContent = number;
button.className = 'template-button';
button.dataset.templateNumber = number;
// НЕ добавляем атрибут title

button.addEventListener('click', function(e) {
e.preventDefault();
applyTemplate(number, type, field);
currentTemplateNumber = number;
// УДАЛИЛ вызов updateSaveButtonTitles
});

return button;
}

// Настройка обработчиков событий
function setupEventListeners() {
const contentDiv = document.querySelector('.fr-element.fr-view');

if (contentDiv) {
contentDiv.addEventListener('focus', function() {
positionButtonsAboveElement(this);
});
}

window.addEventListener('scroll', function() {
const contentDiv = document.querySelector('.fr-element.fr-view');
if (contentDiv && contentButtonsContainer) {
positionButtonsAboveElement(contentDiv);
}
});

window.addEventListener('resize', function() {
const contentDiv = document.querySelector('.fr-element.fr-view');
if (contentDiv && contentButtonsContainer) {
positionButtonsAboveElement(contentDiv);
}
});
}

// Позиционирование кнопок над элементом
function positionButtonsAboveElement(element) {
if (!contentButtonsContainer) return;

const rect = element.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

contentButtonsContainer.style.top = (rect.top + scrollTop - 90) + 'px';
contentButtonsContainer.style.left = (rect.left + rect.width/2 + 390) + 'px';
contentButtonsContainer.style.transform = 'translateX(-50%)';

contentButtonsContainer.style.display = 'flex';
contentButtonsContainer.style.visibility = 'visible';
contentButtonsContainer.style.opacity = '1';
}

// Применение шаблона
function applyTemplate(number, type, field) {
const template = type === 'title' ? titleTemplates[number] : contentTemplates[number];

if (!template) return;

if (type === 'title') {
field.value = template;
field.focus();
} else {
field.innerHTML = template;
field.focus();

const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(field);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}

}

function showNotification(message) {
const notification = document.createElement('div');
notification.textContent = message;
notification.className = 'template-notification';
document.body.appendChild(notification);

setTimeout(() => {
if (notification.parentNode) {
document.body.removeChild(notification);
}
}, 2000);
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
setTimeout(init, 1000);
}
})();

Code

// ==UserScript==

// @name         Шаблон

// @namespace    http://tampermonkey.net/

// @author       AnimeHeHe

// @match        https://lolz.live/forums/*/create-thread

// @grant        GM_setValue

// @grant        GM_getValue

// @grant        GM_addStyle

// ==/UserScript==



(function() {

    'use strict';



    // Шаблоны

    const DEFAULT_TEMPLATES = {

        title: {

            1: "AnimeHeHe",

            2: "AnimeHeHe",

            3: "AnimeHeHe",

            4: "AnimeHeHe",

            5: "AnimeHeHe"

        },

        content: {

            1: "AnimeHeHe",

            2: "AnimeHeHe",

            3: "AnimeHeHe",

            4: "AnimeHeHe",

            5: "AnimeHeHe"

        }

    };



    GM_addStyle(`

        /* Кнопоки поля заголовка */

        .title-template-container {

            display: flex !important;

            gap: 5px !important;

            margin-top: 10px !important;

            align-items: center !important;

            padding: 5px 0 !important;

        }



        /* Кнопки поля текста */

        .content-template-container {

            position: absolute !important;

            display: flex !important;

            gap: 5px !important;

            align-items: center !important;

            z-index: 9999 !important;

            padding: 8px 12px !important;

        }



        /* Общие стили кнопок */

        .template-button {

            padding: 6px 12px !important;

            background: #00ba78 !important;

            color: white !important;

            border: none !important;

            border-radius: 3px !important;

            cursor: pointer !important;

            font-weight: bold !important;

            min-width: 35px !important;

            font-size: 14px !important;

        }

        .template-button:hover {

            background: #884444 !important;

        }



        /* Кнопка сохранения */

        .save-button {

            padding: 6px 12px !important;

            background: #884444 !important;

            color: white !important;

            border: none !important;

            border-radius: 3px !important;

            cursor: pointer !important;

            margin-left: 10px !important;

            font-size: 14px !important;

        }

        .save-button:hover {

            background: #00ba78 !important;

        }



        /* Уведомления */

        .template-notification {

            position: fixed !important;

            top: 20px !important;

            right: 20px !important;

            background: #00ba78 !important;

            color: white !important;

            padding: 10px 20px !important;

            border-radius: 4px !important;

            z-index: 10000 !important;

            animation: fadeInOut 2s ease-in-out !important;

        }



        @keyframes fadeInOut {

            0% { opacity: 0; transform: translateY(-20px); }

            10% { opacity: 1; transform: translateY(0); }

            90% { opacity: 1; transform: translateY(0); }

            100% { opacity: 0; transform: translateY(-20px); }

        }

    `);



    // Загружаем сохраненные шаблоны

    let titleTemplates = GM_getValue('titleTemplates', DEFAULT_TEMPLATES.title);

    let contentTemplates = GM_getValue('contentTemplates', DEFAULT_TEMPLATES.content);

    let currentTemplateNumber = 1;

    let contentButtonsContainer = null;



    // Функция инициализации

    function init() {

        const titleInput = document.getElementById('ctrl_title_thread_create') ||

                          document.querySelector('input[name="title"][type="text"]');

        const contentDiv = document.querySelector('.fr-element.fr-view');



        if (titleInput) {

            addTitleButtons(titleInput);

        }



        if (contentDiv) {

            addContentButtons(contentDiv);

            // Позиционируем кнопки сразу

            positionButtonsAboveElement(contentDiv);

        }



        // Добавляем обработчики для обновления позиции

        setupEventListeners();

    }



    // Добавляем кнопки к полю заголовка

    function addTitleButtons(field) {

        const container = document.createElement('div');

        container.className = 'title-template-container';



        for (let i = 1; i <= 5; i++) {

            const button = createTemplateButton(i, 'title', field);

            container.appendChild(button);

        }



        const saveButton = document.createElement('button');

        saveButton.textContent = '';

        saveButton.className = 'save-button';

        // УДАЛИЛ title атрибут

        saveButton.addEventListener('click', function(e) {

            e.preventDefault();

            const text = field.value.trim();

            if (text) {

                titleTemplates[currentTemplateNumber] = text;

                GM_setValue('titleTemplates', titleTemplates);

                showNotification(`Сохранено`);

                // УДАЛИЛ вызов updateButtonTooltips

            }

        });



        container.appendChild(saveButton);

        field.parentNode.insertBefore(container, field.nextSibling);

    }



    // Добавляем кнопки к полю текста

    function addContentButtons(field) {

        // Создаем контейнер для кнопок ВНЕ текстового поля

        contentButtonsContainer = document.createElement('div');

        contentButtonsContainer.className = 'content-template-container';



        // Добавляем его в body

        document.body.appendChild(contentButtonsContainer);



        for (let i = 1; i <= 5; i++) {

            const button = createTemplateButton(i, 'content', field);

            contentButtonsContainer.appendChild(button);

        }



        const saveButton = document.createElement('button');

        saveButton.textContent = '';

        saveButton.className = 'save-button';

        // УДАЛИЛ title атрибут

        saveButton.addEventListener('click', function(e) {

            e.preventDefault();

            const text = field.innerHTML.trim();

            if (text !== '<p><br></p>' && text !== '') {

                contentTemplates[currentTemplateNumber] = text;

                GM_setValue('contentTemplates', contentTemplates);

                showNotification(`Сохранено`);

                // УДАЛИЛ вызов updateButtonTooltips

            }

        });



        contentButtonsContainer.appendChild(saveButton);

    }



    // Создание кнопки шаблона - УПРОЩЕНО

    function createTemplateButton(number, type, field) {

        const button = document.createElement('button');

        button.textContent = number;

        button.className = 'template-button';

        button.dataset.templateNumber = number;

        // НЕ добавляем атрибут title



        button.addEventListener('click', function(e) {

            e.preventDefault();

            applyTemplate(number, type, field);

            currentTemplateNumber = number;

            // УДАЛИЛ вызов updateSaveButtonTitles

        });



        return button;

    }



    // Настройка обработчиков событий

    function setupEventListeners() {

        const contentDiv = document.querySelector('.fr-element.fr-view');



        if (contentDiv) {

            contentDiv.addEventListener('focus', function() {

                positionButtonsAboveElement(this);

            });

        }



        window.addEventListener('scroll', function() {

            const contentDiv = document.querySelector('.fr-element.fr-view');

            if (contentDiv && contentButtonsContainer) {

                positionButtonsAboveElement(contentDiv);

            }

        });



        window.addEventListener('resize', function() {

            const contentDiv = document.querySelector('.fr-element.fr-view');

            if (contentDiv && contentButtonsContainer) {

                positionButtonsAboveElement(contentDiv);

            }

        });

    }



    // Позиционирование кнопок над элементом

    function positionButtonsAboveElement(element) {

        if (!contentButtonsContainer) return;



        const rect = element.getBoundingClientRect();

        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;



        contentButtonsContainer.style.top = (rect.top + scrollTop - 90) + 'px';

        contentButtonsContainer.style.left = (rect.left + rect.width/2 + 390) + 'px';

        contentButtonsContainer.style.transform = 'translateX(-50%)';



        contentButtonsContainer.style.display = 'flex';

        contentButtonsContainer.style.visibility = 'visible';

        contentButtonsContainer.style.opacity = '1';

    }



    // Применение шаблона

    function applyTemplate(number, type, field) {

        const template = type === 'title' ? titleTemplates[number] : contentTemplates[number];



        if (!template) return;



        if (type === 'title') {

            field.value = template;

            field.focus();

        } else {

            field.innerHTML = template;

            field.focus();



            const range = document.createRange();

            const selection = window.getSelection();

            range.selectNodeContents(field);

            range.collapse(true);

            selection.removeAllRanges();

            selection.addRange(range);

        }



    }



    function showNotification(message) {

        const notification = document.createElement('div');

        notification.textContent = message;

        notification.className = 'template-notification';

        document.body.appendChild(notification);



        setTimeout(() => {

            if (notification.parentNode) {

                document.body.removeChild(notification);

            }

        }, 2000);

    }



    if (document.readyState === 'loading') {

        document.addEventListener('DOMContentLoaded', init);

    } else {

        setTimeout(init, 1000);

    }

})();

ЦДН видео сносит - Its over, мой вайбкод теперь приравнен к порно​

​