Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-13.log failed

現在位置: start » study » javascript » jquery » plugin » monitor

目次

jQuery plugin for monitoring idle state

前に、dojoで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ステートになる。

デモはdemo pageから確認できる。

<html> <iframe width=“100%” height=“300” src=“jsfiddle.net/loliqoop/5Rnjm/5/embedded/” allowfullscreen=“allowfullscreen” frameborder=“0”></iframe> </html>


トレース: • monitor