Выделение комментариев автора. Реализация

[TiGR]

Дурацкая привычка хабра бить ссылки со словом script... Поставил ссылку через tinyurl.com.

[amonra]

Спасибо
Полезнейшая вещь.
Ещё бы как-то реализовать подсвечивание не только автора топика, а любого пользователя по выбору - цены бы ему не было) Например, скрипту даёшь список ников, которые нужно подсвечивать.
Иногда замечаешь, что какой-то человек почти всегда говорит умные вещи и хочется видеть, что он ещё написал.

[obenjiro]

Да! Подскажите плиз, для особо тупых - что делать. Если не сложно :)

[foo]

ставим Greasemonkey, идём на страничку скрипта и жмём Install Script в правом верхнем углу.

[foo]

что-то я, кажется, не то сделал =) Пойду спать лучше

[nicothin]

FF3 - нажал - просто скачался файл скрипта. куда его пихать то?

[TiGR]

А greasemonkey установлен? Firefox перезапустился?

[nicothin]

нет :(
лан, пойду тоже спать...

[Lilumi]

тайтл для Greasemonkey есть, но ссылка неправильная

[foo]

Исправлено

[Lilumi]

да я по тайтлу уже сам нашел :)

[TiGR]

Достаточно ли будет, если все, как авторские, так и «избранные» сообщения будут метиться одним и тем же цветом?

[amonra]

Да, конечно.

[Pure_BY]

Будет очень плохо.

А вообще мне нравится реализация выделения комментариев нужных человек такая, как на дёрти — напротив каждого ника есть точка, если её нажать — то все сообщение этого человека в этом трэде будут выделены.
По-моему так удобнее всего, но я не знаю, насколько это doable здесь.

В любом случае, я этой фичей пользуюсь редко, а вот выделение авторских комментариев — это просто супер-фича, за что вам и огромное спасибо (выраженное всеми доступными способами :) )

В Опере вроде хорошо работает!

[lomalkin]

ИМХО лучше разным. Хотябы так - один цвет для авторских, другой для всех остальных.

[hasty]

Ой, у меня в Фаерфоксе 2.0.0.15 не работает.

А так клёво, очень оперативно!

[hasty]

Про трёшку и автор написал ;-)

[TiGR]

Пофиксил.

[hasty]

Спасибо!

[hasty]

Кстати. Похоже, что после отправки комментария, выделение у авторских комментариев исчезает.

[TiGR]

Кое-что поменял, сейчас должно работать.

[hasty]

Напишу-ка я тогда комментарий.

И вообще, ставьте скрипту статус беты и заканчивайте завтра, на свежую голову :-)

[nps]

Поменял цвет на #aaa и всё равно не вижу другой фон =(
Оезьянка и лисичка новые, что может быть не так?

[TiGR]

Исправлено. Когда делал фикс для ff2 проверил в ff3 и оно работало. Сейчас перестало.

Видимо просто пора спать :)

P.S: исправлено.

[nps]

"Пора спать" исправлено? Спасибо, в общем)

Теперь попробую сам сообразить, чтоб оно только бортик раскрашивало (белый фон полезный), а пока поставлю #EAECEA, чтобы цветовую гамму сохранить)

[trisch]

не работает :(
фф3

[TiGR]

Пофиксил.

[trisch]

о, спасибо. обычные теперь показывает
а в кстати в рамке тоже не подсвечивает )

[TiGR]

Исправлено. Причём ведь пошёл спать, только закрыл глаза и сразу понял в чём дело. :)

[makis]

Спасибо за скрипт, работает в Опере 9.51. Только вот очень бледным цветом подсвечивает.

[TiGR]

Ну я совсем не дизайнер. Если есть предложения по цветовому решению — предлагайте, сделаем. :)

[makis]

Вообще-то я тоже далеко не дизайнер :(. Но для себя скрипт немного изменил. А именно добавил строку:
nicknames[id].parentNode.parentNode.style.border='1px dotted #FFCC66';
И вот что получилось.

Правда не знаю как себя поведёт скрипт с новыми комментариями. В JS Не силён.

[nps]

Спасибо, заменил на .borderRight='solid 2px #EAECEA' и теперь не отвлекает и заметно)

