====== jQuery plugin for monitoring idle state ======
前に、dojoで**[[study:javascript:dojo:monitor|idle state]]**を監視するクラスを作成してみたが、今回は同じソースをjQuery pluginで作成してみた。\\
plugin化するにあたって、optionの設定ができることと、activeステートとidleステートの際のcallbackメソッドを\\
overrideできるようにすることを目標にした。
これを元に機能を拡張していきたいと思う。
===== code snippet =====
ソースは簡単だが、コードの一部分を次に示す。
(function($) {
$.extend($.fn, {
monitor: function(options){
// check if a monitor was already created
var monitor = $.data(this[0], 'monitor');
if ( monitor ) {
return monitor;
}
monitor = new $.monitor( options, this[0] );
$.data(this[0], 'monitor', monitor);
return monitor;
}
});
// constructor for monitor
$.monitor = function( options, target) {
this.settings = $.extend( true, {}, $.monitor.defaults, options );
this.target = target;
this.init();
};
$.extend($.monitor, {
defaults:{
timeout : 500,
events : [scroll]
},
setDefaults: function(settings) {
$.extend($.monitor.defaults, settings );
},
prototype: {
init: function(){
this._idleTime = null;
this._timer = null;
this._state = "on";
this.idleTime = null;
this.initObservers(this.target, this.settings.events);
this.setTimer(this.target);
},
initObservers: function(target, events){
var oj = this;
$.each(events, function(i, e){
$(target).bind(e, function(event){
oj.onInterrupt(target, event);
});
});
},
onInterrupt: function(target, event){
this.idleTime = new Date() - this._idleTime;
$(target).bind("state:active", function(){}).trigger("state:active", $.monitor.onActive(this.idleTime));
this.setTimer(target);
},
setTimer: function(target){
clearTimeout(this._timer);
if(this._state=="on"){
this._idleTime = new Date();
this._timer = setTimeout(function(){
$(target).bind("state:idle", function(){}).trigger("state:idle", $.monitor.onIdle());
},this.settings.timeout);
}
}
},
onMonitor : function(){
this._state = "off";
},
offMonitor : function(){
this._state = "on";
},
onIdle: function(){
return false;
},
onActive: function(args){
return false;
}
});
})(jQuery);
optionsはtimeout時間（defaultで1000ms）と登録するイベント（defaultでscrollイベント)が指定できる。\\
dojoで作成したときは、登録するターゲットとイベントを共に指定したが、jQueryはターゲットを指定してからpluginで
メソッドを呼び出すため、分離することにした。\\
メソッドの呼び方については後ほど説明する。
使う際にはonActiveメソッドとonIdleメソッドをoverrideする必要がある。基本的には何もしないことにしている。
===== demo page =====
pluginを呼び出す部分を次に示す。
//override default onActive method
$.monitor.onActive = function(args){
$("p").css("opacity",1);
debug("active... after: " + args + "ms");
};
//override default onIdle method
$.monitor.onIdle = function(){
$("p").css("opacity",0.2);
debug("idle...");
};
$(function(){
$(document).monitor({timeout: 5000, events:['mousemove','keydown']});
$(window).monitor({events:['resize','scroll']});
});
基本的に
defalutメソッドであるonActiveメソッドとonIdleメソッドをoverrideしてから、monitorメソッドを呼び出す。\\
デモページでは、documentに対してtimeout５秒を指定してある。windowのりサイズイベントとスクロールイベントに対しては
defaultの１秒がたったらIdleステートになる。
デモは[[http://ria-web.info/test/jQuery/demo/demo01.html|demo page]]から確認できる。\\