Украл идею у @tym32167, но я использовал чистый JavaScript, плюс сделал разделение под вопросы / ответы. (Подробности использования и т.п. ниже кода)
// ==UserScript==
// @name Comment Templates (Stack Overflow)
// @description готовые комментарии под сообщения низкого качества, потому что з*****о.
// @version 1.0.0
// @license GPL-3.0-or-later
// @author NNL993
// @namespace -
// @match *://ru.stackoverflow.com/questions/*/*
// @match *://ru.stackoverflow.com/review/*
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
const HOTKEY_CODE = 'Tab'
const QUOTE = {
LEFT: '«',
RIGHT: '»',
}
const ACTIVE_COLOR = 'var(--theme-primary-color-legacy, var(--theme-primary))'
const QUESTION_CAN_EDIT = ` Вопрос можно отредактировать кнопкой ${QUOTE.LEFT}[edit]${QUOTE.RIGHT}.`
const ANSWER_CAN_EDIT = ` Ответ можно отредактировать кнопкой ${QUOTE.LEFT}%EDIT${QUOTE.RIGHT}.`
const WELCOME = `Добро пожаловать на ${QUOTE.LEFT}StackOverflow на русском${QUOTE.RIGHT}! `
const comments = {
question: [
'**Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопрос**. Пожалуйста, отредактируйте вопрос и **укажите, что именно вызвало у вас трудности** при решении задачи. Например, приведите код, который вы написали, пытаясь решить задачу. Подробнее [в справке](//ru.stackoverflow.com/help/how-to-ask).',
'Название вопроса должно исключительно включать тему проблемы или текст ошибки, а уже сами подробности должны быть **в вопросе**.' + QUESTION_CAN_EDIT,
'Вопрос задан не по теме сообщества StackOverflow. Вы можете подробнее ознакомится с темами на которые можно задавать вопросы [в справке](//ru.stackoverflow.com/help/on-topic).',
'Вопросы должны также содержать попытки автора решить задачу, без них (попыток), вопрос будет являться учебным заданием. Подробнее [в справке](//ru.stackoverflow.com/help/quality-standards-error).',
'Ответы на данный вопрос скорее всего будут основаны на личном, *субъективном* опыте, стоит исправить вопрос так, чтобы ответы на него были исключительно *объективные*. Подробнее [в справке](//ru.stackoverflow.com/help/dont-ask).' + QUESTION_CAN_EDIT,
'[Пожалуйста, не добавляйте код/данные/текст ошибок картинками](//ru.meta.stackoverflow.com/q/12119/#12120).',
'[Как создать минимальный, самодостаточный и воспроизводимый пример](//ru.stackoverflow.com/help/minimal-reproducible-example).',
'Вопрос закрыт, так как на [Stack Overflow на русском](//ru.stackoverflow.com/) вопросы принято задавать только на русском языке. Пожалуйста, переведите ваш вопрос на русский язык или воспользуйтесь [Stack Overflow на английском](//stackoverflow.com/).' + QUESTION_CAN_EDIT,
],
answer: [
'Пожалуйста, постарайтесь давать более развёрнутые ответы, ответ на вопрос должен быть **исчерпывающим**. Подробнее [в справке](//ru.stackoverflow.com/help/how-to-answer).' + ANSWER_CAN_EDIT,
'Ссылаться на внешний материал конечно хорошо, но также нужно оставлять цитаты (и код если имеется) из ссылок, чтобы пользователи понимали что из ждёт из ссылки, а также это будет полезно если доступ к ресурсу был потерян. Подробнее [в справке](//ru.stackoverflow.com/help/referencing).',
'В этом сообществе все вопросы / ответы / комментарии обязаны быть **на русском** языке, исправьте своё сообщение заменив текст на русский.' + ANSWER_CAN_EDIT,
]
}
let currentComments = 'question'
const TEXTAREA_SELECTOR = '.comment-form textarea'
const _HOTKEY_CODE = getHotkeyCode()
window.addEventListener('keydown', e => {
if(e.code === _HOTKEY_CODE) {
e.preventDefault()
const textarea = e.target
const parent = textarea.parentNode
if(textarea.matches(TEXTAREA_SELECTOR)) {
const contentArea = textarea.closest('.answer, .question')
const isAnswer = contentArea.classList.contains('answer')
const isNewContributor = Boolean(contentArea.querySelector('.new-contributor-indicator'))
const select = document.createElement('div')
const id = contentArea.getAttribute('data-questionid') || contentArea.getAttribute('data-answerid')
currentComments = isAnswer ? 'answer' : 'question'
select.className = 'ils-comment-hints'
correctProps()
select.style.backgroundColor = 'rgb(255, 255, 255)'
select.style.color = 'rgb(0, 0 ,0)'
select.style.position = 'absolute'
select.style.pointerEvents = 'none'
select.style.zIndex = 10
select.innerHTML = comments[currentComments].map(el => {
const textContent = el
.replace('%EDIT', '[править](//ru.stackoverflow.com/posts/%ID/edit)')
.replace('%ID', id)
return `<div style="padding: 1em;" class="ils-comment-hints-item" data-text="${(isNewContributor ? WELCOME : '') + textContent}">${textContent}</div>`
}).join('')
if(parent.querySelector('.ils-comment-hints') === null) {
parent.appendChild(select)
window.addEventListener('resize', correctProps)
}
window.addEventListener('keydown', onKeyDown)
function correctProps() {
if(!textarea) {
return window.removeEventListener('resize', correctProps)
}
select.style.top = textarea.offsetTop + textarea.offsetHeight + 'px'
select.style.left = textarea.offsetLeft + 'px'
select.style.width = textarea.offsetWidth + 'px'
}
}
}
})
let currentIndex = 0
window.addEventListener('keyup', e => {
if(e.code === _HOTKEY_CODE) {
document.querySelectorAll('.ils-comment-hints').forEach(e => {
e.remove()
})
window.removeEventListener('keydown', onKeyDown)
currentIndex = 0
}
})
function onKeyDown(e) {
const commentsLength = comments[currentComments].length
switch (e.code) {
case 'ArrowDown':
currentIndex += 1
if(currentIndex > commentsLength) {
currentIndex = 1
}
break
case 'ArrowUp':
currentIndex += -1
if(currentIndex < 1) {
currentIndex = commentsLength
}
break
default:
return
}
currentIndex = Math.max(1, Math.min(commentsLength, currentIndex)) // MIN - 1; MAX - commentsLength
const target = e.target
if(target.matches(TEXTAREA_SELECTOR)) {
chooseActive(currentIndex)
function chooseActive(index) {
unmakeActive(document.querySelector('.ils-comment-hints-item.active'))
makeActive(document.querySelector(`.ils-comment-hints-item:nth-of-type(${index})`))
}
function unmakeActive(el) {
if(el) {
el.classList.remove('active')
el.style.backgroundColor = ''
}
}
function makeActive(el) {
if(el) {
el.classList.add('active')
el.style.backgroundColor = ACTIVE_COLOR
target.value = el.dataset.text
}
}
}
}
function getHotkeyCode() {
return typeof HOTKEY_CODE === 'string' ? HOTKEY_CODE.trim() : 'Tab'
}
})()
Использование
- Переходим на страницу вопроса / какой-то очереди проверки
- Нажимаем "Добавить комментарий"
- Зажимаем Tab
- Profit. (Стрелками ↑ / ↓ можно управлять)
Нюансы
- Если участник новый, то тогда к надписи добавляется текст из переменной
WELCOME
.
- Если вы налажали с синтаксисом или по какой-то причине переменная
HOTKEY_CODE
отсутствует, то тогда горячей клавишей будет Tab.
Редактирование
HOTKEY_CODE
- это та горячая клавиша, на которую будет открываться список (по стандарту Tab
), для того чтобы, например открывать список на M
, нужно написать KeyM
, если допустим F1
, тогда и пишем F1
.
Как получить код клавиши, на которую хочешь назначить открытие? Откройте консоль разработчика нажатием клавиши F12 или комбинацией клавиш Ctrl + Shift + I, далее зайдите во вкладку Console, и там вставьте этот код в поле ввода: addEventListener('keydown', e => console.log(e.code), {once: true})
, далее нажмите Enter, чтобы запустить код. Нажмите на страницу, чтобы сфокусироваться на ней и нажмите на ту клавишу, которую вы хотите использовать для открытия меню. После нажатия в консоли должна появиться строка с кодом клавиши, эту строку и вставьте в переменную HOTKEY_CODE
.
QUOTE
- это кавычки, которые будут использоваться в тексте, если хотите, можете их изменить, LEFT
- кавычка слева, RIGHT
- кавычка справа.
ACTIVE_COLOR
- цвет, которым будет подсвечиваться текущий выбранный текст, по стандарту, этот цвет - цвет темы веб-сайта.
Комментарии
Есть два массива в переменной comments
, первый question
, где хранятся комментарии под вопросы и второй answer
, где хранятся комментарии под ответы, в строках можно использовать весь Markdown который поддерживается для комментариев. Также в строках заменяются некоторые значения, вот они:
%ID
- текущий ID поста (ответа / вопроса). Пример: Это пост %ID!
-> Это пост 8355!
.
%EDIT
- равносильно записи [edit]
, но есть поддержка для ответов (Я не был уверен работает ли [edit]
на ответы, так что на всякий случай сделал такой вариантик). Пример: Отредактируйте своё сообщение кнопкой %EDIT, пожалуйста!
-> Отредактируйте своё сообщение кнопкой [править](//ru.stackoverflow.com/posts/%ID/edit), пожалуйста!
. (%ID
позже заменяется на текущий ID поста)
Есть также заготовленные переменные, чтобы не печатать одно и тоже много раз (предполагается что вы будете их использовать в конце сообщения):
QUESTION_CAN_EDIT
- равен этой записи: Вопрос можно отредактировать кнопкой «[edit]».
ANSWER_CAN_EDIT
- равен этой записи: Ответ можно отредактировать кнопкой «%EDIT»
Пример использования:
'Любое сообщение должно быть **на русском** языке!' + QUESTION_CAN_EDIT
Скриншот