[TiGR]

Я специально не менял border, т.к. тогда не будут правильно выделены новые комментарии (в рамочках).

[Pure_BY]

Цвет сейчас приятный, неброский, ненавязчивый. Всё хорошо, так быть и должно :)

[homm]

… и невидный :) На Samsung 940N — точно.

[Pure_BY]

Возможно, у вас яркость слишком большая — сделайте поменьше, лучше видно будет, да и глазам спокойнее!
Ну или контраст поменяйте.

У меня понитор примерно вашего класса, тоже самсунговский, и мне видно еле-еле (т.е. так, как и нужно).

[ESQUELETO]

Предлагаю padding-left добавить к комментариевскому диву :-)

[MagaSoft]

UPDATE 4: Комментарии подмигивают и улыбаются.
Спасибо и за идею и за реализацию.

[Frosty]

Т.к. не могу создавать топики, то напишу идею здесь: Если уже открыта форма написания комментария, то ЗАБЛОКИРОВАТЬ НАХРЕН ЛИНК "НАПИСАТЬ КОММЕНТАРИЙ". Сидел сейчас писал коммент минут 5, изливался мыслями и по ошибке\промахнулся\тормознул\не выспался зелкнул вместо кнопки "написать" ссылку "написать комментарий" и полкчил чистое поле для комментирование, весь текст улетел, зря писал.... Естественно заного переписывать коммент западло, по этому вот, идея по улучшению юзабилити.

[homm]

А ты не мога обратно жамкнуть по кнопке «ответить»? Никуда твой текст не делся.

[ESQUELETO]

Я, чтобы выглядело еще получше, дабавил паддинг:
nicknames[id].parentNode.parentNode.style.padding='3px 0 3px 10px;

В сочетании с бордером — уже ничего :-)

[BekoBou]

Только кавычку в конце забыл, а так всё супер :)

«nicknames[id].parentNode.parentNode.style.padding='3px 0 3px 10px';»

[BekoBou]

Плюс те в карму! :)  TiGRу уже добавил.

[TiGR]

Добавил изменение padding в скрипт.

[proxor]

Работает. FF3.1pre. Спасибо огромное! :)

[lomalkin]

Ребята, спасибо за реализацию и за скорость =)

[lomalkin]

Работает! Opera 9.5, даже без установки greasemonkey =)

[IIIEB4YK]

Немного переделал — теперь подсвечивает (бледно-голубым) свои комментарии. Полужил куда попало.

[IIIEB4YK]

*Положил

[IIIEB4YK]

И да, меняйте цвета в самом скрипте — те, что использовал я, будут не на всех мониторах хорошо видны.

[hiro]

ставим greasemonkey если у вас FF https://addons.mozilla.org/ru/firefox/ad… , идём по ссылке установить http://userscripts.org/scripts/show/2999… и в правом верхнем углу жмём install script

[eugenga]

просто открыть файл скрипта в ФФ
имя должно быть **********.user.js

[luminox]

По моему есть недостаток - если ты автор топика, твои комментарии желтые, если не автор - голубые. Нет однозначности.
Изменил немного этот скрипт: теперь свои комментарии всегда подсвечиваются светло зеленым не зависимо от того, автор ты топика или нет. А в топиках с другими авторами, их комментарии – светло желтые.

Вот ссылка: http://slil.ru/25975767

[TiGR]

Добавил эту функцию в скрипт.

[eugenga]

Подсвечивать комменты избранных юзеров

var highlight_users = 'eugenga|TiGR' // в начало скрипта

// в середину функции в цикл for
if (nicknames[id].textContent.match(highlight_users) && nicknames[id].parentNode.parentNode.className != 'WriteCommentHolder') {nicknames[id].parentNode.parentNode.style.backgroundColor='#efe';}

[eugenga]

http://img503.imageshack.us/img503/5857/… для тех, кто любит закруглённые края :)

