無料ブログ「rentafree.net」の管理人ブログ

ブログエディターのポップアップ領域の座標調整を行いました

ブログエディターのポップアップ領域を、
今までは常にイベント発生位置が左上座標になる位置に表示され、領域移動はブラウザウインドウからはみ出すことも可能で、
画面サイズが大きければ表示時点ではみ出すことも少なく、PCの場合はマウス形状により領域が移動可能なことがわかりやすいので問題ないと考えていましたが、
小型のタッチパネル端末での編集を考えた場合、
表示時点で画面からはみ出す可能性が高く、タッチパネル操作だと領域が移動可能なこともわかりにくいので、

表示時に右端及び下端がはみ出す場合は、左端及び上端がはみ出さない範囲で位置調整をし、
領域移動の際はウインドウからはみ出す位置への移動は出来なくしました。


変更はFirefoxのみに適用されます。

ブログエディターの色選択ツールを修正しました

以前より当ブログで書いておりましたが、
Firefoxに<input type="range">が実装されたらブログエディターの色選択ツールで使用しようと考えておりましたが、
Firefox 23(現Beta)で有効になりましたので修正しました。

元々は色選択ツールのスライダー(マウスドラッグで数値を選択するUI)を独自に実装しておりましたが、
<input type="range">で簡単かつブラウザ標準UIで実装可能になりましたので採用です。
この変更だけでブログエディターが1.5kBほど小さくなりました。

今回の変更で、
元々はマウスの移動時に色表示を変更していましたが、数値の変更時に色表示を変更するようになったため、
スライダーからマウスを離すまで色表示が変更されなくなりました。

この変更はFirefoxのみ影響します。
Firefox 23は現Betaのため、Firefox22では現状スライダーが表示されなくなりましたが、数値の直接入力で色を変更することはできます。