/branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/css/mobile.css |
---|
New file |
0,0 → 1,30 |
@CHARSET "UTF-8"; |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Balises */ |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Générique */ |
.ui-icon-pencil{ |
background:url(http://www.tela-botanica.org/commun/icones/glyphish/187-pencil-white.png) no-repeat; |
} |
.ui-icon-notepad{ |
background:url(http://www.tela-botanica.org/commun/icones/glyphish/179-notepad-white.png) no-repeat; |
} |
.ui-icon-cloud{ |
background:url(http://www.tela-botanica.org/commun/icones/glyphish/56-cloud-white.png) no-repeat; |
} |
.ui-icon-radar{ |
background:url(http://www.tela-botanica.org/commun/icones/glyphish/73-radar-white.png) no-repeat; |
} |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Formulaire à l'application */ |
#conteneur_reponse{ |
display:none; |
} |
.reponse{ |
background-color:#D5F2B6; |
padding:20px; |
text-align:center; |
font-size:1.2 em; |
font-weight:bold; |
} |
/branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/mobile.tpl.html |
---|
New file |
0,0 → 1,162 |
<?php |
$annee = date('Y'); |
$aujourdhui = date('d/m/Y'); |
?> |
<!DOCTYPE html> |
<html lang="fr" manifest="<?=$url_base?>modules/saisie/squelettes/mobile/mobile.appcache"> |
<head> |
<title>CEL Mobile</title> |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> |
<meta http-equiv="Content-style-type" content="text/css" /> |
<meta http-equiv="Content-script-type" content="text/javascript" /> |
<meta http-equiv="Content-language" content="fr" /> |
<meta name="revisit-after" content="15 days" /> |
<meta name="robots" content="index,follow" /> |
<meta name="author" content="Jean-Pascal MILCENT, Mathilde SALTHUN-LASSALLE" /> |
<meta name="keywords" content="Tela Botanica, CEL, mobile" /> |
<meta name="description" content="Widget de saisie du CEL pour smartphone" /> |
<!-- Favicones --> |
<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" /> |
<!-- Viewport --> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<!-- CSS --> |
<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> |
<link href="<?=$url_base?>modules/saisie/squelettes/mobile/css/<?=isset($_GET['style']) ? $_GET['style'] : 'mobile'?>.css" rel="stylesheet" type="text/css" media="screen" /> |
<!-- Javascript --> |
<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script> |
<!-- Javascript : appli saisie --> |
<script type="text/javascript"> |
//<![CDATA[ |
// La présence du parametre 'debug' dans l'URL enclenche le dégogage |
var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>; |
//]]> |
</script> |
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/mobile/js/mobile.js"></script> |
<!-- Javascript : Jquery Mobile --> |
<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> |
</head> |
<body data-theme="b"> |
<div id="menu" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour"> |
<div data-role="header"> |
<?php if($titre == 'defaut' ) { ?> |
<h1>Accueil</h1> |
<?php } else { ?> |
<h1><?= $titre ?></h1> |
<?php } ?> |
</div> |
<div data-role="content" data-theme="g"> |
<ul data-role="listview"> |
<li> |
<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/> |
<a href="#saisie" data-role="button">Saisir une observation</a> |
</li> |
<li> |
<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/> |
<a href="#liste" data-role="button">Voir mes observations</a> |
</li> |
<li> |
<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/> |
<a href="#transmission" data-role="button">Transmettre mes observations</a> |
</li> |
</ul> |
</div> |
<div data-role="footer" data-position="fixed"> |
<a href="#infos" data-role="button">Infos</a> |
</div> |
</div> |
<div id="saisie" data-role="page"> |
<div data-role="header" data-position="inline"> |
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> |
<h1>Saisie</h1> |
<a href="#liste" data-icon="notepad" data-iconpos="notext">Liste des obs</a> |
</div> |
<form id="form_saisie_observation" method="post" action="#"> |
<div data-role="content"> |
<div id="obs-saisie-infos"></div> |
<div data-role="fieldcontain"> |
<!-- |
<label for="location">Commune :</label> |
<input type="text" name="location" id="location"/> |
--> |
<button id="geolocaliser" data-role="button" data-icon="search" data-iconpos="">Trouver ma position</button> |
<label for="lat">Latitude :</label> |
<input id="lat" type="text" name="lat"/> |
<label for="lng">Longitude :</label> |
<input id="lng" type="text" name="lng"/> |
<label for="date">Date :</label> |
<input id="date" type="text" name="date" value="<?=$aujourdhui?>"/> |
<label for="nom">Espece :</label> |
<input id="nom" type="text" name="nom"/> |
<input id="num_nom" type="hidden" name="num_nom"/> |
</div> |
</div> |
<div data-role="footer" data-position="fixed"> |
<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button> |
</div> |
</form> |
</div> |
<div id="liste" data-role="page"> |
<div data-role="header" data-position="inline"> |
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> |
<h1>Observations</h1> |
</div> |
<div data-role="content"> |
<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul> |
</div> |
<div data-role="footer" data-position="fixed"> |
<div data-role="navbar"> |
<ul> |
<li><a href="#saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li> |
<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li> |
</ul> |
</div> |
</div> |
</div> |
<div id="transmission" data-role="page"> |
<div data-role="header"> |
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> |
<h1>Transmission</h1> |
<a href="#saisie" data-icon="notepad" data-iconpos="notext">Saisie</a> |
</div> |
<form id="form-transmission" method="post" action="#"> |
<div data-role="content"> |
<div data-role="fieldcontain"> |
<label for="courriel">Courriel :</label> |
<input id="courriel" type="email" name="courriel"/> |
</div> |
</div> |
<div data-role="footer" data-position="fixed"> |
<button data-role="button" data-icon="cloud">Transmettre</button> |
</div> |
</form> |
</div> |
<div id="infos" data-role="page"> |
<div data-role="header"> |
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> |
<h1>Infos</h1> |
</div> |
<div data-role="content"> |
<p>Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>.</p> |
</div> |
<div data-role="footer" data-position="fixed"> |
<p>©Copyright <?=$annee?> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a></p> |
</div> |
</div> |
</body> |
</html> |
/branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/mobile.appcache |
---|
New file |
0,0 → 1,18 |
CACHE MANIFEST |
# v2 - 2012-03-28 |
# Fichier Manifest pour le cache du widget Mobile. |
CACHE: |
http://localhost/eflore/applications/cel-widget_cisaille/modules/saisie/squelettes/mobile/css/mobile.css |
http://localhost/eflore/applications/cel-widget_cisaille/modules/saisie/squelettes/mobile/js/mobile.js |
http://www.tela-botanica.org/favicon.ico |
http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css |
http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/images/* |
http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js |
http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js |
http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png |
http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png |
http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png |
http://www.tela-botanica.org/commun/icones/glyphish/73-radar-white.png |
http://www.tela-botanica.org/commun/icones/glyphish/187-pencil-white.png |
http://www.tela-botanica.org/commun/icones/glyphish/179-notepad-white.png |
http://www.tela-botanica.org/commun/icones/glyphish/56-cloud-white.png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/js/mobile.js |
---|
New file |
0,0 → 1,124 |
//+----------------------------------------------------------------------------------------------------------+ |
// Initialisation de Jquery mobile |
$(document).bind("mobileinit", function(){ |
$.mobile.defaultPageTransition = "fade"; |
}); |
//+----------------------------------------------------------------------------------------------------------+ |
// Géolocalisation |
var gps = navigator.geolocation; |
$(document).ready(function() { |
$('#geolocaliser').on('click', geolocaliser); |
}); |
function geolocaliser(event) { |
if (gps) { |
navigator.geolocation.getCurrentPosition(surSuccesGeoloc, surErreurGeoloc); |
} else { |
var erreur = {code:'0', message:'Géolocalisation non supportée par le navigateur'}; |
surErreurGeoloc(erreur); |
} |
event.stopPropagation(); |
event.preventDefault(); |
} |
function surSuccesGeoloc(position){ |
if (position){ |
var lat = position.coords.latitude; |
var lng = position.coords.longitude; |
$('#lat').val(lat); |
$('#lng').val(lng); |
} |
} |
function surErreurGeoloc(error){ |
alert("Echec de la géolocalisation, code: " + error.code + " message: "+ error.message); |
} |
//+----------------------------------------------------------------------------------------------------------+ |
// Local Storage |
var bdd = window.localStorage; |
bdd.clear(); |
$(document).ready(function() { |
$('#sauver-obs').on('click', ajouterObs); |
$('body').on('pageshow', '#liste', chargerListeObs); |
}); |
function ajouterObs(event) { |
var obs = {num:0, date:'', lat:'', lng:'', nom:''}; |
obs.num = (bdd.length + 1); |
obs.date = $('#date').val(); |
obs.lat = $('#lat').val(); |
obs.lng = $('#lng').val(); |
obs.nom = $('#nom').val(); |
var cle = 'obs'+obs.num; |
var val = JSON.stringify(obs); |
bdd.setItem(cle, val); |
var txt = 'Observation n°'+obs.num+'/'+bdd.length+' créée'; |
$('#obs-saisie-infos').html('<p class="reponse ui-btn-inner ui-btn-corner-all">'+txt+'</p>') |
.fadeIn("slow") |
.delay(1600) |
.fadeOut("slow"); |
event.stopPropagation(); |
event.preventDefault(); |
} |
function supprimerObs(event) { |
var cle = 'obs'+obs.num; |
bdd.removeItem(cle); |
var txt = 'Observation n°'+obs.num+' supprimée'; |
$('#obs-saisie-infos').html('<p class="reponse ui-btn-inner ui-btn-corner-all">'+txt+'</p>') |
.fadeIn("slow") |
.delay(1600) |
.fadeOut("slow"); |
event.stopPropagation(); |
event.preventDefault(); |
} |
function chargerListeObs() { |
$('#liste-obs').empty(); |
var nbre = bdd.length; |
for (var i = 0; i < nbre; i++) { |
var cle = 'obs'+(i+1); |
var obs = JSON.parse(bdd.getItem(cle)); |
$('#liste-obs').append( |
'<li>'+ |
'<img src="http://www.tela-botanica.org/widget-test:cel:modules/saisie/squelettes/defaut/img/icones/pasdephoto.png" />'+ |
'<a href="#'+cle+'" data-split-icon="next" data-split-theme="a" title="Voir la fiche" data-obs-num="'+obs.num+'">'+ |
'<strong>'+obs.nom+'</strong> observé le '+obs.date+' à lat : '+obs.lat+' lng : '+obs.lng+ |
'</a>'+ |
'<a href="#" title="Supprimer l\'observation" data-obs-num="'+obs.num+'">'+ |
'Supprimer'+ |
'</a>'+ |
'</li>' |
); |
} |
$('#liste-obs').listview('refresh'); |
} |
//+----------------------------------------------------------------------------------------------------------+ |
// Manifest Cache |
var appCache = window.applicationCache; |
$(document).ready(function() { |
appCache.addEventListener('updateready', function() { |
alert('Mise à jour :'+appCache.status); |
}); |
if (appCache.status === appCache.UPDATEREADY) { |
surMiseAJourCache(); |
} |
}); |
function surMiseAJourCache() { |
// Browser downloaded a new app cache. |
// Swap it in and reload the page to get the new hotness. |
appCache.swapCache(); |
if (confirm('A new version of this site is available. Load it?')) { |
window.location.reload(); |
} |
} |