カルマゴリカのハブラスティル

カルマド*** p


私はここで深いカルマの穴に座らなければなりませんでした。 初心者として、私にとってそれは非常に感情的な経験でした、私はカルマを毎秒追跡したかったです。 これは、 habraholicと呼ばれるfirefox拡張機能を使用して最も便利に行われます(著者Semenov 、ありがとうございました、親切な人!)。 しかし、私は何らかの形でインジケータの外観にあまり満足していませんでした-黒い顔のない、厳しい(私にとって)数字。

ある種の休日を望んでいましたが、 Firefoxの拡張機能の作成に関するトピックに出会いました 。 彼は何をどのように把握するために座った...

habraholic.xpi


.xpiは.zipです。 名前を変更して解凍します。 フォルダーとファイルの形式で拡張子を取得します。 編集する必要があるのは../chrome/contentフォルダーにあります

Xul、ラベル、クロム


まず、カルマと評価がステータスバーに1行で表示されることがわかりました。 そして、異なる色でペイントする必要があります。 そのため、ラベルを3つのラベル(カルマ、評価、位置)に分割する必要があります。 オブジェクトを記述したpanel.xulファイルを開き、すでに登録されているラベルに一意の名前でさらに2つ追加します。

< 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 .


行を3回コピーしただけなので、ステータスバーにユーザー名がない場合は、「Habrahabr! ハブラハブル! Habrahabr!」。 過去3日間の気分に合っています。

ハブラスタイル


Habrastilを有効/無効にする設定を追加するには、設定ウィンドウを説明するprefs.xulファイルを開く必要があります。 「評価に位置を表示しない」チェックボックスにもう1つ追加します。

< 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 .
< 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!


したがって、3つのテキストブロック(ラベル)があり、それらは13ポイントの黒いフォントで表示されます。 これがまさに編集することにしたものです。 各ラベルにスタイルを適用します。 スタイルを適用するだけで、どのスタイルを適用するかを知る必要があります。 FF CSS Viewerの拡張機能は、この知識を得るのに大いに役立ちました。 インストール後、ページ要素にカーソルを合わせると、要素に適用されているスタイルが表示されます。 ハブラに行きましょう...

Karma:色#66CC66、サイズ36ピクセル、Verdanaフォントファミリー、サンセリフ
評価:色#3399FF、サイズ36ピクセル、Verdanaフォントファミリー、サンセリフ
位置:色#777777、サイズ14ピクセル、Verdanaフォントファミリー、サンセリフ

さて、今のところ、私のテキストはすべてこのように憂鬱です:

位置:黒色、サイズ13ピクセル、Verdanaフォントファミリー、サンセリフ

設定のスタイルがオンまたはオフになっているかどうかを知るために、habraholicIsHabraStyle()関数を追加します。この関数は、habraholicIsRatingPositionHidden()関数を1つずつコピーします。ただし、コントロール識別子は値を返します。

残りは簡単です-テキストがラベルに出力された直後に、これらのラベルにスタイルを適用します。

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 .


小数点以下何桁ですか?


すべてが良いように見えますが、何かが良くありません。 Habra APIは、少しフォーマットが必要な値を返します。 たとえば、「-10 -57.6」があり、habracentreのすべてが異なり、美しい「-10.00 -57.60」です。 私はエンジニアであり、たとえ右にゼロがあっても、ゼロを投げることには慣れていません。 一般に、取得した値をポイントでヒットし、ポイントの代わりにコンマを追加し、1つまたは2つのゼロを追加する関数を追加します。 正確さのため。

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 .


それだけです:


注意、質問


上記の例で、x.toFixedなどの.toFixedメソッドが機能しなかったのはなぜですか?

Source: https://habr.com/ru/post/J73556/


All Articles