Skip to content
Extraits de code Groupes Projets
Sélectionner une révision Git
  • e9da8108875d62815743e6e5b85d41a6a7b6e99b
  • master par défaut protégée
2 résultats

picture_browser.js

Blame
  • picture_browser.js 18,52 Kio
    //ceci est un premier jet de l'explorateur de photos par accès aux APIs de la nasa
    //pour appeler ces fonctions et l'instancier, il faut que le DOM contienne une balise de classe = 'picture_viewer'
    
    
    //objet "browser" (gère les accès aux api et les affichages de previews) ------------------------
    
    var browser = {
    
    	startbrowser: function() {
    		//browser.preparateLayout(100);
    		requestHandler.retrieveJsonFromUrl('https://images-api.nasa.gov/search?year_start=1998', browser.populateWithData);
    	},
    
    
    	reloadWithNewFetchUrl: function(url) {
    		requestHandler.retrieveJsonFromUrl(url, browser.populateWithData);
    	},
    
    
    
    
    	preparateLayout: function(nb) {
    		var i = 0;
    		var j = 0;
    		var nbrow = 0;
    		var nbcol = 0;
    		for (i=0; i<1; i=i+1) {
    			nbrow = nbrow+1;
    			//choisir entre le flew-wrap et flex-fill (à voir)
    			$('.view').append('<div id="displayrow_'+nbrow+'" class="row no-gutters"></div>');
    			for (j=0; j<nb; j=j+1) {
    				nbcol = nbcol+1;
    				$('#displayrow_'+nbrow).append('<div id="displaycol_'+nbcol+'" class="col-md-4 text-center"></div>');
    			}
    		}
    	},
    
    
    
    	populateWithData: function(data) {
    		var nbcol = 3; //variable à modifier pour sélectionner le nombre de colonnes
    		var user = $('#userInfo'); 
    		var test = "choucroute";
    		
    		$('.picture_viewer').html('<div class="view container-fluid"></div>');
    		browser.preparateLayout(nbcol);
    		var numcol = 0;
    		var tabheight = [];
    		// initialisation du tableau des tailles
    		for (var i = 0; i<nbcol; i=i+1) {
    			tabheight[i]=0;
    		}
    		for (element of data.collection.items) {
    			var id = element.data[0].nasa_id;
    			var encoded_id = stringToIntList(id);
    			
    			// recherche du minimum
    			// var mintmp = tabheight[0];
    			// numcol = 1;
    			// for (var i = 0; i<nbcol; i=i+1) {
    			// 	if (tabheight[i] < mintmp) {
    			// 		numcol = i+1;
    			// 	}
    			// }
    			numcol = numcol+1;
    			if (numcol > nbcol) {
    				numcol = 1;
    			}
    			// ajout dans la colonne adéquate
    			if (element.links != undefined) {
    				var afficheEtoile = "";
    				var afficheCDC = "";
    				if (user.text() != "") {
    
    					afficheEtoile = '<div class="rating" id="emplacementEtoile_' + encoded_id + '" > </div>';					
    
    					if (isInCDClist(id))	{
    						afficheCDC =  '<div id="emplacementCDC_' + encoded_id + '">' +
    														'<img alt="Coup de coeur" width="105%" style="cursor: pointer;" onclick="switchCDCbutton(' + user.text() + ',\'' + encoded_id + '\',\'rouge\')" src="./ressources/icons/coeurRouge.png"></img>' + 
    													'</div>';
    					}
    					else {
    						afficheCDC =  '<div id="emplacementCDC_' + encoded_id + '">' +
    														'<img alt="Coup de coeur" width="105%" style="cursor: pointer;" onclick="switchCDCbutton(' + user.text() + ',\'' + encoded_id + '\',\'blanc\')" src="./ressources/icons/coeurBlanc.png"></img>' +
    													'</div>';
    					}						
    					
    				}
    				
    				$('#displaycol_'+numcol).append(
    					'<div class="hover-container container-fluid px-1 py-1">'+
    						'<img class="img-fluid w-100 rounded" src="'+element.links[0].href+'">'+
    						'<div class="content rounded">' +
    							'<div class="text scrollbar">' +
    								'<h4><center><strong>' + element.data[0].title + '</strong></center></h4>' +
    								'<p style="font-size: 15px">' + element.data[0].description + '</p>' +
    							'</div>' +
    							'<div class="actionrow">'+
    								'<form method="POST" action="download.php" target="_blank">'+
    									'<input type="hidden" name="urlget" value="' + correctionURLLink(element.href) + '">'+
    									'<input type="hidden" name="nasa_id" value="'+element.data[0].nasa_id+'">'+
    									'<input type="hidden" name="title" value="'+element.data[0].title+'">'+
    									'<input type="hidden" name="preview" value="'+element.links[0].href+'">'+
    									'<table style="margin-right:5%">' +
    										'<tr>' +
    											 '<td align="left" width="10%"> <input type="image" name="submit" alt="Submit" class="download" width="100%" src="./ressources/icons/dwnld.png" onmouseover="this.src=\'./ressources/icons/dwnldVert.png\'" onmouseout="this.src=\'./ressources/icons/dwnld.png\'"></td>' +
    											 '<td width="61%">' + afficheEtoile + '</td>' +
    											 '<td width="19%"></td>' +
    											 '<td align="right" width="10%">' + afficheCDC + '</td>' +
    										'</tr>' + 
    									'</table' +
    								'</form>' +
    							'</div>'+
    						'</div>'+
    					'</div>');
    				
    				if (user.text() != "") {
    					updateEtoile(user.text(), encoded_id, isInReviewlist(id), "affichage");
    				}
    
    			}
    			// pour appeler l'ajout d'un CDC ou d'une reviex, il faut appeler la fonction javascript ajaxNewCDC(iduser, idphoto) (la meme pour review)
    			else {
    				$('#displaycol_'+numcol).append('<img class="img-fluid w-100 rounded" src="./ressources/NoPreview.png">');
    			}
    			// mise à jour de la hauteur courante des colonnes
    			for (var i = 0; i<nbcol; i=i+1) {
    				var strtmp = i+1;
    				var template = $('#displaycol_'+strtmp).height();
    				tabheight[i]=template;
    			}
    		}
    		// ajout des boutons de contrôle
    		$('.picture_viewer').prepend('<br/><div class="button_nav_row btn-group"></div>');
    		$('.picture_viewer').append('<br/><div class="button_nav_row btn-group"></div>');
    		for (element of data.collection.links) {
    			var string = element.href;
    			$('.button_nav_row').append('<button class="btn btn-primary" onclick=\'browser.reloadWithNewFetchUrl("'+string+'")\'>'+element.prompt+'</button>');
    		}
    	},
    
    
    	//fonction pour permettre la récupéreation et l'ouverture d'une image en HD (doit être améliorée) (prends en paramètre le lien href donné par l'objet json)
    	openPictureHD: function(url) {
    		requestHandler.retrieveJsonFromUrl(url, function(data) {
    			console.log("ouvrez moi");
    			console.log(data[1]);
    			$('.picture_viewer').append('<a id="clickme" href="'+data[0]+'" rel="noopener noreferrer" target="_blank">Si vous êtes sur safari, cliquez ici pour ouvrir votre photo</a>');
    			setTimeout(function() {
    				document.getElementById("clickme").click();
    				console.log("j'ai perdu");
    			}, 30);
    			setTimeout(function() {
    				document.getElementById("clickme").remove();
    			}, 10000);
    		});
    	},
    
    
    }
    
    
    
    //---------------------------------------------------------------------------------------------------------------------------
    
    
    
    
    
    
    
    
    
    
    
    
    
    // objet "requestHandler" (gère les appels à des services externes)
    
    
    var requestHandler = {
    	retrieveJsonFromUrl: function(url, callback) {
    		var xhr = new XMLHttpRequest();
        	xhr.open('GET', url, true);
        	xhr.responseType = 'json';
        	xhr.onload = function() {
        		var status = xhr.status;
          		if (status === 200) {
            		callback(xhr.response);
          		} else {
          			console.log("erreur, le status de la réponse indique une anomalie");
            		callback(xhr.response);
          		}
        	};
        xhr.send();
    	},
    
    
    	retrieveJsonFromUrlWithPassedParameter: function(url, callback, pass) {
    		var xhr = new XMLHttpRequest();
        	xhr.open('GET', url, true);
        	xhr.responseType = 'json';
        	xhr.onload = function() {
        		var status = xhr.status;
          		if (status === 200) {
            		callback(xhr.response, pass);
          		} else {
          			console.log("erreur, le status de la réponse indique une anomalie");
            		callback(xhr.response, pass);
          		}
        	};
        xhr.send();
    	}
    }
    
    
    
    //----------------------------------------------------------------------------------------------------
    
    
    
    
    
    
    
    //fonction générales :
    
    
    function afficherData(data) {
    	console.log(data);
    }
    
    function startviewer() {
    	console.log("démarrage du picture browser");
    	var test = document.getElementById("picture_viewer");
    	if (test = undefined) {
    		console.log("impossible de démarrer le viewer (la balise n'est pas définie dans le document)");
    	}
    	else {
    		$('.picture_viewer').html("Démarrage en cours...");
    		browser.startbrowser();
    	}
    }
    
    
    function replacePostrophe(str) {
    	var tab = str.split('\'');
    	var result = "";
    	var last = tab.length -1;
    
    	if (last >= 0) {
    		// si le nom commence par ', on ne le voit pas dans le split: on le rajoute
    		if (tab[0][0] == '\'') {
    			result = '\\\''			
    		}
    
    		// rajout des split
    		for (var i = 0; i < last; i++) {
    			result = result.concat(tab[i]).concat('\\\'')
    		}
    		result = result.concat(tab[last])
    
    		// si le nom termine par ', on ne le voit pas dans le split: on le rajoute
    		if (str[str.length -1] == '\'') {
    			result = result.concat('\\\'')
    		}
    	}
    	return result
    }
    
    
    /*  Utile pour convertir les string en liste de int de la manière suivante:
    		ABC traduit en 65_66_67 (les nombres sont les correspondances ASCII)
    	
    		Notamment utilisée pour convertir les nasa_id en chaine comme celle-ci. 
    		En effet, certains nasa_id comportent des '' , ce qui pose problème dans 
    		stockage les DB (dans les repository, on fait des INSERT ... VALUES de 
    		'variable' avec variable qui contient des ' donc ça pose problème). 
    		Avec cette méthode, on s'affranchit de se problème tout en conservant
    		toute l'information sur le nasa_id (plus qu'à le reconvertir derrière si on
    		en a besoin)
    */
    function stringToIntList(str) {
    	var len = str.length -1;
    	var result = "";
    
    	for (var i = 0; i < len; i++) {
    		result = result.concat(str.charCodeAt(i)).concat('_')
    	}
    	result = result.concat(str.charCodeAt(len))
    	
    	return result
    }
    
    /* 
    	fonction réciproque 
    */
    function intListToString(intList) {
    	var tab = intList.split('_')
    	var result = "";
    
    	for (elem of tab) {
    		result = result.concat(String.fromCharCode(elem))
    	}
    	
    	return result
    }
    
    /* 
    	réécriture des liens internet afin de remplacer les espaces par des %20
    	Cela ne change rien pour le lien et permet d'éviter les erreurs de traitement
    	car certaines fois (notamment dans le retrieveJsonFromUrl de download.php), le 
    	lien est coupé à cause des espaces.
    */
    
    function correctionURLLink(link) {
    	var tab = link.split(' ');
    	var result = "";
    	var last = tab.length -1
    
    	for (var i = 0; i < last; i++) {
    		result = result.concat(tab[i]).concat("%20")
    	}
    	result = result.concat(tab[last])
    
    	return result
    }
    
    /*
    	fonction pour voir si une image ayant un identifiant [id] est dans la liste des coups de coeurs
    	La fonction sert pour savoir si une image doit être renseigné avec un coeur rouge on démarre de 
    	la page.
    	Si l'image est dans la base de données (i.e. dans la liste cachée nommée 'CDClist), alors on 
    	renvoie true, sinon false.
    */
    function isInCDClist(id) {
    	var liste = $('#'+'CDClist'+" li");
    	var encoded_id = stringToIntList(id);
    
    	var result = false;
    
    	liste.each(function() {
    		if ($(this).text() == encoded_id) {
    			result = true;		
    		}
    	});
    
    	return result;
    }
    
    
    /*
    	fonction appelée à chaque fois que l'utilisateur appuie sur le bouton CDC.
    	Si le bouton était blanc au moment du clic, on change le bouton en rouge et on ajoute l'image en CDC
    	Si le bouton était rouge au moment du clic, on change le bouton en blanc et on retire l'image des CDC
    */
    function switchCDCbutton(user, encodedId, ancienEtat) {
    	/* 
    		si l'ancien état était blanc, on vient de passer à rouge donc on place le bouton rouge
    		et on ajoute l'image dans la DB CDC
    	*/
    	if (ancienEtat == 'blanc') {		
    		document.getElementById('emplacementCDC_' + encodedId).innerHTML = '<img alt="Coup de coeur" width="105%" style="cursor: pointer;" onclick="switchCDCbutton(' + user + ',\'' + encodedId + '\',\'rouge\')" src="./ressources/icons/coeurRouge.png"></img>';
    		ajaxNewCDC(user, encodedId);
    	}
    	/* 
    		idem mais à l'inverse
    	*/
    	if (ancienEtat == 'rouge') {
    		document.getElementById('emplacementCDC_' + encodedId).innerHTML = '<img alt="Coup de coeur" width="105%" style="cursor: pointer;" onclick="switchCDCbutton(' + user + ',\'' + encodedId + '\',\'blanc\')" src="./ressources/icons/coeurBlanc.png"></img>';
    		ajaxRemoveCDC(user, encodedId);		
    	}
    }
    
    
    // fonction appelée au chargement de image_alea.php pour démarrer les infos des coups de coeur
    function initiateCDC(user, Id) {
    	console.log("COUCOU");
    	var encodedId = stringToIntList(Id);
    	console.log(encodedId);
    	document.getElementById('emplacementCDC').innerHTML = '<div id="emplacementCDC_'+encodedId+'"><img alt="Coup de coeur" width="105%" style="cursor: pointer;" onclick="switchCDCbutton(' + user + ',\'' + encodedId + '\',\'blanc\')" src="./ressources/icons/coeurBlanc.png"></img></div>';
    }
    
    function isInReviewlist(id) {
    	var liste = $('#' + 'Reviewlist' + " li");
    	var encoded_id = stringToIntList(id);
    
    	var result = -1;
    	
    	liste.each(function() {
    		var tab = $(this).text().split(',');
    		if (tab[0] == encoded_id) {
    			result = tab[1]	;
    			
    		}
    	});
    	return result;
    }
    
    
    function updateEtoile(user, encoded_id, nbEtoile, option) {
    	icon_etoile = '<img class="etoile_remove" style="cursor: pointer;" onclick="remove_etoile(\'' + user + '\',\'' + encoded_id + '\')" src="./ressources/icons/croix_blanche.png" onmouseout="this.src=\'./ressources/icons/croix_blanche.png\'" onmouseover="this.src=\'./ressources/icons/croix_rouge.png\'">';
    
    	if (nbEtoile >= 5) {
    		console.log(nbEtoile);
    		document.getElementById('emplacementEtoile_' + encoded_id).innerHTML = 
    			'<span class="etoile" title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span class="etoile" title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span class="etoile" title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
    			icon_etoile;
    		
    		if (option == 'update') {
    			ajaxRemoveReview(user, encoded_id);
    			setTimeout(ajaxNewReview(user, encoded_id, 5), 50);
    		}	
    	}
    	else if (nbEtoile == 4) {
    		document.getElementById('emplacementEtoile_' + encoded_id).innerHTML = 
    			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span class="etoile" title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span class="etoile" title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
    			icon_etoile;
    		
    		if (option == 'update') {
    			ajaxRemoveReview(user, encoded_id);
    			setTimeout(ajaxNewReview(user, encoded_id, 4), 50);
    		}	
    	}
    	else if (nbEtoile == 3) {
    		document.getElementById('emplacementEtoile_' + encoded_id).innerHTML = 
    			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span class="etoile" title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
    			icon_etoile;
    		
    		if (option == 'update') {
    			ajaxRemoveReview(user, encoded_id);
    			setTimeout(ajaxNewReview(user, encoded_id, 3), 50);
    		}	
    	}
    	else if (nbEtoile == 2) {
    		document.getElementById('emplacementEtoile_' + encoded_id).innerHTML = 
    			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
    			icon_etoile;
    		
    		if (option == 'update') {
    			ajaxRemoveReview(user, encoded_id);
    			setTimeout(ajaxNewReview(user, encoded_id, 2), 50);
    		}	
    	}
    	else if (nbEtoile == 1) {
    		document.getElementById('emplacementEtoile_' + encoded_id).innerHTML = 
    			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
    			icon_etoile
    		
    		if (option == 'update') {
    			ajaxRemoveReview(user, encoded_id);
    			setTimeout(ajaxNewReview(user, encoded_id, 1), 50);
    		}	
    	}	
    	else if (nbEtoile < 1) {
    		document.getElementById('emplacementEtoile_' + encoded_id).innerHTML =	
    			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
    		
    		if (option == "update") {
    			ajaxRemoveReview(user, encoded_id);
    		}
    		
    	}
    }
    
    function remove_etoile(user, encoded_id) {
    	document.getElementById('emplacementEtoile_' + encoded_id).innerHTML =	
    			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
    			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
    			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
    			'<span title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
    			'<span title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
    	ajaxRemoveReview(user, encoded_id);
    }