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">
→ <span class="item_sel_" id="click_medium">médiums</span>
</div>
<div class="menu_filtres_item">
→ <span class="item_sel_" id="click_niveaux">niveaux</span>
</div>
<div class="menu_filtres_item">
→ <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>