Кармад***р
Пришлось мне тут посидеть в глубокой карма-яме. Как для новичка, для меня это было очень эмоциональное переживание, карму хотелось отслеживать каждую секунду. Делать это удобнее всего с помощью firefox extension, которое называется habraholic (автор Semenov, спасибо огромное, добрый человек!). Но меня как-то очень не устраивал вид индикаторов — черные безликие, суровые (для меня) цифры.
Хотелось какого-то праздника, а тут на глаза попался топик по написанию расширений для Firefox. Сел разбираться, что да как...
habraholic.xpi
.xpi — это .zip. Переименовываем, и распаковываем. Получаем расширение в виде папок и файлов. Все, что нужно править, находится в папке ../chrome/content
Xul, label, chrom
Для начала обнаружил, что карма и рейтинг выводятся в статусбар одной строкой. А красить надо в разные цвета. Значит надо разбить лейбл на три лейбла (карма, рейтинг, позиция). Открываем файл panel.xul, в котором описаны наши объекты, и добавляем к уже прописанному лейблу еще два, с уникальными названиями:
<label id="habraholickarma" value="Хабрахабр!" tooltiptext="Щелкните, чтобы настроить." onclick="habraholicLeftClick(event)"/>
<label id="habraholicrating" value="Хабрахабр!" tooltiptext="Щелкните, чтобы настроить." onclick="habraholicLeftClick(event)"/>
<label id="habraholicposition" value="Хабрахабр!" tooltiptext="Щелкните, чтобы настроить." onclick="habraholicLeftClick(event)"/>
* This source code was highlighted with Source Code Highlighter.Я просто скопировал строку три раза, поэтому у меня когда не задано имя пользователя в статус-баре написано «Хабрахабр! Хабрахабр! Хабрахабр!». Вполне соответствует моему настроению за последние три дня.
Хабрастайл
Для добавления настройки, которая будет включать/выключать Хабрастиль, нужно открыть файл prefs.xul, который описывает окно настроек. Добавляем к чекбоксу «Не показывать позицию в рейтинге» еще один:
<checkbox id="habraholic-hideRatingPosition" preference="habraholic-hideRatingPosition-pref" label="Не показывать позицию в рейтинге"/>
<checkbox id="habraholic-habrastyle" preference="habraholic-habrastyle-pref" label="Хабра-стиль для индикаторов"/>
* This source code was highlighted with Source Code Highlighter.
Итог:
Был в шоке от того, насколько это просто.
CSS? CSS!
Так, у нас есть три текстовых блока — лейбла, и они показываются черным шрифтом размером 13 пунктов. Как раз это мы и решили править. Будем применять стили к каждому лейблу свой. Только чтобы применить стиль, надо знать, какой стиль ты хочешь применить. Мне в обретении этого знания очень помогло расширение для FF CSS Viewer. После его установки просто наводишь мышку на элементы страницы и оно показывает, какие к элементу применены стили. Идем на Хабру…
Карма: цвет #66CC66, размер 36px, семейство шрифтов Verdana,sans-serif
Рейтинг: цвет #3399FF, размер 36px, семейство шрифтов Verdana,sans-serif
Позиция: цвет #777777, размер 14px, семейство шрифтов Verdana,sans-serif
Сейчас же у меня пока весь текст уныло вот такой:
Позиция: цвет black, размер 13px, семейство шрифтов Verdana,sans-serif
Для того, чтобы знать — включен или выключен стиль в настройках, добавим функцию habraholicIsHabraStyle(), которая один в один копирует функцию habraholicIsRatingPositionHidden(), за исключением идентификатора контрола, значение которого она возвращает.
Дальше просто — сразу после вывода текста в лейблы применяем стили к этим самым лейблам:
if(habraholicIsHabraStyle())
{
document.getElementById("habraholickarma").style.color = "#66CC66";
document.getElementById("habraholickarma").style.fontSize = "36px";
document.getElementById("habraholicposition").style.fontFamily = "Verdana,sans-serif";
} else {
document.getElementById("habraholickarma").style.color = "black";
document.getElementById("habraholickarma").style.fontSize = "13px";
}
* This source code was highlighted with Source Code Highlighter.
Сколько знаков после запятой?
Вроде бы все хорошо, да что-то не хорошо. Хабра api возвращает нужные нам значения немного не в формате. Например у меня было "-10 -57.6", а в моем хабрацентре уже все по-другому и красиво: "-10,00 -57,60". Я инженер, и не привык нулями раскидываться, даже если они стоят справа. В общем, добавляем функцию, которая бьет полученные значения по точке, добавляет запятую вместо точки и один-два ноля. Для точности.
function addCommas(nStr)
{
nStr += '';
var x = nStr.split('.'); //разбиваем строку по точке
var x1 = x[0]; //целая часть числа
if (x.length - 1) if (!(x[1].length - 1)) x[1] += '0'; //если в числе была и целая и дробная часть, а дробная состояла только из одной цифры, приписываем дробной части сзади нолик
var x2 = x.length > 1 ? ',' + x[1] : ',00'; //Если не было дробной части - пишем два ноля после запятой, если была - пишем ее
return x1 + x2;
}
* This source code was highlighted with Source Code Highlighter.
Вот и все:
Внимание, вопрос
Почему в приведенном примере не работал метод .toFixed, например x.toFixed?
