blog@longkey1.net

自前でブログシステムを作ったので、編集機能なんて皆無。
で、WYSIWYGエディタなるものはもっさりするで、タグを挿入出来るような簡単なものをJavascriptで作って使っていた。

Firefoxをメインで使っているので、Firefoxしか対応してないけど晒してみる。

function pack_tags(tags)
{
	/* この機能は今のところMozilla系しか対応してません！ */

	// タグの生成
	tags_sta = '<'  + tags + '>';
	tags_end = '</' + tags + '>';

	// テキストエリアのエレメントを取得
	var contents = document.getElementsByName("contents")[0];

        // スクロール位置を取得
	st = contents.scrollTop;

	// カーソル位置を取得
	sn = contents.selectionStart;
	en = contents.selectionEnd;

	// 選択している文字列より前後の部分を取得
	before	= contents.value.substring(0,sn);
	after	= contents.value.substring(en,contents.value.length);

	// 選択している文字列を取得して、前後にリンクタグを埋め込む
	string	= contents.value.substring(sn,en);
	result	= tags_sta + string + tags_end;
	contents.value = before + result + after;

	// カーソル位置を移動
	contents.scrollTop = st;
	contents.setSelectionRange(sn, sn);
}

やっていることはコメント見れば大体わかるかな。
いちいちスクロールの場所を覚えておいて、再度最後にセットしてあげないと先頭にスクロールしてしまうってのが、なんだか面倒だなーと思った。

これで

onClick="pack_tags('pre')"

みたいな感じでリンクとか張って呼び出してあげると、選択した部分をpreタグ囲ってくれる。

僕にはこんなもんで十分かな。

checkpadみたいな、javascriptでドラッグ＆ドロップで並び替えをやれないかとやってみた。
出来ればscript.aculo.usで。

以下のサイトを参考にした。
Never Ever - ドラッグ＆ドロップで並び替え

こういうオーソドックスなリストなら出来ることはわかった。
が、僕がやりたいのは、横にも縦にも並んだリスト。
幅を決めちゃって、自動で折り返しさせてしまうようなもの。

で、リストタグを横に並ばせる方法は、
(1) liをdisplay:inlineする。
(2) liをfloat:leftする。

の大きく分けて二つらしい。

なんとなく(1)の方がよさそうだったので、そちらでリストを横並びしてみると、うまくドロップ＆ドラッグが出来ない。
どうも、liがinlineだと上手く動かないっぽい。
位置がずれちゃったり、上手く反応しなかったり。
なんか座標の認識がずれてるのかな。

そこで、試しに(2)の方法でやったらうまくいった。

確かに以下のサイトでは、inlineでやってるけど、んー。
【連載】いまからはじめるScript.aculo.us (4) ドラッグ&ドロップを応用した画面コンポーネント | エンタープライズ | マイコミジャーナル

で、試しに

overlap    : 'horizontal',
constraint : 'horizontal'

って制限させたら、多少安定したくさい。
実際は縦にも動くし（自動で折り返しているだけだからだと思われる）

ようわからんなー。
ま、こういうドラッグ＆ドロップ系はinlineは結構はまりやすいのは確かだと思うけど。

＋＋で足すと同時に代入した時の値が、僕の予想と違ったのでメモ。

$num = 1;
$num_new = $num++;

echo $num;     // 2が表示される
echo $num_new; // 1が表示される

javascriptで見つけてPHPでも検証したら同じだった。

ちなみに

$num = 1;
$num_new = $num + 1;

echo $num;     // 1が表示される
echo $num_new; // 2が表示される

とこちらは予想通り。

今日始めて知ったけど、ちょっと間違えちゃいそうで怖いので使わないな。
これだから我流は怖い。

javascriptのsetTimeoutのリファレンス見るとこんな風に書かれている。

setTimeout(関数名,ミリ秒)

で関数に引数を持たせたい場合どうすんだって話になって検索したら、

setTimeout('sample("' + hoge + '")',1000);

そういわれるとなるほどって感じね。
多分、こういう指定の仕方、至るところに出てくると思われるのでメモ。

javascriptでの配列の指定の仕方で躓きました。

if (hoge.hoge.hoge) {
}

みたいなことをしたらIEではエラーになりました。

if (hoge['hoge']['hoge']) {
}

ってしたらエラーでんくなった。

もうIEとFirefox好い加減揃えて欲しいわ。