InPlaceEditorをダブルクリックで使う

Posted by joeartsea on 2009-03-17

CakePHPのAjaxヘルパーにEditorというメソッドがあります。文字をクリックしたら編集できるようになるアレです。PHPによる JavaScriptを書かないAjaxの「編集可能なテキスト」が良いサンプルです。これとドラッグ&ドロップでデータを並び替えるで使っているSortableの両方を実装する要件がありました。つまりドラッグ&ドロップでソートしつつクリックすると文字を編集できるようにするということです。

今回はドラッグ&ドロップでデータを並び替えるのサンプルコードを基本にしてEditorのコードを付け加えていく形でコードを書きました。

views/fruits/index.thtmlのhiddenの下に以下のコードを追加

1
<?php e($ajax->editor(&#39;edit_&#39; . $data[$model][&#39;id&#39;], &#39;edit/&#39; . $data[$model][&#39;id&#39;])); ?>

controllers/fruits_controller.phpに以下のメソッドを追加

1
2
3
4
5
6
7
8
9
10
function edit()
{
$this->layout = &#39;ajax&#39;;
$m = $this->Fruit;
$m->id = $this->params[&#39;pass&#39;][0];
$postdata = Array();
$postdata[&#39;name&#39;] = $this->params[&#39;form&#39;][&#39;value&#39;];
$m->save($postdata);
$this->set(&#39;content&#39;, $postdata[&#39;name&#39;]);
}

以下のようなコードのviews/fruits/edit.thtmlを追加

1
<?php e($content); ?>

とりあえずこれでSortableとEditorの両方を動作させることは可能です。しかしドラッグしてドロップした瞬間シングルクリック扱いとなって文字列の編集フォームが開いてしまいます。意図しないところでEditorの機能が動き出してしまってとてもウザい状態になります。

Draggable と InplaceEditorを組み合わせるとかを参考にして少し試行錯誤しましたがCakePHPを使って実現するとなると難しいですね。考えればできるかもしれませんがそこまで考えたくなかったので却下。で、ごく単純にEditorがダブルクリックで動いてくれれば問題ないことに気づき色々情報を漁った結果、scriptaculous.js(Script.aculo.us:バージョン1.8.2)を編集することにしました。

実際にイジるファイルはcontrols.jsでバージョン1.8.2だと931行目あたり。とりあえず直書き…w

1
2
//click: &#39;enterEditMode&#39;, //←コメントアウト
dblclick: &#39;enterEditMode&#39;, //←dblclickに変更