genrimages
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

recherche.tpl.html
text/html

Download raw (8.5 KB)

<html>
    <head>
	<meta charset="utf-8">
	<title>Filtrer</title>
	<link href="styles.css" rel="stylesheet" type="text/css" />
	<script src="jquery-3.1.1.min.js"></script>
	<script src="jquery.color-2.1.2.min.js"></script>
	<script src="jquery.scrollTo/jquery.scrollTo.js"></script>
	<script src="masonry.pkgd.min.js"></script>

    </head>
    <body>
	<div id="surface">
	    <div id="page">
		<div id="menu">
		    <div id="menu_haut">
			<div id="logo"><img src="images/genrimages-logo.png" alt="Genrimages logo" title="Genrimages logo"/></div>
			<div id="menu_infos">
			    <div class="menu_infos_item">à propos</div>
			    <div class="menu_infos_item">connexion</div>
			    <div class="menu_filtres_item_search" style="width:500px;text-align:right;">
				<input type="text" id="search" name="search" value="rechercher" class="search_box" />
			    </div>
			</div>
		    </div>
		    <br class="clear" />
		    <div id="menu_bas">
			<div id="menu_blurb">représentations sexuées et stéréotypes dans l'image</div>
			<div id="menu_filtres">
			    <div class="menu_filtres_item_filtrer">
				filtrer
			    </div>
			    <div class="menu_filtres_item">
				&rarr; <span class="item_sel_" id="click_medium">médiums</span>
			    </div>
			    <div class="menu_filtres_item">
				&rarr; <span class="item_sel_" id="click_niveaux">niveaux</span>
			    </div>
			    <div class="menu_filtres_item">
				&rarr; <span class="item_sel_" id="click_mots_cles">mots-clés</span>
			    </div>
			    <div class="menu_filtres_item_search"></div>
			</div>
			<div id="menu_filtres_select" style="display:none;">
			    <div class="menu_filtres_item_select" id="click_medium_items" style="padding-left:65px;width:125px;display:none;">
				<li><span class="item_sel_">films</span></li><li><span class="item_sel">publicités</span></li>  <li>séries</li>
			    </div>
			    <div class="menu_filtres_item_select" id="click_niveaux_items" style="padding-left:20px;width:140px;display:none;">
				<li>primaire</li> <li><span class="item_sel">lycée</span></li><li>université</li>
			    </div>
			    <div class="menu_filtres_item_select"  id="click_mots_cles_items" style="width:400px;display:none;">
				Audiovisuel <span class="item_sel">Beauté</span> Corps Couple Cybersexisme Discriminations <span class="item_sel">Ecole</span> Genre Harcèlement Histoire Homophobie Mixité Orientation Parentalité Sexualité Sciences Sexisme Sexualité <span class="item_sel">Sport</span>
			    </div>
			</div>
			<div id="menu_garder_selection" style="display:none;"><span class="garder_selection_bouton">Appliquer la sélection.</span></div>

		    </div>

		    </div>
		<br class="clear" />
		<div id="main">
		    <div id="fiches">
			
		    </div>
		</div>
	    </div>
	</div>
	<script>
	 $( document ).ready(function() {
	     db=[];
	     db_sel=[];
	     sel_objs=[];
	     db_mediums=[];
	     db_niveaux=[];
	     db_mots_cles=[];
	     db_mediums_sel=[];
	     db_niveaux_sel=[];
	     db_mots_cles_sel=[];
	
	$('#click_medium').click(function(){
	  $("#menu_filtres_select").show();
	  $("#click_medium_items").show();
	});
	$('#click_niveaux').click(function(){
	  $("#menu_filtres_select").show();
	  $("#click_niveaux_items").show();
	});
	$('#click_mots_cles').click(function(){
	  $("#menu_filtres_select").show();
	  $("#click_mots_cles_items").show();
	});
	
	     //$.getJSON("./home_js-local.json", function( data) {
	     $.getJSON("http://localhost/genrimages/mock-up/list_annotations_images.php", function( data) {

		 console.log(data);
		 for(var i=2;i<data.fiches.length;i++){
		     var cur_node=data.fiches[i];
		     //console.log(cur_node.mediums);
		     var ar_mediums=cur_node.mediums;
		     var ar_niveaux=cur_node.niveaux;
		     var ar_mots_cles=cur_node.mots_cles;
		     index_taxonomy(ar_niveaux,db_niveaux);
		     index_taxonomy(ar_mediums,db_mediums);
		     index_taxonomy(ar_mots_cles,db_mots_cles);
		     var fiche=new Fiche(cur_node.nid,cur_node.title.trim(),ar_mediums,ar_niveaux,ar_mots_cles,cur_node.url);
		     //console.log(vid.name);
		     db.push(fiche);
		     console.log(fiche.title);
		     fiche.display();
		     if(i==(data.fiches.length -1)){
			 initMenu();
			 console.log("init menu");
		     }
		 }});



	     function index_taxonomy(ar_sel, db_taxonomy){
		 /* console.log(db_taxonomy); */
		 if(ar_sel.length>0){
		     for(var i=0;i<ar_sel.length;i++){
			 if(ar_sel[i].length>1){
			     var index=db_taxonomy.indexOf(ar_sel[i]);
			     if (index > -1) {
				 /* console.log(ar_sel[i]+" already in array");*/
			     }else{
				 db_taxonomy.push(ar_sel[i]);
				 /* console.log(ar_sel[i]); */
			     }
			 }}
		     return true;
		 }else{
		     return false;
		 }
	     }

	     function list_taxonomy(db_taxonomy,idlay){

		 for(var i=0;i<db_taxonomy.length;i++){
		     /* console.log(db_taxonomy[i]); */
		     var str_tag='<span class="taxonomy_term">'+db_taxonomy[i]+'</span> ';
		     $(idlay).append(str_tag);
		 }

	     }

	     function initMenu(){
		 $('#fiches').masonry({
		     // options
		     itemSelector: '.fiche_vignette',
		     columnWidth: 180,
		     gutter:10
		 });
/*
		 list_taxonomy(db_mediums,filters_mediums);
		 list_taxonomy(db_niveaux,filters_niveaux);
		 list_taxonomy(db_mots_cles,filters_mots_cles);
		 $( "#filters_mediums > span" ).click(function() {
		     update_selection($(this).text(),$(this),db_mediums_sel);
		     
		 });
		 $( "#filters_niveaux > span" ).click(function() {
		     update_selection($(this).text(),$(this),db_niveaux_sel);
		     
		 });
		 $( "#filters_mots_cles > span" ).click(function() {
		     update_selection($(this).text(),$(this),db_mots_cles_sel);
		     
		 });
*/

	     }

	     function update_selection(local_sel,that,features_type_sel){
		 var index=features_type_sel.indexOf(local_sel);
		 var identjq=that;
		 if (index > -1) {
		     features_type_sel.splice(index, 1);
		     that.css("color","#333");
		     //console.log(identjq);
		 }else{
		     features_type_sel.push(local_sel);
		     that.css("color","#2c83c6");

		 }
		 retract();
	     }


	     function retract(){
		 if((db_niveaux_sel.length>0)|(db_mediums_sel.length>0)|(db_mots_cles_sel.length>0)){
		     for(var i=0;i<db.length;i++){
			 if(has_features(db[i].niveaux,db_niveaux_sel)&&(has_features(db[i].mots_cles,db_mots_cles_sel))&&(has_features(db[i].mediums,db_mediums_sel))){
			     console.log(db[i].title+' has all keywords');
			     db[i].select();
			 }else{
			     console.log(db[i].title+' has not all keywords');
			     db[i].deselect();

			 }
		     }}else{
			 for(var i=0;i<db.length;i++){
			     db[i].deselect();
			     console.log("Deselecting");
			 }
		     }
	     }

	     function has_features(feats_obj,feats_sel){
		 var flag=true;
		 if(feats_sel.length>0){
		     for(var i=0;i<feats_sel.length;i++){
			 if(inArray(feats_sel[i],feats_obj)){
			     //console.log(feats_sel[i] +" is present");
			 }else{
			     //console.log(feats_sel[i] +" is not present");
			     flag=false;
			 }
		     }}else{
			 flag=true;
		     }
		 return flag;
	     }

	     function inArray(el,ar){
		 var flag=false;
		 for(var i=0;i<ar.length;i++){
		     if(el==ar[i]){
			 flag=true;
			 break;
		     }
		 }
		 return flag;
	     }

	     var Fiche=function(id,title,mediums,niveaux,mots_cles,vignette){
		 this.id=id;
		 this.title=title;
		 this.mediums=mediums;
		 this.mots_cles=mots_cles;
		 this.niveaux=niveaux;
		 this.vignette=vignette;
	     };

	     Fiche.prototype.display=function(){
	//	 http://genrimagfi.cluster002.ovh.net/annotations/
	//	 var str_html='<div class="fiche_vignette" id="a_'+this.id+'" style="background:transparent"><img src="http://localhost/genrimages/annotation/Publicites/thumbs/test/'+this.vignette+'" class="small_v" /></div>';  
		      var str_html='<div class="fiche_vignette" id="a_'+this.id+'" style="background:transparent"><img src="http://genrimagfi.cluster002.ovh.net/annotations/Publicites/thumbs/test/'+this.vignette+'" class="small_v" /></div>';
		 $('#fiches').append(str_html);
	     };
	     
	     Fiche.prototype.select=function(){
		 $('#a_'+this.id).addClass("vignette_sel");
		 /* console.log(this.title+" is selected"); */
		 sel_objs.push(this.title);
	     }

	     Fiche.prototype.deselect=function(){
		 $('#a_'+this.id).removeClass("vignette_sel");
		 //$('#a_'+this.id).fadeOut('fast');
		 var index=sel_objs.indexOf(this.title);
		 if (index > -1) {
		     sel_objs.splice(index, 1);
		     //console.log(identjq);
		     /* console.log(this.title+" is de-selected"); */
		 }
		 $('#a_'+this.id).appendTo("#fiches");
		 //$('#a_'+this.id).fadeIn('slow');

	     }
	     
	 });
	</script>
    </body>
</html>