nicknames[id].parentNode.parentNode.setAttribute("style",'-moz-border-radius: 0.6em !important; -moz-outline: 1px solid #CCC !important; -moz-outline-radius: 0.6em !important; padding: 4px;');

nicknames[id].parentNode.parentNode.style.backgroundColor='#efe';

работает в ФФ, в остальных не знаю

[NAZGULhabr]

эй люди ...а как его добавить то этот скрипт и куда ? о_0

[GnaeusPompeius]

Спасибо, хороший скрипт. )

[NAZGULhabr]

расскажите как ставить его в Opera 9.52 если вам не сложно?

[eugenga]

Настройка - Дополнительно - Содержимое - Параметры JavaScripts - в самом низу указать папку, в которую потом будете сохранять скрипты.

[NAZGULhabr]

большое спасибо )

[NAZGULhabr]

только ничего не произошло ( .... может нужны еще какие-то манипуляции?

[eugenga]

Вообще-то я ФФ пользуюсь, сейчас проверил в Opera (9.51 for Linux) - работает, кроме стилей -moz-*
имя скрипта должно быть *.user.js
вы положили его в ту папку?

[NAZGULhabr]

да положил ! И переименовал так как вы написали --изменений нет

[eugenga]

http://img522.imageshack.us/img522/8372/…
Тогда не знаю, может JS выключено? В быстрых настройках. Всё, я на природу :)

[NAZGULhabr]

О всё пашет ! спасибо бобьшое !

[NAZGULhabr]

Всё! пашет спасибо большое за хелп !

[deex]

всегда считал что в подобных юзер-скриптах, первой строчкой должна быть проверка на имя хоста.
в нашем случае такая:

if(window.location.hostname == 'habrahabr.ru')

иначе скрипт будет с вами повсюду, на каждой странице каждого сайта.

[TiGR]

Такая инструкция уже есть в скрипте. И FF и Opera её корректно воспринимают.

[deex]

// ==UserScript==
// @name Highlight Topic Author Comments
// @namespace http://userscripts.org
// @description Highlights Topic Author's Comments
// @include http://*habrahabr.ru/*
// ==/UserScript==

window.addEventListener("load", function(e) {
if (document.getElementById('commentsdiv')) {
highlightAuthorsComments = function () {
if (document.getElementsByClassName == undefined)
document.getElementsByClassName = unsafeWindow.document.getElementsByClassName;
var authorHost = document.getElementsByClassName('user')[0].firstChild.host;
var nicknames = document.getElementsByClassName('comments_nickname');
for (id in nicknames) {
if (nicknames[id].host == authorHost && nicknames[id].parentNode.parentNode.className != 'WriteCommentHolder') {
nicknames[id].parentNode.parentNode.style.backgroundColor='#ffe';
}
}
}
highlightAuthorsComments();
document.addEventListener("DOMNodeInserted", highlightAuthorsComments, false);
}
}, false);


--------
где?
или Опера тоже воспринимает строку
// @include http://*habrahabr.ru/*
?

[TiGR]

Да, опера тоже воспринимает эту строку.

[deex]

но я использую оперу.

[wicharek]

Понимаю, что врядь ли кому-то понадобиться, но, если пользователь не залогинен в Хабре, то подсветка не работает.
Чтобы работала:

var memberHost = document.getElementsByClassName('hello_nickname')[0].host;

заменить на:

var memberHost;
if (hello_nickname[0] != undefined) {
memberHost = hello_nickname[0].host;
}

Для Opera 9.50/Linux заработало.

[TiGR]

Спасибо за сообщение о баге. Исправил.

[absolvo]

Вроде бы всё работает, спасибо!!

[ArMikael]

При запуске скрипта впервые в жизни вылетел скайп, ругнулся на код и помохал ручкой.
Система WinXP SP2 + FF3
Есть подозрение на этот самый скрипт.

[ArMikael]

Сама же идея просто чудесная. Жаль, что создатели не додумались до такой простой идеи.

[Pure_BY]

Есть одна проблема: после установки скрипта, если я оставляю комментарий в теме, то Опера после комментирования использует почти 100% CPU, сильно висит, и это проблема решается только закрытием Хабра.
Если самому не комментировать — то всё нормально.

