チェックボックスがチェックされた時に JavaScript を実行する - CheckboxPlugin (2)

チェックボックス機能を追加するプラグイン「CheckboxPlugin」のパート2として、チェックされた時に JavaScript を実行する機能をご紹介。

書式

[x{javascript}{javascript}{javascript}]

JavaScript コードの記述箇所は3つあります。それぞれ以下のカスタマイズ処理を記述します。

1. 初期化処理
2. クリック後の前処理
3. クリック後の後処理

カスタマイズしない場合は対応する javascript 部分が省略できます。
例えば、初期化処理をカスタマイズしない場合は、以下のように記述します。

[x{}{javascript}] or [x{}{}{javascript}]

使用例

チェックボックスがチェックされた日付を tiddler のテキストに追加するサンプルコードです。

チェックボックスの記述

タスク毎の tiddler の中に、以下のように記述します。

[_{checkboxInit()}{checkboxClickBefore()}] 本日分

JavaScriptコードの記述

「チェックボックスの記述」から呼び出される関数は、以下のように別の tiddler に記述します。

タイトル: CheckboxPluginHandlers *1
テキスト:

//{{{
function checkboxInit() {
	var tiddler = store.getTiddler(place.srctid);
	var todayString = new Date().formatString("YYYY/0MM/0DD");
	place.checked = tiddler.text.indexOf(todayString) != -1 ? true : false;
}

function checkboxClickBefore() {
	if (place.checked) {
		var tiddler = store.getTiddler(place.srctid);
		var todayString = new Date().formatString("YYYY/0MM/0DD");
		if (tiddler.text.indexOf(todayString) == -1) {
			tiddler.text=tiddler.text + "\n" + todayString;
		}
	}
}
//}}}

タグ: systemConfig

上記のコードを組み込むと、以下のことが実現できます。

• チェックボックスをチェックするだけで実施日を記録できます。
• 実施済の場合(本日の日付が記述されている場合)は、チェックボックスがチェックされて表示されます。

*1:既にこのタイトルの tiddler が存在する場合は、他のタイトルでも構いません