Dyrk

/*
*		 User Activity Tracking
*		(c) Dyrk.org 2019 - 2020
*
*
*/

var  userActivityTracker = {
		 mouse : [],
		 t : (new Date()).getTime(),
		 lastCursorPosition:null,
		/*
		*
		*	Effectuer une action de la souris
		*
		*/
		drawPixel :function(color, x,y, size, el){
			px = document.createElement('div');
			px.setAttribute('style', 'z-index:999999999;opacity:0.5;background:'+color+';height:'+size+'px;width:'+size+'px; position:absolute;left:'+x+'px;top:'+y+'px;border-radius:20px');
			document.getElementsByTagName('html')[0].appendChild(px);
			if (el.click) el.target.click();
			setTimeout((function(el){ el.parentNode.removeChild(el); }).bind(null, px), 2500);
		},
		/*
		*
		*	Effectuer une saisie clavier
		*
		*/	
		writeKeyboard : function(target){
				var  	s 		= new XMLSerializer(), 
						items 	= document.getElementsByTagName(target.identifier.type),
						search 	= decodeURIComponent(atob(target.identifier.matchHTML));
				for (var i in items){
					if (typeof items[i] != 'object') continue;
					var strTmp = s.serializeToString(items[i]);
					if (strTmp == search){
						items[i].value += target.recordValue;
					}
				}
		},
		/*
		*
		*	Effectuer un scroll
		*/
		scroll :function(e){
			document.getElementsByTagName('html')[0].scrollTo(e.scrollLeft , e.scrollTop)
		},
		/*
		*
		*	Télécharger l'activité de l'utilisateur
		*/
		downloadUserWay : function(){
			var a = document.createElement('a');
			a.setAttribute('href', 'data:text/csv,'+encodeURIComponent(JSON.stringify(userActivityTracker.mouse)));
			a.setAttribute('download', 'recorder.txt');
			a.click();
		},
		
		/*
		*
		*	Rejouer l'activité de l'utilisateur
		*
		*/
		drawUserWay : function(){
			document.getElementsByTagName('html')[0].scrollTo(0 , 0);
			userActivityTracker.mouse.map (e=>{
				switch (e.recordType){
					case 'mouse':
						setTimeout(userActivityTracker.drawPixel.bind(null, e.color, e.positionX, e.positionY,e.size, e), e.time);
					break;
					case 'keyboard' :
						setTimeout(userActivityTracker.writeKeyboard.bind(null, e), e.time);
					break;
					case 'scroll' :
						setTimeout(userActivityTracker.scroll.bind(null, e), e.time);
					break;
				}
			});
		},
		/*
		*
		*	Démarrer un enregistrement de l'activité de l'utilisateur
		*	@time : durée d'enregistrement
		*
		*/
		initRecord : function(time){
			var listener = [], x = document.getElementsByTagName('html')[0];
			document.getElementsByTagName('html')[0].scrollTo(0 , 0);
			//Met en place tous les listeners
			listener.push(x.addEventListener('mousemove', function(e){
				e.color 	= '#000';
				e.size  	=  5;
				e.recordType = 'mouse';
				e.positionX	= 	e.pageX ;
				e.positionY	=	e.pageY;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
				userActivityTracker.lastCursorPosition = e;
			}));
			listener.push(x.addEventListener('click', function(e){
				e.color 	= '#452FFE';
				e.size  	=  15;
				e.recordType= 'mouse';
				e.click		= true;
				e.positionX	= 	e.pageX ;
				e.positionY	=	e.pageY;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
				lastCursorPosition = e;
			}));
			listener.push(x.addEventListener('keyup', function(e){
				var s = new XMLSerializer(), str = s.serializeToString(e.target),
				type = e.target.nodeName;
				e.identifier = {matchHTML: btoa(encodeURIComponent(str)), type:type};
				e.recordType = 'keyboard';
				e.recordValue = e.key;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
			}));
			listener.push(window.addEventListener('scroll', function(e){
				e.recordType = 'scroll';
				e.scrollTop  = document.getElementsByTagName('html')[0].scrollTop;
				e.scrollLeft  = document.getElementsByTagName('html')[0].scrollLeft;
				e.time		= (new Date()).getTime() - userActivityTracker.t;
				userActivityTracker.mouse.push(e);
				if (userActivityTracker.lastCursorPosition) userActivityTracker.mouse.push(userActivityTracker.lastCursorPosition);
			}));
			
			//Fonction qui met fin à l'enregistrement
			setTimeout( function(){ 
				listener.map (function(e){ clearInterval(e); })
				console.log("enregistrement terminé");
				//userActivityTracker.downloadUserWay();
				//userActivityTracker.drawUserWay();
			}, time);
	}
};

userActivityTracker.initRecord(30000);

userActivityTracker.drawUserWay();

userActivityTracker.downloadUserWay();

userActivityTracker.mouse = JSON.parse('  Contenu du fichier généré par la fonction downloadUserWay ');

userActivityTracker.drawUserWay();