- 673
- 371
Делать красивый форум это конечно же хорошо, но как насчет кнопок для быстрого ответа в теме?
Установка:
1. Скачиваем расширение "User JavaScript and CSS"(поддерживается только браузерах на базе Chromium, *тут* написаны некоторые из них)
2. В настройках расширения нажимаем на кнопку "Add new site"
3. Сверху в первой колонке вводим название(по желанию), а во второй домен форума, либо прямую ссылку на определенную тему/раздел
4. Во вкладке JS вставляем код, сурс в спойлере ниже.
Создание кастомных кнопок:
Добавляем в массив
Меняете название/текст так как вам необходимо
1. Скачиваем расширение "User JavaScript and CSS"(поддерживается только браузерах на базе Chromium, *тут* написаны некоторые из них)
2. В настройках расширения нажимаем на кнопку "Add new site"
3. Сверху в первой колонке вводим название(по желанию), а во второй домен форума, либо прямую ссылку на определенную тему/раздел
4. Во вкладке JS вставляем код, сурс в спойлере ниже.
Создание кастомных кнопок:
Добавляем в массив
buttons вот такую конструкцию:
JavaScript:
{
title: "НАЗВАНИЕ",
content: "ТЕКСТ",
},
JavaScript:
{{ user.mention }} - Упомянуть пользователя
{{ user.name }} - Никнейм пользователя
{{ user.id }} - ID пользователя
JavaScript:
const buttons = [
{
title: "Ответ",
content:
"[CENTER][B][SIZE=4][FONT=courier new]Приветствую, {{ user.mention }}<br>" +
"[/SIZE][/B][/FONT][/CENTER]",
},
{
title: "Говно",
content:
"[CENTER][B][SIZE=4][FONT=courier new]Приветствую, {{ user.mention }}<br>" +
"Говно<br>" +
"Закрыто.[/SIZE][/B][/FONT][/CENTER]",
},
{
title: "НАЗВАНИЕ",
content: "ТЕКСТ",
},
];
$(document).ready(() => {
// Загрузка скрипта для обработки шаблонов
$("body").append('<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>');
// Добавление кнопок при загрузке страницы
addButton("Выбрать ответ", "selectAnswer");
// Поиск информации о теме
const threadData = getThreadData();
$(`button#selectAnswer`).click(() => {
XF.alert(buttonsMarkup(buttons), null, "Выберите ответ:");
buttons.forEach((btn, id) => {
$(`button#answers-${id}`).click(() => pasteContent(id, threadData));
});
});
});
function addButton(name, id) {
$(".button--icon--reply").after(
`<button type="button" class="button rippleButton" id="${id}" style="margin: 3px;">${name}</button>`
);
}
function buttonsMarkup(buttons) {
return `<div class="select_answer">${buttons
.map(
(btn, i) =>
`<button id="answers-${i}" class="button--primary button ` +
`rippleButton" style="margin:5px"><span class="button-text">${btn.title}</span></button>`
)
.join("")}</div>`;
}
function pasteContent(id, data = {}) {
const template = Handlebars.compile(buttons[id].content);
if ($(".fr-element.fr-view p").text() === "") $(".fr-element.fr-view p").empty();
$("span.fr-placeholder").empty();
$("div.fr-element.fr-view p").append(template(data));
$("a.overlay-titleCloser").trigger("click");
}
function getThreadData() {
const authorID = $("a.username")[0].attributes["data-user-id"].nodeValue;
const authorName = $("a.username").html();
const hours = new Date().getHours();
return {
user: {
id: authorID,
name: authorName,
mention: `[USER=${authorID}]${authorName}[/USER]`,
},
};
}
