front_idill/src/mosaic/js/pointers.js
changeset 45 0e29ae4568a0
parent 44 8393d3473b98
child 47 4e1ee94d70b1
equal deleted inserted replaced
44:8393d3473b98 45:0e29ae4568a0
     1 /*
     1 /*
     2  * Affiche les pointeurs.
     2  * Affiche les pointeurs.
     3 */
     3 */
     4 mosaic.prototype.addPointers = function()
     4 mosaic.prototype.addPointers = function()
     5 {
     5 {
       
     6 	if(this.mouseInteractions)
       
     7 	{
       
     8 		return;
       
     9 	}
       
    10 	
     6 	var mainPointer = '<div id="mainPointer" class="pointers"></div>';
    11 	var mainPointer = '<div id="mainPointer" class="pointers"></div>';
     7 	var secondPointer = '<div id="secondPointer" class="pointers"></div>';
    12 	var secondPointer = '<div id="secondPointer" class="pointers"></div>';
     8 	$('body').append(mainPointer + secondPointer);
    13 	$('body').append(mainPointer + secondPointer);
     9 	
    14 	
    10 	$('#secondPointer').css(
    15 	$('#secondPointer').css(
   179 	else
   184 	else
   180 	{
   185 	{
   181 		this.mainPointerLastY = y;
   186 		this.mainPointerLastY = y;
   182 	}
   187 	}
   183 	
   188 	
   184 	var pointerX = x - $('#mainPointer').width()/2, pointerY = y - $('#mainPointer').height()/2;
   189 	var pointerX, pointerY;
       
   190 
       
   191 	if(this.mouseInteractions)
       
   192 	{
       
   193 		pointerX = x;
       
   194 		pointerY = y;
       
   195 	}
       
   196 	else
       
   197 	{
       
   198 		pointerX = x - $('#mainPointer').width()/2;
       
   199 		pointerY = y - $('#mainPointer').height()/2;
       
   200 	}
   185 	var _this = this;
   201 	var _this = this;
   186 	
   202 	
   187 	$('#mainPointer').css(
   203 	$('#mainPointer').css(
   188 	{
   204 	{
   189 		top: pointerY,
   205 		top: pointerY,
   232 		
   248 		
   233 		//Si on se trouve actuellement dans une recherche par gestures.
   249 		//Si on se trouve actuellement dans une recherche par gestures.
   234 		// /!\ // RAJOUTE EN ATTENDANT UN GESTE DE CANCEL.
   250 		// /!\ // RAJOUTE EN ATTENDANT UN GESTE DE CANCEL.
   235 		if(this.isMosaicFiltered && !this.isMosaicFiltering)
   251 		if(this.isMosaicFiltered && !this.isMosaicFiltering)
   236 		{
   252 		{
   237 			console.log('CHECK IF ON NOTIFY GESTURE');
   253 			//console.log('CHECK IF ON NOTIFY GESTURE');
   238 			this.checkIfPointerIsOnSearchNotification(pointerX, pointerY, $('#mainPointer'));
   254 			this.checkIfPointerIsOnSearchNotification(pointerX, pointerY, $('#mainPointer'));
   239 		}
   255 		}
   240 	}
   256 	}
   241 	else if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
   257 	else if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
   242 	{
   258 	{
   255 				// console.log('(1) SP : ' + this.isTLSelectedBySecondPointer + ' MP : ' + this.isTLSelectedByMainPointer);
   271 				// console.log('(1) SP : ' + this.isTLSelectedBySecondPointer + ' MP : ' + this.isTLSelectedByMainPointer);
   256 				this.currentMode = 'TIMELINE';
   272 				this.currentMode = 'TIMELINE';
   257 				this.player.widgets[0].selectTimeline();
   273 				this.player.widgets[0].selectTimeline();
   258 				$('#mainPointer').css('background-image', 'url(./img/cursors/selector_gray.png)');
   274 				$('#mainPointer').css('background-image', 'url(./img/cursors/selector_gray.png)');
   259 				
   275 				
   260 				//On met le spinner gif sur le pointeur.
   276 				if(!this.mouseInteractions)
   261 				var spinner = "<img id='spinner'></div>";
   277 				{
   262 				$('body').append(spinner);
   278 					//On met le spinner gif sur le pointeur.
   263 				$('#spinner').css(
   279 					var spinner = "<img id='spinner'></div>";
   264 				{
   280 					$('body').append(spinner);
   265 					position: 'absolute',
   281 					$('#spinner').css(
   266 					top: $('#mainPointer').position().top,
   282 					{
   267 					left: $('#mainPointer').position().left,
   283 						position: 'absolute',
   268 					width: 85,
   284 						top: $('#mainPointer').position().top,
   269 					height: 85,
   285 						left: $('#mainPointer').position().left,
   270 					'z-index': 600
   286 						width: 85,
   271 				});
   287 						height: 85,
   272 				$('#spinner').attr('src', './img/cursors/selector_anim.gif');
   288 						'z-index': 600
       
   289 					});
       
   290 					$('#spinner').attr('src', './img/cursors/selector_anim.gif');
       
   291 				}
   273 				
   292 				
   274 				this.selectTLTimeout = setTimeout(function()
   293 				this.selectTLTimeout = setTimeout(function()
   275 				{
   294 				{
   276 					//On permet l'interaction après un laps de temps.
   295 					//On permet l'interaction après un laps de temps.
   277 					_this.canSlideInTL = true;
   296 					_this.canSlideInTL = true;
   530 				// console.log('(1) SP : ' + this.isTLSelectedBySecondPointer + ' MP : ' + this.isTLSelectedByMainPointer);
   549 				// console.log('(1) SP : ' + this.isTLSelectedBySecondPointer + ' MP : ' + this.isTLSelectedByMainPointer);
   531 				this.currentMode = 'TIMELINE';
   550 				this.currentMode = 'TIMELINE';
   532 				this.player.widgets[0].selectTimeline();
   551 				this.player.widgets[0].selectTimeline();
   533 				$('#secondPointer').css('background-image', 'url(./img/cursors/selector_gray.png)');
   552 				$('#secondPointer').css('background-image', 'url(./img/cursors/selector_gray.png)');
   534 				
   553 				
   535 				//On met le spinner gif sur le pointeur.
   554 				if(!this.mouseInteractions)
   536 				var spinner = "<div id='spinner'></div>";
   555 				{
   537 				$('body').append(spinner);
   556 					//On met le spinner gif sur le pointeur.
   538 				$('#spinner').css(
   557 					var spinner = "<div id='spinner'></div>";
   539 				{
   558 					$('body').append(spinner);
   540 					position: 'absolute',
   559 					$('#spinner').css(
   541 					'background-repeat': 'no-repeat',
   560 					{
   542 					top: $('#mainPointer').position().top,
   561 						position: 'absolute',
   543 					left: $('#mainPointer').position().left,
   562 						'background-repeat': 'no-repeat',
   544 					width: 85,
   563 						top: $('#mainPointer').position().top,
   545 					height: 85,
   564 						left: $('#mainPointer').position().left,
   546 					'z-index': 600
   565 						width: 85,
   547 				});
   566 						height: 85,
   548 				$('#spinner').attr('src', './img/cursors/selector_anim.gif');
   567 						'z-index': 600
       
   568 					});
       
   569 					$('#spinner').attr('src', './img/cursors/selector_anim.gif');
       
   570 				}
   549 				
   571 				
   550 				this.selectTLTimeout = setTimeout(function()
   572 				this.selectTLTimeout = setTimeout(function()
   551 				{
   573 				{
   552 					//On permet l'interaction après un laps de temps.
   574 					//On permet l'interaction après un laps de temps.
   553 					_this.canSlideInTL = true;
   575 					_this.canSlideInTL = true;
   887 		console.log('===================================');*/
   909 		console.log('===================================');*/
   888 		
   910 		
   889 		//Si le pointeur est sur la notification.
   911 		//Si le pointeur est sur la notification.
   890 		if(x > notification_search.position().left && x < (+notification_search.position().left + notification_search.width()) && y > notification_search.position().top && y < (+notification_search.position().top + notification_search.height()))
   912 		if(x > notification_search.position().left && x < (+notification_search.position().left + notification_search.width()) && y > notification_search.position().top && y < (+notification_search.position().top + notification_search.height()))
   891 		{
   913 		{
   892 			// console.log('IN NOTIFICATION');
   914 			/*if($('#a').length == 0)
   893 			if(!this.alreadyOnNotification && $('#spinner').length == 0)
   915 			{
   894 			{
   916 				var a = "<div id='a'></div>";
   895 				notification_search.css('background-image', currentPicto.replace('/big/valid/', '/big/hover/'));
   917 				$('body').append(a);
   896 				
   918 				$('#a').css(
   897 				console.log(this.date() + ' try remove not');
   919 				{
   898 				//On met le spinner gif sur le pointeur.
   920 					left: notification_search.position().left,
   899 				var spinner = "<img id='spinner'></div>";
   921 					top: notification_search.position().top,
   900 				$('body').append(spinner);
   922 					width: notification_search.width(),
   901 				$('#spinner').css(
   923 					height: notification_search.height(),
   902 				{
   924 					"background-color": "#fff",
   903 					position: 'absolute',
   925 					position: 'absolute',
   904 					top: pointer.position().top,
       
   905 					left: pointer.position().left,
       
   906 					width: 85,
       
   907 					height: 85,
       
   908 					'z-index': 600
       
   909 				});
   926 				});
   910 				$('#spinner').attr('src', './img/cursors/selector_anim.gif');
   927 			}*/
   911 				/*this.arrowSpinnerTimeout = setTimeout(function()
   928 			
   912 				{
   929 			if(!this.alreadyOnNotification && ($('#spinner').length == 0 && !this.mouseInteractions || this.mouseInteractions))
   913 					
   930 			{
   914 				}, this.config['timeoutRemoveSpinner']);*/
   931 				notification_search.css('background-image', currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/'));
   915 				
   932 				
   916 				this.removeNotificationByGestureTimeout = setTimeout(function()
   933 				this.gestureDelRequested = true;
   917 				{
   934 				
   918 					if(_this.currentMode == 'SEARCH')
   935 				// console.log(this.date() + ' try remove not ' + currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/'));
       
   936 				
       
   937 				if(!this.mouseInteractions)
       
   938 				{
       
   939 					//On met le spinner gif sur le pointeur.
       
   940 					var spinner = "<img id='spinner'></div>";
       
   941 					$('body').append(spinner);
       
   942 					$('#spinner').css(
   919 					{
   943 					{
   920 						_this.player.widgets[0].removeSearchByGesture();
   944 						position: 'absolute',
   921 						_this.currentMode = 'VIDEO';
   945 						top: pointer.position().top,
   922 					}
   946 						left: pointer.position().left,
   923 					else if(_this.currentMode == 'TIMELINE')
   947 						width: 85,
       
   948 						height: 85,
       
   949 						'z-index': 600
       
   950 					});
       
   951 					$('#spinner').attr('src', './img/cursors/selector_anim.gif');
       
   952 					
       
   953 					this.removeNotificationByGestureTimeout = setTimeout(function()
   924 					{
   954 					{
   925 						_this.player.widgets[0].removeSearchByGesture();
   955 						if(_this.currentMode == 'SEARCH')
   926 						_this.currentMode = 'TIMELINE';
   956 						{
   927 					}
   957 							_this.player.widgets[0].removeSearchByGesture();
   928 					else if(_this.currentMode == 'FILTER')
   958 							_this.currentMode = 'VIDEO';
   929 					{
   959 						}
   930 						_this.removeFilter();
   960 						else if(_this.currentMode == 'TIMELINE')
   931 					}
   961 						{
   932 					
   962 							_this.player.widgets[0].removeSearchByGesture();
   933 					_this.alreadyOnNotification = false;
   963 							_this.currentMode = 'TIMELINE';
   934 					_this.isCurrentlyInASearchByGesture = false;
   964 						}
   935 					_this.currentSearchGesture = '';
   965 						else if(_this.currentMode == 'FILTER')
   936 					_this.canNotifyHelp = false;
   966 						{
   937 				}, this.config['timeoutRemoveNotificationByGesture']);
   967 							_this.removeFilter();
       
   968 						}
       
   969 						
       
   970 						_this.alreadyOnNotification = false;
       
   971 						_this.isCurrentlyInASearchByGesture = false;
       
   972 						_this.currentSearchGesture = '';
       
   973 						_this.canNotifyHelp = false;
       
   974 					}, this.config['timeoutRemoveNotificationByGesture']);
       
   975 				}
       
   976 				else
       
   977 				{
       
   978 				
       
   979 				}
       
   980 				
   938 				this.alreadyOnNotification = true;
   981 				this.alreadyOnNotification = true;
   939 			}
   982 			}
       
   983 			
       
   984 			return true;
   940 		}
   985 		}
   941 		else
   986 		else
   942 		{
   987 		{
   943 			if(this.alreadyOnNotification)
   988 			if(this.alreadyOnNotification)
   944 			{
   989 			{
   945 				notification_search.css('background-image', currentPicto.replace('/big/hover/', '/big/valid/'));
   990 				notification_search.css('background-image', currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/'));
       
   991 				
       
   992 				this.gestureDelRequested = false;
       
   993 				
       
   994 				// console.log(currentPicto.replace('/big/' + (this.mouseInteractions ? 'MI/' : '') + 'hover/', '/big/' + (this.mouseInteractions ? 'MI/' : '') + 'valid/'));
       
   995 				
   946 				clearTimeout(this.removeNotificationByGestureTimeout);
   996 				clearTimeout(this.removeNotificationByGestureTimeout);
   947 				this.alreadyOnNotification = false;
   997 				this.alreadyOnNotification = false;
   948 				$('#spinner').remove();
   998 				$('#spinner').remove();
   949 			}
   999 			}
   950 		}
  1000 			
   951 	}
  1001 			return false;
   952 }
  1002 		}
       
  1003 	}
       
  1004 	
       
  1005 	return false;
       
  1006 }
       
  1007 
       
  1008 /*
       
  1009  * Si on se trouve sur la notification de recherche par gesture, on la supprime.
       
  1010 */
       
  1011 mosaic.prototype.removeSearchNotificationIfOnIt = function(x, y)
       
  1012 {
       
  1013 	var _this = this;
       
  1014 	
       
  1015 	var notification_search = $('#notify_search_1gesture');
       
  1016 	
       
  1017 	//Si la notification de recherche existe (dans le player).
       
  1018 	if(notification_search.length > 0)
       
  1019 	{
       
  1020 		if(x > notification_search.position().left && x < (+notification_search.position().left + notification_search.width()) && y > notification_search.position().top && y < (+notification_search.position().top + notification_search.height()))
       
  1021 		{
       
  1022 			$('.notifications').remove();
       
  1023 			if(_this.currentMode == 'SEARCH')
       
  1024 			{
       
  1025 				_this.player.widgets[0].removeSearchByGesture();
       
  1026 				_this.currentMode = 'VIDEO';
       
  1027 			}
       
  1028 			else if(_this.currentMode == 'TIMELINE')
       
  1029 			{
       
  1030 				_this.player.widgets[0].removeSearchByGesture();
       
  1031 				_this.currentMode = 'TIMELINE';
       
  1032 			}
       
  1033 			else if(_this.currentMode == 'FILTER')
       
  1034 			{
       
  1035 				_this.removeFilter();
       
  1036 			}
       
  1037 			
       
  1038 			_this.alreadyOnNotification = false;
       
  1039 			_this.isCurrentlyInASearchByGesture = false;
       
  1040 			_this.curvesGesturesFound = false;
       
  1041 			_this.canDrawNextCurve = false;
       
  1042 			_this.isSearchByCurvesOn = false;
       
  1043 			_this.canNotifyHelp = false;
       
  1044 			
       
  1045 			//Si on est dans une vidéo, on laisse cette variable afin de ne pas dézoomer / bouger.
       
  1046 			if(_this.currentMode != 'VIDEO' && _this.currentMode != 'TIMELINE')
       
  1047 			{
       
  1048 				_this.gestureDelRequested = false;
       
  1049 			}
       
  1050 		}
       
  1051 	}
       
  1052 }