Opera 9.5
Windows XP SP2

[TiGR]

Есть такое дело. Но там подвисание объясняется не столько скриптом, сколько поведением движка оперы.

И потом, по уму надо бы использовать DOMSubtreeModified, но Опера почему-то не хочет срабатывать по этому событию. Приходится использовать DOMNodeInserted, а он отрабатывает в опере дважды.

Вставил костыль, чтобы скрипт отрабатывал однократно.

P.S: пока со всем этим возился реально прочувствовал как быстро работают движки оперы, ff2 и ff3. И в данной ситуации ff3 рулит и бибикает отрабатывая в 20 раз быстрее оперы :) Правда после некоторых оптимизаций удалось сократить разрыв до 15 раз, но всё равно Опера огорчила...

[Pure_BY]

После UPD#8 проблема в моём браузере исчезла — после добавление комментария нагрузка на ЦП спадает до нормальной!

Спасибо большое :)

[TermiT]

Молодцы, так держать :)

[makis]

А всё-таки с бордером лучше :)

[TiGR]

Добавил рамочки. Только они в отличие от примера на скриншоте не заменяют серые рамки, обводящие новые сообщения. Так что новые сообщения от автора топика по-прежнему видны.

[DeadMoroz]

Симпатичненько :) Жалко, что только после загрузки раскрашивается. Может быть "load" на "DOMContentLoaded" заменить (хотя особой разницы не заметил)?

[max7]

Пишу комментарий, для проверки подсветки с закругленными уголками.

Р.S.: Вставил подсветку избранных юзеров и закругленные уголки как указал  eugenga.

[TiGR]

Кстати, я пока что не добавил подсветку избранных юзеров как тут приводилось лишь потому, что там используется регулярка, и это может дать о себе знать на темах с большим колличеством сообщений.
Я не добавил подсветку избранных юзеров, т.к. там юзается регулярка, и, имхо, на топиках с большим колличеством комментов это даст о себе знать.

А что касается закруглённых уголков, так та реализация частично ломает дерево сообщений, т.к. затирает атрибут style, а именно через него и указываются отступы.

[max7]

Как вариант можно сделать так:

//В начале скрипта
var highlight_topic_style =
'-moz-border-radius: 0.6em !important; '+
'-moz-outline: 1px solid #CCC !important; '+
'-moz-outline-radius: 0.6em !important; padding: 4px;';

function setHighlightTopicStyle(node){ node.setAttribute("style",node.getAttribute("style")+';'+highlight_topic_style);};


//Блоки "if" будут выглядеть так
if (...) { setHighlightTopicStyle(nicknames[id].parentNode.parentNode); nicknames[id].parentNode.parentNode.style. ..............

Но, работает как-то медленно.

[makis]

Я, конечно, уважаю FF, но всё-таки сам пользуюсь Оперой и думаю, что Ваш вариант может подойти лишь как хак для FF.

[max7]

ну да, просто я не очень в курсе как там со стилями в опере; я больше по FF; не бейте сильно :-)

[xllx]

Я сделал так

// 1 2 3 4 5
var highlightUsers = 'Shoohurt|deniskin|Aist|rossomachin|juks'.toString().split('|'.toString());
// 12345
var highlightColors = '||||'.toString().split('|'.toString());

и так

else
{
for (id2 in highlightUsers)
{
if (highlightUsers[id2] && nicknames[id].innerHTML == highlightUsers[id2] && nicknames[id].parentNode.parentNode.className != 'WriteCommentHolder')
{
nicknames[id].parentNode.parentNode.style.backgroundColor = highlightColors[id2] || '#fef';
break;
}
}
}

Работает нормально, при необходимости можно указать отдельный цвет для каждого юзера.

[max7]

var highlight_users_colors =
{
'Shoohurt': '#fef',
'deniskin': '#fef',
'Aist': '#fef',
'rossomachin': '#fef',
'juks': '#fef',
'eugenga': '#fef',
'TiGR': '#fef'
};

/*
.
.
.
*/

