1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
|
var carte_charge = false; // variable qui détermine si la carte google est déjà chargé, ici à non car pas encore
var tableau_oeuvres = []; // tableau qui sotck notre liste de oeuvres
var oeuvre = null; // ici, variable contenant un seul oeuvres (pour la fiche)
var ma_lat = ''; // la variable ma_lat contiendra si on a phonegap compatible notre latitude
var ma_lon = ''; // la variable ma_lon contiendra si on a phonegap compatible notre longitude
var liste_theme = '';
var monumentId = '';
[…]
function chargeFiche(appli) // fonction d'affichage de l'écran fiche propre à un theme
{
for (var i = 0; i < tableau_oeuvres.length; i++) // on parcour notre tableau de oeuvre
{
if (tableau_oeuvres[i].id == appli) // si l'élément du tableau à sa propriété "id" identique à la valeur de resto
{
oeuvre = tableau_oeuvres[i]; // on récupère dans notre variable oeuvre l'élément du tableau au complet
monumentId = oeuvre.id;
// on charge dans les différentes zone HTML les valeurs de notre variable oeuvre
$('#fiche_url').attr('href', oeuvre.url); // ici, attr() permet de glisser l'adresse URL dans notre balise a (<a href="url")
$('#fiche_addr').text(oeuvre.addr); // ici, l'adresse du oeuvre est en texte d'ou l'usage de text()
$('#fiche_nom').text(oeuvre.nom); // pareil
$('#fiche_telephone').text(oeuvre.tel); // pareil
$('#fiche_image').attr('src', 'data/img/' + oeuvre.img); // comme pour la balise a, img elle a besoin de "src" pour l'affichage de l'image
$('#fiche_infos').text(oeuvre.infos); // toujours du texte
$('#map').unbind()
}
}
}
function chargeGeo() // fonction d'affichage de la carte Google Maps avec les points géolocalisé des oeuvres
{
$('#map').bind()
$('#map').gmap( // ce composant est basé sur le plugin jquery.ui.map.js cité dans le <head>
{
'disableDefaultUI': 'true', // on désactive les contrôles de Google Maps
'callback': function() // le callback est la fonction appelé lorsque la carte Google Maps est parfaitement affiché (une fois que.)
{
var self = this;
self.addMarker( // on ajoute un Marker pour le repaire (icone rouge de positionnement propre à Google Maps)
{
'position': new google.maps.LatLng(00.0000, 0.00000), // on ajoute la latitude, longitude à l'objet Google Maps de l'ESTEN
'title': 'repair',
'icon': 'images/repair.png',
'bounds': false // bounds ici permet de dire à Google Maps de centrer sur notre point, si plusieurs, il ferra en sorte que TOUS soit visible à l'écran en jouant sur la position et le zoom
});
$.each(tableau_oeuvres, function(index, item) // pour chaque oeuvre, on récupère l'index (sa position dans l'objet) et l'objet oeuvre lui même (item)
{
if (monumentId == item.id)
{
self.addMarker( // on ajoute un Marker (icone rouge de positionnement propre à Google Maps)
{
'position': new google.maps.LatLng(item.lat, item.lng), // la position est un objet Google Maps appelé LatLng qu'on affecte depuis notre item (objet oeuvre courant)
'title': item.id,
'bounds': true // bounds ici permet de dire à Google Maps de centrer sur notre point, si plusieurs, il ferra en sorte que TOUS soit visible à l'écran en jouant sur la position et le zoom
});
}
});
if (ma_lat != '' && ma_lon != '') // si mes informations de géolocalisation ne sont pas vide
{
self.addMarker( // on ajoute un Marker (icone rouge de positionnement propre à Google Maps)
{
'position': new google.maps.LatLng(ma_lat, ma_lon), // on ajoute notre latitude, longitude à l'objet Google Maps
'animation': google.maps.Animation.DROP,
'title': 'Vous êtes ici!',
'draggable': false,
'icon': 'images/pin.png',
'bounds': true // bounds ici permet de dire à Google Maps de centrer sur notre point, si plusieurs, il ferra en sorte que TOUS soit visible à l'écran en jouant sur la position et le zoom
})
}
}
});
carte_charge = false; // on dit que la carte est chargé et ça permet de ne pas repasser dans la création de la carte et la lecture du json à chaque clique sur le bouton
}
$.ajax( // on lance un appel ajax pour récupéré notre liste de oeuvres au format xml
{
type: 'GET', // en mode GET
url: 'data/appli.xml', // sur notre fichier XML
dataType: "xml", // et on informe jQuery que ce qui est reçu est du XML
complete: function(data, status) // lorsque c'est terminé
{
tableau_oeuvres = []; // on réinitilise notre tableau de oeuvres
var carte_charge = false;
$('#map').off();
var tours = $.parseXML(data.responseText); // le résutat XML est mis dans notre variable
$('#liste_POI').html(''); // remise à 0 de la liste (id liste_POI)
$(tours).find('oeuvre').each(function (index, item) // on parcours nos noeud "oeuvre" et pour chacun on on ajoute un élément dans la liste contenant image, nom et adresse
{
tableau_oeuvres.push( // on ajoute dans notre tableau de oeuvre le oeuvre actuellement parcouru
{
id: $(item).find('id').text(), // l'id
nom: $(item).find('name').text(), // le nom
lat: $(item).find('lat').text(), // le nom
lng: $(item).find('lng').text(), // le nom
img: $(item).find('photoUrl').text(), // l'image
addr: $(item).find('laddr').text(), // l'adresse
infos: $(item).find('infos').text(), // les infos
url: $(item).find('actual_url').text(), // l'url
tel: $(item).find('phones').text() // le numéro de téléphone
});
var html = '<li style="width:45%; text-align:center; display:inline-block; margin-bottom:5%;">'; // ici, le format de liste est imposé par jQuery Mobile (format avec image)
html += ' <a href="#">';
html += ' <input type="hidden" name="id" value="' + $(item).find('id').text() + '">'; // on ajoute notre ID dans un champ invisible
html += ' <input type="hidden" name="theme" value="' + $(item).find('theme').text() + '">'; // on ajoute notre ID dans un champ invisible
html += ' <img style="border-radius:20px;" src="data/img/' + $(item).find('photoUrl').text() + '">'; // l'image
html += ' <br/><h4>' + $(item).find('name').text() + '</h4>'; // le nom
html += ' </a>';
html += '</li>';
$('#liste_POI').append(html); // on ajoute le html généré dans notre liste (ul)
});
$('#liste_POI').find('li[role!="heading"]').each(function (index, item) // on recherche tout nos "li" que nous venons de généré dans notre liste (ul)
{
$(item).on('click', function (e) // et lorsqu'on clique dessus
{
e.preventDefault(); // on annule l'action par défaut (<a href="#")
chargeFiche($(item).find('input[name="id"]').val());
window.location.hash = '#fiche'; // et on va sur la page qui n'existe pas (fiche-) qui va appelé l'évènement chargeEvent()
});
});
$('.button-liste').on('click', function (e)
{
liste_theme = $(this).attr('tag');
});
window.location.hash = '#home'; // changement de HASH (et donc, déclanchement de la fonction)
}
});
}); |
Partager