フィルター機能があります。
指定したキーワードなどで表示する日付をフィルタリングして表示する事で
探す手間がが省けます。
この機能を実装する事で通常の日付に対してタスクを登録するという使い方だけでなく
タスクに対して日付を表示、変更するという逆の使い方が可能になります。
前の記事のライブラリもフィルター機能実装時に使うことを考えて作成しました。
フィルター機能として色々なパターンを考えていますが、今回は簡単なタスクを登録した
日付のみを表示するフィルター機能を実装してみました。
htmlやaddEventListenerはいつもの事なので省略して実際に表示を切り替えている
部分のソースを解説します。
[scheduler.js]
//タスク登録日のみチェックボックス押下イベント
ctr.onFilterOfTasks = function(){
if(ById("taskExist").checked){
var childs = ById('day_pos').childNodes;
//一旦全部非表示
FUNC.chain(childs).filter(model.filterOfArray)
.callEach(function(i,k,v){ v.style.display = "none";});
//タスクがある行のみ表示
FUNC.chain(childs).filter(model.filterOfArray)
.filter(function(i,k,v){
for(var i = 0; i < model.taskList.length; i++){
if(model.taskList[i].day === v.id){ return true};
}
return false;
})
.callEach(function(i,k,v){ v.style.display = "block";});
} else {
var childs = ById('day_pos').childNodes;
//全部表示
FUNC.chain(childs).filter(model.filterOfArray)
.callEach(function(i,k,v){ v.style.display = "block";});
}
view.filterClose();
};
[解説]
チェックボックスの状態を見てチェックされていた場合は全ての日付を
一旦非表示にした後、タスクの存在する日付のみ表示しています。
FUNC.chainは前回まで解説した自作ライブラリですが、配列やハッシュの
フィルタリングや全要素に対しての関数呼び出しなどを行えます。
※common.jsと名前空間が重なる為、FUNCに変更しました
model.filterOfArrayというのも前回解説した関数で配列からlengthやitemといったプロパティを
除外するのに使っています。
callEachでは配列内の各要素ごとに引数で渡している関数を呼び出しますが
ここではCSSのstyle属性を切り替えています。
実行した所の画面はこんな感じです。
タスクを登録した日が少ない場合、大分探しやすくなります。
