// ==UserScript==
// @name           Highlighting of any author comments on YouTube.com
// @name:ru        Подсветка комментариев любого автора на YouTube.com

// @description    Search and highlight comments of any author on YouTube.com. Doesn't break links. Works with Ajax.
// @description:ru Поиск и подсветка комментариев любого автора на YouTube.com. Не ломает ссылки. Работает с Ajax.

// @namespace      http://tampermonkey.net/
// @author         Professor Woland
// @developer      Professor Woland
// @license        MIT
// @version        1.1
// @match          http*://www.youtube.com/*
// @grant          none
// ==/UserScript==

(function() {
    'use strict';

//Edit
    const color = 'GreenYellow' // Highlight color
    const percent = '200%' //Nickname size as a percentage
    const fontWeight = 900 //The most bold font possible (100-900)
//Edit_End

    const searchAttribute = "youtube-comment-search-plugin::searched"
    const searchAttributeValue= "highlighted"
    const textInInputForm = 'Введи ник для выделения комментария...'


// --- Несколько мини функций ---
    function highlightComment(element) {
        element.style.fontWeight = fontWeight
        element.style.backgroundColor = color
    }
    function highlightNickname(element) {
        element.style.backgroundColor = color
        element.style.fontSize = percent
    }
    function inputOnBlur(element) {
        if (element.value == '') {
            element.value = textInInputForm
            element.style.fontWeight = 'normal'
        }
    }
    function inputOnFocus(element) {
        if (element.value == textInInputForm) {
            element.value = ''
            element.style.fontWeight = 'bold'
        }
    }
// --- Несколько мини функций ---End---



// --- Find & highlights comments ---
    function findCommentsOfRandomNickName(findStr) {
        if (findStr == textInInputForm) {
            alert('Сначала ник автора введи!\nУмнее всех чтоли?')
            return false
        }
        let comments = document.querySelectorAll('#main')
        for (const cmnt of comments) {
            if (cmnt.getAttribute(searchAttribute) == searchAttributeValue) {continue}
            let author = cmnt.querySelector("#author-text > span")
            if (author && author.innerHTML.includes(findStr)) {
                let content = cmnt.querySelector("#content-text")
                highlightComment(content)
                highlightNickname(author)
                cmnt.setAttribute(searchAttribute, searchAttributeValue)
            }
        }
        setTimeout(findCommentsOfRandomNickName, 250, findStr)
    }
// --- Find & highlights comments ---End---


// --- Create Widget ---
//Можно было стили также вынести в отдельную функцию, но мне уже было влом.
    function createWidget() {
        let button = document.createElement('a')
        button.title = 'Выделяем?'
        button.href = '#' //Тут не придумал, что сделать. Отрабатывает всегда, даже при наличии обработчика onclick.
        button.className = 'youtube-css-sheet-button-class-name' //Страница всё равно скачет в начало :(
        button.tabindex = '0'
        button.addEventListener('click', function() {
            findCommentsOfRandomNickName(document.getElementById('youtube-find-nickname-text').value)
            return false //Метод querySelector('#...') никак не хотел работать почему-то :(   Поэтому старым добрым дедовским ById :)
          })
        let textArea = document.createElement('input')
        textArea.id = 'youtube-find-nickname-text'
        textArea.value = textInInputForm
        textArea.style.backgroundColor = '#eee'
        textArea.style.display = 'inline-block'
        textArea.style.width = '80%'
        textArea.style.marginLeft = '10px'
        textArea.style.valign = 'middle'
        textArea.addEventListener('focus', function() {inputOnFocus(this); return false})
        textArea.addEventListener('blur', function() {inputOnBlur(this); return false})

        let container = document.createElement('div')
        container.style.backgroundColor = '#999'
        container.style.width = '30%'
        container.style.verticalAlign = 'middle'
        container.style.padding = '10px 10px 10px 10px'
        container.style.borderStyle= 'groove'
        container.style.borderRadius = '20px'

        container.prepend(textArea)
        container.prepend(button)

        return container
    }
// --- Create Widget ---End---


// --- Create CSS Stylsheet ---
    function createStyleSheet() {
        let sheet = document.createElement('style');
        sheet.type = 'text/css'
        sheet.id = 'youtube-css-sheet-button'

        let sheetContent = ""
            sheetContent += "a.youtube-css-sheet-button-class-name {\n"
            sheetContent += "position: relative;\n"
            sheetContent += "z-index: 1;\n"
            sheetContent += "display: inline-block;\n"
            sheetContent += "width: 3em;\n"
            sheetContent += "height: 3em;\n"
            sheetContent += "border-radius: 100%;\n"
            sheetContent += "outline: none;\n"
            sheetContent += "background: #ddd;\n"
            sheetContent += "box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;}"

            sheetContent += "a.youtube-css-sheet-button-class-name:after, a.youtube-css-sheet-button-class-name:before {\n"
            sheetContent += "content: '';\n"
            sheetContent += "position: absolute;\n"
            sheetContent += "z-index: -1;\n"
            sheetContent += "top: 7.5%;\n"
            sheetContent += "left: -15%;\n"
            sheetContent += "right: 0;\n"
            sheetContent += "bottom: 0;\n"
            sheetContent += "width: 30%;\n"
            sheetContent += "height: 10%;\n"
            sheetContent += "margin: auto;\n"
            sheetContent += "background: #999;\n"
            sheetContent += "box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;\n"
            sheetContent += "-webkit-transform: rotate(45deg);\n"
            sheetContent += "transform: rotate(45deg);}\n"

            sheetContent += "a.youtube-css-sheet-button-class-name:before {\n"
            sheetContent += "left: 15%;\n"
            sheetContent += "-webkit-transform: rotate(315deg);\n"
            sheetContent += "transform: rotate(315deg);}\n"

            sheetContent += "a.youtube-css-sheet-button-class-name:hover, a.youtube-css-sheet-button-class-name:focus {\n"
            sheetContent += "background: #e35d31;\n"
            sheetContent += "box-shadow: none;}\n"

            sheetContent += "a.youtube-css-sheet-button-class-name:hover:after, a.youtube-css-sheet-button-class-name:hover:before {\n"
            sheetContent += "background: #fff;\n"
            sheetContent += "box-shadow: none;}\n"

            sheetContent += "a.youtube-css-sheet-button-class-name:focus {\n"
            sheetContent += "background-image:\n"
                sheetContent += "linear-gradient(120deg, transparent 45%, #e35d31 45%, #e35d31 55%, transparent 55%),\n"
                sheetContent += "radial-gradient(transparent 20%, #fff 20%, #fff 30%, transparent 30%);\n"
            sheetContent += "-webkit-animation: rotate31 1s linear infinite forwards;\n"
            sheetContent += "animation: rotate31 1s linear infinite forwards;}\n"

            sheetContent += "a.youtube-css-sheet-button-class-name:focus:after, a.youtube-css-sheet-button-class-name:focus:before {\n"
            sheetContent += "content: '';\n"
            sheetContent += "position: absolute;\n"
            sheetContent += "z-index: -1;\n"
            sheetContent += "top: calc(-30% - 4px/2);\n"
            sheetContent += "left: 4px;\n"
            sheetContent += "width: 0;\n"
            sheetContent += "height: 0;\n"
            sheetContent += "border-top: 4px solid transparent;\n"
            sheetContent += "border-left: 8px solid #fff;\n"
            sheetContent += "border-bottom: 4px solid transparent;\n"
            sheetContent += "background: transparent;\n"
            sheetContent += "box-shadow: none;\n"
            sheetContent += "-webkit-transform: rotate(0deg);\n"
            sheetContent += "transform: rotate(0deg);}\n"

            sheetContent += "a.youtube-css-sheet-button-class-name:focus:before {\n"
            sheetContent += "top: calc(30% + 4px/2);\n"
            sheetContent += "left: -4px;\n"
            sheetContent += "border-left: none;\n"
            sheetContent += "border-right: 8px solid #fff;}\n"

            sheetContent += "@-webkit-keyframes rotate31 {\n"
            sheetContent += "100% {-webkit-transform: rotate(360deg);}}\n"

            sheetContent += "@keyframes rotate31 {\n"
            sheetContent += "100% {transform: rotate(360deg);}}\n"

        sheet.innerHTML = sheetContent
        document.body.prepend(sheet)
    }
// --- Create CSS Stylsheet ---End---


    function findElement() {
        let parentDiv = document.querySelector('#primary-inner') //Ищем контейнер верхнего уровня с наверняка уникальным id
        let childDiv = parentDiv.querySelector('#contents') //и только внутри него ищем "ребёнка" уже янвно с неуникальным id.
        if (!childDiv) {setTimeout(findElement, 250); return false} //Если страница не догрузилась, перезапускаем через четверь секунды.
        createStyleSheet() //Именно это она и делает :)))
        let firstParent = childDiv.parentNode //Добираемся по DOM-у до нужного родительского узла.
        let element = createWidget()
        firstParent.prepend(element) //Вставляем виджет перед всеми его потомками.
    }

    setTimeout(findElement, 3000) //Ну, не сразу скрипт запускаем, не надо сразу.


})();