else{
for (id2 in highlight_users_colors){
if (nicknames[id].textContent.match(id2)){
setHighlightTopicStyle(nicknames[id].parentNode.parentNode);
nicknames[id].parentNode.parentNode.style.backgroundColor = highlight_users_colors[id2] || '#efe';
nicknames[id].parentNode.parentNode.style.padding='0px 5px';
nicknames[id].parentNode.parentNode.style.border='1px dotted #bbf';
break;
}
}
}

[makis]

А Вам не всё равно насчёт регулярки, которая исполняется не на сервере, а не компьютерах пользователей? Я думаю, что на данное время они не займут много процессорного времени на компах.

[max7]

А для подсветки юзеров можно как-нибудь так
xllx

// В начале скрипта
var highlight_users_colors =
{
'Shoohurt': '#fef',
'deniskin': '#fef',
'Aist': '#fef',
'rossomachin': '#fef',
'juks': '#fef',
'eugenga': null,
'TiGR': null
};

// блоки if-else
else{
for (id2 in highlight_users_colors){
if (nicknames[id].text == id2){
setHighlightTopicStyle(nicknames[id].parentNode.parentNode);
nicknames[id].parentNode.parentNode.style.backgroundColor = highlight_users_colors[id2] || '#efe';
nicknames[id].parentNode.parentNode.style.padding='0px 5px';
nicknames[id].parentNode.parentNode.style.border='1px dotted #bbf';
break;
}
}
}

[max7]

пардон
лучше так:

//В начале
var def_color = '#efe';

var highlight_users_colors =
{
'Shoohurt': '#fef',
'deniskin': '#fef',
'Aist': '#fef',
'rossomachin': '#fef',
'juks': '#fef',
'eugenga': def_color,
'TiGR': def_color
};

//блоки if-else
if (typeof nicknames[id] == 'function')
continue;
else if(nicknames[id].parentNode.parentNode.className != 'WriteCommentHolder'){
if (nicknames[id].text == memberName) {
setHighlightTopicStyle(nicknames[id].parentNode.parentNode);
nicknames[id].parentNode.parentNode.style.backgroundColor='#f8f8ff';
nicknames[id].parentNode.parentNode.style.padding='0px 5px';
nicknames[id].parentNode.parentNode.style.border='1px dotted #bbf';
}
else if (nicknames[id].text == authorName) {
setHighlightTopicStyle(nicknames[id].parentNode.parentNode);
nicknames[id].parentNode.parentNode.style.backgroundColor='#ffe';
nicknames[id].parentNode.parentNode.style.padding='0px 5px';
if (nicknames[id].parentNode.parentNode.className != 'comment_item_new') {
nicknames[id].parentNode.parentNode.style.border='1px dotted #eea';
}
}
else if ( highlight_users_colors[nicknames[id].text] ){
setHighlightTopicStyle(nicknames[id].parentNode.parentNode);
nicknames[id].parentNode.parentNode.style.backgroundColor = highlight_users_colors[nicknames[id].text] || '#efe';
nicknames[id].parentNode.parentNode.style.padding='0px 5px';
nicknames[id].parentNode.parentNode.style.border='1px dotted #bbf';
}
}

[Austinate]

Спасибо, отличный скрипт.
Вот только смотрю автору спать уйти не дают :)

[max7]

НЕСПАТЬ %-D

[Austinate]

Не_сплю :)

[Pure_BY]

Кстати, раз уж вы такой успешный скрипт для работы с комментами создали,, не могли бы вы ещё одну фичу туда добавить, но из немножечко другой оперы: чтоб комментарии по Ctrl+Enter добавлялись! Можно? :)

[TiGR]

А почему бы не использовать tab-tab-enter или tab-tab-space (последнее делается одной левой)?

[Pure_BY]

Идея! Спасибо :)

Но всё равно руки чешутся на Ctrl+Enter нажать, уже прилизанное клавосочитание. Хотя tab+tab+space тоже неплохое, буду привыкать.

[max7]

userscripts.org/scripts/show/32113
Конечно, стили — дело вкуса. А алерты — просто ради прикола.